diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 989b3da3..47c03ee3 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1564,8 +1564,8 @@ None. | platformName | let | No | string | "" | Specify the platform name
Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>) | | persistentHamburgerMenu | let | No | boolean | false | Set to `true` to persist the hamburger menu | | expansionBreakpoint | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden
1056 represents the "large" breakpoint in pixels from the Carbon Design System:
small: 320
medium: 672
large: 1056
x-large: 1312
max: 1584 | -| iconMenu | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the closed state
Defaults to `Menu20` | -| iconClose | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the opened state
Defaults to `Close20` | +| iconMenu | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the closed state.
Defaults to `<Menu size={20} />` | +| iconClose | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the opened state.
Defaults to `<Close size={20} />` | ### Slots @@ -1589,19 +1589,19 @@ None. | :--------- | :--------------- | :------- | :---------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- | | ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | | isOpen | let | Yes | boolean | false | Set to `true` to open the panel | -| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | -| closeIcon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is open | +| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is closed.
Defaults to `<Switcher size={20} />` | +| closeIcon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is open.
Defaults to `<Close size={20} />` | | text | let | No | string | undefined | Specify the text
Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>) | | transition | let | No | false | import("svelte/transition").SlideParams | { duration: 200 } | Customize the panel transition (i.e., `transition:slide`).
Set to `false` to disable the transition | ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :---------------------------------------------------------- | -| -- | Yes | -- | -- | -| closeIcon | No | -- | <svelte:component this="{closeIcon}" /> | -| icon | No | -- | <svelte:component this="{icon}" /> | -| text | No | -- | {#if text}<span>{text}</span>{/if} | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :--------------------------------------------------------------------- | +| -- | Yes | -- | -- | +| closeIcon | No | -- | <svelte:component this="{closeIcon}" size="{20}" /> | +| icon | No | -- | <svelte:component this="{icon}" size="{20}" /> | +| text | No | -- | {#if text}<span>{text}</span>{/if} | ### Events @@ -2568,20 +2568,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 | -| icon | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | -| open | let | Yes | boolean | false | Set to `true` to open the menu | -| size | let | No | "sm" | "xl" | undefined | 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 | undefined | Specify the menu options class | -| iconClass | let | No | string | undefined | 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 | +| icon | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.
Defaults to `<OverflowMenuVertical />` | +| open | let | Yes | boolean | false | Set to `true` to open the menu | +| size | let | No | "sm" | "xl" | undefined | 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 | undefined | Specify the menu options class | +| iconClass | let | No | string | undefined | 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 @@ -3055,24 +3055,24 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| expanded | let | Yes | boolean | false | Set to `true to expand the search input | -| value | let | Yes | any | "" | Specify the value of the search input | -| size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | -| searchClass | let | No | string | "" | Specify the class name passed to the outer div element | -| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | let | No | boolean | false | Set to `true` to disable the search input | -| expandable | let | No | boolean | false | Set to `true` to enable the expandable variant | -| placeholder | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input | -| autocomplete | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute | -| autofocus | let | No | boolean | false | Set to `true` to auto focus the search element | -| closeButtonLabelText | let | No | string | "Clear search input" | Specify the close button label text | -| labelText | let | No | string | "" | Specify the label text | -| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| expanded | let | Yes | boolean | false | Set to `true to expand the search input | +| value | let | Yes | any | "" | Specify the value of the search input | +| size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | +| searchClass | let | No | string | "" | Specify the class name passed to the outer div element | +| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | let | No | boolean | false | Set to `true` to disable the search input | +| expandable | let | No | boolean | false | Set to `true` to enable the expandable variant | +| placeholder | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input | +| autocomplete | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute | +| autofocus | let | No | boolean | false | Set to `true` to auto focus the search element | +| closeButtonLabelText | let | No | string | "Clear search input" | Specify the close button label text | +| labelText | let | No | string | "" | Specify the label text | +| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.
Defaults to `<Search />` | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | ### Slots @@ -4490,22 +4490,22 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | -| refIcon | let | Yes | null | HTMLDivElement | null | Obtain a reference to the icon HTML element | -| refTooltip | let | Yes | null | HTMLDivElement | null | Obtain a reference to the tooltip HTML element | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the trigger text HTML element | -| open | let | Yes | boolean | false | Set to `true` to open the tooltip | -| align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | -| 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 | typeof import("svelte").SvelteComponent | undefined | Specify the icon 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 | -| tooltipId | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip | -| triggerId | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip button | -| triggerText | let | No | string | "" | Set the tooltip button text | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ | +| refIcon | let | Yes | null | HTMLDivElement | null | Obtain a reference to the icon HTML element | +| refTooltip | let | Yes | null | HTMLDivElement | null | Obtain a reference to the tooltip HTML element | +| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the trigger text HTML element | +| open | let | Yes | boolean | false | Set to `true` to open the tooltip | +| align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | +| 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 | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the tooltip button.
Default to `<Information />` | +| 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 | +| tooltipId | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip | +| triggerId | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip button | +| triggerText | let | No | string | "" | Set the tooltip button text | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 6628b170..338fc494 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -4053,8 +4053,8 @@ "moduleExports": [], "slots": [], "events": [ - { "type": "forwarded", "name": "click", "element": "Close16" }, - { "type": "forwarded", "name": "keydown", "element": "Close16" } + { "type": "forwarded", "name": "click", "element": "Close" }, + { "type": "forwarded", "name": "keydown", "element": "Close" } ], "typedefs": [], "rest_props": { "type": "InlineComponent", "name": "Loading" } @@ -4437,7 +4437,7 @@ { "name": "iconMenu", "kind": "let", - "description": "Specify the icon to render for the closed state\nDefaults to `Menu20`", + "description": "Specify the icon to render for the closed state.\nDefaults to ``", "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, @@ -4447,7 +4447,7 @@ { "name": "iconClose", "kind": "let", - "description": "Specify the icon to render for the opened state\nDefaults to `Close20`", + "description": "Specify the icon to render for the opened state.\nDefaults to ``", "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, @@ -4488,7 +4488,7 @@ { "name": "icon", "kind": "let", - "description": "Specify the icon to render", + "description": "Specify the icon to render when the action panel is closed.\nDefaults to ``", "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, @@ -4498,7 +4498,7 @@ { "name": "closeIcon", "kind": "let", - "description": "Specify the icon to render when the action panel is open", + "description": "Specify the icon to render when the action panel is open.\nDefaults to ``", "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, @@ -4544,13 +4544,13 @@ { "name": "closeIcon", "default": false, - "fallback": "", + "fallback": "", "slot_props": "{}" }, { "name": "icon", "default": false, - "fallback": "", + "fallback": "", "slot_props": "{}" }, { @@ -7371,7 +7371,7 @@ { "name": "icon", "kind": "let", - "description": "Specify the icon to render", + "description": "Specify the icon to render.\nDefaults to ``", "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, @@ -9183,7 +9183,7 @@ { "name": "icon", "kind": "let", - "description": "Specify the icon to render", + "description": "Specify the icon to render.\nDefaults to ``", "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, @@ -12860,7 +12860,7 @@ { "name": "icon", "kind": "let", - "description": "Specify the icon 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.\nDefault to ``", "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte index e9dd13cc..522fd70e 100644 --- a/src/OverflowMenu/OverflowMenu.svelte +++ b/src/OverflowMenu/OverflowMenu.svelte @@ -31,7 +31,8 @@ export let menuOptionsClass = undefined; /** - * Specify the icon to render + * Specify the icon to render. + * Defaults to `` * @type {typeof import("svelte").SvelteComponent} */ export let icon = OverflowMenuVertical; diff --git a/src/Search/Search.svelte b/src/Search/Search.svelte index 0608b682..b6b04f99 100644 --- a/src/Search/Search.svelte +++ b/src/Search/Search.svelte @@ -53,10 +53,11 @@ export let labelText = ""; /** - * Specify the icon to render + * Specify the icon to render. + * Defaults to `` * @type {typeof import("svelte").SvelteComponent} */ - export let icon = Search; + export let icon = IconSearch; /** Set an id for the input element */ export let id = "ccs-" + Math.random().toString(36); @@ -66,7 +67,7 @@ import { createEventDispatcher } from "svelte"; import Close from "../icons/Close.svelte"; - import Search from "../icons/Search.svelte"; + import IconSearch from "../icons/IconSearch.svelte"; import SearchSkeleton from "./SearchSkeleton.svelte"; const dispatch = createEventDispatcher(); diff --git a/src/UIShell/HeaderSearch.svelte b/src/UIShell/HeaderSearch.svelte index 4802bb62..9b8c62b1 100644 --- a/src/UIShell/HeaderSearch.svelte +++ b/src/UIShell/HeaderSearch.svelte @@ -28,7 +28,7 @@ import { createEventDispatcher, tick } from "svelte"; import Close from "../icons/Close.svelte"; - import Search from "../icons/Search.svelte"; + import IconSearch from "../icons/IconSearch.svelte"; const dispatch = createEventDispatcher(); @@ -72,7 +72,7 @@ active = true; }}" > - + ` * @default undefined */ icon?: typeof import("svelte").SvelteComponent; diff --git a/types/Search/Search.svelte.d.ts b/types/Search/Search.svelte.d.ts index f02628a9..8a774f2b 100644 --- a/types/Search/Search.svelte.d.ts +++ b/types/Search/Search.svelte.d.ts @@ -81,7 +81,8 @@ export interface SearchProps { labelText?: string; /** - * Specify the icon to render + * Specify the icon to render. + * Defaults to `` * @default undefined */ icon?: typeof import("svelte").SvelteComponent; diff --git a/types/Tooltip/Tooltip.svelte.d.ts b/types/Tooltip/Tooltip.svelte.d.ts index 7baf7cb0..3ecb8bf8 100644 --- a/types/Tooltip/Tooltip.svelte.d.ts +++ b/types/Tooltip/Tooltip.svelte.d.ts @@ -28,8 +28,8 @@ export interface TooltipProps hideIcon?: boolean; /** - * Specify the icon to render for the tooltip button - * Icon size must be 16px (e.g., `Add16`, `Task16`) + * Specify the icon to render for the tooltip button. + * Default to `` * @default undefined */ icon?: typeof import("svelte").SvelteComponent; diff --git a/types/UIShell/Header.svelte.d.ts b/types/UIShell/Header.svelte.d.ts index b9dd70ac..2db5e635 100644 --- a/types/UIShell/Header.svelte.d.ts +++ b/types/UIShell/Header.svelte.d.ts @@ -65,15 +65,15 @@ export interface HeaderProps ref?: null | HTMLAnchorElement; /** - * Specify the icon to render for the closed state - * Defaults to `Menu20` + * Specify the icon to render for the closed state. + * Defaults to `` * @default undefined */ iconMenu?: typeof import("svelte").SvelteComponent; /** - * Specify the icon to render for the opened state - * Defaults to `Close20` + * Specify the icon to render for the opened state. + * Defaults to `` * @default undefined */ iconClose?: typeof import("svelte").SvelteComponent; diff --git a/types/UIShell/HeaderAction.svelte.d.ts b/types/UIShell/HeaderAction.svelte.d.ts index 5365e236..32dc0c8d 100644 --- a/types/UIShell/HeaderAction.svelte.d.ts +++ b/types/UIShell/HeaderAction.svelte.d.ts @@ -10,13 +10,15 @@ export interface HeaderActionProps isOpen?: boolean; /** - * Specify the icon to render + * Specify the icon to render when the action panel is closed. + * Defaults to `` * @default undefined */ icon?: typeof import("svelte").SvelteComponent; /** - * Specify the icon to render when the action panel is open + * Specify the icon to render when the action panel is open. + * Defaults to `` * @default undefined */ closeIcon?: typeof import("svelte").SvelteComponent; diff --git a/types/icons/Search.svelte.d.ts b/types/icons/Search.svelte.d.ts new file mode 100644 index 00000000..7668bdaa --- /dev/null +++ b/types/icons/Search.svelte.d.ts @@ -0,0 +1,17 @@ +/// +import { SvelteComponentTyped } from "svelte"; + +export interface SearchProps + extends svelte.JSX.HTMLAttributes { + /** + * @default 16 + */ + size?: number; + + /** + * @default undefined + */ + title?: undefined; +} + +export default class Search extends SvelteComponentTyped {}