diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index d98975fe..360ac891 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -338,7 +338,7 @@ None. | kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost" | "primary" | Specify the kind of button | | size | let | No | "default" | "field" | "small" | "default" | Specify the size of button | | hasIconOnly | let | No | boolean | false | Set to `true` for the icon-only variant | -| icon | let | No | import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | +| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | | iconDescription | let | No | string | -- | Specify the ARIA label for the button icon | | tooltipAlignment | let | No | "start" | "center" | "end" | -- | Set the alignment of the tooltip relative to the icon
`hasIconOnly` must be set to `true` | | tooltipPosition | let | No | "top" | "right" | "bottom" | "left" | -- | Set the position of the tooltip relative to the icon | @@ -1439,11 +1439,11 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :---------------------------------------------------- | ------------------ | --------------------------------------------- | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element | -| isActive | let | No | boolean | false | Set to `true` to use the active variant | -| icon | let | No | import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon to render | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | --------------------------------------------- | +| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element | +| isActive | let | No | boolean | false | Set to `true` to use the active variant | +| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon to render | ### Slots @@ -1606,10 +1606,10 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :---------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------- | -| render | let | No | import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render
Icon size must be 16px (e.g. `Add16`, `Task16`) | -| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------- | +| render | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render
Icon size must be 16px (e.g. `Add16`, `Task16`) | +| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | ### Slots @@ -2133,12 +2133,12 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :--------------- | :------- | :---------------------------------------------------- | ------------------------- | ----------------------------------------------------- | -| notificationType | let | No | "toast" | "inline" | "toast" | Set the type of notification | -| renderIcon | let | No | import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | -| title | let | No | string | -- | Specify the title of the icon | -| iconDescription | let | No | string | "Close icon" | Specify the ARIA label for the icon | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------- | ----------------------------------------------------- | +| notificationType | let | No | "toast" | "inline" | "toast" | Set the type of notification | +| renderIcon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | +| title | let | No | string | -- | Specify the title of the icon | +| iconDescription | let | No | string | "Close icon" | Specify the ARIA label for the icon | ### Slots @@ -2292,20 +2292,20 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :--------------- | :------- | :---------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- | -| menuRef | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element | -| buttonRef | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element | -| open | let | Yes | boolean | false | Set to `true` to open the menu | -| size | let | No | "sm" | "xl" | -- | Specify the size of the overflow menu | -| direction | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| flipped | let | No | boolean | false | Set to `true` to flip the menu relative to the button | -| menuOptionsClass | let | No | string | -- | Specify the menu options class | -| icon | let | No | import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | -| iconClass | let | No | string | -- | Specify the icon class | -| iconDescription | let | No | string | "Open and close list of options" | Specify the ARIA label for the icon | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- | +| menuRef | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element | +| buttonRef | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element | +| open | let | Yes | boolean | false | Set to `true` to open the menu | +| size | let | No | "sm" | "xl" | -- | Specify the size of the overflow menu | +| direction | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| flipped | let | No | boolean | false | Set to `true` to flip the menu relative to the button | +| menuOptionsClass | let | No | string | -- | Specify the menu options class | +| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | +| iconClass | let | No | string | -- | Specify the icon class | +| iconDescription | let | No | string | "Open and close list of options" | Specify the ARIA label for the icon | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | ### Slots @@ -4069,7 +4069,7 @@ None. | open | let | Yes | boolean | false | Set to `true` to open the tooltip | | direction | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button | | hideIcon | let | No | boolean | false | Set to `true` to hide the tooltip icon | -| icon | let | No | import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render for the tooltip button
Icon size must be 16px (e.g. `Add16`, `Task16`) | +| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render for the tooltip button
Icon size must be 16px (e.g. `Add16`, `Task16`) | | iconDescription | let | No | string | "" | Specify the ARIA label for the tooltip button | | iconName | let | No | string | "" | Specify the icon name attribute | | tabindex | let | No | string | "0" | Set the button tabindex | diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 7bddd650..49954efd 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -540,7 +540,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon from `carbon-icons-svelte` to render", - "type": "import(\"carbon-icons-svelte\").CarbonIcon", + "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "isFunction": false, "constant": false, "reactive": false @@ -3001,7 +3001,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon from `carbon-icons-svelte` to render", - "type": "import(\"carbon-icons-svelte\").CarbonIcon", + "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "isFunction": false, "constant": false, "reactive": false @@ -4839,7 +4839,7 @@ "name": "render", "kind": "let", "description": "Specify the icon from `carbon-icons-svelte` to render\nIcon size must be 16px (e.g. `Add16`, `Task16`)", - "type": "import(\"carbon-icons-svelte\").CarbonIcon", + "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "isFunction": false, "constant": false, "reactive": false @@ -5444,7 +5444,7 @@ "name": "renderIcon", "kind": "let", "description": "Specify the icon from `carbon-icons-svelte` to render", - "type": "import(\"carbon-icons-svelte\").CarbonIcon", + "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "isFunction": false, "constant": false, "reactive": false @@ -9189,7 +9189,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon from `carbon-icons-svelte` to render for the tooltip button\nIcon size must be 16px (e.g. `Add16`, `Task16`)", - "type": "import(\"carbon-icons-svelte\").CarbonIcon", + "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "isFunction": false, "constant": false, "reactive": false @@ -10135,7 +10135,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render", - "type": "import(\"carbon-icons-svelte\").CarbonIcon", + "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "isFunction": false, "constant": false, "reactive": false diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte index 2a7f36c9..1d462868 100644 --- a/docs/src/layouts/ComponentLayout.svelte +++ b/docs/src/layouts/ComponentLayout.svelte @@ -28,6 +28,7 @@ metatags.title = $page.title; + // TODO: `find` is not supported in IE $: api_components = components.map((i) => COMPONENT_API.components.find((_) => _.moduleName === i) ); diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte index e5074788..8283d092 100644 --- a/src/Button/Button.svelte +++ b/src/Button/Button.svelte @@ -20,7 +20,7 @@ /** * Specify the icon from `carbon-icons-svelte` to render - * @type {import("carbon-icons-svelte").CarbonIcon} + * @type {typeof import("carbon-icons-svelte").CarbonIcon} */ export let icon = undefined; diff --git a/src/Icon/Icon.svelte b/src/Icon/Icon.svelte index 8d83174e..efedc602 100644 --- a/src/Icon/Icon.svelte +++ b/src/Icon/Icon.svelte @@ -2,7 +2,7 @@ /** * Specify the icon from `carbon-icons-svelte` to render * Icon size must be 16px (e.g. `Add16`, `Task16`) - * @type {import("carbon-icons-svelte").CarbonIcon} + * @type {typeof import("carbon-icons-svelte").CarbonIcon} */ export let render = undefined; diff --git a/src/Notification/NotificationButton.svelte b/src/Notification/NotificationButton.svelte index 17e181d1..3a8f5c2e 100644 --- a/src/Notification/NotificationButton.svelte +++ b/src/Notification/NotificationButton.svelte @@ -7,7 +7,7 @@ /** * Specify the icon from `carbon-icons-svelte` to render - * @type {import("carbon-icons-svelte").CarbonIcon} + * @type {typeof import("carbon-icons-svelte").CarbonIcon} */ export let renderIcon = Close20; diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte index 9ac7af6c..4d2b4080 100644 --- a/src/OverflowMenu/OverflowMenu.svelte +++ b/src/OverflowMenu/OverflowMenu.svelte @@ -28,7 +28,7 @@ /** * Specify the icon from `carbon-icons-svelte` to render - * @type {import("carbon-icons-svelte").CarbonIcon} + * @type {typeof import("carbon-icons-svelte").CarbonIcon} */ export let icon = OverflowMenuVertical16; diff --git a/src/Tooltip/Tooltip.svelte b/src/Tooltip/Tooltip.svelte index 0a42c95f..fb1a8479 100644 --- a/src/Tooltip/Tooltip.svelte +++ b/src/Tooltip/Tooltip.svelte @@ -20,7 +20,7 @@ /** * Specify the icon from `carbon-icons-svelte` to render for the tooltip button * Icon size must be 16px (e.g. `Add16`, `Task16`) - * @type {import("carbon-icons-svelte").CarbonIcon} [icon=Information16] + * @type {typeof import("carbon-icons-svelte").CarbonIcon} */ export let icon = Information16; diff --git a/src/UIShell/HeaderGlobalAction.svelte b/src/UIShell/HeaderGlobalAction.svelte index 44c41374..6f574918 100644 --- a/src/UIShell/HeaderGlobalAction.svelte +++ b/src/UIShell/HeaderGlobalAction.svelte @@ -4,7 +4,7 @@ /** * Specify the icon to render - * @type {import("carbon-icons-svelte").CarbonIcon} + * @type {typeof import("carbon-icons-svelte").CarbonIcon} */ export let icon = undefined; diff --git a/tests/ButtonSet.test.svelte b/tests/ButtonSet.test.svelte new file mode 100644 index 00000000..9db8426b --- /dev/null +++ b/tests/ButtonSet.test.svelte @@ -0,0 +1,14 @@ + + + + + + + + + + + diff --git a/types/Button/Button.d.ts b/types/Button/Button.d.ts index 9f3534c7..f158e636 100644 --- a/types/Button/Button.d.ts +++ b/types/Button/Button.d.ts @@ -22,7 +22,7 @@ export interface ButtonProps { /** * Specify the icon from `carbon-icons-svelte` to render */ - icon?: import("carbon-icons-svelte").CarbonIcon; + icon?: typeof import("carbon-icons-svelte").CarbonIcon; /** * Specify the ARIA label for the button icon diff --git a/types/Icon/Icon.d.ts b/types/Icon/Icon.d.ts index d180bfe1..6e428588 100644 --- a/types/Icon/Icon.d.ts +++ b/types/Icon/Icon.d.ts @@ -5,7 +5,7 @@ export interface IconProps { * Specify the icon from `carbon-icons-svelte` to render * Icon size must be 16px (e.g. `Add16`, `Task16`) */ - render?: import("carbon-icons-svelte").CarbonIcon; + render?: typeof import("carbon-icons-svelte").CarbonIcon; /** * Set to `true` to display the skeleton state diff --git a/types/Notification/NotificationButton.d.ts b/types/Notification/NotificationButton.d.ts index a3b7c44d..5bf25670 100644 --- a/types/Notification/NotificationButton.d.ts +++ b/types/Notification/NotificationButton.d.ts @@ -10,7 +10,7 @@ export interface NotificationButtonProps extends svelte.JSX.HTMLAttributes