mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(types): prefix icon type with "typeof"

Browse source
This commit is contained in:
Eric Liu 2020-11-19 10:41:15 -08:00
commit 7a1480f0ed
16 changed files with 64 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

62
COMPONENT_INDEX.md
View file

@ -338,7 +338,7 @@ None.
| kind | <code>let</code> | No | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger-tertiary" &#124; "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button | | kind | <code>let</code> | No | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger-tertiary" &#124; "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button |
| size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small"</code> | <code>"default"</code> | Specify the size of button | | size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small"</code> | <code>"default"</code> | Specify the size of button |
| hasIconOnly | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the icon-only variant | | hasIconOnly | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the icon-only variant |
| icon | <code>let</code> | No | <code>import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render | | icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| iconDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the button icon | | iconDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the button icon |
| tooltipAlignment | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | -- | Set the alignment of the tooltip relative to the icon<br />`hasIconOnly` must be set to `true` | | tooltipAlignment | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | -- | Set the alignment of the tooltip relative to the icon<br />`hasIconOnly` must be set to `true` |
| tooltipPosition | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | -- | Set the position of the tooltip relative to the icon | | tooltipPosition | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | -- | Set the position of the tooltip relative to the icon |
@ -1439,11 +1439,11 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :---------------------------------------------------- | ------------------ | --------------------------------------------- | | :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | --------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element |
| isActive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active variant | | isActive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active variant |
| icon | <code>let</code> | No | <code>import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon to render | | icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon to render |
### Slots ### Slots
@ -1606,10 +1606,10 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :---------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------- | | :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------- |
| render | <code>let</code> | No | <code>import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render<br />Icon size must be 16px (e.g. `Add16`, `Task16`) | | render | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render<br />Icon size must be 16px (e.g. `Add16`, `Task16`) |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state | | skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
### Slots ### Slots
@ -2133,12 +2133,12 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :---------------------------------------------------- | ------------------------- | ----------------------------------------------------- | | :--------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------- | ----------------------------------------------------- |
| notificationType | <code>let</code> | No | <code>"toast" &#124; "inline"</code> | <code>"toast"</code> | Set the type of notification | | notificationType | <code>let</code> | No | <code>"toast" &#124; "inline"</code> | <code>"toast"</code> | Set the type of notification |
| renderIcon | <code>let</code> | No | <code>import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render | | renderIcon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| title | <code>let</code> | No | <code>string</code> | -- | Specify the title of the icon | | title | <code>let</code> | No | <code>string</code> | -- | Specify the title of the icon |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Close icon"</code> | Specify the ARIA label for the icon | | iconDescription | <code>let</code> | No | <code>string</code> | <code>"Close icon"</code> | Specify the ARIA label for the icon |
### Slots ### Slots
@ -2292,20 +2292,20 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :---------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- | | :--------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- |
| menuRef | <code>let</code> | Yes | <code>null &#124; HTMLUListElement</code> | <code>null</code> | Obtain a reference to the overflow menu element | | menuRef | <code>let</code> | Yes | <code>null &#124; HTMLUListElement</code> | <code>null</code> | Obtain a reference to the overflow menu element |
| buttonRef | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element | | buttonRef | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu | | open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu |
| size | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | -- | Specify the size of the overflow menu | | size | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | -- | Specify the size of the overflow menu |
| direction | <code>let</code> | No | <code>"top" &#124; "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button | | direction | <code>let</code> | No | <code>"top" &#124; "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| flipped | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flip the menu relative to the button | | flipped | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flip the menu relative to the button |
| menuOptionsClass | <code>let</code> | No | <code>string</code> | -- | Specify the menu options class | | menuOptionsClass | <code>let</code> | No | <code>string</code> | -- | Specify the menu options class |
| icon | <code>let</code> | No | <code>import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render | | icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| iconClass | <code>let</code> | No | <code>string</code> | -- | Specify the icon class | | iconClass | <code>let</code> | No | <code>string</code> | -- | Specify the icon class |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Open and close list of options"</code> | Specify the ARIA label for the icon | | iconDescription | <code>let</code> | No | <code>string</code> | <code>"Open and close list of options"</code> | Specify the ARIA label for the icon |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element | | id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element |
### Slots ### Slots
@ -4069,7 +4069,7 @@ None.
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip | | open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip |
| direction | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the button | | direction | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the button |
| hideIcon | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon | | hideIcon | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon |
| icon | <code>let</code> | No | <code>import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render for the tooltip button<br />Icon size must be 16px (e.g. `Add16`, `Task16`) | | icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render for the tooltip button<br />Icon size must be 16px (e.g. `Add16`, `Task16`) |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button | | iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button |
| iconName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute | | iconName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute |
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex | | tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex |

12
docs/src/COMPONENT_API.json
View file

@ -540,7 +540,7 @@
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render", "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, "isFunction": false,
"constant": false, "constant": false,
"reactive": false "reactive": false
@ -3001,7 +3001,7 @@
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render", "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, "isFunction": false,
"constant": false, "constant": false,
"reactive": false "reactive": false
@ -4839,7 +4839,7 @@
"name": "render", "name": "render",
"kind": "let", "kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render\nIcon size must be 16px (e.g. `Add16`, `Task16`)", "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, "isFunction": false,
"constant": false, "constant": false,
"reactive": false "reactive": false
@ -5444,7 +5444,7 @@
"name": "renderIcon", "name": "renderIcon",
"kind": "let", "kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render", "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, "isFunction": false,
"constant": false, "constant": false,
"reactive": false "reactive": false
@ -9189,7 +9189,7 @@
"name": "icon", "name": "icon",
"kind": "let", "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`)", "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, "isFunction": false,
"constant": false, "constant": false,
"reactive": false "reactive": false
@ -10135,7 +10135,7 @@
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon to render", "description": "Specify the icon to render",
"type": "import(\"carbon-icons-svelte\").CarbonIcon", "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
"reactive": false "reactive": false

1
docs/src/layouts/ComponentLayout.svelte
View file

@ -28,6 +28,7 @@
metatags.title = $page.title; metatags.title = $page.title;
// TODO: `find` is not supported in IE
$: api_components = components.map((i) => $: api_components = components.map((i) =>
COMPONENT_API.components.find((_) => _.moduleName === i) COMPONENT_API.components.find((_) => _.moduleName === i)
); );

2
src/Button/Button.svelte
View file

@ -20,7 +20,7 @@
/** /**
* Specify the icon from `carbon-icons-svelte` to render * 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; export let icon = undefined;

2
src/Icon/Icon.svelte
View file

@ -2,7 +2,7 @@
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
* Icon size must be 16px (e.g. `Add16`, `Task16`) * 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; export let render = undefined;

2
src/Notification/NotificationButton.svelte
View file

@ -7,7 +7,7 @@
/** /**
* Specify the icon from `carbon-icons-svelte` to render * 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; export let renderIcon = Close20;

2
src/OverflowMenu/OverflowMenu.svelte
View file

@ -28,7 +28,7 @@
/** /**
* Specify the icon from `carbon-icons-svelte` to render * 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; export let icon = OverflowMenuVertical16;

2
src/Tooltip/Tooltip.svelte
View file

@ -20,7 +20,7 @@
/** /**
* Specify the icon from `carbon-icons-svelte` to render for the tooltip button * Specify the icon from `carbon-icons-svelte` to render for the tooltip button
* Icon size must be 16px (e.g. `Add16`, `Task16`) * 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; export let icon = Information16;

2
src/UIShell/HeaderGlobalAction.svelte
View file

@ -4,7 +4,7 @@
/** /**
* Specify the icon to render * Specify the icon to render
* @type {import("carbon-icons-svelte").CarbonIcon} * @type {typeof import("carbon-icons-svelte").CarbonIcon}
*/ */
export let icon = undefined; export let icon = undefined;

14
tests/ButtonSet.test.svelte Normal file
View file

@ -0,0 +1,14 @@
<script lang="ts">
import { Button, ButtonSet } from "../types";
import Login16 from "carbon-icons-svelte/lib/Login16";
</script>
<ButtonSet>
<Button kind="secondary">Cancel</Button>
<Button>Submit</Button>
</ButtonSet>
<ButtonSet stacked>
<Button icon="{Login16}">Log in</Button>
<Button kind="ghost">Sign up</Button>
</ButtonSet>

2
types/Button/Button.d.ts vendored
View file

@ -22,7 +22,7 @@ export interface ButtonProps {
/** /**
* Specify the icon from `carbon-icons-svelte` to render * 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 * Specify the ARIA label for the button icon

2
types/Icon/Icon.d.ts vendored
View file

@ -5,7 +5,7 @@ export interface IconProps {
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
* Icon size must be 16px (e.g. `Add16`, `Task16`) * 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 * Set to `true` to display the skeleton state

2
types/Notification/NotificationButton.d.ts vendored
View file

@ -10,7 +10,7 @@ export interface NotificationButtonProps extends svelte.JSX.HTMLAttributes<HTMLE
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
*/ */
renderIcon?: import("carbon-icons-svelte").CarbonIcon; renderIcon?: typeof import("carbon-icons-svelte").CarbonIcon;
/** /**
* Specify the title of the icon * Specify the title of the icon

2
types/OverflowMenu/OverflowMenu.d.ts vendored
View file

@ -38,7 +38,7 @@ export interface OverflowMenuProps extends svelte.JSX.HTMLAttributes<HTMLElement
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
*/ */
icon?: import("carbon-icons-svelte").CarbonIcon; icon?: typeof import("carbon-icons-svelte").CarbonIcon;
/** /**
* Specify the icon class * Specify the icon class

2
types/Tooltip/Tooltip.d.ts vendored
View file

@ -23,7 +23,7 @@ export interface TooltipProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNa
* Specify the icon from `carbon-icons-svelte` to render for the tooltip button * Specify the icon from `carbon-icons-svelte` to render for the tooltip button
* Icon size must be 16px (e.g. `Add16`, `Task16`) * Icon size must be 16px (e.g. `Add16`, `Task16`)
*/ */
icon?: import("carbon-icons-svelte").CarbonIcon; icon?: typeof import("carbon-icons-svelte").CarbonIcon;
/** /**
* Specify the ARIA label for the tooltip button * Specify the ARIA label for the tooltip button

2
types/UIShell/HeaderGlobalAction.d.ts vendored
View file

@ -10,7 +10,7 @@ export interface HeaderGlobalActionProps extends svelte.JSX.HTMLAttributes<HTMLE
/** /**
* Specify the icon to render * Specify the icon to render
*/ */
icon?: import("carbon-icons-svelte").CarbonIcon; icon?: typeof import("carbon-icons-svelte").CarbonIcon;
/** /**
* Obtain a reference to the HTML button element * Obtain a reference to the HTML button element