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

Make UI Shell HeaderAction panel transition configurable (#419)

Browse source 
* 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
This commit is contained in:
Eric Liu 2020-11-26 17:14:07 -08:00 • committed by GitHub
commit f4c940d5ee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 244 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

4
CHANGELOG.md
View file

@ -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)) - 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** **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 ## [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` - add "skip-to-main-content" slot to `Header`
- make `platformName` prop in UI Shell `Header` slottable (i.e. <span slot="platform">...</span>) - make `platformName` prop in UI Shell `Header` slottable (i.e., <span slot="platform">...</span>)
- make `company` prop `Header` optional - make `company` prop `Header` optional
- fix UI Shell `Header` to add space between company and platform name for ARIA label - 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 - fix UI Shell `HeaderAction` bug where panel would not open

241
COMPONENT_INDEX.md
View file

@ -192,12 +192,12 @@
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | | :-------------- | :--------------- | :------- | :------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| disabled | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to disable the accordion item | | disabled | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to disable the accordion item |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the first accordion item | | open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the first accordion item |
| title | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the accordion item heading<br />Alternatively, use the named slot "title" (e.g. &lt;div slot="title"&gt;...&lt;/div&gt;) | | title | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the accordion item heading<br />Alternatively, use the named slot "title" (e.g., &lt;div slot="title"&gt;...&lt;/div&gt;) |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Expand/Collapse"</code> | Specify the ARIA label for the accordion item chevron icon | | iconDescription | <code>let</code> | No | <code>string</code> | <code>"Expand/Collapse"</code> | Specify the ARIA label for the accordion item chevron icon |
### Slots ### Slots
@ -333,22 +333,22 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :--------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element |
| kind | <code>let</code> | No | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger-tertiary" &#124; "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button | | kind | <code>let</code> | No | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger-tertiary" &#124; "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button |
| size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small"</code> | <code>"default"</code> | Specify the size of button | | size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small"</code> | <code>"default"</code> | Specify the size of button |
| hasIconOnly | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the icon-only variant | | hasIconOnly | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the icon-only variant |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render | | icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| iconDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the button icon | | 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> | -- | Set the alignment of the tooltip relative to the icon<br />`hasIconOnly` must be set to `true` | | tooltipAlignment | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</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> | -- | Set the position of the tooltip relative to the icon | | tooltipPosition | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | -- | Set the position of the tooltip relative to the icon |
| as | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g. &lt;Button let:props&gt;&lt;div {...props}&gt;...&lt;/div&gt;&lt;/Button&gt;) | | as | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., &lt;Button let:props&gt;&lt;div {...props}&gt;...&lt;/div&gt;&lt;/Button&gt;) |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state | | skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the button | | disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the button |
| href | <code>let</code> | No | <code>string</code> | -- | Set the `href` to use an anchor link | | href | <code>let</code> | No | <code>string</code> | -- | Set the `href` to use an anchor link |
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex | | tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
| type | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `type` attribute for the button element | | type | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `type` attribute for the button element |
### Slots ### Slots
@ -488,24 +488,24 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | | :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLPreElement</code> | <code>null</code> | Obtain a reference to the pre HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLPreElement</code> | <code>null</code> | Obtain a reference to the pre HTML element |
| showMoreLess | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the show more/less button | | showMoreLess | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the show more/less button |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand a multi-line code snippet (type="multi") | | expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand a multi-line code snippet (type="multi") |
| type | <code>let</code> | No | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code> | Set the type of code snippet | | type | <code>let</code> | No | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code> | Set the type of code snippet |
| code | <code>let</code> | No | <code>string</code> | -- | Set the code snippet text<br />Alternatively, use the default slot (e.g. &lt;CodeSnippet&gt;{`code`}&lt;/CodeSnippet&gt;) | | code | <code>let</code> | No | <code>string</code> | -- | Set the code snippet text<br />Alternatively, use the default slot (e.g., &lt;CodeSnippet&gt;{`code`}&lt;/CodeSnippet&gt;) |
| hideCopyButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the copy button | | hideCopyButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the copy button |
| wrapText | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to wrap the text<br />Note that `type` must be "multi" | | wrapText | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to wrap the text<br />Note that `type` must be "multi" |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state | | skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| copyButtonDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the copy button icon | | copyButtonDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the copy button icon |
| copyLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label of the copy button | | copyLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label of the copy button |
| feedback | <code>let</code> | No | <code>string</code> | <code>"Copied!"</code> | Specify the feedback text displayed when clicking the snippet | | feedback | <code>let</code> | No | <code>string</code> | <code>"Copied!"</code> | Specify the feedback text displayed when clicking the snippet |
| feedbackTimeout | <code>let</code> | No | <code>number</code> | <code>2000</code> | Set the timeout duration (ms) to display feedback text | | feedbackTimeout | <code>let</code> | No | <code>number</code> | <code>2000</code> | Set the timeout duration (ms) to display feedback text |
| showLessText | <code>let</code> | No | <code>string</code> | <code>"Show less"</code> | Specify the show less text<br />`type` must be "multi" | | showLessText | <code>let</code> | No | <code>string</code> | <code>"Show less"</code> | Specify the show less text<br />`type` must be "multi" |
| showMoreText | <code>let</code> | No | <code>string</code> | <code>"Show more"</code> | Specify the show more text<br />`type` must be "multi" | | showMoreText | <code>let</code> | No | <code>string</code> | <code>"Show more"</code> | Specify the show more text<br />`type` must be "multi" |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element | | id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element |
### Slots ### Slots
@ -561,18 +561,18 @@ export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :------------ | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :------------ | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| as | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g. &lt;Column let:props&gt;&lt;article {...props}&gt;...&lt;/article&gt;&lt;/Column&gt;) | | as | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., &lt;Column let:props&gt;&lt;article {...props}&gt;...&lt;/article&gt;&lt;/Column&gt;) |
| noGutter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter | | noGutter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
| noGutterLeft | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter | | noGutterLeft | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter |
| noGutterRight | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter | | noGutterRight | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter |
| aspectRatio | <code>let</code> | No | <code>"2x1" &#124; "16x9" &#124; "9x16" &#124; "1x2" &#124; "4x3" &#124; "3x4" &#124; "1x1"</code> | -- | Specify the aspect ratio of the column | | aspectRatio | <code>let</code> | No | <code>"2x1" &#124; "16x9" &#124; "9x16" &#124; "1x2" &#124; "4x3" &#124; "3x4" &#124; "1x1"</code> | -- | Specify the aspect ratio of the column |
| sm | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the small breakpoint | | sm | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the small breakpoint |
| md | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the medium breakpoint | | md | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the medium breakpoint |
| lg | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the large breakpoint | | lg | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the large breakpoint |
| xlg | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the extra large breakpoint | | xlg | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the extra large breakpoint |
| max | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the maximum breakpoint | | max | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the maximum breakpoint |
### Slots ### Slots
@ -1346,15 +1346,15 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :------------ | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| as | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g. &lt;Grid let:props&gt;&lt;header {...props}&gt;...&lt;/header&gt;&lt;/Grid&gt;) | | as | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., &lt;Grid let:props&gt;&lt;header {...props}&gt;...&lt;/header&gt;&lt;/Grid&gt;) |
| condensed | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant | | condensed | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant |
| narrow | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the narrow variant | | narrow | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the narrow variant |
| fullWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the fullWidth variant | | fullWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the fullWidth variant |
| noGutter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter | | noGutter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
| noGutterLeft | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter | | noGutterLeft | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter |
| noGutterRight | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter | | noGutterRight | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter |
### Slots ### Slots
@ -1370,16 +1370,16 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | 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 | | ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| isSideNavOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the side nav | | isSideNavOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the side nav |
| expandedByDefault | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default | | expandedByDefault | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
| uiShellAriaLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the header | | uiShellAriaLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the header |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute | | href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
| company | <code>let</code> | No | <code>string</code> | -- | Specify the company name | | company | <code>let</code> | No | <code>string</code> | -- | Specify the company name |
| 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;) | | 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 | | persistentHamburgerMenu | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
### Slots ### Slots
@ -1397,14 +1397,25 @@ None.
## `HeaderAction` ## `HeaderAction`
### Types
```ts
export interface HeaderActionSlideTransition {
delay?: number;
duration?: number;
easing?: (t: number) => number;
}
```
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | 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 button HTML element | | 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 | | isOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel |
| icon | <code>let</code> | No | <code>{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }</code> | -- | Specify the icon props | | icon | <code>let</code> | No | <code>{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }</code> | -- | Specify the icon props |
| 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;) | | 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 |
### Slots ### Slots
@ -2728,14 +2739,14 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :------------ | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| as | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g. &lt;Row let:props&gt;&lt;section {...props}&gt;...&lt;/section&gt;&lt;/Row&gt;) | | as | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., &lt;Row let:props&gt;&lt;section {...props}&gt;...&lt;/section&gt;&lt;/Row&gt;) |
| condensed | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant | | condensed | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant |
| narrow | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the narrow variant | | narrow | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the narrow variant |
| noGutter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter | | noGutter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
| noGutterLeft | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter | | noGutterLeft | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter |
| noGutterRight | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter | | noGutterRight | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter |
### Slots ### Slots
@ -3323,13 +3334,13 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | 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 button HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| selected | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the switch to be selected | | selected | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the switch to be selected |
| text | <code>let</code> | No | <code>string</code> | <code>"Provide text"</code> | Specify the switch text<br />Alternatively, use the named slot "text" (e.g. &lt;span slot="text"&gt;...&lt;/span&gt;) | | text | <code>let</code> | No | <code>string</code> | <code>"Provide text"</code> | Specify the switch text<br />Alternatively, use the named slot "text" (e.g., &lt;span slot="text"&gt;...&lt;/span&gt;) |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the switch | | disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the switch |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element | | id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element |
### Slots ### Slots
@ -3351,14 +3362,14 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | 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 anchor HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the anchor HTML element |
| label | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tab label<br />Alternatively, use the default slot (e.g. &lt;Tab&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/Tab&gt;) | | label | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tab label<br />Alternatively, use the default slot (e.g., &lt;Tab&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/Tab&gt;) |
| href | <code>let</code> | No | <code>string</code> | <code>"#"</code> | Specify the href attribute | | href | <code>let</code> | No | <code>string</code> | <code>"#"</code> | Specify the href attribute |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tab | | disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tab |
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex | | tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element | | id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
### Slots ### Slots
@ -4129,21 +4140,21 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | 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 | | 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 | | 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 | | 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 | | open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip |
| 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 | | 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 | | 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("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render for the tooltip button<br />Icon size must be 16px (e.g. `Add16`, `Task16`) | | icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</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 | | 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 | | 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 | | 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 | | 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 | | 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 | | triggerText | <code>let</code> | No | <code>string</code> | <code>""</code> | Set the tooltip button text |
### Slots ### Slots

40
docs/src/COMPONENT_API.json
View file

@ -191,7 +191,7 @@
{ {
"name": "title", "name": "title",
"kind": "let", "kind": "let",
"description": "Specify the title of the accordion item heading\nAlternatively, use the named slot \"title\" (e.g. <div slot=\"title\">...</div>)", "description": "Specify the title of the accordion item heading\nAlternatively, use the named slot \"title\" (e.g., <div slot=\"title\">...</div>)",
"type": "string", "type": "string",
"value": "\"title\"", "value": "\"title\"",
"isFunction": false, "isFunction": false,
@ -583,7 +583,7 @@
{ {
"name": "as", "name": "as",
"kind": "let", "kind": "let",
"description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>)", "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>)",
"type": "boolean", "type": "boolean",
"value": "false", "value": "false",
"isFunction": false, "isFunction": false,
@ -906,7 +906,7 @@
{ {
"name": "text", "name": "text",
"kind": "let", "kind": "let",
"description": "Specify the switch text\nAlternatively, use the named slot \"text\" (e.g. <span slot=\"text\">...</span>)", "description": "Specify the switch text\nAlternatively, use the named slot \"text\" (e.g., <span slot=\"text\">...</span>)",
"type": "string", "type": "string",
"value": "\"Provide text\"", "value": "\"Provide text\"",
"isFunction": false, "isFunction": false,
@ -1918,7 +1918,7 @@
{ {
"name": "code", "name": "code",
"kind": "let", "kind": "let",
"description": "Set the code snippet text\nAlternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>)", "description": "Set the code snippet text\nAlternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)",
"type": "string", "type": "string",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
@ -4595,7 +4595,7 @@
{ {
"name": "as", "name": "as",
"kind": "let", "kind": "let",
"description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g. <Grid let:props><header {...props}>...</header></Grid>)", "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>)",
"type": "boolean", "type": "boolean",
"value": "false", "value": "false",
"isFunction": false, "isFunction": false,
@ -4681,7 +4681,7 @@
{ {
"name": "as", "name": "as",
"kind": "let", "kind": "let",
"description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g. <Row let:props><section {...props}>...</section></Row>)", "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>)",
"type": "boolean", "type": "boolean",
"value": "false", "value": "false",
"isFunction": false, "isFunction": false,
@ -4757,7 +4757,7 @@
{ {
"name": "as", "name": "as",
"kind": "let", "kind": "let",
"description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g. <Column let:props><article {...props}>...</article></Column>)", "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>)",
"type": "boolean", "type": "boolean",
"value": "false", "value": "false",
"isFunction": false, "isFunction": false,
@ -7494,7 +7494,7 @@
{ {
"name": "label", "name": "label",
"kind": "let", "kind": "let",
"description": "Specify the tab label\nAlternatively, use the default slot (e.g. <Tab><span>Label</span></Tab>)", "description": "Specify the tab label\nAlternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>)",
"type": "string", "type": "string",
"value": "\"\"", "value": "\"\"",
"isFunction": false, "isFunction": false,
@ -9283,7 +9283,7 @@
{ {
"name": "icon", "name": "icon",
"kind": "let", "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", "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
@ -9593,7 +9593,7 @@
{ {
"name": "platformName", "name": "platformName",
"kind": "let", "kind": "let",
"description": "Specify the platform name\nAlternatively, use the named slot \"platform\" (e.g. <span slot=\"platform\">...</span>)", "description": "Specify the platform name\nAlternatively, use the named slot \"platform\" (e.g., <span slot=\"platform\">...</span>)",
"type": "string", "type": "string",
"value": "\"\"", "value": "\"\"",
"isFunction": false, "isFunction": false,
@ -9661,7 +9661,7 @@
{ {
"name": "text", "name": "text",
"kind": "let", "kind": "let",
"description": "Specify the text\nAlternatively, use the named slot \"text\" (e.g. <div slot=\"text\">...</div>)", "description": "Specify the text\nAlternatively, use the named slot \"text\" (e.g., <div slot=\"text\">...</div>)",
"type": "string", "type": "string",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
@ -9676,6 +9676,16 @@
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
"reactive": true "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": [ "slots": [
@ -9691,7 +9701,13 @@
{ "type": "forwarded", "name": "click", "element": "button" }, { "type": "forwarded", "name": "click", "element": "button" },
{ "type": "dispatched", "name": "close" } { "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" } "rest_props": { "type": "Element", "name": "button" }
}, },
{ {

2
docs/src/pages/_layout.svelte
View file

@ -186,7 +186,7 @@
href="https://github.com/IBM/carbon-components-svelte" href="https://github.com/IBM/carbon-components-svelte"
target="_blank" target="_blank"
/> />
<HeaderAction bind:isOpen> <HeaderAction transition="{false}" bind:isOpen>
<HeaderPanelLinks> <HeaderPanelLinks>
<HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider> <HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider>
<HeaderPanelLink href="https://github.com/IBM/carbon-icons-svelte"> <HeaderPanelLink href="https://github.com/IBM/carbon-icons-svelte">

4
docs/src/pages/components/UIShell.svx
View file

@ -32,6 +32,10 @@ components: ["Header",
### Header with app switcher ### 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`.
<FileSource src="/framed/UIShell/HeaderSwitcher" /> <FileSource src="/framed/UIShell/HeaderSwitcher" />
### Header with global search ### Header with global search

31
docs/src/pages/framed/UIShell/HeaderSwitcher.svelte
View file

@ -16,10 +16,28 @@
Grid, Grid,
Row, Row,
Column, Column,
TileGroup,
RadioTile,
} from "carbon-components-svelte"; } from "carbon-components-svelte";
import { expoIn } from "svelte/easing";
let isSideNavOpen = false; let isSideNavOpen = false;
let isOpen = 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,
},
};
</script> </script>
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen> <Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
@ -27,7 +45,7 @@
<SkipToContent /> <SkipToContent />
</div> </div>
<HeaderUtilities> <HeaderUtilities>
<HeaderAction bind:isOpen> <HeaderAction bind:isOpen transition="{transitions[selected].value}">
<HeaderPanelLinks> <HeaderPanelLinks>
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider> <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
<HeaderPanelLink>Switcher item 1</HeaderPanelLink> <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
@ -59,7 +77,16 @@
<Grid> <Grid>
<Row> <Row>
<Column> <Column>
<h1>Welcome</h1> <h1>HeaderSwitcher</h1>
<p>
Select a transition option below and click on the App Switcher icon in
the top right.
</p>
<TileGroup legend="App switcher transitions" bind:selected>
{#each Object.keys(transitions) as key}
<RadioTile value="{key}">{transitions[key].text}</RadioTile>
{/each}
</TileGroup>
</Column> </Column>
</Row> </Row>
</Grid> </Grid>

2
src/Accordion/AccordionItem.svelte
View file

@ -1,7 +1,7 @@
<script> <script>
/** /**
* Specify the title of the accordion item heading * Specify the title of the accordion item heading
* Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>) * Alternatively, use the named slot "title" (e.g., <div slot="title">...</div>)
*/ */
export let title = "title"; export let title = "title";

2
src/Button/Button.svelte
View file

@ -47,7 +47,7 @@
/** /**
* Set to `true` to render a custom HTML element * 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>) * Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>)
*/ */
export let as = false; export let as = false;

2
src/CodeSnippet/CodeSnippet.svelte
View file

@ -7,7 +7,7 @@
/** /**
* Set the code snippet text * Set the code snippet text
* Alternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>) * Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)
* @type {string} * @type {string}
*/ */
export let code = undefined; export let code = undefined;

2
src/ContentSwitcher/Switch.svelte
View file

@ -1,7 +1,7 @@
<script> <script>
/** /**
* Specify the switch text * Specify the switch text
* Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>) * Alternatively, use the named slot "text" (e.g., <span slot="text">...</span>)
*/ */
export let text = "Provide text"; export let text = "Provide text";

2
src/Grid/Column.svelte
View file

@ -13,7 +13,7 @@
/** /**
* Set to `true` to render a custom HTML element * 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>) * Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>)
*/ */
export let as = false; export let as = false;

2
src/Grid/Grid.svelte
View file

@ -6,7 +6,7 @@
/** /**
* Set to `true` to render a custom HTML element * 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>) * Props are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>)
*/ */
export let as = false; export let as = false;

2
src/Grid/Row.svelte
View file

@ -6,7 +6,7 @@
/** /**
* Set to `true` to render a custom HTML element * 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>) * Props are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>)
*/ */
export let as = false; export let as = false;

2
src/Tabs/Tab.svelte
View file

@ -1,7 +1,7 @@
<script> <script>
/** /**
* Specify the tab label * Specify the tab label
* Alternatively, use the default slot (e.g. <Tab><span>Label</span></Tab>) * Alternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>)
*/ */
export let label = ""; export let label = "";

2
src/Tooltip/Tooltip.svelte
View file

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

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

@ -25,7 +25,7 @@
/** /**
* Specify the platform name * Specify the platform name
* Alternatively, use the named slot "platform" (e.g. <span slot="platform">...</span>) * Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>)
*/ */
export let platformName = ""; export let platformName = "";

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

@ -1,4 +1,8 @@
<script> <script>
/**
* @typedef {{ delay?: number; duration?: number; easing?: (t: number) => number; }} HeaderActionSlideTransition
*/
/** Set to `true` to open the panel */ /** Set to `true` to open the panel */
export let isOpen = false; export let isOpen = false;
@ -10,7 +14,7 @@
/** /**
* Specify the text * Specify the text
* Alternatively, use the named slot "text" (e.g. <div slot="text">...</div>) * Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>)
* @type {string} * @type {string}
*/ */
export let text = undefined; export let text = undefined;
@ -18,6 +22,13 @@
/** Obtain a reference to the button HTML element */ /** Obtain a reference to the button HTML element */
export let ref = null; export let ref = null;
/**
* Customize the panel transition (i.e., `transition:slide`)
* Set to `false` to disable the transition
* @type {false | HeaderActionSlideTransition}
*/
export let transition = { duration: 200 };
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import { slide } from "svelte/transition"; import { slide } from "svelte/transition";
import Close20 from "carbon-icons-svelte/lib/Close20"; import Close20 from "carbon-icons-svelte/lib/Close20";
@ -78,7 +89,7 @@
bind:this="{refPanel}" bind:this="{refPanel}"
class:bx--header-panel="{true}" class:bx--header-panel="{true}"
class:bx--header-panel--expanded="{true}" class:bx--header-panel--expanded="{true}"
transition:slide="{{ duration: 200 }}" transition:slide="{{ ...transition, duration: transition === false ? 0 : transition.duration }}"
> >
<slot /> <slot />
</div> </div>

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

@ -11,22 +11,20 @@
/** Obtain a reference to the HTML button element */ /** Obtain a reference to the HTML button element */
export let ref = null; export let ref = null;
import { fly } from "svelte/transition";
import Close20 from "carbon-icons-svelte/lib/Close20"; import Close20 from "carbon-icons-svelte/lib/Close20";
import Menu20 from "carbon-icons-svelte/lib/Menu20"; import Menu20 from "carbon-icons-svelte/lib/Menu20";
import { Icon } from "../../Icon"; import { Icon } from "../../Icon";
</script> </script>
<button <button
type="button"
bind:this="{ref}" bind:this="{ref}"
type="button"
title="Open menu" title="Open menu"
aria-label="{ariaLabel}" aria-label="{ariaLabel}"
class:bx--header__action="{true}" class:bx--header__action="{true}"
class:bx--header__menu-trigger="{true}" class:bx--header__menu-trigger="{true}"
class:bx--header__menu-toggle="{true}" class:bx--header__menu-toggle="{true}"
{...$$restProps} {...$$restProps}
transition:fly="{{ x: -200, delay: 50, duration: 250 }}"
on:click on:click
on:click="{() => (isOpen = !isOpen)}" on:click="{() => (isOpen = !isOpen)}"
> >

2
tests/HeaderSwitcher.test.svelte
View file

@ -27,7 +27,7 @@
<SkipToContent /> <SkipToContent />
</div> </div>
<HeaderUtilities> <HeaderUtilities>
<HeaderAction bind:isOpen> <HeaderAction bind:isOpen transition="{false}">
<HeaderPanelLinks> <HeaderPanelLinks>
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider> <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
<HeaderPanelLink>Switcher item 1</HeaderPanelLink> <HeaderPanelLink>Switcher item 1</HeaderPanelLink>

6
tests/HeaderUtilities.test.svelte
View file

@ -20,6 +20,7 @@
Column, Column,
} from "../types"; } from "../types";
import SettingsAdjust20 from "carbon-icons-svelte/lib/SettingsAdjust20"; import SettingsAdjust20 from "carbon-icons-svelte/lib/SettingsAdjust20";
import { quintOut } from "svelte/easing";
let isSideNavOpen = false; let isSideNavOpen = false;
let isOpen = false; let isOpen = false;
@ -32,7 +33,10 @@
<HeaderUtilities> <HeaderUtilities>
<HeaderActionSearch /> <HeaderActionSearch />
<HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust20}" /> <HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust20}" />
<HeaderAction bind:isOpen> <HeaderAction
bind:isOpen
transition="{{ duration: 400, easing: quintOut }}"
>
<HeaderPanelLinks> <HeaderPanelLinks>
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider> <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
<HeaderPanelLink>Switcher item 1</HeaderPanelLink> <HeaderPanelLink>Switcher item 1</HeaderPanelLink>

2
types/Accordion/AccordionItem.d.ts vendored
View file

@ -3,7 +3,7 @@
export interface AccordionItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> { export interface AccordionItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
/** /**
* Specify the title of the accordion item heading * Specify the title of the accordion item heading
* Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>) * Alternatively, use the named slot "title" (e.g., <div slot="title">...</div>)
* @default "title" * @default "title"
*/ */
title?: string; title?: string;

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

@ -47,7 +47,7 @@ export interface ButtonProps
/** /**
* Set to `true` to render a custom HTML element * 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>) * Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>)
* @default false * @default false
*/ */
as?: boolean; as?: boolean;

2
types/CodeSnippet/CodeSnippet.d.ts vendored
View file

@ -9,7 +9,7 @@ export interface CodeSnippetProps {
/** /**
* Set the code snippet text * Set the code snippet text
* Alternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>) * Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)
*/ */
code?: string; code?: string;

2
types/ContentSwitcher/Switch.d.ts vendored
View file

@ -3,7 +3,7 @@
export interface SwitchProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> { export interface SwitchProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
/** /**
* Specify the switch text * Specify the switch text
* Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>) * Alternatively, use the named slot "text" (e.g., <span slot="text">...</span>)
* @default "Provide text" * @default "Provide text"
*/ */
text?: string; text?: string;

2
types/Grid/Column.d.ts vendored
View file

@ -12,7 +12,7 @@ export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
export interface ColumnProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { export interface ColumnProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/** /**
* Set to `true` to render a custom HTML element * 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>) * Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>)
* @default false * @default false
*/ */
as?: boolean; as?: boolean;

2
types/Grid/Grid.d.ts vendored
View file

@ -3,7 +3,7 @@
export interface GridProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { export interface GridProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/** /**
* Set to `true` to render a custom HTML element * 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>) * Props are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>)
* @default false * @default false
*/ */
as?: boolean; as?: boolean;

2
types/Grid/Row.d.ts vendored
View file

@ -3,7 +3,7 @@
export interface RowProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { export interface RowProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/** /**
* Set to `true` to render a custom HTML element * 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>) * Props are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>)
* @default false * @default false
*/ */
as?: boolean; as?: boolean;

2
types/Tabs/Tab.d.ts vendored
View file

@ -3,7 +3,7 @@
export interface TabProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> { export interface TabProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
/** /**
* Specify the tab label * Specify the tab label
* Alternatively, use the default slot (e.g. <Tab><span>Label</span></Tab>) * Alternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>)
* @default "" * @default ""
*/ */
label?: string; label?: string;

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

@ -21,7 +21,7 @@ export interface TooltipProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNa
/** /**
* Specify the icon from `carbon-icons-svelte` to render for the tooltip button * Specify the icon from `carbon-icons-svelte` to render for the tooltip button
* Icon size must be 16px (e.g. `Add16`, `Task16`) * Icon size must be 16px (e.g., `Add16`, `Task16`)
*/ */
icon?: typeof import("carbon-icons-svelte").CarbonIcon; icon?: typeof import("carbon-icons-svelte").CarbonIcon;

2
types/UIShell/GlobalHeader/Header.d.ts vendored
View file

@ -30,7 +30,7 @@ export interface HeaderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNam
/** /**
* Specify the platform name * Specify the platform name
* Alternatively, use the named slot "platform" (e.g. <span slot="platform">...</span>) * Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>)
* @default "" * @default ""
*/ */
platformName?: string; platformName?: string;

15
types/UIShell/GlobalHeader/HeaderAction.d.ts vendored
View file

@ -1,5 +1,11 @@
/// <reference types="svelte" /> /// <reference types="svelte" />
export interface HeaderActionSlideTransition {
delay?: number;
duration?: number;
easing?: (t: number) => number;
}
export interface HeaderActionProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> { export interface HeaderActionProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
/** /**
* Set to `true` to open the panel * Set to `true` to open the panel
@ -14,7 +20,7 @@ export interface HeaderActionProps extends svelte.JSX.HTMLAttributes<HTMLElement
/** /**
* Specify the text * Specify the text
* Alternatively, use the named slot "text" (e.g. <div slot="text">...</div>) * Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>)
*/ */
text?: string; text?: string;
@ -23,6 +29,13 @@ export interface HeaderActionProps extends svelte.JSX.HTMLAttributes<HTMLElement
* @default null * @default null
*/ */
ref?: null | HTMLButtonElement; ref?: null | HTMLButtonElement;
/**
* Customize the panel transition (i.e., `transition:slide`)
* Set to `false` to disable the transition
* @default { duration: 200 }
*/
transition?: false | HeaderActionSlideTransition;
} }
export default class HeaderAction { export default class HeaderAction {