From 53a106bc4189ffb8f41d2fbd2889ad85930726b7 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Sat, 8 Mar 2025 11:19:52 -0800 Subject: [PATCH] Add types test for `HeaderAction` --- COMPONENT_INDEX.md | 22 +++++++++++----------- docs/src/COMPONENT_API.json | 6 +++--- tests/HeaderUtilities.test.svelte | 2 ++ types/UIShell/HeaderAction.svelte.d.ts | 8 ++++---- 4 files changed, 20 insertions(+), 18 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index c9b306d2..336c1f5c 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1615,17 +1615,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>`) | -| iconDescription | No | let | No | string | undefined | Specify an icon tooltip.
This only works if `text` or a named slot "text" is not provided. | -| tooltipAlignment | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon.
This only works if `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 | +| 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 c43d1765..bfb1e225 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -5870,7 +5870,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, @@ -5881,7 +5881,7 @@ { "name": "iconDescription", "kind": "let", - "description": "Specify an icon tooltip.\nThis only works if `text` or a named slot \"text\" is not provided.", + "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, @@ -5892,7 +5892,7 @@ { "name": "tooltipAlignment", "kind": "let", - "description": "Set the alignment of the tooltip relative to the icon.\nThis only works if `iconDescription` is provided.", + "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, 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 f41f40ce..ba5aa45c 100644 --- a/types/UIShell/HeaderAction.svelte.d.ts +++ b/types/UIShell/HeaderAction.svelte.d.ts @@ -25,22 +25,22 @@ 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. - * This only works if `text` or a named slot "text" is not provided. + * 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. - * This only works if `iconDescription` is provided. + * Only applies when `iconDescription` is provided * @default "center" */ tooltipAlignment?: "start" | "center" | "end";