From f4c940d5ee6a1e4ffa962823e7040a4aa0a47803 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Thu, 26 Nov 2020 17:14:07 -0800 Subject: [PATCH] Make UI Shell HeaderAction panel transition configurable (#419) * fix(ui-shell): remove fly transition from hamburger menu * feat(header-action): make panel transition configurable * chore: rebuild types, docs * docs(ui-shell): document transition prop in Header app switcher example --- CHANGELOG.md | 4 +- COMPONENT_INDEX.md | 241 +++++++++--------- docs/src/COMPONENT_API.json | 40 ++- docs/src/pages/_layout.svelte | 2 +- docs/src/pages/components/UIShell.svx | 4 + .../framed/UIShell/HeaderSwitcher.svelte | 31 ++- src/Accordion/AccordionItem.svelte | 2 +- src/Button/Button.svelte | 2 +- src/CodeSnippet/CodeSnippet.svelte | 2 +- src/ContentSwitcher/Switch.svelte | 2 +- src/Grid/Column.svelte | 2 +- src/Grid/Grid.svelte | 2 +- src/Grid/Row.svelte | 2 +- src/Tabs/Tab.svelte | 2 +- src/Tooltip/Tooltip.svelte | 2 +- src/UIShell/GlobalHeader/Header.svelte | 2 +- src/UIShell/GlobalHeader/HeaderAction.svelte | 15 +- src/UIShell/SideNav/HamburgerMenu.svelte | 4 +- tests/HeaderSwitcher.test.svelte | 2 +- tests/HeaderUtilities.test.svelte | 6 +- types/Accordion/AccordionItem.d.ts | 2 +- types/Button/Button.d.ts | 2 +- types/CodeSnippet/CodeSnippet.d.ts | 2 +- types/ContentSwitcher/Switch.d.ts | 2 +- types/Grid/Column.d.ts | 2 +- types/Grid/Grid.d.ts | 2 +- types/Grid/Row.d.ts | 2 +- types/Tabs/Tab.d.ts | 2 +- types/Tooltip/Tooltip.d.ts | 2 +- types/UIShell/GlobalHeader/Header.d.ts | 2 +- types/UIShell/GlobalHeader/HeaderAction.d.ts | 15 +- 31 files changed, 244 insertions(+), 160 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ecd78bda..b4bf1c5c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -310,7 +310,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - FluidForm: add `FluidForm` component and support fluid variants for `TextInput`, `PasswordInput` ([PR #293](https://github.com/IBM/carbon-components-svelte/pull/293), thanks [@josefaidt](https://github.com/josefaidt)) -- UI Shell: add `ref` prop to interactive (i.e. anchor links, buttons) UI Shell elements ([PR #297](https://github.com/IBM/carbon-components-svelte/pull/297), thanks [@josefaidt](https://github.com/josefaidt)) +- UI Shell: add `ref` prop to interactive (i.e., anchor links, buttons) UI Shell elements ([PR #297](https://github.com/IBM/carbon-components-svelte/pull/297), thanks [@josefaidt](https://github.com/josefaidt)) **Fixes** @@ -474,7 +474,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [0.9.2](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.9.2) - 2020-08-01 - add "skip-to-main-content" slot to `Header` -- make `platformName` prop in UI Shell `Header` slottable (i.e. ...) +- make `platformName` prop in UI Shell `Header` slottable (i.e., ...) - make `company` prop `Header` optional - fix UI Shell `Header` to add space between company and platform name for ARIA label - fix UI Shell `HeaderAction` bug where panel would not open diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 6e91af6b..4a1ab68e 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -192,12 +192,12 @@ ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | -| disabled | let | Yes | boolean | false | Set to `true` to disable the accordion item | -| open | let | Yes | boolean | false | Set to `true` to open the first accordion item | -| title | let | No | string | "title" | Specify the title of the accordion item heading
Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>) | -| iconDescription | let | No | string | "Expand/Collapse" | Specify the ARIA label for the accordion item chevron icon | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | +| disabled | let | Yes | boolean | false | Set to `true` to disable the accordion item | +| open | let | Yes | boolean | false | Set to `true` to open the first accordion item | +| title | let | No | string | "title" | Specify the title of the accordion item heading
Alternatively, use the named slot "title" (e.g., <div slot="title">...</div>) | +| iconDescription | let | No | string | "Expand/Collapse" | Specify the ARIA label for the accordion item chevron icon | ### Slots @@ -333,22 +333,22 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | -| kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost" | "primary" | Specify the kind of button | -| size | let | No | "default" | "field" | "small" | "default" | Specify the size of button | -| hasIconOnly | let | No | boolean | false | Set to `true` for the icon-only variant | -| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | -| iconDescription | let | No | string | -- | Specify the ARIA label for the button icon | -| tooltipAlignment | let | No | "start" | "center" | "end" | -- | Set the alignment of the tooltip relative to the icon
`hasIconOnly` must be set to `true` | -| tooltipPosition | let | No | "top" | "right" | "bottom" | "left" | -- | Set the position of the tooltip relative to the icon | -| as | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>) | -| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | -| disabled | let | No | boolean | false | Set to `true` to disable the button | -| href | let | No | string | -- | Set the `href` to use an anchor link | -| tabindex | let | No | string | "0" | Specify the tabindex | -| type | let | No | string | "button" | Specify the `type` attribute for the button element | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | +| kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost" | "primary" | Specify the kind of button | +| size | let | No | "default" | "field" | "small" | "default" | Specify the size of button | +| hasIconOnly | let | No | boolean | false | Set to `true` for the icon-only variant | +| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | +| iconDescription | let | No | string | -- | Specify the ARIA label for the button icon | +| tooltipAlignment | let | No | "start" | "center" | "end" | -- | Set the alignment of the tooltip relative to the icon
`hasIconOnly` must be set to `true` | +| tooltipPosition | let | No | "top" | "right" | "bottom" | "left" | -- | Set the position of the tooltip relative to the icon | +| as | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>) | +| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | +| disabled | let | No | boolean | false | Set to `true` to disable the button | +| href | let | No | string | -- | Set the `href` to use an anchor link | +| tabindex | let | No | string | "0" | Specify the tabindex | +| type | let | No | string | "button" | Specify the `type` attribute for the button element | ### Slots @@ -488,24 +488,24 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLPreElement | null | Obtain a reference to the pre HTML element | -| showMoreLess | let | Yes | boolean | false | Set to `true` to enable the show more/less button | -| expanded | let | Yes | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") | -| type | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet | -| code | let | No | string | -- | Set the code snippet text
Alternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>) | -| hideCopyButton | let | No | boolean | false | Set to `true` to hide the copy button | -| wrapText | let | No | boolean | false | Set to `true` to wrap the text
Note that `type` must be "multi" | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | -| copyButtonDescription | let | No | string | -- | Specify the ARIA label for the copy button icon | -| copyLabel | let | No | string | -- | Specify the ARIA label of the copy button | -| feedback | let | No | string | "Copied!" | Specify the feedback text displayed when clicking the snippet | -| feedbackTimeout | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | -| showLessText | let | No | string | "Show less" | Specify the show less text
`type` must be "multi" | -| showMoreText | let | No | string | "Show more" | Specify the show more text
`type` must be "multi" | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the code element | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- | +| ref | let | Yes | null | HTMLPreElement | null | Obtain a reference to the pre HTML element | +| showMoreLess | let | Yes | boolean | false | Set to `true` to enable the show more/less button | +| expanded | let | Yes | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") | +| type | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet | +| code | let | No | string | -- | Set the code snippet text
Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>) | +| hideCopyButton | let | No | boolean | false | Set to `true` to hide the copy button | +| wrapText | let | No | boolean | false | Set to `true` to wrap the text
Note that `type` must be "multi" | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | +| copyButtonDescription | let | No | string | -- | Specify the ARIA label for the copy button icon | +| copyLabel | let | No | string | -- | Specify the ARIA label of the copy button | +| feedback | let | No | string | "Copied!" | Specify the feedback text displayed when clicking the snippet | +| feedbackTimeout | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | +| showLessText | let | No | string | "Show less" | Specify the show less text
`type` must be "multi" | +| showMoreText | let | No | string | "Show more" | Specify the show more text
`type` must be "multi" | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the code element | ### Slots @@ -561,18 +561,18 @@ export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| as | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g. <Column let:props><article {...props}>...</article></Column>) | -| noGutter | let | No | boolean | false | Set to `true` to remove the gutter | -| noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter | -| noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter | -| aspectRatio | let | No | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | -- | Specify the aspect ratio of the column | -| sm | let | No | ColumnBreakpoint | -- | Set the small breakpoint | -| md | let | No | ColumnBreakpoint | -- | Set the medium breakpoint | -| lg | let | No | ColumnBreakpoint | -- | Set the large breakpoint | -| xlg | let | No | ColumnBreakpoint | -- | Set the extra large breakpoint | -| max | let | No | ColumnBreakpoint | -- | Set the maximum breakpoint | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------ | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| as | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>) | +| noGutter | let | No | boolean | false | Set to `true` to remove the gutter | +| noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter | +| noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter | +| aspectRatio | let | No | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | -- | Specify the aspect ratio of the column | +| sm | let | No | ColumnBreakpoint | -- | Set the small breakpoint | +| md | let | No | ColumnBreakpoint | -- | Set the medium breakpoint | +| lg | let | No | ColumnBreakpoint | -- | Set the large breakpoint | +| xlg | let | No | ColumnBreakpoint | -- | Set the extra large breakpoint | +| max | let | No | ColumnBreakpoint | -- | Set the maximum breakpoint | ### Slots @@ -1346,15 +1346,15 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| as | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g. <Grid let:props><header {...props}>...</header></Grid>) | -| condensed | let | No | boolean | false | Set to `true` to use the condensed variant | -| narrow | let | No | boolean | false | Set to `true` to use the narrow variant | -| fullWidth | let | No | boolean | false | Set to `true` to use the fullWidth variant | -| noGutter | let | No | boolean | false | Set to `true` to remove the gutter | -| noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter | -| noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| as | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>) | +| condensed | let | No | boolean | false | Set to `true` to use the condensed variant | +| narrow | let | No | boolean | false | Set to `true` to use the narrow variant | +| fullWidth | let | No | boolean | false | Set to `true` to use the fullWidth variant | +| noGutter | let | No | boolean | false | Set to `true` to remove the gutter | +| noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter | +| noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter | ### Slots @@ -1370,16 +1370,16 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------------------- | :--------------- | :------- | :----------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| isSideNavOpen | let | Yes | boolean | false | Set to `true` to open the side nav | -| expandedByDefault | let | No | boolean | true | Set to `false` to hide the side nav by default | -| uiShellAriaLabel | let | No | string | -- | Specify the ARIA label for the header | -| href | let | No | string | -- | Specify the `href` attribute | -| company | let | No | string | -- | Specify the company name | -| 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 | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------------------- | :--------------- | :------- | :----------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | +| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| isSideNavOpen | let | Yes | boolean | false | Set to `true` to open the side nav | +| expandedByDefault | let | No | boolean | true | Set to `false` to hide the side nav by default | +| uiShellAriaLabel | let | No | string | -- | Specify the ARIA label for the header | +| href | let | No | string | -- | Specify the `href` attribute | +| company | let | No | string | -- | Specify the company name | +| 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 | ### Slots @@ -1397,14 +1397,25 @@ None. ## `HeaderAction` +### Types + +```ts +export interface HeaderActionSlideTransition { + delay?: number; + duration?: number; + easing?: (t: number) => number; +} +``` + ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------ | -| 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 | { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; } | -- | Specify the icon props | -| text | let | No | string | -- | Specify the text
Alternatively, use the named slot "text" (e.g. <div slot="text">...</div>) | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------- | :--------------- | :------- | :------------------------------------------------------------------------------------ | ------------------------------ | ------------------------------------------------------------------------------------------------------------- | +| 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 | { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; } | -- | Specify the icon props | +| text | let | No | string | -- | Specify the text
Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>) | +| transition | let | No | false | HeaderActionSlideTransition | { duration: 200 } | Customize the panel transition (i.e., `transition:slide`)
Set to `false` to disable the transition | ### Slots @@ -2728,14 +2739,14 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| as | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g. <Row let:props><section {...props}>...</section></Row>) | -| condensed | let | No | boolean | false | Set to `true` to use the condensed variant | -| narrow | let | No | boolean | false | Set to `true` to use the narrow variant | -| noGutter | let | No | boolean | false | Set to `true` to remove the gutter | -| noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter | -| noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| as | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>) | +| condensed | let | No | boolean | false | Set to `true` to use the condensed variant | +| narrow | let | No | boolean | false | Set to `true` to use the narrow variant | +| noGutter | let | No | boolean | false | Set to `true` to remove the gutter | +| noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter | +| noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter | ### Slots @@ -3323,13 +3334,13 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | -| selected | let | Yes | boolean | false | Set to `true` for the switch to be selected | -| text | let | No | string | "Provide text" | Specify the switch text
Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>) | -| disabled | let | No | boolean | false | Set to `true` to disable the switch | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- | +| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | +| selected | let | Yes | boolean | false | Set to `true` for the switch to be selected | +| text | let | No | string | "Provide text" | Specify the switch text
Alternatively, use the named slot "text" (e.g., <span slot="text">...</span>) | +| disabled | let | No | boolean | false | Set to `true` to disable the switch | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | ### Slots @@ -3351,14 +3362,14 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the anchor HTML element | -| label | let | No | string | "" | Specify the tab label
Alternatively, use the default slot (e.g. <Tab><span>Label</span></Tab>) | -| href | let | No | string | "#" | Specify the href attribute | -| disabled | let | No | boolean | false | Set to `true` to disable the tab | -| tabindex | let | No | string | "0" | Specify the tabindex | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | +| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the anchor HTML element | +| label | let | No | string | "" | Specify the tab label
Alternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>) | +| href | let | No | string | "#" | Specify the href attribute | +| disabled | let | No | boolean | false | Set to `true` to disable the tab | +| tabindex | let | No | string | "0" | Specify the tabindex | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots @@ -4129,21 +4140,21 @@ 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 | -| 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("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` 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 | +| 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("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` 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 | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 4411396f..453b3c84 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -191,7 +191,7 @@ { "name": "title", "kind": "let", - "description": "Specify the title of the accordion item heading\nAlternatively, use the named slot \"title\" (e.g.
...
)", + "description": "Specify the title of the accordion item heading\nAlternatively, use the named slot \"title\" (e.g.,
...
)", "type": "string", "value": "\"title\"", "isFunction": false, @@ -583,7 +583,7 @@ { "name": "as", "kind": "let", - "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g. )", + "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g., )", "type": "boolean", "value": "false", "isFunction": false, @@ -906,7 +906,7 @@ { "name": "text", "kind": "let", - "description": "Specify the switch text\nAlternatively, use the named slot \"text\" (e.g. ...)", + "description": "Specify the switch text\nAlternatively, use the named slot \"text\" (e.g., ...)", "type": "string", "value": "\"Provide text\"", "isFunction": false, @@ -1918,7 +1918,7 @@ { "name": "code", "kind": "let", - "description": "Set the code snippet text\nAlternatively, use the default slot (e.g. {`code`})", + "description": "Set the code snippet text\nAlternatively, use the default slot (e.g., {`code`})", "type": "string", "isFunction": false, "constant": false, @@ -4595,7 +4595,7 @@ { "name": "as", "kind": "let", - "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g.
...
)", + "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g.,
...
)", "type": "boolean", "value": "false", "isFunction": false, @@ -4681,7 +4681,7 @@ { "name": "as", "kind": "let", - "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g.
...
)", + "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g.,
...
)", "type": "boolean", "value": "false", "isFunction": false, @@ -4757,7 +4757,7 @@ { "name": "as", "kind": "let", - "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g.
...
)", + "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g.,
...
)", "type": "boolean", "value": "false", "isFunction": false, @@ -7494,7 +7494,7 @@ { "name": "label", "kind": "let", - "description": "Specify the tab label\nAlternatively, use the default slot (e.g. Label)", + "description": "Specify the tab label\nAlternatively, use the default slot (e.g., Label)", "type": "string", "value": "\"\"", "isFunction": false, @@ -9283,7 +9283,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 from `carbon-icons-svelte` to render for the tooltip button\nIcon size must be 16px (e.g., `Add16`, `Task16`)", "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "isFunction": false, "constant": false, @@ -9593,7 +9593,7 @@ { "name": "platformName", "kind": "let", - "description": "Specify the platform name\nAlternatively, use the named slot \"platform\" (e.g. ...)", + "description": "Specify the platform name\nAlternatively, use the named slot \"platform\" (e.g., ...)", "type": "string", "value": "\"\"", "isFunction": false, @@ -9661,7 +9661,7 @@ { "name": "text", "kind": "let", - "description": "Specify the text\nAlternatively, use the named slot \"text\" (e.g.
...
)", + "description": "Specify the text\nAlternatively, use the named slot \"text\" (e.g.,
...
)", "type": "string", "isFunction": false, "constant": false, @@ -9676,6 +9676,16 @@ "isFunction": false, "constant": false, "reactive": true + }, + { + "name": "transition", + "kind": "let", + "description": "Customize the panel transition (i.e., `transition:slide`)\nSet to `false` to disable the transition", + "type": "false | HeaderActionSlideTransition", + "value": "{ duration: 200 }", + "isFunction": false, + "constant": false, + "reactive": false } ], "slots": [ @@ -9691,7 +9701,13 @@ { "type": "forwarded", "name": "click", "element": "button" }, { "type": "dispatched", "name": "close" } ], - "typedefs": [], + "typedefs": [ + { + "type": "{ delay?: number; duration?: number; easing?: (t: number) => number; }", + "name": "HeaderActionSlideTransition", + "ts": "interface HeaderActionSlideTransition { delay?: number; duration?: number; easing?: (t: number) => number; }" + } + ], "rest_props": { "type": "Element", "name": "button" } }, { diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte index c87c7a90..2726efa3 100644 --- a/docs/src/pages/_layout.svelte +++ b/docs/src/pages/_layout.svelte @@ -186,7 +186,7 @@ href="https://github.com/IBM/carbon-components-svelte" target="_blank" /> - + Carbon Svelte portfolio diff --git a/docs/src/pages/components/UIShell.svx b/docs/src/pages/components/UIShell.svx index 33a18b98..45e4bade 100644 --- a/docs/src/pages/components/UIShell.svx +++ b/docs/src/pages/components/UIShell.svx @@ -32,6 +32,10 @@ components: ["Header", ### Header with app switcher +The `HeaderAction` component uses the [transition:slide API](https://svelte.dev/docs#slide); you can customize the transition duration, delay, and easing with the `transition` prop. + +You can disable the `transition` by setting it to `false`. + ### Header with global search diff --git a/docs/src/pages/framed/UIShell/HeaderSwitcher.svelte b/docs/src/pages/framed/UIShell/HeaderSwitcher.svelte index 1ab25e10..d974ff1c 100644 --- a/docs/src/pages/framed/UIShell/HeaderSwitcher.svelte +++ b/docs/src/pages/framed/UIShell/HeaderSwitcher.svelte @@ -16,10 +16,28 @@ Grid, Row, Column, + TileGroup, + RadioTile, } from "carbon-components-svelte"; + import { expoIn } from "svelte/easing"; let isSideNavOpen = false; let isOpen = false; + let selected = "0"; + let transitions = { + "0": { + text: "Default (duration: 200ms)", + value: { duration: 200 }, + }, + "1": { + text: "Custom (duration: 600ms, delay: 50ms, easing: expoIn)", + value: { duration: 600, delay: 50, easing: expoIn }, + }, + "2": { + text: "Disabled", + value: false, + }, + };
@@ -27,7 +45,7 @@ - + Switcher subject 1 Switcher item 1 @@ -59,7 +77,16 @@ -

Welcome

+

HeaderSwitcher

+

+ Select a transition option below and click on the App Switcher icon in + the top right. +

+ + {#each Object.keys(transitions) as key} + {transitions[key].text} + {/each} + diff --git a/src/Accordion/AccordionItem.svelte b/src/Accordion/AccordionItem.svelte index c18b6840..ad09e0b2 100644 --- a/src/Accordion/AccordionItem.svelte +++ b/src/Accordion/AccordionItem.svelte @@ -1,7 +1,7 @@ ) + * Props are destructured as `props` in the default slot (e.g., ) * @default false */ as?: boolean; diff --git a/types/CodeSnippet/CodeSnippet.d.ts b/types/CodeSnippet/CodeSnippet.d.ts index b9c0eaea..b1e1f2b4 100644 --- a/types/CodeSnippet/CodeSnippet.d.ts +++ b/types/CodeSnippet/CodeSnippet.d.ts @@ -9,7 +9,7 @@ export interface CodeSnippetProps { /** * Set the code snippet text - * Alternatively, use the default slot (e.g. {`code`}) + * Alternatively, use the default slot (e.g., {`code`}) */ code?: string; diff --git a/types/ContentSwitcher/Switch.d.ts b/types/ContentSwitcher/Switch.d.ts index 52d2e83a..b54ae4c7 100644 --- a/types/ContentSwitcher/Switch.d.ts +++ b/types/ContentSwitcher/Switch.d.ts @@ -3,7 +3,7 @@ export interface SwitchProps extends svelte.JSX.HTMLAttributes { /** * Specify the switch text - * Alternatively, use the named slot "text" (e.g. ...) + * Alternatively, use the named slot "text" (e.g., ...) * @default "Provide text" */ text?: string; diff --git a/types/Grid/Column.d.ts b/types/Grid/Column.d.ts index 3704cef5..c785ba72 100644 --- a/types/Grid/Column.d.ts +++ b/types/Grid/Column.d.ts @@ -12,7 +12,7 @@ export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; export interface ColumnProps extends svelte.JSX.HTMLAttributes { /** * Set to `true` to render a custom HTML element - * Props are destructured as `props` in the default slot (e.g.
...
) + * Props are destructured as `props` in the default slot (e.g.,
...
) * @default false */ as?: boolean; diff --git a/types/Grid/Grid.d.ts b/types/Grid/Grid.d.ts index fa7f8444..36064d10 100644 --- a/types/Grid/Grid.d.ts +++ b/types/Grid/Grid.d.ts @@ -3,7 +3,7 @@ export interface GridProps extends svelte.JSX.HTMLAttributes { /** * Set to `true` to render a custom HTML element - * Props are destructured as `props` in the default slot (e.g.
...
) + * Props are destructured as `props` in the default slot (e.g.,
...
) * @default false */ as?: boolean; diff --git a/types/Grid/Row.d.ts b/types/Grid/Row.d.ts index 88eb63bd..c00bd5b1 100644 --- a/types/Grid/Row.d.ts +++ b/types/Grid/Row.d.ts @@ -3,7 +3,7 @@ export interface RowProps extends svelte.JSX.HTMLAttributes { /** * Set to `true` to render a custom HTML element - * Props are destructured as `props` in the default slot (e.g.
...
) + * Props are destructured as `props` in the default slot (e.g.,
...
) * @default false */ as?: boolean; diff --git a/types/Tabs/Tab.d.ts b/types/Tabs/Tab.d.ts index 04585573..c0fd922f 100644 --- a/types/Tabs/Tab.d.ts +++ b/types/Tabs/Tab.d.ts @@ -3,7 +3,7 @@ export interface TabProps extends svelte.JSX.HTMLAttributes { /** * Specify the tab label - * Alternatively, use the default slot (e.g. Label) + * Alternatively, use the default slot (e.g., Label) * @default "" */ label?: string; diff --git a/types/Tooltip/Tooltip.d.ts b/types/Tooltip/Tooltip.d.ts index 1684fe0a..8f5c1a63 100644 --- a/types/Tooltip/Tooltip.d.ts +++ b/types/Tooltip/Tooltip.d.ts @@ -21,7 +21,7 @@ export interface TooltipProps extends svelte.JSX.HTMLAttributes...) + * Alternatively, use the named slot "platform" (e.g., ...) * @default "" */ platformName?: string; diff --git a/types/UIShell/GlobalHeader/HeaderAction.d.ts b/types/UIShell/GlobalHeader/HeaderAction.d.ts index cdf1bad3..4cb1aeec 100644 --- a/types/UIShell/GlobalHeader/HeaderAction.d.ts +++ b/types/UIShell/GlobalHeader/HeaderAction.d.ts @@ -1,5 +1,11 @@ /// +export interface HeaderActionSlideTransition { + delay?: number; + duration?: number; + easing?: (t: number) => number; +} + export interface HeaderActionProps extends svelte.JSX.HTMLAttributes { /** * Set to `true` to open the panel @@ -14,7 +20,7 @@ export interface HeaderActionProps extends svelte.JSX.HTMLAttributes...) + * Alternatively, use the named slot "text" (e.g.,
...
) */ text?: string; @@ -23,6 +29,13 @@ export interface HeaderActionProps extends svelte.JSX.HTMLAttributes