diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index f9e2d300..8ab1b750 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1616,15 +1616,17 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------- | -| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | -| isOpen | No | let | Yes | boolean | false | Set to `true` to open the panel | -| icon | No | let | No | any | undefined | Specify the icon to render when the action panel is closed.
Defaults to `<Switcher size={20} />` | -| closeIcon | No | let | No | any | undefined | Specify the icon to render when the action panel is open.
Defaults to `<Close size={20} />` | -| text | No | let | No | string | undefined | Specify the text.
Alternatively, use the named slot "text" (e.g., `<div slot="text">...</div>`) | -| transition | No | let | No | false | import("svelte/transition").SlideParams | { duration: 200 } | Customize the panel transition (i.e., `transition:slide`).
Set to `false` to disable the transition | -| preventCloseOnClickOutside | No | let | No | boolean | false | Set to `true` to prevent the panel from closing when clicking outside | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | +| isOpen | No | let | Yes | boolean | false | Set to `true` to open the panel | +| icon | No | let | No | any | undefined | Specify the icon to render when the action panel is closed.
Defaults to `<Switcher size={20} />` | +| closeIcon | No | let | No | any | undefined | Specify the icon to render when the action panel is open.
Defaults to `<Close size={20} />` | +| text | No | let | No | string | undefined | Specify the text displayed next to the icon.
Alternatively, use the named slot "text" (e.g., `<div slot="text">...</div>`) | +| iconDescription | No | let | No | string | undefined | Specify an icon tooltip. The tooltip will not be displayed
if either the `text` prop or a named slot="text" is used | +| tooltipAlignment | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon.
Only applies when `iconDescription` is provided | +| transition | No | let | No | false | import("svelte/transition").SlideParams | { duration: 200 } | Customize the panel transition (i.e., `transition:slide`).
Set to `false` to disable the transition | +| preventCloseOnClickOutside | No | let | No | boolean | false | Set to `true` to prevent the panel from closing when clicking outside | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 2a73b860..d1115787 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -5882,7 +5882,7 @@ { "name": "text", "kind": "let", - "description": "Specify the text.\nAlternatively, use the named slot \"text\" (e.g., `
...
`)", + "description": "Specify the text displayed next to the icon.\nAlternatively, use the named slot \"text\" (e.g., `
...
`)", "type": "string", "isFunction": false, "isFunctionDeclaration": false, @@ -5890,6 +5890,29 @@ "constant": false, "reactive": false }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify an icon tooltip. The tooltip will not be displayed\nif either the `text` prop or a named slot=\"text\" is used", + "type": "string", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "tooltipAlignment", + "kind": "let", + "description": "Set the alignment of the tooltip relative to the icon.\nOnly applies when `iconDescription` is provided", + "type": "\"start\" | \"center\" | \"end\"", + "value": "\"center\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, { "name": "ref", "kind": "let", diff --git a/src/UIShell/HeaderAction.svelte b/src/UIShell/HeaderAction.svelte index f4d725a0..a574200b 100644 --- a/src/UIShell/HeaderAction.svelte +++ b/src/UIShell/HeaderAction.svelte @@ -22,12 +22,26 @@ export let closeIcon = Close; /** - * Specify the text. + * Specify the text displayed next to the icon. * Alternatively, use the named slot "text" (e.g., `
...
`) * @type {string} */ export let text = undefined; + /** + * Specify an icon tooltip. The tooltip will not be displayed + * if either the `text` prop or a named slot="text" is used + * @type {string} + */ + export let iconDescription = undefined; + + /** + * Set the alignment of the tooltip relative to the icon. + * Only applies when `iconDescription` is provided + * @type {"start" | "center" | "end"} + */ + export let tooltipAlignment = "center"; + /** Obtain a reference to the button HTML element */ export let ref = null; @@ -49,6 +63,17 @@ const dispatch = createEventDispatcher(); let refPanel = null; + + $: hasIconOnly = iconDescription && !(text || $$slots.text); + $: buttonClass = [ + hasIconOnly && "bx--btn bx--btn--primary", + hasIconOnly && "bx--tooltip__trigger bx--tooltip--a11y", + hasIconOnly && "bx--btn--icon-only bx--btn--icon-only--bottom", + hasIconOnly && `bx--tooltip--align-${tooltipAlignment}`, + $$restProps.class, + ] + .filter(Boolean) + .join(" "); { isOpen = !isOpen; dispatch(isOpen ? "open" : "close"); }} > + {#if hasIconOnly} + {iconDescription} + {/if} {#if isOpen} diff --git a/tests/HeaderUtilities.test.svelte b/tests/HeaderUtilities.test.svelte index 574a163a..d5dca180 100644 --- a/tests/HeaderUtilities.test.svelte +++ b/tests/HeaderUtilities.test.svelte @@ -35,6 +35,8 @@ bind:isOpen on:open on:close + iconDescription="Switcher" + tooltipAlignment="start" transition={{ duration: 400, easing: quintOut }} > diff --git a/types/UIShell/HeaderAction.svelte.d.ts b/types/UIShell/HeaderAction.svelte.d.ts index 73ed2853..ba5aa45c 100644 --- a/types/UIShell/HeaderAction.svelte.d.ts +++ b/types/UIShell/HeaderAction.svelte.d.ts @@ -25,12 +25,26 @@ type $Props = { closeIcon?: any; /** - * Specify the text. + * Specify the text displayed next to the icon. * Alternatively, use the named slot "text" (e.g., `
...
`) * @default undefined */ text?: string; + /** + * Specify an icon tooltip. The tooltip will not be displayed + * if either the `text` prop or a named slot="text" is used + * @default undefined + */ + iconDescription?: string; + + /** + * Set the alignment of the tooltip relative to the icon. + * Only applies when `iconDescription` is provided + * @default "center" + */ + tooltipAlignment?: "start" | "center" | "end"; + /** * Obtain a reference to the button HTML element * @default null