mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

Alignment with Carbon version 10.27 (#495)

Browse source 
* chore(deps-dev): bump devDependencies

* docs: update number of available carbon icons

* feat(notification): distinguish dispatched close event between click/timeout

* fix(notification): prevent class from being overriden by $$restProps

* docs(notification): improve example body copy

* fix(notification): remove notificationType prop

* refactor(notification): resolve svelte file in imports

* fix(notification): prevent class from being overridden by $$restProps

* feat(notification): update TS signature for dispatched close event

* docs: update contributing

* fix(loading): adjust spinner styles

* feat(tag): support custom icon variant

* feat(tile): add optional expand/collapse icon labels to ExpandableTile

* feat(code-snippet): support disabled state for single and multi-line types

* fix(code-snippet): remove impossible class directive

* fix(code-snippet): showMoreLess button size should be "field", not "small"

* fix(password-input): disable visibility button

- set default values for tooltipAlignment, tooltipPosition

* fix(text-input): add missing warning field wrapper class

* feat(button): infer hasIconOnly using $$slots API

- requires Svelte version >=3.25

* docs(button): add danger tertiary, icon-only example

* feat(button): set default values for tooltip alignment, position

* docs: document dynamic theming

* fix(modal): correctly set class props #482

* fix(form): forward submit event in FluidForm #487

* feat(dropdown): support warning state

* feat(multi-select): support warning state

* fix(multi-select): prevent dropdown from opening if disabled

* feat(number-input): support warning state

* chore(deps-dev): upgrade devDependencies

* docs:  bump @carbon/themes, carbon-components

* refactor(data-table): co-locate DataTableSkeleton with DataTable

* docs: update number of pictograms

* fix(password-input): add missing "bx--btn" class to visibility toggle

* docs: increase z-index for component preview
This commit is contained in:
Eric Liu 2021-01-27 13:29:20 -08:00 • committed by GitHub
commit f2a3f8d2e1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
63 changed files with 2104 additions and 529 deletions
Download patch file Download diff file Expand all files Collapse all files

120
COMPONENT_INDEX.md
View file

@ -336,13 +336,13 @@ None.
| 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 |
| hasIconOnly | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the icon-only variant |
| 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 |
| 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> | <code>"center"</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> | <code>"bottom"</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 |
@ -496,6 +496,7 @@ None.
| 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 |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the disabled variant<br />Only applies to the "single", "multi" types |
| 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 |
@ -982,6 +983,8 @@ export interface DropdownItem {
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text | | titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text |
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state | | invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text | | invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text | | helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| label | <code>let</code> | No | <code>string</code> | -- | Specify the list box label | | label | <code>let</code> | No | <code>string</code> | -- | Specify the list box label |
| translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | -- | Override the default translation ids | | translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | -- | Override the default translation ids |
@ -1023,17 +1026,19 @@ 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; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the top-level element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the top-level element |
| tilePadding | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the padding of the tile (number of pixels) | | tilePadding | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the padding of the tile (number of pixels) |
| tileMaxHeight | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the max height of the tile (number of pixels) | | tileMaxHeight | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the max height of the tile (number of pixels) |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand the tile | | expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand the tile |
| 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 |
| tileCollapsedIconText | <code>let</code> | No | <code>string</code> | <code>"Interact to expand Tile"</code> | Specify the icon text of the collapsed tile | | tileCollapsedIconText | <code>let</code> | No | <code>string</code> | <code>"Interact to expand Tile"</code> | Specify the icon text of the collapsed tile |
| tileExpandedIconText | <code>let</code> | No | <code>string</code> | <code>"Interact to collapse Tile"</code> | Specify the icon text of the expanded tile | | tileExpandedIconText | <code>let</code> | No | <code>string</code> | <code>"Interact to collapse Tile"</code> | Specify the icon text of the expanded tile |
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex | | tileExpandedLabel | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon label of the expanded tile |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level div element | | tileCollapsedLabel | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon label of the collapsed tile |
| 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 div element |
### Slots ### Slots
@ -1231,7 +1236,9 @@ None.
### Events ### Events
None. | Event name | Type | Detail |
| :--------- | :-------- | :----- |
| submit | forwarded | -- |
## `Form` ## `Form`
@ -1735,17 +1742,16 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- | | :-------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- |
| notificationType | <code>let</code> | No | <code>"toast" &#124; "inline"</code> | <code>"inline"</code> | Set the type of notification | | kind | <code>let</code> | No | <code>"error" &#124; "info" &#124; "info-square" &#124; "success" &#124; "warning" &#124; "warning-alt"</code> | <code>"error"</code> | Specify the kind of notification |
| kind | <code>let</code> | No | <code>"error" &#124; "info" &#124; "info-square" &#124; "success" &#124; "warning" &#124; "warning-alt"</code> | <code>"error"</code> | Specify the kind of notification | | lowContrast | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the low contrast variant |
| lowContrast | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the low contrast variant | | timeout | <code>let</code> | No | <code>number</code> | <code>0</code> | Set the timeout duration (ms) to hide the notification after opening it |
| timeout | <code>let</code> | No | <code>number</code> | <code>0</code> | Set the timeout duration (ms) to hide the notification after opening it | | role | <code>let</code> | No | <code>string</code> | <code>"alert"</code> | Set the `role` attribute |
| role | <code>let</code> | No | <code>string</code> | <code>"alert"</code> | Set the `role` attribute | | title | <code>let</code> | No | <code>string</code> | <code>"Title"</code> | Specify the title text |
| title | <code>let</code> | No | <code>string</code> | <code>"Title"</code> | Specify the title text | | subtitle | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the subtitle text |
| subtitle | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the subtitle text | | hideCloseButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the close button |
| hideCloseButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the close button | | iconDescription | <code>let</code> | No | <code>string</code> | <code>"Closes notification"</code> | Specify the ARIA label for the icon |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Closes notification"</code> | Specify the ARIA label for the icon |
### Slots ### Slots
@ -1756,13 +1762,13 @@ None.
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :--------- | :----- | | :--------- | :--------- | :-------------------------------- |
| click | forwarded | -- | | close | dispatched | <code>{ timeout: boolean }</code> |
| mouseover | forwarded | -- | | click | forwarded | -- |
| mouseenter | forwarded | -- | | mouseover | forwarded | -- |
| mouseleave | forwarded | -- | | mouseenter | forwarded | -- |
| close | dispatched | -- | | mouseleave | forwarded | -- |
## `Link` ## `Link`
@ -1805,6 +1811,8 @@ None.
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the list box | | disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the list box |
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state | | invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text | | invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
### Slots ### Slots
@ -2150,6 +2158,8 @@ export interface MultiSelectItem {
| useTitleInItem | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to pass the item to `itemToString` in the checkbox | | useTitleInItem | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to pass the item to `itemToString` in the checkbox |
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state | | invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text | | invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text | | helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| label | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the list box label | | label | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the list box label |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component | | id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
@ -2279,6 +2289,8 @@ export type NumberInputTranslationId = "increment" | "decrement";
| iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the increment icons | | iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the increment icons |
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state | | invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text | | invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text | | helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| label | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text | | label | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text | | hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
@ -2505,8 +2517,8 @@ None.
| placeholder | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text | | placeholder | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
| hidePasswordLabel | <code>let</code> | No | <code>string</code> | <code>"Hide password"</code> | Specify the hide password label text | | hidePasswordLabel | <code>let</code> | No | <code>string</code> | <code>"Hide password"</code> | Specify the hide password label text |
| showPasswordLabel | <code>let</code> | No | <code>string</code> | <code>"Show password"</code> | Specify the show password label text | | showPasswordLabel | <code>let</code> | No | <code>string</code> | <code>"Show password"</code> | Specify the show password label text |
| tooltipAlignment | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | -- | Set the alignment of the tooltip relative to the icon | | tooltipAlignment | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment 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 | | tooltipPosition | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the position of the tooltip relative to the icon |
| 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 |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input | | disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text | | helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
@ -3594,6 +3606,7 @@ None.
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable a filterable tag | | disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable a filterable tag |
| 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 |
| title | <code>let</code> | No | <code>string</code> | <code>"Clear filter"</code> | Set the title for the close button in a filterable tag | | title | <code>let</code> | No | <code>string</code> | <code>"Clear filter"</code> | Set the title for the close button in a filterable tag |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the filterable tag | | id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the filterable tag |
### Slots ### Slots
@ -3873,18 +3886,17 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- | | :-------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- |
| notificationType | <code>let</code> | No | <code>"toast" &#124; "inline"</code> | <code>"toast"</code> | Set the type of notification | | kind | <code>let</code> | No | <code>"error" &#124; "info" &#124; "info-square" &#124; "success" &#124; "warning" &#124; "warning-alt"</code> | <code>"error"</code> | Specify the kind of notification |
| kind | <code>let</code> | No | <code>"error" &#124; "info" &#124; "info-square" &#124; "success" &#124; "warning" &#124; "warning-alt"</code> | <code>"error"</code> | Specify the kind of notification | | lowContrast | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the low contrast variant |
| lowContrast | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the low contrast variant | | timeout | <code>let</code> | No | <code>number</code> | <code>0</code> | Set the timeout duration (ms) to hide the notification after opening it |
| timeout | <code>let</code> | No | <code>number</code> | <code>0</code> | Set the timeout duration (ms) to hide the notification after opening it | | role | <code>let</code> | No | <code>string</code> | <code>"alert"</code> | Set the `role` attribute |
| role | <code>let</code> | No | <code>string</code> | <code>"alert"</code> | Set the `role` attribute | | title | <code>let</code> | No | <code>string</code> | <code>"Title"</code> | Specify the title text |
| title | <code>let</code> | No | <code>string</code> | <code>"Title"</code> | Specify the title text | | subtitle | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the subtitle text |
| subtitle | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the subtitle text | | caption | <code>let</code> | No | <code>string</code> | <code>"Caption"</code> | Specify the caption text |
| caption | <code>let</code> | No | <code>string</code> | <code>"Caption"</code> | Specify the caption text | | iconDescription | <code>let</code> | No | <code>string</code> | <code>"Closes notification"</code> | Specify the ARIA label for the icon |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Closes notification"</code> | Specify the ARIA label for the icon | | hideCloseButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the close button |
| hideCloseButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the close button |
### Slots ### Slots
@ -3894,13 +3906,13 @@ None.
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :--------- | :----- | | :--------- | :--------- | :-------------------------------- |
| click | forwarded | -- | | close | dispatched | <code>{ timeout: boolean }</code> |
| mouseover | forwarded | -- | | click | forwarded | -- |
| mouseenter | forwarded | -- | | mouseover | forwarded | -- |
| mouseleave | forwarded | -- | | mouseenter | forwarded | -- |
| close | dispatched | -- | | mouseleave | forwarded | -- |
## `Toggle` ## `Toggle`

12
CONTRIBUTING.md
View file

@ -1,12 +1,10 @@
# Contributing # Contributing
Note: before submitting a pull request (PR), it is recommended to first [file an issue](https://github.com/IBM/carbon-components-svelte/issues). Before submitting a pull request (PR), consider [filing an issue](https://github.com/IBM/carbon-components-svelte/issues) to gain clarity and direction.
## Prerequisites ## Prerequisites
This project requires Node.js (version 12 or greater) and Yarn (version 1 or greater). - [Node.js](https://nodejs.org/en/download/package-manager/) (version >=12)
- [Node.js](https://nodejs.org/en/download/package-manager/)
- [Yarn](https://classic.yarnpkg.com/en/docs/install) - [Yarn](https://classic.yarnpkg.com/en/docs/install)
## Project set-up ## Project set-up
@ -65,6 +63,12 @@ If linked correctly, any change to a component in the `src` folder should be ref
## Development workflow ## Development workflow
Create a topic branch from `master`. Keep your PR focused and branch up-to-date with upstream `master`.
```sh
git checkout -b new-feature
```
Preview changes to components from the `src` folder in the documentation website located in `docs/`. Preview changes to components from the `src` folder in the documentation website located in `docs/`.
In the `docs` folder, run: In the `docs` folder, run:

32
README.md
View file

@ -11,8 +11,8 @@ Design systems facilitate design and development through reuse, consistency, and
The Carbon Svelte portfolio also includes: The Carbon Svelte portfolio also includes:
- **[Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte)**: 5800+ Carbon icons as Svelte components - **[Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte)**: 6000+ Carbon icons as Svelte components
- **[Carbon Pictograms Svelte](https://github.com/IBM/carbon-pictograms-svelte)**: 600+ Carbon pictograms as Svelte components - **[Carbon Pictograms Svelte](https://github.com/IBM/carbon-pictograms-svelte)**: 700+ Carbon pictograms as Svelte components
- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 16 chart types, powered by d3 - **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 16 chart types, powered by d3
## [Documentation](http://ibm.biz/carbon-svelte) ## [Documentation](http://ibm.biz/carbon-svelte)
@ -130,6 +130,34 @@ export default app;
See [webpack.config.js](examples/webpack/webpack.config.js) in [examples/webpack](examples/webpack). See [webpack.config.js](examples/webpack/webpack.config.js) in [examples/webpack](examples/webpack).
#### Dynamic theming
Use `carbon-components-svelte/css/all.css` for dynamic, client-side styling.
Update the theme by setting the `theme` attribute on the `html` element. The default `theme` is `"white"`.
```html
<!DOCTYPE html>
<html lang="en" theme="g10">
<body>
...
</body>
</html>
```
Using JavaScript:
```svelte
<script>
/** @type {"white" | "g10" | "g90" | "g100"} */
let theme = "white";
$: document.documentElement.setAttribute("theme", theme);
</script>
<button on:click="{() => theme = 'g90'}">Update theme</button>
```
### TypeScript support ### TypeScript support
[TypeScript definitions](types) are generated by [sveld](https://github.com/IBM/sveld). [TypeScript definitions](types) are generated by [sveld](https://github.com/IBM/sveld).

4
docs/package.json
View file

@ -9,10 +9,10 @@
"build:svite": "svite build" "build:svite": "svite build"
}, },
"devDependencies": { "devDependencies": {
"@carbon/themes": "^10.22.1", "@carbon/themes": "10.26.0",
"@sveltech/routify": "^1.9.9", "@sveltech/routify": "^1.9.9",
"autoprefixer": "^10.0.1", "autoprefixer": "^10.0.1",
"carbon-components": "^10.25.0", "carbon-components": "10.27.0",
"carbon-components-svelte": "../", "carbon-components-svelte": "../",
"clipboard-copy": "^3.1.0", "clipboard-copy": "^3.1.0",
"mdsvex": "^0.8.8", "mdsvex": "^0.8.8",

353
docs/src/COMPONENT_API.json
View file

@ -547,7 +547,7 @@
"value": "false", "value": "false",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
"reactive": false "reactive": true
}, },
{ {
"name": "icon", "name": "icon",
@ -572,6 +572,7 @@
"kind": "let", "kind": "let",
"description": "Set the alignment of the tooltip relative to the icon\n`hasIconOnly` must be set to `true`", "description": "Set the alignment of the tooltip relative to the icon\n`hasIconOnly` must be set to `true`",
"type": "\"start\" | \"center\" | \"end\"", "type": "\"start\" | \"center\" | \"end\"",
"value": "\"center\"",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
"reactive": false "reactive": false
@ -581,6 +582,7 @@
"kind": "let", "kind": "let",
"description": "Set the position of the tooltip relative to the icon", "description": "Set the position of the tooltip relative to the icon",
"type": "\"top\" | \"right\" | \"bottom\" | \"left\"", "type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
"value": "\"bottom\"",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
"reactive": false "reactive": false
@ -1123,6 +1125,26 @@
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
"reactive": false "reactive": false
},
{
"name": "warn",
"kind": "let",
"description": "Set to `true` to indicate an warning state",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "warnText",
"kind": "let",
"description": "Specify the warning state text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
} }
], ],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
@ -1949,6 +1971,16 @@
"constant": false, "constant": false,
"reactive": false "reactive": false
}, },
{
"name": "disabled",
"kind": "let",
"description": "Set to `true` for the disabled variant\nOnly applies to the \"single\", \"multi\" types",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{ {
"name": "wrapText", "name": "wrapText",
"kind": "let", "kind": "let",
@ -2677,6 +2709,94 @@
], ],
"rest_props": { "type": "InlineComponent", "name": "TableContainer" } "rest_props": { "type": "InlineComponent", "name": "TableContainer" }
}, },
{
"moduleName": "DataTableSkeleton",
"filePath": "/src/DataTable/DataTableSkeleton.svelte",
"props": [
{
"name": "columns",
"kind": "let",
"description": "Specify the number of columns\nSuperseded by `headers` if `headers` is a non-empty array",
"type": "number",
"value": "5",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "rows",
"kind": "let",
"description": "Specify the number of rows",
"type": "number",
"value": "5",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "size",
"kind": "let",
"description": "Set the size of the data table",
"type": "\"compact\" | \"short\" | \"tall\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "zebra",
"kind": "let",
"description": "Set to `true` to apply zebra styles to the datatable rows",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "showHeader",
"kind": "let",
"description": "Set to `false` to hide the header",
"type": "boolean",
"value": "true",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "headers",
"kind": "let",
"description": "Set the column headers\nSupersedes `columns` if value is a non-empty array",
"type": "string[] | Partial<DataTableHeader>[]",
"value": "[]",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "showToolbar",
"kind": "let",
"description": "Set to `false` to hide the toolbar",
"type": "boolean",
"value": "true",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [],
"events": [
{ "type": "forwarded", "name": "click", "element": "table" },
{ "type": "forwarded", "name": "mouseover", "element": "table" },
{ "type": "forwarded", "name": "mouseenter", "element": "table" },
{ "type": "forwarded", "name": "mouseleave", "element": "table" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" },
"extends": {
"interface": "DataTableHeader",
"import": "\"../DataTable/DataTable\""
}
},
{ {
"moduleName": "Toolbar", "moduleName": "Toolbar",
"filePath": "/src/DataTable/Toolbar.svelte", "filePath": "/src/DataTable/Toolbar.svelte",
@ -3284,94 +3404,6 @@
"import": "\"../OverflowMenu/OverflowMenuItem\"" "import": "\"../OverflowMenu/OverflowMenuItem\""
} }
}, },
{
"moduleName": "DataTableSkeleton",
"filePath": "/src/DataTableSkeleton/DataTableSkeleton.svelte",
"props": [
{
"name": "columns",
"kind": "let",
"description": "Specify the number of columns\nSuperseded by `headers` if `headers` is a non-empty array",
"type": "number",
"value": "5",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "rows",
"kind": "let",
"description": "Specify the number of rows",
"type": "number",
"value": "5",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "size",
"kind": "let",
"description": "Set the size of the data table",
"type": "\"compact\" | \"short\" | \"tall\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "zebra",
"kind": "let",
"description": "Set to `true` to apply zebra styles to the datatable rows",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "showHeader",
"kind": "let",
"description": "Set to `false` to hide the header",
"type": "boolean",
"value": "true",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "headers",
"kind": "let",
"description": "Set the column headers\nSupersedes `columns` if value is a non-empty array",
"type": "string[] | Partial<DataTableHeader>[]",
"value": "[]",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "showToolbar",
"kind": "let",
"description": "Set to `false` to hide the toolbar",
"type": "boolean",
"value": "true",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [],
"events": [
{ "type": "forwarded", "name": "click", "element": "table" },
{ "type": "forwarded", "name": "mouseover", "element": "table" },
{ "type": "forwarded", "name": "mouseenter", "element": "table" },
{ "type": "forwarded", "name": "mouseleave", "element": "table" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" },
"extends": {
"interface": "DataTableHeader",
"import": "\"../DataTable/DataTable\""
}
},
{ {
"moduleName": "DatePicker", "moduleName": "DatePicker",
"filePath": "/src/DatePicker/DatePicker.svelte", "filePath": "/src/DatePicker/DatePicker.svelte",
@ -3787,6 +3819,26 @@
"constant": false, "constant": false,
"reactive": false "reactive": false
}, },
{
"name": "warn",
"kind": "let",
"description": "Set to `true` to indicate an warning state",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "warnText",
"kind": "let",
"description": "Specify the warning state text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{ {
"name": "helperText", "name": "helperText",
"kind": "let", "kind": "let",
@ -4494,7 +4546,7 @@
"filePath": "/src/FluidForm/FluidForm.svelte", "filePath": "/src/FluidForm/FluidForm.svelte",
"props": [], "props": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [], "events": [{ "type": "forwarded", "name": "submit", "element": "Form" }],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "InlineComponent", "name": "Form" } "rest_props": { "type": "InlineComponent", "name": "Form" }
}, },
@ -5247,6 +5299,26 @@
"constant": false, "constant": false,
"reactive": false "reactive": false
}, },
{
"name": "warn",
"kind": "let",
"description": "Set to `true` to indicate an warning state",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "warnText",
"kind": "let",
"description": "Specify the warning state text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{ {
"name": "helperText", "name": "helperText",
"kind": "let", "kind": "let",
@ -5679,16 +5751,6 @@
"moduleName": "ToastNotification", "moduleName": "ToastNotification",
"filePath": "/src/Notification/ToastNotification.svelte", "filePath": "/src/Notification/ToastNotification.svelte",
"props": [ "props": [
{
"name": "notificationType",
"kind": "let",
"description": "Set the type of notification",
"type": "\"toast\" | \"inline\"",
"value": "\"toast\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{ {
"name": "kind", "name": "kind",
"kind": "let", "kind": "let",
@ -5782,11 +5844,15 @@
], ],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [ "events": [
{
"type": "dispatched",
"name": "close",
"detail": "{ timeout: boolean }"
},
{ "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" }, { "type": "forwarded", "name": "mouseleave", "element": "div" }
{ "type": "dispatched", "name": "close" }
], ],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "div" } "rest_props": { "type": "Element", "name": "div" }
@ -5795,16 +5861,6 @@
"moduleName": "InlineNotification", "moduleName": "InlineNotification",
"filePath": "/src/Notification/InlineNotification.svelte", "filePath": "/src/Notification/InlineNotification.svelte",
"props": [ "props": [
{
"name": "notificationType",
"kind": "let",
"description": "Set the type of notification",
"type": "\"toast\" | \"inline\"",
"value": "\"inline\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{ {
"name": "kind", "name": "kind",
"kind": "let", "kind": "let",
@ -5891,11 +5947,15 @@
{ "name": "actions", "default": false, "slot_props": "{}" } { "name": "actions", "default": false, "slot_props": "{}" }
], ],
"events": [ "events": [
{
"type": "dispatched",
"name": "close",
"detail": "{ timeout: boolean }"
},
{ "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" }, { "type": "forwarded", "name": "mouseleave", "element": "div" }
{ "type": "dispatched", "name": "close" }
], ],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "div" } "rest_props": { "type": "Element", "name": "div" }
@ -6045,6 +6105,26 @@
"constant": false, "constant": false,
"reactive": false "reactive": false
}, },
{
"name": "warn",
"kind": "let",
"description": "Set to `true` to indicate an warning state",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "warnText",
"kind": "let",
"description": "Specify the warning state text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{ {
"name": "helperText", "name": "helperText",
"kind": "let", "kind": "let",
@ -7732,6 +7812,15 @@
"constant": false, "constant": false,
"reactive": false "reactive": false
}, },
{
"name": "icon",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
"isFunction": false,
"constant": false,
"reactive": false
},
{ {
"name": "id", "name": "id",
"kind": "let", "kind": "let",
@ -8233,6 +8322,7 @@
"kind": "let", "kind": "let",
"description": "Set the alignment of the tooltip relative to the icon", "description": "Set the alignment of the tooltip relative to the icon",
"type": "\"start\" | \"center\" | \"end\"", "type": "\"start\" | \"center\" | \"end\"",
"value": "\"center\"",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
"reactive": false "reactive": false
@ -8242,6 +8332,7 @@
"kind": "let", "kind": "let",
"description": "Set the position of the tooltip relative to the icon", "description": "Set the position of the tooltip relative to the icon",
"type": "\"top\" | \"right\" | \"bottom\" | \"left\"", "type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
"value": "\"bottom\"",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
"reactive": false "reactive": false
@ -8495,6 +8586,26 @@
"constant": false, "constant": false,
"reactive": false "reactive": false
}, },
{
"name": "tileExpandedLabel",
"kind": "let",
"description": "Specify the icon label of the expanded tile",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "tileCollapsedLabel",
"kind": "let",
"description": "Specify the icon label of the collapsed tile",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{ {
"name": "tabindex", "name": "tabindex",
"kind": "let", "kind": "let",
@ -8519,7 +8630,7 @@
"name": "ref", "name": "ref",
"kind": "let", "kind": "let",
"description": "Obtain a reference to the top-level element", "description": "Obtain a reference to the top-level element",
"type": "null | HTMLDivElement", "type": "null | HTMLButtonElement",
"value": "null", "value": "null",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
@ -8531,14 +8642,14 @@
{ "name": "below", "default": false, "slot_props": "{}" } { "name": "below", "default": false, "slot_props": "{}" }
], ],
"events": [ "events": [
{ "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "click", "element": "button" },
{ "type": "forwarded", "name": "keypress", "element": "div" }, { "type": "forwarded", "name": "keypress", "element": "button" },
{ "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "button" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "button" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" } { "type": "forwarded", "name": "mouseleave", "element": "button" }
], ],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "div" } "rest_props": { "type": "Element", "name": "button" }
}, },
{ {
"moduleName": "SelectableTile", "moduleName": "SelectableTile",

2
docs/src/components/Preview.svelte
View file

@ -106,7 +106,7 @@
border: 1px solid var(--cds-ui-03); border: 1px solid var(--cds-ui-03);
border-bottom: 0; border-bottom: 0;
position: relative; position: relative;
z-index: 1; z-index: 9999;
} }
.preview-viewer:not(.framed) { .preview-viewer:not(.framed) {

21
docs/src/pages/components/Button.svx
View file

@ -1,10 +1,7 @@
---
description: High-level description
---
<script> <script>
import { Button } from "carbon-components-svelte"; import { Button } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16"; import Add16 from "carbon-icons-svelte/lib/Add16";
import TrashCan16 from "carbon-icons-svelte/lib/TrashCan16";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
@ -32,6 +29,12 @@ description: High-level description
<Button kind="danger-tertiary">Danger tertiary button</Button> <Button kind="danger-tertiary">Danger tertiary button</Button>
### Danger tertiary, icon-only button
**Note:** you must provide an `iconDescription` for the button tooltip.
<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan16} />
### Danger ghost button ### Danger ghost button
<Button kind="danger-ghost">Danger ghost button</Button> <Button kind="danger-ghost">Danger ghost button</Button>
@ -42,13 +45,15 @@ description: High-level description
### Icon-only button ### Icon-only button
Set `hasIconOnly` to `true` to use the icon-only button variant.
**Note:** you must provide an `iconDescription` for the button tooltip. **Note:** you must provide an `iconDescription` for the button tooltip.
The tooltip position and alignment can be controlled by the `tooltipPosition`, `tooltipAlignment` props, respectively. <Button iconDescription="Tooltip text" icon={Add16} />
<Button hasIconOnly tooltipPosition="bottom" tooltipAlignment="center" iconDescription="Tooltip text" icon={Add16} /> ### Icon-only button (custom tooltip position)
The tooltip position and alignment can be controlled by `tooltipPosition` and `tooltipAlignment`.
<Button tooltipPosition="right" tooltipAlignment="end" iconDescription="Tooltip text" icon={Add16} />
### Link button ### Link button

8
docs/src/pages/components/CodeSnippet.svx
View file

@ -47,6 +47,14 @@ let comment = `
<CodeSnippet type="multi" {code} hideCopyButton /> <CodeSnippet type="multi" {code} hideCopyButton />
### Disabled
The `disabled` prop applies only to the `"single"` and `"multi"` code snippet types.
<CodeSnippet disabled>yarn add -D carbon-components-svelte</CodeSnippet>
<br />
<CodeSnippet disabled type="multi" code="{comment}" />
### Wrapped text ### Wrapped text
`wrapText` only applies to the `"multi"` type. `wrapText` only applies to the `"multi"` type.

12
docs/src/pages/components/Dropdown.svx
View file

@ -51,6 +51,18 @@ Use the `itemToString` prop to format the display of individual items.
{id: "1", text: "Email"}, {id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" /> {id: "2", text: "Fax"}]}" />
### Invalid state
<Dropdown invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Warning state
<Dropdown warn warnText="This contact method is not associated with your account" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Disabled state ### Disabled state
<Dropdown disabled titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"}, <Dropdown disabled titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},

7
docs/src/pages/components/ExpandableTile.svx
View file

@ -26,4 +26,11 @@ source: Tile/ExpandableTile.svelte
<ExpandableTile light> <ExpandableTile light>
<div slot="above" style="height: 10rem">Above the fold content here</div> <div slot="above" style="height: 10rem">Above the fold content here</div>
<div slot="below" style="height: 10rem">Below the fold content here</div> <div slot="below" style="height: 10rem">Below the fold content here</div>
</ExpandableTile>
### With icon labels
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
<div slot="above" style="height: 10rem">Above the fold content here</div>
<div slot="below" style="height: 10rem">Below the fold content here</div>
</ExpandableTile> </ExpandableTile>

30
docs/src/pages/components/InlineNotification.svx
View file

@ -9,15 +9,15 @@ source: Notification/InlineNotification.svelte
### Default (error) ### Default (error)
<InlineNotification on:close /> <InlineNotification title="Error" subtitle="An internal server error occurred." />
### Hidden close button ### Hidden close button
<InlineNotification hideCloseButton kind="warning" title="Upcoming scheduled maintenance" /> <InlineNotification hideCloseButton kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." />
### With actions ### With actions
<InlineNotification kind="warning" title="Upcoming scheduled maintenance"> <InlineNotification kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours.">
<div slot="actions"> <div slot="actions">
<NotificationActionButton>Learn more</NotificationActionButton> <NotificationActionButton>Learn more</NotificationActionButton>
</div> </div>
@ -25,18 +25,18 @@ source: Notification/InlineNotification.svelte
### Notification variants ### Notification variants
<InlineNotification kind="error" /> <InlineNotification kind="error" title="Error" subtitle="An internal server error occurred." />
<InlineNotification kind="info" /> <InlineNotification kind="info" title="New updates" subtitle="Restart to get the latest updates." />
<InlineNotification kind="info-square" /> <InlineNotification kind="info-square" title="New updates" subtitle="Restart to get the latest updates." />
<InlineNotification kind="success" /> <InlineNotification kind="success" title="Success" subtitle="Your settings have been saved." />
<InlineNotification kind="warning" /> <InlineNotification kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." />
<InlineNotification kind="warning-alt" /> <InlineNotification kind="warning-alt" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." />
### Low contrast ### Low contrast
<InlineNotification lowContrast kind="error" /> <InlineNotification lowContrast kind="error" title="Error" subtitle="An internal server error occurred." />
<InlineNotification lowContrast kind="info" /> <InlineNotification lowContrast kind="info" title="New updates" subtitle="Restart to get the latest updates." />
<InlineNotification lowContrast kind="info-square" /> <InlineNotification lowContrast kind="info-square" title="New updates" subtitle="Restart to get the latest updates." />
<InlineNotification lowContrast kind="success" /> <InlineNotification lowContrast kind="success" title="Success" subtitle="Your settings have been saved." />
<InlineNotification lowContrast kind="warning" /> <InlineNotification lowContrast kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." />
<InlineNotification lowContrast kind="warning-alt" /> <InlineNotification lowContrast kind="warning-alt" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." />

24
docs/src/pages/components/MultiSelect.svx
View file

@ -89,4 +89,28 @@ Use the `itemToString` prop to format the display of individual items.
items="{[{id: "0", text: "Slack"}, items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"}, {id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" {id: "2", text: "Fax"}]}"
/>
### Invalid state
<MultiSelect invalid invalidText="A contact method is required" titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
/>
### Warning state
<MultiSelect warn warnText="One or more contact methods are not associated with your account" titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
/>
### Disabled state
<MultiSelect disabled titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
/> />

6
docs/src/pages/components/NumberInput.svx
View file

@ -41,7 +41,11 @@ components: ["NumberInput", "NumberInputSkeleton"]
### Invalid state ### Invalid state
<NumberInput invalid invalidText="An error occurred" label="Clusters" /> <NumberInput invalid invalidText="Invalid value" label="Clusters" />
### Warning state
<NumberInput warn warnText="A high number may impact initial rollout" label="Clusters" value="25" />
### Disabled state ### Disabled state

9
docs/src/pages/components/Tag.svx
View file

@ -1,5 +1,7 @@
<script> <script>
import { Tag } from "carbon-components-svelte"; import { Tag } from "carbon-components-svelte";
import IbmCloud16 from "carbon-icons-svelte/lib/IbmCloud16";
import Document16 from "carbon-icons-svelte/lib/Document16";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
@ -25,6 +27,13 @@
<Tag filter on:click>Filterable</Tag> <Tag filter on:click>Filterable</Tag>
### Custom icon
Note: rendering a custom icon cannnot be used with the filterable variant.
<Tag icon={IbmCloud16}>IBM Cloud</Tag>
<Tag icon={Document16} type="blue">API documentation</Tag>
### Skeleton ### Skeleton
<Tag skeleton /> <Tag skeleton />

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

@ -39,6 +39,10 @@ components: ["TextInput", "TextInputSkeleton"]
<TextInput invalid invalidText="User name is already taken. Please try another." labelText="User name" placeholder="Enter user name..." /> <TextInput invalid invalidText="User name is already taken. Please try another." labelText="User name" placeholder="Enter user name..." />
### Warning state
<TextInput warn warnText="Your user name is different from your log in ID." labelText="User name" placeholder="Enter user name..." />
### Disabled state ### Disabled state
<TextInput disabled labelText="User name" placeholder="Enter user name..." /> <TextInput disabled labelText="User name" placeholder="Enter user name..." />

28
docs/src/pages/components/ToastNotification.svx
View file

@ -9,26 +9,26 @@ source: Notification/ToastNotification.svelte
### Default (error) ### Default (error)
<ToastNotification /> <ToastNotification title="Error" subtitle="An internal server error occurred." caption="[MMM D, YYYY h:mm A]" />
### Hidden close button ### Hidden close button
<ToastNotification hideCloseButton kind="warning" title="Upcoming scheduled maintenance" /> <ToastNotification hideCloseButton kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="[MMM D, YYYY h:mm A]" />
### Notification variants ### Notification variants
<ToastNotification kind="error" /> <ToastNotification kind="error" title="Error" subtitle="An internal server error occurred." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification kind="info" /> <ToastNotification kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification kind="info-square" /> <ToastNotification kind="info-square" title="New updates" subtitle="Restart to get the latest updates." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification kind="success" /> <ToastNotification kind="success" title="Success" subtitle="Your settings have been saved." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification kind="warning" /> <ToastNotification kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification kind="warning-alt" /> <ToastNotification kind="warning-alt" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="[MMM D, YYYY h:mm A]" />
### Low contrast ### Low contrast
<ToastNotification lowContrast kind="error" /> <ToastNotification lowContrast kind="error" title="Error" subtitle="An internal server error occurred." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification lowContrast kind="info" /> <ToastNotification lowContrast kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification lowContrast kind="info-square" /> <ToastNotification lowContrast kind="info-square" title="New updates" subtitle="Restart to get the latest updates." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification lowContrast kind="success" /> <ToastNotification lowContrast kind="success" title="Success" subtitle="Your settings have been saved." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification lowContrast kind="warning" /> <ToastNotification lowContrast kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification lowContrast kind="warning-alt" /> <ToastNotification lowContrast kind="warning-alt" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="[MMM D, YYYY h:mm A]" />

4
docs/src/pages/index.svelte
View file

@ -94,7 +94,7 @@
<TileCard <TileCard
borderBottom borderBottom
title="Carbon Icons Svelte" title="Carbon Icons Svelte"
subtitle="5800+ icons" subtitle="6000+ icons"
target="_blank" target="_blank"
href="https://github.com/IBM/carbon-icons-svelte" href="https://github.com/IBM/carbon-icons-svelte"
/> />
@ -105,7 +105,7 @@
<TileCard <TileCard
borderRight borderRight
title="Carbon Pictograms Svelte" title="Carbon Pictograms Svelte"
subtitle="600+ pictograms" subtitle="700+ pictograms"
target="_blank" target="_blank"
href="https://github.com/IBM/carbon-pictograms-svelte" href="https://github.com/IBM/carbon-pictograms-svelte"
/> />

652
docs/yarn.lock
View file

File diff suppressed because it is too large Load diff

23
package.json
View file

@ -11,39 +11,38 @@
"sideEffects": false, "sideEffects": false,
"scripts": { "scripts": {
"check-types": "svelte-check --workspace tests", "check-types": "svelte-check --workspace tests",
"prettier": "prettier --write './**/*.{svelte,js,md}'",
"publish-examples": "node scripts/publish-examples", "publish-examples": "node scripts/publish-examples",
"build:css": "node scripts/build-css", "build:css": "node scripts/build-css",
"build:lib": "rollup -c", "build:lib": "rollup -c",
"prepack": "run-p build:*" "prepack": "run-p build:*",
"format": "prettier --write './**/*.{svelte,js,md}'"
}, },
"dependencies": { "dependencies": {
"carbon-icons-svelte": "^10.21.0", "carbon-icons-svelte": "^10.21.0",
"flatpickr": "4.6.9" "flatpickr": "4.6.9"
}, },
"devDependencies": { "devDependencies": {
"@carbon/themes": "^10.22.1", "@carbon/themes": "^10.26.0",
"@rollup/plugin-commonjs": "^16.0.0", "@rollup/plugin-commonjs": "^16.0.0",
"@rollup/plugin-node-resolve": "^10.0.0", "@rollup/plugin-node-resolve": "^10.0.0",
"@tsconfig/svelte": "^1.0.10", "@tsconfig/svelte": "^1.0.10",
"autoprefixer": "^9.8.6", "autoprefixer": "^9.8.6",
"carbon-components-10.25": "npm:carbon-components@10.25.0", "carbon-components-10.27": "npm:carbon-components@10.27.0",
"gh-pages": "^3.1.0", "gh-pages": "^3.1.0",
"husky": "^4.3.0", "husky": "^4.3.8",
"lint-staged": "^10.5.1", "lint-staged": "^10.5.3",
"node-sass": "^4.14.1", "node-sass": "^4.14.1",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"postcss": "^7.0.32", "postcss": "^7.0.32",
"prettier": "^2.2.0", "prettier": "^2.2.0",
"prettier-plugin-svelte": "^1.4.1", "prettier-plugin-svelte": "^1.4.1",
"rollup": "^2.33.3", "rollup": "^2.38.0",
"rollup-plugin-svelte": "^6.1.1", "rollup-plugin-svelte": "^7.1.0",
"rollup-plugin-terser": "^7.0.2", "rollup-plugin-terser": "^7.0.2",
"sveld": "0.3.0", "sveld": "0.3.0",
"svelte": "^3.29.7", "svelte": "^3.32.0",
"svelte-check": "^1.1.15", "svelte-check": "^1.1.28",
"svelte-loader": "^2.13.6", "typescript": "^4.1.3"
"typescript": "^4.1.2"
}, },
"husky": { "husky": {
"hooks": { "hooks": {

2
rollup.config.js
View file

@ -18,7 +18,7 @@ export default ["es", "umd"].map((format) => {
}, },
external: Object.keys(pkg.dependencies), external: Object.keys(pkg.dependencies),
plugins: [ plugins: [
svelte(), svelte({ emitCss: false }),
resolve(), resolve(),
commonjs(), commonjs(),
UMD && terser(), UMD && terser(),

12
scripts/build-css.js
View file

@ -18,12 +18,12 @@ const shared = {
$css--default-type: true; $css--default-type: true;
$css--plex: true; $css--plex: true;
@import "node_modules/carbon-components-10.25/scss/globals/scss/_css--reset.scss"; @import "node_modules/carbon-components-10.27/scss/globals/scss/_css--reset.scss";
@import "node_modules/carbon-components-10.25/scss/globals/scss/_css--font-face.scss"; @import "node_modules/carbon-components-10.27/scss/globals/scss/_css--font-face.scss";
@import "node_modules/carbon-components-10.25/scss/globals/scss/_css--helpers.scss"; @import "node_modules/carbon-components-10.27/scss/globals/scss/_css--helpers.scss";
@import "node_modules/carbon-components-10.25/scss/globals/scss/_css--body.scss"; @import "node_modules/carbon-components-10.27/scss/globals/scss/_css--body.scss";
@import "node_modules/carbon-components-10.25/scss/globals/grid/_grid.scss"; @import "node_modules/carbon-components-10.27/scss/globals/grid/_grid.scss";
@import "node_modules/carbon-components-10.25/scss/globals/scss/styles.scss"; @import "node_modules/carbon-components-10.27/scss/globals/scss/styles.scss";
`, `,
components: ``, components: ``,
}; };

10
src/Button/Button.svelte
View file

@ -17,7 +17,10 @@
*/ */
export let size = "default"; export let size = "default";
/** Set to `true` for the icon-only variant */ /**
* Set to `true` for the icon-only variant
* @deprecated inferred using the $$slots API
*/
export let hasIconOnly = false; export let hasIconOnly = false;
/** /**
@ -37,13 +40,13 @@
* `hasIconOnly` must be set to `true` * `hasIconOnly` must be set to `true`
* @type {"start" | "center" | "end"} * @type {"start" | "center" | "end"}
*/ */
export let tooltipAlignment = undefined; export let tooltipAlignment = "center";
/** /**
* Set the position of the tooltip relative to the icon * Set the position of the tooltip relative to the icon
* @type {"top" | "right" | "bottom" | "left"} * @type {"top" | "right" | "bottom" | "left"}
*/ */
export let tooltipPosition = undefined; export let tooltipPosition = "bottom";
/** /**
* Set to `true` to render a custom HTML element * Set to `true` to render a custom HTML element
@ -80,6 +83,7 @@
$: if (ctx && ref) { $: if (ctx && ref) {
ctx.declareRef(ref); ctx.declareRef(ref);
} }
$: hasIconOnly = icon && !$$slots.default;
$: buttonProps = { $: buttonProps = {
role: "button", role: "button",
type: href && !disabled ? undefined : type, type: href && !disabled ? undefined : type,

14
src/CodeSnippet/CodeSnippet.svelte
View file

@ -18,6 +18,12 @@
/** Set to `true` to hide the copy button */ /** Set to `true` to hide the copy button */
export let hideCopyButton = false; export let hideCopyButton = false;
/**
* Set to `true` for the disabled variant
* Only applies to the "single", "multi" types
*/
export let disabled = false;
/** /**
* Set to `true` to wrap the text * Set to `true` to wrap the text
* Note that `type` must be "multi" * Note that `type` must be "multi"
@ -141,7 +147,6 @@
{:else} {:else}
<div <div
class:bx--snippet="{true}" class:bx--snippet="{true}"
class:bx--btn--copy="{type === 'inline'}"
class:bx--snippet--expand="{expanded}" class:bx--snippet--expand="{expanded}"
class:bx--snippet--light="{light}" class:bx--snippet--light="{light}"
class:bx--snippet--no-copy="{hideCopyButton}" class:bx--snippet--no-copy="{hideCopyButton}"
@ -149,6 +154,7 @@
class:bx--snippet--single="{type === 'single'}" class:bx--snippet--single="{type === 'single'}"
class:bx--snippet--inline="{type === 'inline'}" class:bx--snippet--inline="{type === 'inline'}"
class:bx--snippet--multi="{type === 'multi'}" class:bx--snippet--multi="{type === 'multi'}"
class:bx--snippet--disabled="{type !== 'inline' && disabled}"
{...$$restProps} {...$$restProps}
on:mouseover on:mouseover
on:mouseenter on:mouseenter
@ -156,7 +162,7 @@
> >
<div <div
role="{type === 'single' ? 'textbox' : undefined}" role="{type === 'single' ? 'textbox' : undefined}"
tabindex="{type === 'single' ? '0' : undefined}" tabindex="{type === 'single' && !disabled ? '0' : undefined}"
aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}" aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
class:bx--snippet-container="{true}" class:bx--snippet-container="{true}"
> >
@ -168,6 +174,7 @@
</div> </div>
{#if !hideCopyButton} {#if !hideCopyButton}
<CopyButton <CopyButton
disabled="{disabled}"
feedback="{feedback}" feedback="{feedback}"
feedbackTimeout="{feedbackTimeout}" feedbackTimeout="{feedbackTimeout}"
iconDescription="{copyButtonDescription}" iconDescription="{copyButtonDescription}"
@ -178,8 +185,9 @@
{#if showMoreLess} {#if showMoreLess}
<Button <Button
kind="ghost" kind="ghost"
size="small" size="field"
class="bx--snippet-btn--expand" class="bx--snippet-btn--expand"
disabled="{disabled}"
on:click="{() => { on:click="{() => {
expanded = !expanded; expanded = !expanded;
}}" }}"

6
src/ComposedModal/ModalHeader.svelte
View file

@ -31,7 +31,7 @@
<p <p
class:bx--modal-header__label="{true}" class:bx--modal-header__label="{true}"
class:bx--type-delta="{true}" class:bx--type-delta="{true}"
class:labelClass class="{labelClass}"
> >
{label} {label}
</p> </p>
@ -40,7 +40,7 @@
<p <p
class:bx--modal-header__heading="{true}" class:bx--modal-header__heading="{true}"
class:bx--type-beta="{true}" class:bx--type-beta="{true}"
class:titleClass class="{titleClass}"
> >
{title} {title}
</p> </p>
@ -51,7 +51,7 @@
title="{iconDescription}" title="{iconDescription}"
aria-label="{iconDescription}" aria-label="{iconDescription}"
class:bx--modal-close="{true}" class:bx--modal-close="{true}"
class:closeClass class="{closeClass}"
on:click on:click
on:click="{closeModal}" on:click="{closeModal}"
> >

0
src/DataTableSkeleton/DataTableSkeleton.svelte → src/DataTable/DataTableSkeleton.svelte
View file

1
src/DataTable/index.js
View file

@ -1,4 +1,5 @@
export { default as DataTable } from "./DataTable.svelte"; export { default as DataTable } from "./DataTable.svelte";
export { default as DataTableSkeleton } from "./DataTableSkeleton.svelte";
export { default as Table } from "./Table.svelte"; export { default as Table } from "./Table.svelte";
export { default as TableBody } from "./TableBody.svelte"; export { default as TableBody } from "./TableBody.svelte";
export { default as TableCell } from "./TableCell.svelte"; export { default as TableCell } from "./TableCell.svelte";

1
src/DataTableSkeleton/index.js
View file

@ -1 +0,0 @@
export { default as DataTableSkeleton } from "./DataTableSkeleton.svelte";

21
src/Dropdown/Dropdown.svelte
View file

@ -54,6 +54,12 @@
/** Specify the invalid state text */ /** Specify the invalid state text */
export let invalidText = ""; export let invalidText = "";
/** Set to `true` to indicate an warning state */
export let warn = false;
/** Specify the warning state text */
export let warnText = "";
/** Specify the helper text */ /** Specify the helper text */
export let helperText = ""; export let helperText = "";
@ -82,7 +88,8 @@
export let ref = null; export let ref = null;
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16"; import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
import { import {
ListBox, ListBox,
ListBoxMenu, ListBoxMenu,
@ -148,8 +155,7 @@
id="{id}" id="{id}"
name="{name}" name="{name}"
aria-label="{$$props['aria-label']}" aria-label="{$$props['aria-label']}"
class="bx--dropdown {invalid && 'bx--dropdown--invalid'} class="bx--dropdown {invalid && 'bx--dropdown--invalid'} {!invalid && warn && 'bx--dropdown--warning'} {open && 'bx--dropdown--open'}
{open && 'bx--dropdown--open'}
{size === 'sm' && 'bx--dropdown--sm'} {size === 'sm' && 'bx--dropdown--sm'}
{size === 'xl' && 'bx--dropdown--xl'} {size === 'xl' && 'bx--dropdown--xl'}
{inline && 'bx--dropdown--inline'} {inline && 'bx--dropdown--inline'}
@ -163,10 +169,17 @@
invalid="{invalid}" invalid="{invalid}"
invalidText="{invalidText}" invalidText="{invalidText}"
light="{light}" light="{light}"
warn="{warn}"
warnText="{warnText}"
> >
{#if invalid} {#if invalid}
<WarningFilled16 class="bx--list-box__invalid-icon" /> <WarningFilled16 class="bx--list-box__invalid-icon" />
{/if} {/if}
{#if !invalid && warn}
<WarningAltFilled16
class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
/>
{/if}
<button <button
bind:this="{ref}" bind:this="{ref}"
class:bx--list-box__field="{true}" class:bx--list-box__field="{true}"
@ -220,7 +233,7 @@
</ListBoxMenu> </ListBoxMenu>
{/if} {/if}
</ListBox> </ListBox>
{#if !inline && !invalid && helperText} {#if !inline && !invalid && !warn && helperText}
<div <div
class:bx--form__helper-text="{true}" class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}" class:bx--form__helper-text--disabled="{disabled}"

2
src/FluidForm/FluidForm.svelte
View file

@ -5,6 +5,6 @@
setContext("Form", { isFluid: true }); setContext("Form", { isFluid: true });
</script> </script>
<Form {...$$restProps} class="bx--form--fluid {$$restProps.class}"> <Form {...$$restProps} class="bx--form--fluid {$$restProps.class}" on:submit>
<slot /> <slot />
</Form> </Form>

10
src/ListBox/ListBox.svelte
View file

@ -25,6 +25,12 @@
/** Specify the invalid state text */ /** Specify the invalid state text */
export let invalidText = ""; export let invalidText = "";
/** Set to `true` to indicate an warning state */
export let warn = false;
/** Specify the warning state text */
export let warnText = "";
</script> </script>
<div <div
@ -38,6 +44,7 @@
class:bx--list-box--disabled="{disabled}" class:bx--list-box--disabled="{disabled}"
class:bx--list-box--expanded="{open}" class:bx--list-box--expanded="{open}"
class:bx--list-box--light="{light}" class:bx--list-box--light="{light}"
class:bx--list-box--warning="{!invalid && warn}"
{...$$restProps} {...$$restProps}
on:keydown on:keydown
on:keydown="{(e) => { on:keydown="{(e) => {
@ -52,3 +59,6 @@
{#if invalid} {#if invalid}
<div class:bx--form-requirement="{true}">{invalidText}</div> <div class:bx--form-requirement="{true}">{invalidText}</div>
{/if} {/if}
{#if !invalid && warn}
<div class:bx--form-requirement="{true}">{warnText}</div>
{/if}

22
src/Loading/Loading.svelte
View file

@ -14,7 +14,7 @@
/** Set an id for the label element */ /** Set an id for the label element */
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
$: spinnerRadius = small ? "26.8125" : "37.5"; $: spinnerRadius = small ? "42" : "44";
</script> </script>
{#if withOverlay} {#if withOverlay}
@ -33,20 +33,20 @@
> >
<!-- svelte-ignore a11y-label-has-associated-control --> <!-- svelte-ignore a11y-label-has-associated-control -->
<label class:bx--visually-hidden="{true}" id="{id}">{description}</label> <label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
<svg class:bx--loading__svg="{true}" viewBox="-75 -75 150 150"> <svg class:bx--loading__svg="{true}" viewBox="0 0 100 100">
<title>{description}</title> <title>{description}</title>
{#if small} {#if small}
<circle <circle
class:bx--loading__background="{true}" class:bx--loading__background="{true}"
cx="0" cx="50%"
cy="0" cy="50%"
r="{spinnerRadius}" r="{spinnerRadius}"
></circle> ></circle>
{/if} {/if}
<circle <circle
class:bx--loading__stroke="{true}" class:bx--loading__stroke="{true}"
cx="0" cx="50%"
cy="0" cy="50%"
r="{spinnerRadius}" r="{spinnerRadius}"
></circle> ></circle>
</svg> </svg>
@ -64,20 +64,20 @@
> >
<!-- svelte-ignore a11y-label-has-associated-control --> <!-- svelte-ignore a11y-label-has-associated-control -->
<label class:bx--visually-hidden="{true}" id="{id}">{description}</label> <label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
<svg class:bx--loading__svg="{true}" viewBox="-75 -75 150 150"> <svg class:bx--loading__svg="{true}" viewBox="0 0 100 100">
<title>{description}</title> <title>{description}</title>
{#if small} {#if small}
<circle <circle
class:bx--loading__background="{true}" class:bx--loading__background="{true}"
cx="0" cx="50%"
cy="0" cy="50%"
r="{spinnerRadius}" r="{spinnerRadius}"
></circle> ></circle>
{/if} {/if}
<circle <circle
class:bx--loading__stroke="{true}" class:bx--loading__stroke="{true}"
cx="0" cx="50%"
cy="0" cy="50%"
r="{spinnerRadius}" r="{spinnerRadius}"
></circle> ></circle>
</svg> </svg>

21
src/MultiSelect/MultiSelect.svelte
View file

@ -90,6 +90,12 @@
/** Specify the invalid state text */ /** Specify the invalid state text */
export let invalidText = ""; export let invalidText = "";
/** Set to `true` to indicate an warning state */
export let warn = false;
/** Specify the warning state text */
export let warnText = "";
/** Specify the helper text */ /** Specify the helper text */
export let helperText = ""; export let helperText = "";
@ -112,8 +118,9 @@
*/ */
import { afterUpdate, createEventDispatcher, setContext } from "svelte"; import { afterUpdate, createEventDispatcher, setContext } from "svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16"; import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
import { Checkbox } from "../Checkbox"; import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
import Checkbox from "../Checkbox/Checkbox.svelte";
import { import {
ListBox, ListBox,
ListBoxField, ListBoxField,
@ -243,6 +250,8 @@
open="{open}" open="{open}"
light="{light}" light="{light}"
size="{size}" size="{size}"
warn="{warn}"
warnText="{warnText}"
class="bx--multi-select {filterable && 'bx--combo-box'} class="bx--multi-select {filterable && 'bx--combo-box'}
{filterable && 'bx--multi-select--filterable'} {filterable && 'bx--multi-select--filterable'}
{invalid && 'bx--multi-select--invalid'} {invalid && 'bx--multi-select--invalid'}
@ -252,11 +261,17 @@
{#if invalid} {#if invalid}
<WarningFilled16 class="bx--list-box__invalid-icon" /> <WarningFilled16 class="bx--list-box__invalid-icon" />
{/if} {/if}
{#if !invalid && warn}
<WarningAltFilled16
class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
/>
{/if}
<ListBoxField <ListBoxField
role="button" role="button"
tabindex="0" tabindex="0"
aria-expanded="{open}" aria-expanded="{open}"
on:click="{() => { on:click="{() => {
if (disabled) return;
if (filterable) { if (filterable) {
open = true; open = true;
inputRef.focus(); inputRef.focus();
@ -415,7 +430,7 @@
</ListBoxMenu> </ListBoxMenu>
{/if} {/if}
</ListBox> </ListBox>
{#if !inline && !invalid && helperText} {#if !inline && !invalid && !warn && helperText}
<div <div
class:bx--form__helper-text="{true}" class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}" class:bx--form__helper-text--disabled="{disabled}"

23
src/Notification/InlineNotification.svelte
View file

@ -1,9 +1,7 @@
<script> <script>
/** /**
* Set the type of notification * @event {{ timeout: boolean }} close
* @type {"toast" | "inline"}
*/ */
export let notificationType = "inline";
/** /**
* Specify the kind of notification * Specify the kind of notification
@ -42,14 +40,14 @@
let open = true; let open = true;
let timeoutId = undefined; let timeoutId = undefined;
function close() { function close(closeFromTimeout) {
open = false; open = false;
dispatch("close"); dispatch("close", { timeout: closeFromTimeout === true });
} }
onMount(() => { onMount(() => {
if (timeout) { if (timeout) {
timeoutId = setTimeout(() => close(), timeout); timeoutId = setTimeout(() => close(true), timeout);
} }
return () => { return () => {
@ -65,7 +63,12 @@
class:bx--inline-notification="{true}" class:bx--inline-notification="{true}"
class:bx--inline-notification--low-contrast="{lowContrast}" class:bx--inline-notification--low-contrast="{lowContrast}"
class:bx--inline-notification--hide-close-button="{hideCloseButton}" class:bx--inline-notification--hide-close-button="{hideCloseButton}"
class="{kind && `bx--inline-notification--${kind}`}" class:bx--inline-notification--error="{kind === 'error'}"
class:bx--inline-notification--info="{kind === 'info'}"
class:bx--inline-notification--info-square="{kind === 'info-square'}"
class:bx--inline-notification--success="{kind === 'success'}"
class:bx--inline-notification--warning="{kind === 'warning'}"
class:bx--inline-notification--warning-alt="{kind === 'warning-alt'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
@ -74,14 +77,14 @@
> >
<div class:bx--inline-notification__details="{true}"> <div class:bx--inline-notification__details="{true}">
<NotificationIcon <NotificationIcon
notificationType="{notificationType}" notificationType="inline"
kind="{kind}" kind="{kind}"
iconDescription="{iconDescription}" iconDescription="{iconDescription}"
/> />
<NotificationTextDetails <NotificationTextDetails
title="{title}" title="{title}"
subtitle="{subtitle}" subtitle="{subtitle}"
notificationType="{notificationType}" notificationType="inline"
> >
<slot /> <slot />
</NotificationTextDetails> </NotificationTextDetails>
@ -90,7 +93,7 @@
{#if !hideCloseButton} {#if !hideCloseButton}
<NotificationButton <NotificationButton
iconDescription="{iconDescription}" iconDescription="{iconDescription}"
notificationType="{notificationType}" notificationType="inline"
on:click="{close}" on:click="{close}"
/> />
{/if} {/if}

4
src/Notification/NotificationActionButton.svelte
View file

@ -1,12 +1,12 @@
<script> <script>
import { Button } from "../Button"; import Button from "../Button/Button.svelte";
</script> </script>
<Button <Button
kind="ghost" kind="ghost"
size="small" size="small"
class="bx--inline-notification__action-button"
{...$$restProps} {...$$restProps}
class="bx--inline-notification__action-button {$$restProps.class}"
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter

5
src/Notification/NotificationButton.svelte
View file

@ -20,7 +20,7 @@
/** Specify the ARIA label for the icon */ /** Specify the ARIA label for the icon */
export let iconDescription = "Close icon"; export let iconDescription = "Close icon";
import Close20 from "carbon-icons-svelte/lib/Close20"; import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
</script> </script>
<button <button
@ -38,7 +38,6 @@
<svelte:component <svelte:component
this="{renderIcon}" this="{renderIcon}"
title="{title}" title="{title}"
class="{notificationType === 'toast' && 'bx--toast-notification__close-icon'} class="bx--{notificationType}-notification__close-icon"
{notificationType === 'inline' && 'bx--inline-notification__close-icon'}"
/> />
</button> </button>

12
src/Notification/NotificationIcon.svelte
View file

@ -14,12 +14,12 @@
/** Specify the ARIA label for the icon */ /** Specify the ARIA label for the icon */
export let iconDescription = "Closes notification"; export let iconDescription = "Closes notification";
import CheckmarkFilled20 from "carbon-icons-svelte/lib/CheckmarkFilled20"; import CheckmarkFilled20 from "carbon-icons-svelte/lib/CheckmarkFilled20/CheckmarkFilled20.svelte";
import ErrorFilled20 from "carbon-icons-svelte/lib/ErrorFilled20"; import ErrorFilled20 from "carbon-icons-svelte/lib/ErrorFilled20/ErrorFilled20.svelte";
import InformationFilled20 from "carbon-icons-svelte/lib/InformationFilled20"; import InformationFilled20 from "carbon-icons-svelte/lib/InformationFilled20/InformationFilled20.svelte";
import InformationSquareFilled20 from "carbon-icons-svelte/lib/InformationSquareFilled20"; import InformationSquareFilled20 from "carbon-icons-svelte/lib/InformationSquareFilled20/InformationSquareFilled20.svelte";
import WarningFilled20 from "carbon-icons-svelte/lib/WarningFilled20"; import WarningFilled20 from "carbon-icons-svelte/lib/WarningFilled20/WarningFilled20.svelte";
import WarningAltFilled20 from "carbon-icons-svelte/lib/WarningAltFilled20"; import WarningAltFilled20 from "carbon-icons-svelte/lib/WarningAltFilled20/WarningAltFilled20.svelte";
const icons = { const icons = {
error: ErrorFilled20, error: ErrorFilled20,

25
src/Notification/ToastNotification.svelte
View file

@ -1,9 +1,7 @@
<script> <script>
/** /**
* Set the type of notification * @event {{ timeout: boolean }} close
* @type {"toast" | "inline"}
*/ */
export let notificationType = "toast";
/** /**
* Specify the kind of notification * Specify the kind of notification
@ -45,14 +43,14 @@
let open = true; let open = true;
let timeoutId = undefined; let timeoutId = undefined;
function close() { function close(closeFromTimeout) {
open = false; open = false;
dispatch("close"); dispatch("close", { timeout: closeFromTimeout === true });
} }
onMount(() => { onMount(() => {
if (timeout) { if (timeout) {
timeoutId = setTimeout(() => close(), timeout); timeoutId = setTimeout(() => close(true), timeout);
} }
return () => { return () => {
@ -67,30 +65,29 @@
kind="{kind}" kind="{kind}"
class:bx--toast-notification="{true}" class:bx--toast-notification="{true}"
class:bx--toast-notification--low-contrast="{lowContrast}" class:bx--toast-notification--low-contrast="{lowContrast}"
class="{kind && `bx--toast-notification--${kind}`}" class:bx--toast-notification--error="{kind === 'error'}"
class:bx--toast-notification--info="{kind === 'info'}"
class:bx--toast-notification--info-square="{kind === 'info-square'}"
class:bx--toast-notification--success="{kind === 'success'}"
class:bx--toast-notification--warning="{kind === 'warning'}"
class:bx--toast-notification--warning-alt="{kind === 'warning-alt'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
<NotificationIcon <NotificationIcon kind="{kind}" iconDescription="{iconDescription}" />
notificationType="{notificationType}"
kind="{kind}"
iconDescription="{iconDescription}"
/>
<NotificationTextDetails <NotificationTextDetails
title="{title}" title="{title}"
subtitle="{subtitle}" subtitle="{subtitle}"
caption="{caption}" caption="{caption}"
notificationType="{notificationType}"
> >
<slot /> <slot />
</NotificationTextDetails> </NotificationTextDetails>
{#if !hideCloseButton} {#if !hideCloseButton}
<NotificationButton <NotificationButton
iconDescription="{iconDescription}" iconDescription="{iconDescription}"
notificationType="{notificationType}"
on:click="{close}" on:click="{close}"
/> />
{/if} {/if}

27
src/NumberInput/NumberInput.svelte
View file

@ -55,6 +55,12 @@
/** Specify the invalid state text */ /** Specify the invalid state text */
export let invalidText = ""; export let invalidText = "";
/** Set to `true` to indicate an warning state */
export let warn = false;
/** Specify the warning state text */
export let warnText = "";
/** Specify the helper text */ /** Specify the helper text */
export let helperText = ""; export let helperText = "";
@ -95,6 +101,7 @@
import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph/CaretDownGlyph.svelte"; import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph/CaretDownGlyph.svelte";
import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph/CaretUpGlyph.svelte"; import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph/CaretUpGlyph.svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte"; import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
const defaultTranslations = { const defaultTranslations = {
[translationIds.increment]: "Increment number", [translationIds.increment]: "Increment number",
@ -161,7 +168,10 @@
<slot name="label">{label}</slot> <slot name="label">{label}</slot>
</label> </label>
{/if} {/if}
<div class:bx--number__input-wrapper="{true}"> <div
class:bx--number__input-wrapper="{true}"
class:bx--number__input-wrapper--warning="{!invalid && warn}"
>
<button <button
type="button" type="button"
aria-live="polite" aria-live="polite"
@ -222,7 +232,10 @@
<slot name="label">{label}</slot> <slot name="label">{label}</slot>
</label> </label>
{/if} {/if}
<div class:bx--number__input-wrapper="{true}"> <div
class:bx--number__input-wrapper="{true}"
class:bx--number__input-wrapper--warning="{!invalid && warn}"
>
<input <input
bind:this="{ref}" bind:this="{ref}"
type="number" type="number"
@ -246,6 +259,11 @@
{#if invalid} {#if invalid}
<WarningFilled16 class="bx--number__invalid" /> <WarningFilled16 class="bx--number__invalid" />
{/if} {/if}
{#if !invalid && warn}
<WarningAltFilled16
class="bx--number__invalid bx--number__invalid--warning"
/>
{/if}
<div class:bx--number__controls="{true}"> <div class:bx--number__controls="{true}">
<button <button
type="button" type="button"
@ -280,7 +298,7 @@
</div> </div>
</div> </div>
{/if} {/if}
{#if !error && helperText} {#if !error && !warn && helperText}
<div <div
class:bx--form__helper-text="{true}" class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}" class:bx--form__helper-text--disabled="{disabled}"
@ -293,5 +311,8 @@
{invalidText} {invalidText}
</div> </div>
{/if} {/if}
{#if !error && warn}
<div id="{errorId}" class:bx--form-requirement="{true}">{warnText}</div>
{/if}
</div> </div>
</div> </div>

22
src/Tag/Tag.svelte
View file

@ -19,6 +19,12 @@
/** Set the title for the close button in a filterable tag */ /** Set the title for the close button in a filterable tag */
export let title = "Clear filter"; export let title = "Clear filter";
/**
* Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte").CarbonIcon}
*/
export let icon = undefined;
/** Set an id for the filterable tag */ /** Set an id for the filterable tag */
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
@ -53,6 +59,7 @@
class:bx--tag--cool-gray="{type === 'cool-gray'}" class:bx--tag--cool-gray="{type === 'cool-gray'}"
class:bx--tag--warm-gray="{type === 'warm-gray'}" class:bx--tag--warm-gray="{type === 'warm-gray'}"
class:bx--tag--high-contrast="{type === 'high-contrast'}" class:bx--tag--high-contrast="{type === 'high-contrast'}"
{...$$restProps}
> >
<slot props="{{ class: 'bx--tag__label' }}"> <slot props="{{ class: 'bx--tag__label' }}">
<span class:bx--tag__label="{true}">{type}</span> <span class:bx--tag__label="{true}">{type}</span>
@ -71,7 +78,8 @@
</button> </button>
</div> </div>
{:else} {:else}
<span <div
id="{id}"
class:bx--tag="{true}" class:bx--tag="{true}"
class:bx--tag--disabled="{disabled}" class:bx--tag--disabled="{disabled}"
class:bx--tag--red="{type === 'red'}" class:bx--tag--red="{type === 'red'}"
@ -85,12 +93,20 @@
class:bx--tag--cool-gray="{type === 'cool-gray'}" class:bx--tag--cool-gray="{type === 'cool-gray'}"
class:bx--tag--warm-gray="{type === 'warm-gray'}" class:bx--tag--warm-gray="{type === 'warm-gray'}"
class:bx--tag--high-contrast="{type === 'high-contrast'}" class:bx--tag--high-contrast="{type === 'high-contrast'}"
{...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
<slot /> {#if icon}
</span> <div class:bx--tag__custom-icon="{true}">
<svelte:component this="{icon}" />
</div>
{/if}
<span>
<slot />
</span>
</div>
{/if} {/if}
{/if} {/if}

23
src/TextInput/PasswordInput.svelte
View file

@ -30,13 +30,13 @@
* Set the alignment of the tooltip relative to the icon * Set the alignment of the tooltip relative to the icon
* @type {"start" | "center" | "end"} * @type {"start" | "center" | "end"}
*/ */
export let tooltipAlignment = undefined; export let tooltipAlignment = "center";
/** /**
* Set the position of the tooltip relative to the icon * Set the position of the tooltip relative to the icon
* @type {"top" | "right" | "bottom" | "left"} * @type {"top" | "right" | "bottom" | "left"}
*/ */
export let tooltipPosition = undefined; export let tooltipPosition = "bottom";
/** Set to `true` to enable the light variant */ /** Set to `true` to enable the light variant */
export let light = false; export let light = false;
@ -72,9 +72,9 @@
export let ref = null; export let ref = null;
import { getContext } from "svelte"; import { getContext } from "svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16"; import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
import View16 from "carbon-icons-svelte/lib/View16"; import View16 from "carbon-icons-svelte/lib/View16/View16.svelte";
import ViewOff16 from "carbon-icons-svelte/lib/ViewOff16"; import ViewOff16 from "carbon-icons-svelte/lib/ViewOff16/ViewOff16.svelte";
const ctx = getContext("Form"); const ctx = getContext("Form");
@ -136,8 +136,11 @@
/> />
<button <button
type="button" type="button"
disabled="{disabled}"
class:bx--text-input--password__visibility__toggle="{true}" class:bx--text-input--password__visibility__toggle="{true}"
class:bx--btn="{true}"
class:bx--btn--icon-only="{true}" class:bx--btn--icon-only="{true}"
class:bx--btn--disabled="{disabled}"
class:bx--tooltip__trigger="{true}" class:bx--tooltip__trigger="{true}"
class:bx--tooltip--a11y="{true}" class:bx--tooltip--a11y="{true}"
class="{tooltipPosition && `bx--tooltip--${tooltipPosition}`} class="{tooltipPosition && `bx--tooltip--${tooltipPosition}`}
@ -146,9 +149,13 @@
type = type === 'password' ? 'text' : 'password'; type = type === 'password' ? 'text' : 'password';
}}" }}"
> >
<span class:bx--assistive-text="{true}"> {#if !disabled}
{#if type === 'text'}{hidePasswordLabel}{:else}{showPasswordLabel}{/if} <span class:bx--assistive-text="{true}">
</span> {#if type === 'text'}
{hidePasswordLabel}
{:else}{showPasswordLabel}{/if}
</span>
{/if}
{#if type === 'text'} {#if type === 'text'}
<ViewOff16 class="bx--icon-visibility-off" /> <ViewOff16 class="bx--icon-visibility-off" />
{:else} {:else}

5
src/TextInput/TextInput.svelte
View file

@ -63,8 +63,8 @@
export let inline = false; export let inline = false;
import { getContext } from "svelte"; import { getContext } from "svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16"; import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16"; import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
const ctx = getContext("Form"); const ctx = getContext("Form");
@ -127,6 +127,7 @@
data-invalid="{invalid || undefined}" data-invalid="{invalid || undefined}"
data-warn="{warn || undefined}" data-warn="{warn || undefined}"
class:bx--text-input__field-wrapper="{true}" class:bx--text-input__field-wrapper="{true}"
class:bx--text-input__field-wrapper--warning="{!invalid && warn}"
> >
{#if invalid} {#if invalid}
<WarningFilled16 class="bx--text-input__invalid-icon" /> <WarningFilled16 class="bx--text-input__invalid-icon" />

46
src/Tile/ExpandableTile.svelte
View file

@ -17,6 +17,12 @@
/** Specify the icon text of the expanded tile */ /** Specify the icon text of the expanded tile */
export let tileExpandedIconText = "Interact to collapse Tile"; export let tileExpandedIconText = "Interact to collapse Tile";
/** Specify the icon label of the expanded tile */
export let tileExpandedLabel = "";
/** Specify the icon label of the collapsed tile */
export let tileCollapsedLabel = "";
/** Specify the tabindex */ /** Specify the tabindex */
export let tabindex = "0"; export let tabindex = "0";
@ -27,7 +33,7 @@
export let ref = null; export let ref = null;
import { afterUpdate } from "svelte"; import { afterUpdate } from "svelte";
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16"; import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
let refContent = null; let refContent = null;
let refAbove = null; let refAbove = null;
@ -45,10 +51,13 @@
}); });
</script> </script>
<div <button
bind:this="{ref}" bind:this="{ref}"
type="button"
id="{id}" id="{id}"
aria-expanded="{expanded}"
tabindex="{tabindex}" tabindex="{tabindex}"
title="{expanded ? tileExpandedIconText : tileCollapsedIconText}"
class:bx--tile="{true}" class:bx--tile="{true}"
class:bx--tile--expandable="{true}" class:bx--tile--expandable="{true}"
class:bx--tile--is-expanded="{expanded}" class:bx--tile--is-expanded="{expanded}"
@ -60,45 +69,24 @@
expanded = !expanded; expanded = !expanded;
}}" }}"
on:keypress on:keypress
on:keypress="{(e) => {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
expanded = !expanded;
}
}}"
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
<div bind:this="{refContent}"> <div bind:this="{refContent}">
<div bind:this="{refAbove}" class:bx--tile-content="{true}"> <div bind:this="{refAbove}" class:bx--tile-content="{true}">
<span <span class:bx--tile-content__above-the-fold="{true}">
class:bx--tile-content__above-the-fold="{true}"
on:click
on:mouseover
on:mouseenter
on:mouseleave
>
<slot name="above" /> <slot name="above" />
</span> </span>
</div> </div>
<button <div class:bx--tile__chevron="{true}">
aria-expanded="{expanded}" <span>{expanded ? tileExpandedLabel : tileCollapsedLabel}</span>
aria-label="{expanded ? tileExpandedIconText : tileCollapsedIconText}"
class:bx--tile__chevron="{true}"
>
<ChevronDown16 /> <ChevronDown16 />
</button> </div>
<div class:bx--tile-content="{true}"> <div class:bx--tile-content="{true}">
<span <span class:bx--tile-content__below-the-fold="{true}">
on:click
on:mouseover
on:mouseenter
on:mouseleave
class:bx--tile-content__below-the-fold="{true}"
>
<slot name="below" /> <slot name="below" />
</span> </span>
</div> </div>
</div> </div>
</div> </button>

2
src/index.js
View file

@ -16,6 +16,7 @@ export {
export { CodeSnippet, CodeSnippetSkeleton } from "./CodeSnippet"; export { CodeSnippet, CodeSnippetSkeleton } from "./CodeSnippet";
export { export {
DataTable, DataTable,
DataTableSkeleton,
Table, Table,
TableBody, TableBody,
TableCell, TableCell,
@ -30,7 +31,6 @@ export {
ToolbarMenu, ToolbarMenu,
ToolbarMenuItem, ToolbarMenuItem,
} from "./DataTable"; } from "./DataTable";
export { DataTableSkeleton } from "./DataTableSkeleton";
export { DatePicker, DatePickerInput, DatePickerSkeleton } from "./DatePicker"; export { DatePicker, DatePickerInput, DatePickerSkeleton } from "./DatePicker";
export { Dropdown, DropdownSkeleton } from "./Dropdown"; export { Dropdown, DropdownSkeleton } from "./Dropdown";
export { export {

2
tests/CodeSnippet.test.svelte
View file

@ -47,4 +47,4 @@ export function subtract(a: number, b: number) {
<CodeSnippet skeleton /> <CodeSnippet skeleton />
<CodeSnippet type="multi" skeleton /> <CodeSnippet type="multi" disabled skeleton />

6
tests/ExpandableTile.test.svelte
View file

@ -12,7 +12,11 @@
<div slot="below" style="height: 10rem">Below the fold content here</div> <div slot="below" style="height: 10rem">Below the fold content here</div>
</ExpandableTile> </ExpandableTile>
<ExpandableTile light> <ExpandableTile
light
tileExpandedLabel="View less"
tileCollapsedLabel="View more"
>
<div slot="above" style="height: 10rem">Above the fold content here</div> <div slot="above" style="height: 10rem">Above the fold content here</div>
<div slot="below" style="height: 10rem">Below the fold content here</div> <div slot="below" style="height: 10rem">Below the fold content here</div>
</ExpandableTile> </ExpandableTile>

3
tests/InlineNotification.test.svelte
View file

@ -8,6 +8,9 @@
hideCloseButton hideCloseButton
kind="warning" kind="warning"
title="Upcoming scheduled maintenance" title="Upcoming scheduled maintenance"
on:close="{(e) => {
console.log(e.detail.timeout);
}}"
/> />
<InlineNotification kind="warning" title="Upcoming scheduled maintenance"> <InlineNotification kind="warning" title="Upcoming scheduled maintenance">

3
tests/Tag.test.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Tag } from "../types"; import { Tag } from "../types";
import Add16 from "carbon-icons-svelte/lib/Add16";
</script> </script>
<Tag class="my-class" style="margin: 1rem;">IBM Cloud</Tag> <Tag class="my-class" style="margin: 1rem;">IBM Cloud</Tag>
@ -28,4 +29,6 @@
<Tag filter on:click>Filterable</Tag> <Tag filter on:click>Filterable</Tag>
<Tag icon="{Add16}">Custom icon</Tag>
<Tag skeleton /> <Tag skeleton />

3
tests/ToastNotification.test.svelte
View file

@ -8,6 +8,9 @@
hideCloseButton hideCloseButton
kind="warning" kind="warning"
title="Upcoming scheduled maintenance" title="Upcoming scheduled maintenance"
on:close="{(e) => {
console.log(e.detail.timeout);
}}"
/> />
<ToastNotification kind="error" /> <ToastNotification kind="error" />

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

@ -37,11 +37,13 @@ export interface ButtonProps
/** /**
* Set the alignment of the tooltip relative to the icon * Set the alignment of the tooltip relative to the icon
* `hasIconOnly` must be set to `true` * `hasIconOnly` must be set to `true`
* @default "center"
*/ */
tooltipAlignment?: "start" | "center" | "end"; tooltipAlignment?: "start" | "center" | "end";
/** /**
* Set the position of the tooltip relative to the icon * Set the position of the tooltip relative to the icon
* @default "bottom"
*/ */
tooltipPosition?: "top" | "right" | "bottom" | "left"; tooltipPosition?: "top" | "right" | "bottom" | "left";

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

@ -25,6 +25,13 @@ export interface CodeSnippetProps {
*/ */
hideCopyButton?: boolean; hideCopyButton?: boolean;
/**
* Set to `true` for the disabled variant
* Only applies to the "single", "multi" types
* @default false
*/
disabled?: boolean;
/** /**
* Set to `true` to wrap the text * Set to `true` to wrap the text
* Note that `type` must be "multi" * Note that `type` must be "multi"

0
types/DataTableSkeleton/DataTableSkeleton.d.ts → types/DataTable/DataTableSkeleton.d.ts vendored
View file

12
types/Dropdown/Dropdown.d.ts vendored
View file

@ -81,6 +81,18 @@ export interface DropdownProps extends svelte.JSX.HTMLAttributes<HTMLElementTagN
*/ */
invalidText?: string; invalidText?: string;
/**
* Set to `true` to indicate an warning state
* @default false
*/
warn?: boolean;
/**
* Specify the warning state text
* @default ""
*/
warnText?: string;
/** /**
* Specify the helper text * Specify the helper text
* @default "" * @default ""

1
types/FluidForm/FluidForm.d.ts vendored
View file

@ -8,5 +8,6 @@ export default class FluidForm {
default: {}; default: {};
}; };
$on(eventname: "submit", cb: (event: WindowEventMap["submit"]) => void): () => void;
$on(eventname: string, cb: (event: Event) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void;
} }

12
types/ListBox/ListBox.d.ts vendored
View file

@ -41,6 +41,18 @@ export interface ListBoxProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNa
* @default "" * @default ""
*/ */
invalidText?: string; invalidText?: string;
/**
* Set to `true` to indicate an warning state
* @default false
*/
warn?: boolean;
/**
* Specify the warning state text
* @default ""
*/
warnText?: string;
} }
export default class ListBox { export default class ListBox {

12
types/MultiSelect/MultiSelect.d.ts vendored
View file

@ -130,6 +130,18 @@ export interface MultiSelectProps extends svelte.JSX.HTMLAttributes<HTMLElementT
*/ */
invalidText?: string; invalidText?: string;
/**
* Set to `true` to indicate an warning state
* @default false
*/
warn?: boolean;
/**
* Specify the warning state text
* @default ""
*/
warnText?: string;
/** /**
* Specify the helper text * Specify the helper text
* @default "" * @default ""

8
types/Notification/InlineNotification.d.ts vendored
View file

@ -1,12 +1,6 @@
/// <reference types="svelte" /> /// <reference types="svelte" />
export interface InlineNotificationProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { export interface InlineNotificationProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set the type of notification
* @default "inline"
*/
notificationType?: "toast" | "inline";
/** /**
* Specify the kind of notification * Specify the kind of notification
* @default "error" * @default "error"
@ -63,10 +57,10 @@ export default class InlineNotification {
actions: {}; actions: {};
}; };
$on(eventname: "close", cb: (event: CustomEvent<{ timeout: boolean }>) => void): () => void;
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
$on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
$on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
$on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
$on(eventname: "close", cb: (event: CustomEvent<any>) => void): () => void;
$on(eventname: string, cb: (event: Event) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void;
} }

8
types/Notification/ToastNotification.d.ts vendored
View file

@ -1,12 +1,6 @@
/// <reference types="svelte" /> /// <reference types="svelte" />
export interface ToastNotificationProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { export interface ToastNotificationProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set the type of notification
* @default "toast"
*/
notificationType?: "toast" | "inline";
/** /**
* Specify the kind of notification * Specify the kind of notification
* @default "error" * @default "error"
@ -68,10 +62,10 @@ export default class ToastNotification {
default: {}; default: {};
}; };
$on(eventname: "close", cb: (event: CustomEvent<{ timeout: boolean }>) => void): () => void;
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
$on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
$on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
$on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
$on(eventname: "close", cb: (event: CustomEvent<any>) => void): () => void;
$on(eventname: string, cb: (event: Event) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void;
} }

12
types/NumberInput/NumberInput.d.ts vendored
View file

@ -78,6 +78,18 @@ export interface NumberInputProps extends svelte.JSX.HTMLAttributes<HTMLElementT
*/ */
invalidText?: string; invalidText?: string;
/**
* Set to `true` to indicate an warning state
* @default false
*/
warn?: boolean;
/**
* Specify the warning state text
* @default ""
*/
warnText?: string;
/** /**
* Specify the helper text * Specify the helper text
* @default "" * @default ""

5
types/Tag/Tag.d.ts vendored
View file

@ -43,6 +43,11 @@ export interface TagProps
*/ */
title?: string; title?: string;
/**
* Specify the icon from `carbon-icons-svelte` to render
*/
icon?: typeof import("carbon-icons-svelte").CarbonIcon;
/** /**
* Set an id for the filterable tag * Set an id for the filterable tag
* @default "ccs-" + Math.random().toString(36) * @default "ccs-" + Math.random().toString(36)

2
types/TextInput/PasswordInput.d.ts vendored
View file

@ -38,11 +38,13 @@ export interface PasswordInputProps extends svelte.JSX.HTMLAttributes<HTMLElemen
/** /**
* Set the alignment of the tooltip relative to the icon * Set the alignment of the tooltip relative to the icon
* @default "center"
*/ */
tooltipAlignment?: "start" | "center" | "end"; tooltipAlignment?: "start" | "center" | "end";
/** /**
* Set the position of the tooltip relative to the icon * Set the position of the tooltip relative to the icon
* @default "bottom"
*/ */
tooltipPosition?: "top" | "right" | "bottom" | "left"; tooltipPosition?: "top" | "right" | "bottom" | "left";

16
types/Tile/ExpandableTile.d.ts vendored
View file

@ -1,6 +1,6 @@
/// <reference types="svelte" /> /// <reference types="svelte" />
export interface ExpandableTileProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { export interface ExpandableTileProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
/** /**
* Set to `true` to expand the tile * Set to `true` to expand the tile
* @default false * @default false
@ -37,6 +37,18 @@ export interface ExpandableTileProps extends svelte.JSX.HTMLAttributes<HTMLEleme
*/ */
tileExpandedIconText?: string; tileExpandedIconText?: string;
/**
* Specify the icon label of the expanded tile
* @default ""
*/
tileExpandedLabel?: string;
/**
* Specify the icon label of the collapsed tile
* @default ""
*/
tileCollapsedLabel?: string;
/** /**
* Specify the tabindex * Specify the tabindex
* @default "0" * @default "0"
@ -53,7 +65,7 @@ export interface ExpandableTileProps extends svelte.JSX.HTMLAttributes<HTMLEleme
* Obtain a reference to the top-level element * Obtain a reference to the top-level element
* @default null * @default null
*/ */
ref?: null | HTMLDivElement; ref?: null | HTMLButtonElement;
} }
export default class ExpandableTile { export default class ExpandableTile {

2
types/index.d.ts vendored
View file

@ -39,6 +39,7 @@ export { default as TableHead } from "./DataTable/TableHead";
export { default as TableHeader } from "./DataTable/TableHeader"; export { default as TableHeader } from "./DataTable/TableHeader";
export { default as TableRow } from "./DataTable/TableRow"; export { default as TableRow } from "./DataTable/TableRow";
export { default as DataTable } from "./DataTable/DataTable"; export { default as DataTable } from "./DataTable/DataTable";
export { default as DataTableSkeleton } from "./DataTable/DataTableSkeleton";
export { default as Toolbar } from "./DataTable/Toolbar"; export { default as Toolbar } from "./DataTable/Toolbar";
export { default as ToolbarContent } from "./DataTable/ToolbarContent"; export { default as ToolbarContent } from "./DataTable/ToolbarContent";
export { default as SearchSkeleton } from "./Search/SearchSkeleton"; export { default as SearchSkeleton } from "./Search/SearchSkeleton";
@ -49,7 +50,6 @@ export { default as OverflowMenu } from "./OverflowMenu/OverflowMenu";
export { default as OverflowMenuItem } from "./OverflowMenu/OverflowMenuItem"; export { default as OverflowMenuItem } from "./OverflowMenu/OverflowMenuItem";
export { default as ToolbarMenu } from "./DataTable/ToolbarMenu"; export { default as ToolbarMenu } from "./DataTable/ToolbarMenu";
export { default as ToolbarMenuItem } from "./DataTable/ToolbarMenuItem"; export { default as ToolbarMenuItem } from "./DataTable/ToolbarMenuItem";
export { default as DataTableSkeleton } from "./DataTableSkeleton/DataTableSkeleton";
export { default as DatePicker } from "./DatePicker/DatePicker"; export { default as DatePicker } from "./DatePicker/DatePicker";
export { default as DatePickerInput } from "./DatePicker/DatePickerInput"; export { default as DatePickerInput } from "./DatePicker/DatePickerInput";
export { default as DatePickerSkeleton } from "./DatePicker/DatePickerSkeleton"; export { default as DatePickerSkeleton } from "./DatePicker/DatePickerSkeleton";

850
yarn.lock
View file

File diff suppressed because it is too large Load diff