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

Omit explicit "from carbon-icons-svelte" from icon prop definitions (#866)

Browse source 
* fix(types): update description for icon props #865

* docs(component-api): remove hardcoded Carbon Svelte icon description
This commit is contained in:
Eric Liu 2021-10-20 13:48:52 -07:00 • committed by GitHub
commit 7b65a15345
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 120 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

128
COMPONENT_INDEX.md
View file

@ -388,7 +388,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
| size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code> | <code>"default"</code> | Specify the size of button |
| expressive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
| isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
| 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> | <code>"center"</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> | <code>"bottom"</code> | Set the position of the tooltip relative to the icon |
@ -844,7 +844,7 @@ None.
| ref | <code>let</code> | Yes | <code>null &#124; HTMLLIElement</code> | <code>null</code> | Obtain a reference to the list item HTML element |
| selectable | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selectable variant<br />Automatically set to `true` if `selected` is `true` |
| selected | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the selected variant |
| icon | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render<br />Icon is rendered to the left of the label text |
| icon | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render<br />Icon is rendered to the left of the label text |
| indented | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to indent the label |
| kind | <code>let</code> | No | <code>"default" &#124; "danger"</code> | <code>"default"</code> | Specify the kind of option |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the disabled state |
@ -1578,8 +1578,8 @@ None.
| platformName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name<br />Alternatively, use the named slot "platform" (e.g., &lt;span slot="platform"&gt;...&lt;/span&gt;) |
| persistentHamburgerMenu | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
| expansionBreakpoint | <code>let</code> | No | <code>number</code> | <code>1056</code> | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />small: 320<br />medium: 672<br />large: 1056<br />x-large: 1312<br />max: 1584 |
| iconMenu | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render for the closed state<br />Defaults to `Menu20` |
| iconClose | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render for the opened state<br />Defaults to `Close20` |
| iconMenu | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render for the closed state<br />Defaults to `Menu20` |
| iconClose | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render for the opened state<br />Defaults to `Close20` |
### Slots
@ -1613,8 +1613,8 @@ export interface HeaderActionSlideTransition {
| :--------- | :--------------- | :------- | :---------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| isOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| closeIcon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the close icon from `carbon-icons-svelte` to render |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
| closeIcon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render when the action panel is open |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text<br />Alternatively, use the named slot "text" (e.g., &lt;div slot="text"&gt;...&lt;/div&gt;) |
| transition | <code>let</code> | No | <code>false &#124; HeaderActionSlideTransition</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`)<br />Set to `false` to disable the transition |
@ -1636,12 +1636,12 @@ export interface HeaderActionSlideTransition {
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :----------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | ----------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| linkIsActive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active state |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :----------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | --------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| linkIsActive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active state |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
### Slots
@ -1884,10 +1884,10 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | ----------------------------------------------------- |
| render | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | ------------------------------------------- |
| render | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
### Slots
@ -2013,15 +2013,15 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement &#124; HTMLParagraphElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
| size | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | -- | Specify the size of the link |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the href value |
| inline | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render<br />`inline` must be `false` |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the checkbox |
| visited | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow visited styles |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ------------------ | -------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement &#124; HTMLParagraphElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
| size | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | -- | Specify the size of the link |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the href value |
| inline | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render<br />`inline` must be `false` |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the checkbox |
| visited | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow visited styles |
### Slots
@ -2480,12 +2480,12 @@ None.
### Props
| 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 |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| 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 |
| 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 |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
| 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 |
### Slots
@ -2668,7 +2668,7 @@ None.
| :--------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- |
| 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 |
| icon | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| icon | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
| 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 |
| direction | <code>let</code> | No | <code>"top" &#124; "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button |
@ -3165,7 +3165,7 @@ None.
| autofocus | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element |
| closeButtonLabelText | <code>let</code> | No | <code>string</code> | <code>"Clear search input"</code> | Specify the close button label text |
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
### Slots
@ -3405,13 +3405,13 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | ----------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to select the current link |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | --------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to select the current link |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
### Slots
@ -3427,12 +3427,12 @@ None.
### Props
| 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 |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| 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 |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
### Slots
@ -4041,7 +4041,7 @@ None.
| interactive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a `button` element instead of a `div` |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| title | <code>let</code> | No | <code>string</code> | <code>"Clear filter"</code> | Set the title for the close button in a filterable tag |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the filterable tag |
### Slots
@ -4628,22 +4628,22 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
| refIcon | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the icon HTML element |
| refTooltip | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the tooltip HTML element |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the trigger text HTML element |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip |
| align | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
| 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 |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</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 |
| 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 |
| tooltipId | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip |
| triggerId | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip button |
| triggerText | <code>let</code> | No | <code>string</code> | <code>""</code> | Set the tooltip button text |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------- |
| refIcon | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the icon HTML element |
| refTooltip | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the tooltip HTML element |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the trigger text HTML element |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip |
| align | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
| 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 |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon 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 |
| 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 |
| tooltipId | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip |
| triggerId | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip button |
| triggerText | <code>let</code> | No | <code>string</code> | <code>""</code> | Set the tooltip button text |
### Slots
@ -4715,7 +4715,7 @@ None.
| :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| tooltipText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tooltip text.<br />Alternatively, use the "tooltipText" slot |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tooltip icon |
| align | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
| 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 icon |

34
docs/src/COMPONENT_API.json
View file

@ -489,7 +489,7 @@
{
"name": "icon",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render",
"description": "Specify the icon to render",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -1942,7 +1942,7 @@
{
"name": "icon",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render\nIcon is rendered to the left of the label text",
"description": "Specify the icon to render\nIcon is rendered to the left of the label text",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -4339,7 +4339,7 @@
{
"name": "iconMenu",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render for the closed state\nDefaults to `Menu20`",
"description": "Specify the icon to render for the closed state\nDefaults to `Menu20`",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -4349,7 +4349,7 @@
{
"name": "iconClose",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render for the opened state\nDefaults to `Close20`",
"description": "Specify the icon to render for the opened state\nDefaults to `Close20`",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -4389,7 +4389,7 @@
{
"name": "icon",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render",
"description": "Specify the icon to render",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -4399,7 +4399,7 @@
{
"name": "closeIcon",
"kind": "let",
"description": "Specify the close icon from `carbon-icons-svelte` to render",
"description": "Specify the icon to render when the action panel is open",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -4489,7 +4489,7 @@
{
"name": "icon",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render",
"description": "Specify the icon to render",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -4887,7 +4887,7 @@
{
"name": "render",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render",
"description": "Specify the icon to render",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -5260,7 +5260,7 @@
{
"name": "icon",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render\n`inline` must be `false`",
"description": "Specify the icon to render\n`inline` must be `false`",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -6737,7 +6737,7 @@
{
"name": "icon",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render",
"description": "Specify the icon to render",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -7321,7 +7321,7 @@
{
"name": "icon",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render",
"description": "Specify the icon to render",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -9093,7 +9093,7 @@
{
"name": "icon",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render",
"description": "Specify the icon to render",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -9753,7 +9753,7 @@
{
"name": "icon",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render",
"description": "Specify the icon to render",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -9805,7 +9805,7 @@
{
"name": "icon",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render",
"description": "Specify the icon to render",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -11139,7 +11139,7 @@
{
"name": "icon",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render",
"description": "Specify the icon to render",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -12788,7 +12788,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`)",
"description": "Specify the icon to render for the tooltip button\nIcon size must be 16px (e.g., `Add16`, `Task16`)",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
@ -13034,7 +13034,7 @@
{
"name": "icon",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render",
"description": "Specify the icon to render",
"type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,

13
docs/src/components/ComponentApi.svelte
View file

@ -8,21 +8,18 @@
};
import {
Link,
OutboundLink,
StructuredList,
StructuredListHead,
StructuredListRow,
StructuredListCell,
StructuredListBody,
TooltipDefinition,
UnorderedList,
ListItem,
Tag,
CodeSnippet,
} from "carbon-components-svelte";
import InlineSnippet from "./InlineSnippet.svelte";
import Launch16 from "carbon-icons-svelte/lib/Launch16";
const mdn_api = "https://developer.mozilla.org/en-US/docs/Web/API/";
const typeMap = {
@ -85,15 +82,7 @@
class="cell"
style="z-index: {(prop.type || '').split(' | ').length - i}"
>
{#if type.startsWith("typeof")}
<TooltipDefinition
direction="top"
align="start"
tooltipText="{`From "carbon-icons-svelte"`}"
>
Carbon Svelte icon
</TooltipDefinition>
{:else if type.startsWith("HTML")}
{#if type.startsWith("HTML")}
<OutboundLink
href="{mdn_api}{type}"
style="white-space: nowrap"

2
src/Button/Button.svelte
View file

@ -32,7 +32,7 @@
export let hasIconOnly = false;
/**
* Specify the icon from `carbon-icons-svelte` to render
* Specify the icon to render
* @type {typeof import("svelte").SvelteComponent}
*/
export let icon = undefined;

2
src/ContextMenu/ContextMenuOption.svelte
View file

@ -12,7 +12,7 @@
export let indented = false;
/**
* Specify the icon from `carbon-icons-svelte` to render
* Specify the icon to render
* Icon is rendered to the left of the label text
* @type {typeof import("svelte").SvelteComponent}
*/

2
src/Icon/Icon.svelte
View file

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

2
src/Link/Link.svelte
View file

@ -15,7 +15,7 @@
export let inline = false;
/**
* Specify the icon from `carbon-icons-svelte` to render
* Specify the icon to render
* `inline` must be `false`
* @type {typeof import("svelte").SvelteComponent}
*/

2
src/Notification/NotificationButton.svelte
View file

@ -6,7 +6,7 @@
export let notificationType = "toast";
/**
* Specify the icon from `carbon-icons-svelte` to render
* Specify the icon to render
* @type {typeof import("svelte").SvelteComponent}
*/
export let icon = Close20;

2
src/OverflowMenu/OverflowMenu.svelte
View file

@ -31,7 +31,7 @@
export let menuOptionsClass = undefined;
/**
* Specify the icon from `carbon-icons-svelte` to render
* Specify the icon to render
* @type {typeof import("svelte").SvelteComponent}
*/
export let icon = OverflowMenuVertical16;

2
src/Search/Search.svelte
View file

@ -59,7 +59,7 @@
export let labelText = "";
/**
* Specify the icon from `carbon-icons-svelte` to render
* Specify the icon to render
* @type {typeof import("svelte").SvelteComponent}
*/
export let icon = Search16;

2
src/Tag/Tag.svelte
View file

@ -26,7 +26,7 @@
export let title = "Clear filter";
/**
* Specify the icon from `carbon-icons-svelte` to render
* Specify the icon to render
* @type {typeof import("svelte").SvelteComponent}
*/
export let icon = undefined;

2
src/Tooltip/Tooltip.svelte
View file

@ -24,7 +24,7 @@
export let hideIcon = false;
/**
* Specify the icon from `carbon-icons-svelte` to render for the tooltip button
* Specify the icon to render for the tooltip button
* Icon size must be 16px (e.g., `Add16`, `Task16`)
* @type {typeof import("svelte").SvelteComponent}
*/

2
src/TooltipIcon/TooltipIcon.svelte
View file

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

2
src/TreeView/TreeViewNode.svelte
View file

@ -44,7 +44,7 @@
export let disabled = false;
/**
* Specify the icon from `carbon-icons-svelte` to render
* Specify the icon to render
* @type {typeof import("svelte").SvelteComponent}
*/
export let icon = undefined;

2
src/TreeView/TreeViewNodeList.svelte
View file

@ -15,7 +15,7 @@
export let disabled = false;
/**
* Specify the icon from `carbon-icons-svelte` to render
* Specify the icon to render
* @type {typeof import("svelte").SvelteComponent}
*/
export let icon = undefined;

4
src/UIShell/GlobalHeader/Header.svelte
View file

@ -47,14 +47,14 @@
export let ref = null;
/**
* Specify the icon from `carbon-icons-svelte` to render for the closed state
* Specify the icon to render for the closed state
* Defaults to `Menu20`
* @type {typeof import("svelte").SvelteComponent}
*/
export let iconMenu = Menu20;
/**
* Specify the icon from `carbon-icons-svelte` to render for the opened state
* Specify the icon to render for the opened state
* Defaults to `Close20`
* @type {typeof import("svelte").SvelteComponent}
*/

4
src/UIShell/GlobalHeader/HeaderAction.svelte
View file

@ -7,13 +7,13 @@
export let isOpen = false;
/**
* Specify the icon from `carbon-icons-svelte` to render
* Specify the icon to render
* @type {typeof import("svelte").SvelteComponent}
*/
export let icon = AppSwitcher20;
/**
* Specify the close icon from `carbon-icons-svelte` to render
* Specify the icon to render when the action panel is open
* @type {typeof import("svelte").SvelteComponent}
*/
export let closeIcon = Close20;

2
src/UIShell/GlobalHeader/HeaderActionLink.svelte
View file

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

4
src/UIShell/SideNav/HamburgerMenu.svelte
View file

@ -9,14 +9,14 @@
export let isOpen = false;
/**
* Specify the icon from `carbon-icons-svelte` to render for the closed state
* Specify the icon to render for the closed state
* Defaults to `Menu20`
* @type {typeof import("svelte").SvelteComponent}
*/
export let iconMenu = Menu20;
/**
* Specify the icon from `carbon-icons-svelte` to render for the opened state
* Specify the icon to render for the opened state
* Defaults to `Close20`
* @type {typeof import("svelte").SvelteComponent}
*/

2
src/UIShell/SideNav/SideNavLink.svelte
View file

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

2
src/UIShell/SideNav/SideNavMenu.svelte
View file

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

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

@ -45,7 +45,7 @@ export interface ButtonProps
hasIconOnly?: boolean;
/**
* Specify the icon from `carbon-icons-svelte` to render
* Specify the icon to render
*/
icon?: typeof import("svelte").SvelteComponent;

2
types/ContextMenu/ContextMenuOption.svelte.d.ts vendored
View file

@ -22,7 +22,7 @@ export interface ContextMenuOptionProps
indented?: boolean;
/**
* Specify the icon from `carbon-icons-svelte` to render
* Specify the icon to render
* Icon is rendered to the left of the label text
*/
icon?: typeof import("svelte").SvelteComponent;

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

@ -6,7 +6,7 @@ export interface IconProps
extends IconSkeletonProps,
svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["svg"]> {
/**
* Specify the icon from `carbon-icons-svelte` to render
* Specify the icon to render
*/
render?: typeof import("svelte").SvelteComponent;

2
types/Link/Link.svelte.d.ts vendored
View file

@ -20,7 +20,7 @@ export interface LinkProps
inline?: boolean;
/**
* Specify the icon from `carbon-icons-svelte` to render
* Specify the icon to render
* `inline` must be `false`
*/
icon?: typeof import("svelte").SvelteComponent;

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

@ -10,7 +10,7 @@ export interface NotificationButtonProps
notificationType?: "toast" | "inline";
/**
* Specify the icon from `carbon-icons-svelte` to render
* Specify the icon to render
*/
icon?: typeof import("svelte").SvelteComponent;

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

@ -38,7 +38,7 @@ export interface OverflowMenuProps
menuOptionsClass?: string;
/**
* Specify the icon from `carbon-icons-svelte` to render
* Specify the icon to render
*/
icon?: typeof import("svelte").SvelteComponent;

2
types/Search/Search.svelte.d.ts vendored
View file

@ -92,7 +92,7 @@ export interface SearchProps {
labelText?: string;
/**
* Specify the icon from `carbon-icons-svelte` to render
* Specify the icon to render
*/
icon?: typeof import("svelte").SvelteComponent;

2
types/Tag/Tag.svelte.d.ts vendored
View file

@ -57,7 +57,7 @@ export interface TagProps
title?: string;
/**
* Specify the icon from `carbon-icons-svelte` to render
* Specify the icon to render
*/
icon?: typeof import("svelte").SvelteComponent;

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

@ -28,7 +28,7 @@ export interface TooltipProps
hideIcon?: boolean;
/**
* Specify the icon from `carbon-icons-svelte` to render for the tooltip button
* Specify the icon to render for the tooltip button
* Icon size must be 16px (e.g., `Add16`, `Task16`)
*/
icon?: typeof import("svelte").SvelteComponent;

2
types/TooltipIcon/TooltipIcon.svelte.d.ts vendored
View file

@ -11,7 +11,7 @@ export interface TooltipIconProps
tooltipText?: string;
/**
* Specify the icon from `carbon-icons-svelte` to render
* Specify the icon to render
*/
icon?: typeof import("svelte").SvelteComponent;

4
types/UIShell/GlobalHeader/Header.svelte.d.ts vendored
View file

@ -62,13 +62,13 @@ export interface HeaderProps
ref?: null | HTMLAnchorElement;
/**
* Specify the icon from `carbon-icons-svelte` to render for the closed state
* Specify the icon to render for the closed state
* Defaults to `Menu20`
*/
iconMenu?: typeof import("svelte").SvelteComponent;
/**
* Specify the icon from `carbon-icons-svelte` to render for the opened state
* Specify the icon to render for the opened state
* Defaults to `Close20`
*/
iconClose?: typeof import("svelte").SvelteComponent;

4
types/UIShell/GlobalHeader/HeaderAction.svelte.d.ts vendored
View file

@ -16,12 +16,12 @@ export interface HeaderActionProps
isOpen?: boolean;
/**
* Specify the icon from `carbon-icons-svelte` to render
* Specify the icon to render
*/
icon?: typeof import("svelte").SvelteComponent;
/**
* Specify the close icon from `carbon-icons-svelte` to render
* Specify the icon to render when the action panel is open
*/
closeIcon?: typeof import("svelte").SvelteComponent;

2
types/UIShell/GlobalHeader/HeaderActionLink.svelte.d.ts vendored
View file

@ -15,7 +15,7 @@ export interface HeaderActionLinkProps
href?: string;
/**
* Specify the icon from `carbon-icons-svelte` to render
* Specify the icon to render
*/
icon?: typeof import("svelte").SvelteComponent;

2
types/UIShell/SideNav/SideNavLink.svelte.d.ts vendored
View file

@ -20,7 +20,7 @@ export interface SideNavLinkProps
text?: string;
/**
* Specify the icon from `carbon-icons-svelte` to render
* Specify the icon to render
*/
icon?: typeof import("svelte").SvelteComponent;

2
types/UIShell/SideNav/SideNavMenu.svelte.d.ts vendored
View file

@ -15,7 +15,7 @@ export interface SideNavMenuProps
text?: string;
/**
* Specify the icon from `carbon-icons-svelte` to render
* Specify the icon to render
*/
icon?: typeof import("svelte").SvelteComponent;