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 |
| :--------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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 |
| 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 |
| 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` |
| tooltipPosition | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | -- | Set the position 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<br />`hasIconOnly` must be set to `true` |
| 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;) |
| 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 |
@ -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 |
| 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 |
| 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" |
| 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 |
@ -982,6 +983,8 @@ export interface DropdownItem {
| 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 |
| 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 |
| 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 |
@ -1023,17 +1026,19 @@ None.
### Props
| 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 |
| 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) |
| 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 |
| 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 |
| 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 |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the top-level element |
| 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) |
| 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 |
| 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 |
| tileExpandedLabel | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon label of the expanded tile |
| 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
@ -1231,7 +1236,9 @@ None.
### Events
None.
| Event name | Type | Detail |
| :--------- | :-------- | :----- |
| submit | forwarded | -- |
## `Form`
@ -1735,17 +1742,16 @@ None.
### Props
| 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 |
| 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 |
| 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 |
| 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 |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Closes notification"</code> | Specify the ARIA label for the icon |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- |
| 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 |
| 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 |
| 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 |
| 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 |
### Slots
@ -1756,13 +1762,13 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| close | dispatched | -- |
| Event name | Type | Detail |
| :--------- | :--------- | :-------------------------------- |
| close | dispatched | <code>{ timeout: boolean }</code> |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
## `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 |
| 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 |
| 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
@ -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 |
| 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 |
| 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 |
| 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 |
@ -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 |
| 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 |
| 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 |
| 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 |
@ -2505,8 +2517,8 @@ None.
| 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 |
| 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 |
| tooltipPosition | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | -- | Set the position 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> | <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 |
| 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 |
@ -3594,6 +3606,7 @@ None.
| 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 |
| 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 |
### Slots
@ -3873,18 +3886,17 @@ None.
### Props
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- |
| 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 |
| 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 |
| 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 |
| 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 |
| hideCloseButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the close button |
### Slots
@ -3894,13 +3906,13 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| close | dispatched | -- |
| Event name | Type | Detail |
| :--------- | :--------- | :-------------------------------- |
| close | dispatched | <code>{ timeout: boolean }</code> |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
## `Toggle`

12
CONTRIBUTING.md
View file

@ -1,12 +1,10 @@
# 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
This project requires Node.js (version 12 or greater) and Yarn (version 1 or greater).
- [Node.js](https://nodejs.org/en/download/package-manager/)
- [Node.js](https://nodejs.org/en/download/package-manager/) (version >=12)
- [Yarn](https://classic.yarnpkg.com/en/docs/install)
## Project set-up
@ -65,6 +63,12 @@ If linked correctly, any change to a component in the `src` folder should be ref
## 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/`.
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:
- **[Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte)**: 5800+ Carbon icons as Svelte components
- **[Carbon Pictograms Svelte](https://github.com/IBM/carbon-pictograms-svelte)**: 600+ Carbon pictograms 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)**: 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
## [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).
#### 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 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"
},
"devDependencies": {
"@carbon/themes": "^10.22.1",
"@carbon/themes": "10.26.0",
"@sveltech/routify": "^1.9.9",
"autoprefixer": "^10.0.1",
"carbon-components": "^10.25.0",
"carbon-components": "10.27.0",
"carbon-components-svelte": "../",
"clipboard-copy": "^3.1.0",
"mdsvex": "^0.8.8",

353
docs/src/COMPONENT_API.json
View file

@ -547,7 +547,7 @@
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
"reactive": true
},
{
"name": "icon",
@ -572,6 +572,7 @@
"kind": "let",
"description": "Set the alignment of the tooltip relative to the icon\n`hasIconOnly` must be set to `true`",
"type": "\"start\" | \"center\" | \"end\"",
"value": "\"center\"",
"isFunction": false,
"constant": false,
"reactive": false
@ -581,6 +582,7 @@
"kind": "let",
"description": "Set the position of the tooltip relative to the icon",
"type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
"value": "\"bottom\"",
"isFunction": false,
"constant": false,
"reactive": false
@ -1123,6 +1125,26 @@
"isFunction": false,
"constant": 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": "{}" }],
@ -1949,6 +1971,16 @@
"constant": 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",
"kind": "let",
@ -2677,6 +2709,94 @@
],
"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",
"filePath": "/src/DataTable/Toolbar.svelte",
@ -3284,94 +3404,6 @@
"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",
"filePath": "/src/DatePicker/DatePicker.svelte",
@ -3787,6 +3819,26 @@
"constant": 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",
"kind": "let",
@ -4494,7 +4546,7 @@
"filePath": "/src/FluidForm/FluidForm.svelte",
"props": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [],
"events": [{ "type": "forwarded", "name": "submit", "element": "Form" }],
"typedefs": [],
"rest_props": { "type": "InlineComponent", "name": "Form" }
},
@ -5247,6 +5299,26 @@
"constant": 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",
"kind": "let",
@ -5679,16 +5751,6 @@
"moduleName": "ToastNotification",
"filePath": "/src/Notification/ToastNotification.svelte",
"props": [
{
"name": "notificationType",
"kind": "let",
"description": "Set the type of notification",
"type": "\"toast\" | \"inline\"",
"value": "\"toast\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "kind",
"kind": "let",
@ -5782,11 +5844,15 @@
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [
{
"type": "dispatched",
"name": "close",
"detail": "{ timeout: boolean }"
},
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" },
{ "type": "dispatched", "name": "close" }
{ "type": "forwarded", "name": "mouseleave", "element": "div" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
@ -5795,16 +5861,6 @@
"moduleName": "InlineNotification",
"filePath": "/src/Notification/InlineNotification.svelte",
"props": [
{
"name": "notificationType",
"kind": "let",
"description": "Set the type of notification",
"type": "\"toast\" | \"inline\"",
"value": "\"inline\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "kind",
"kind": "let",
@ -5891,11 +5947,15 @@
{ "name": "actions", "default": false, "slot_props": "{}" }
],
"events": [
{
"type": "dispatched",
"name": "close",
"detail": "{ timeout: boolean }"
},
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" },
{ "type": "dispatched", "name": "close" }
{ "type": "forwarded", "name": "mouseleave", "element": "div" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
@ -6045,6 +6105,26 @@
"constant": 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",
"kind": "let",
@ -7732,6 +7812,15 @@
"constant": 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",
"kind": "let",
@ -8233,6 +8322,7 @@
"kind": "let",
"description": "Set the alignment of the tooltip relative to the icon",
"type": "\"start\" | \"center\" | \"end\"",
"value": "\"center\"",
"isFunction": false,
"constant": false,
"reactive": false
@ -8242,6 +8332,7 @@
"kind": "let",
"description": "Set the position of the tooltip relative to the icon",
"type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
"value": "\"bottom\"",
"isFunction": false,
"constant": false,
"reactive": false
@ -8495,6 +8586,26 @@
"constant": 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",
"kind": "let",
@ -8519,7 +8630,7 @@
"name": "ref",
"kind": "let",
"description": "Obtain a reference to the top-level element",
"type": "null | HTMLDivElement",
"type": "null | HTMLButtonElement",
"value": "null",
"isFunction": false,
"constant": false,
@ -8531,14 +8642,14 @@
{ "name": "below", "default": false, "slot_props": "{}" }
],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "keypress", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" }
{ "type": "forwarded", "name": "click", "element": "button" },
{ "type": "forwarded", "name": "keypress", "element": "button" },
{ "type": "forwarded", "name": "mouseover", "element": "button" },
{ "type": "forwarded", "name": "mouseenter", "element": "button" },
{ "type": "forwarded", "name": "mouseleave", "element": "button" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
"rest_props": { "type": "Element", "name": "button" }
},
{
"moduleName": "SelectableTile",

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

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

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

@ -1,10 +1,7 @@
---
description: High-level description
---
<script>
import { Button } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16";
import TrashCan16 from "carbon-icons-svelte/lib/TrashCan16";
import Preview from "../../components/Preview.svelte";
</script>
@ -32,6 +29,12 @@ description: High-level description
<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
<Button kind="danger-ghost">Danger ghost button</Button>
@ -42,13 +45,15 @@ description: High-level description
### Icon-only button
Set `hasIconOnly` to `true` to use the icon-only button variant.
**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

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

@ -47,6 +47,14 @@ let comment = `
<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
`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: "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
<Dropdown disabled titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},

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

@ -27,3 +27,10 @@ source: Tile/ExpandableTile.svelte
<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>
### 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>

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

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

@ -90,3 +90,27 @@ Use the `itemToString` prop to format the display of individual items.
{id: "1", text: "Email"},
{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
<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

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

@ -1,5 +1,7 @@
<script>
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";
</script>
@ -25,6 +27,13 @@
<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
<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..." />
### Warning state
<TextInput warn warnText="Your user name is different from your log in ID." labelText="User name" placeholder="Enter user name..." />
### Disabled state
<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)
<ToastNotification />
<ToastNotification title="Error" subtitle="An internal server error occurred." caption="[MMM D, YYYY h:mm A]" />
### 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
<ToastNotification kind="error" />
<ToastNotification kind="info" />
<ToastNotification kind="info-square" />
<ToastNotification kind="success" />
<ToastNotification kind="warning" />
<ToastNotification kind="warning-alt" />
<ToastNotification kind="error" title="Error" subtitle="An internal server error occurred." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification kind="info-square" title="New updates" subtitle="Restart to get the latest updates." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification kind="success" title="Success" subtitle="Your settings have been saved." caption="[MMM D, YYYY h:mm A]" />
<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" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="[MMM D, YYYY h:mm A]" />
### Low contrast
<ToastNotification lowContrast kind="error" />
<ToastNotification lowContrast kind="info" />
<ToastNotification lowContrast kind="info-square" />
<ToastNotification lowContrast kind="success" />
<ToastNotification lowContrast kind="warning" />
<ToastNotification lowContrast kind="warning-alt" />
<ToastNotification lowContrast kind="error" title="Error" subtitle="An internal server error occurred." caption="[MMM D, YYYY h:mm A]" />
<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" title="New updates" subtitle="Restart to get the latest updates." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification lowContrast kind="success" title="Success" subtitle="Your settings have been saved." caption="[MMM D, YYYY h:mm A]" />
<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" 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
borderBottom
title="Carbon Icons Svelte"
subtitle="5800+ icons"
subtitle="6000+ icons"
target="_blank"
href="https://github.com/IBM/carbon-icons-svelte"
/>
@ -105,7 +105,7 @@
<TileCard
borderRight
title="Carbon Pictograms Svelte"
subtitle="600+ pictograms"
subtitle="700+ pictograms"
target="_blank"
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,
"scripts": {
"check-types": "svelte-check --workspace tests",
"prettier": "prettier --write './**/*.{svelte,js,md}'",
"publish-examples": "node scripts/publish-examples",
"build:css": "node scripts/build-css",
"build:lib": "rollup -c",
"prepack": "run-p build:*"
"prepack": "run-p build:*",
"format": "prettier --write './**/*.{svelte,js,md}'"
},
"dependencies": {
"carbon-icons-svelte": "^10.21.0",
"flatpickr": "4.6.9"
},
"devDependencies": {
"@carbon/themes": "^10.22.1",
"@carbon/themes": "^10.26.0",
"@rollup/plugin-commonjs": "^16.0.0",
"@rollup/plugin-node-resolve": "^10.0.0",
"@tsconfig/svelte": "^1.0.10",
"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",
"husky": "^4.3.0",
"lint-staged": "^10.5.1",
"husky": "^4.3.8",
"lint-staged": "^10.5.3",
"node-sass": "^4.14.1",
"npm-run-all": "^4.1.5",
"postcss": "^7.0.32",
"prettier": "^2.2.0",
"prettier-plugin-svelte": "^1.4.1",
"rollup": "^2.33.3",
"rollup-plugin-svelte": "^6.1.1",
"rollup": "^2.38.0",
"rollup-plugin-svelte": "^7.1.0",
"rollup-plugin-terser": "^7.0.2",
"sveld": "0.3.0",
"svelte": "^3.29.7",
"svelte-check": "^1.1.15",
"svelte-loader": "^2.13.6",
"typescript": "^4.1.2"
"svelte": "^3.32.0",
"svelte-check": "^1.1.28",
"typescript": "^4.1.3"
},
"husky": {
"hooks": {

2
rollup.config.js
View file

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

12
scripts/build-css.js
View file

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

10
src/Button/Button.svelte
View file

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

14
src/CodeSnippet/CodeSnippet.svelte
View file

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

6
src/ComposedModal/ModalHeader.svelte
View file

@ -31,7 +31,7 @@
<p
class:bx--modal-header__label="{true}"
class:bx--type-delta="{true}"
class:labelClass
class="{labelClass}"
>
{label}
</p>
@ -40,7 +40,7 @@
<p
class:bx--modal-header__heading="{true}"
class:bx--type-beta="{true}"
class:titleClass
class="{titleClass}"
>
{title}
</p>
@ -51,7 +51,7 @@
title="{iconDescription}"
aria-label="{iconDescription}"
class:bx--modal-close="{true}"
class:closeClass
class="{closeClass}"
on:click
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 DataTableSkeleton } from "./DataTableSkeleton.svelte";
export { default as Table } from "./Table.svelte";
export { default as TableBody } from "./TableBody.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 */
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 */
export let helperText = "";
@ -82,7 +88,8 @@
export let ref = null;
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 {
ListBox,
ListBoxMenu,
@ -148,8 +155,7 @@
id="{id}"
name="{name}"
aria-label="{$$props['aria-label']}"
class="bx--dropdown {invalid && 'bx--dropdown--invalid'}
{open && 'bx--dropdown--open'}
class="bx--dropdown {invalid && 'bx--dropdown--invalid'} {!invalid && warn && 'bx--dropdown--warning'} {open && 'bx--dropdown--open'}
{size === 'sm' && 'bx--dropdown--sm'}
{size === 'xl' && 'bx--dropdown--xl'}
{inline && 'bx--dropdown--inline'}
@ -163,10 +169,17 @@
invalid="{invalid}"
invalidText="{invalidText}"
light="{light}"
warn="{warn}"
warnText="{warnText}"
>
{#if invalid}
<WarningFilled16 class="bx--list-box__invalid-icon" />
{/if}
{#if !invalid && warn}
<WarningAltFilled16
class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
/>
{/if}
<button
bind:this="{ref}"
class:bx--list-box__field="{true}"
@ -220,7 +233,7 @@
</ListBoxMenu>
{/if}
</ListBox>
{#if !inline && !invalid && helperText}
{#if !inline && !invalid && !warn && helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}"

2
src/FluidForm/FluidForm.svelte
View file

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

10
src/ListBox/ListBox.svelte
View file

@ -25,6 +25,12 @@
/** Specify the invalid state text */
export let invalidText = "";
/** Set to `true` to indicate an warning state */
export let warn = false;
/** Specify the warning state text */
export let warnText = "";
</script>
<div
@ -38,6 +44,7 @@
class:bx--list-box--disabled="{disabled}"
class:bx--list-box--expanded="{open}"
class:bx--list-box--light="{light}"
class:bx--list-box--warning="{!invalid && warn}"
{...$$restProps}
on:keydown
on:keydown="{(e) => {
@ -52,3 +59,6 @@
{#if invalid}
<div class:bx--form-requirement="{true}">{invalidText}</div>
{/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 */
export let id = "ccs-" + Math.random().toString(36);
$: spinnerRadius = small ? "26.8125" : "37.5";
$: spinnerRadius = small ? "42" : "44";
</script>
{#if withOverlay}
@ -33,20 +33,20 @@
>
<!-- svelte-ignore a11y-label-has-associated-control -->
<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>
{#if small}
<circle
class:bx--loading__background="{true}"
cx="0"
cy="0"
cx="50%"
cy="50%"
r="{spinnerRadius}"
></circle>
{/if}
<circle
class:bx--loading__stroke="{true}"
cx="0"
cy="0"
cx="50%"
cy="50%"
r="{spinnerRadius}"
></circle>
</svg>
@ -64,20 +64,20 @@
>
<!-- svelte-ignore a11y-label-has-associated-control -->
<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>
{#if small}
<circle
class:bx--loading__background="{true}"
cx="0"
cy="0"
cx="50%"
cy="50%"
r="{spinnerRadius}"
></circle>
{/if}
<circle
class:bx--loading__stroke="{true}"
cx="0"
cy="0"
cx="50%"
cy="50%"
r="{spinnerRadius}"
></circle>
</svg>

21
src/MultiSelect/MultiSelect.svelte
View file

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

23
src/Notification/InlineNotification.svelte
View file

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

4
src/Notification/NotificationActionButton.svelte
View file

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

5
src/Notification/NotificationButton.svelte
View file

@ -20,7 +20,7 @@
/** Specify the ARIA label for the 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>
<button
@ -38,7 +38,6 @@
<svelte:component
this="{renderIcon}"
title="{title}"
class="{notificationType === 'toast' && 'bx--toast-notification__close-icon'}
{notificationType === 'inline' && 'bx--inline-notification__close-icon'}"
class="bx--{notificationType}-notification__close-icon"
/>
</button>

12
src/Notification/NotificationIcon.svelte
View file

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

25
src/Notification/ToastNotification.svelte
View file

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

27
src/NumberInput/NumberInput.svelte
View file

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

22
src/Tag/Tag.svelte
View file

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

23
src/TextInput/PasswordInput.svelte
View file

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

5
src/TextInput/TextInput.svelte
View file

@ -63,8 +63,8 @@
export let inline = false;
import { getContext } from "svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
const ctx = getContext("Form");
@ -127,6 +127,7 @@
data-invalid="{invalid || undefined}"
data-warn="{warn || undefined}"
class:bx--text-input__field-wrapper="{true}"
class:bx--text-input__field-wrapper--warning="{!invalid && warn}"
>
{#if invalid}
<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 */
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 */
export let tabindex = "0";
@ -27,7 +33,7 @@
export let ref = null;
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 refAbove = null;
@ -45,10 +51,13 @@
});
</script>
<div
<button
bind:this="{ref}"
type="button"
id="{id}"
aria-expanded="{expanded}"
tabindex="{tabindex}"
title="{expanded ? tileExpandedIconText : tileCollapsedIconText}"
class:bx--tile="{true}"
class:bx--tile--expandable="{true}"
class:bx--tile--is-expanded="{expanded}"
@ -60,45 +69,24 @@
expanded = !expanded;
}}"
on:keypress
on:keypress="{(e) => {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
expanded = !expanded;
}
}}"
on:mouseover
on:mouseenter
on:mouseleave
>
<div bind:this="{refContent}">
<div bind:this="{refAbove}" class:bx--tile-content="{true}">
<span
class:bx--tile-content__above-the-fold="{true}"
on:click
on:mouseover
on:mouseenter
on:mouseleave
>
<span class:bx--tile-content__above-the-fold="{true}">
<slot name="above" />
</span>
</div>
<button
aria-expanded="{expanded}"
aria-label="{expanded ? tileExpandedIconText : tileCollapsedIconText}"
class:bx--tile__chevron="{true}"
>
<div class:bx--tile__chevron="{true}">
<span>{expanded ? tileExpandedLabel : tileCollapsedLabel}</span>
<ChevronDown16 />
</button>
</div>
<div class:bx--tile-content="{true}">
<span
on:click
on:mouseover
on:mouseenter
on:mouseleave
class:bx--tile-content__below-the-fold="{true}"
>
<span class:bx--tile-content__below-the-fold="{true}">
<slot name="below" />
</span>
</div>
</div>
</div>
</button>

2
src/index.js
View file

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

2
tests/CodeSnippet.test.svelte
View file

@ -47,4 +47,4 @@ export function subtract(a: number, b: number) {
<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>
</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="below" style="height: 10rem">Below the fold content here</div>
</ExpandableTile>

3
tests/InlineNotification.test.svelte
View file

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

3
tests/Tag.test.svelte
View file

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

3
tests/ToastNotification.test.svelte
View file

@ -8,6 +8,9 @@
hideCloseButton
kind="warning"
title="Upcoming scheduled maintenance"
on:close="{(e) => {
console.log(e.detail.timeout);
}}"
/>
<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
* `hasIconOnly` must be set to `true`
* @default "center"
*/
tooltipAlignment?: "start" | "center" | "end";
/**
* Set the position of the tooltip relative to the icon
* @default "bottom"
*/
tooltipPosition?: "top" | "right" | "bottom" | "left";

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

@ -25,6 +25,13 @@ export interface CodeSnippetProps {
*/
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
* 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;
/**
* Set to `true` to indicate an warning state
* @default false
*/
warn?: boolean;
/**
* Specify the warning state text
* @default ""
*/
warnText?: string;
/**
* Specify the helper text
* @default ""

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

@ -8,5 +8,6 @@ export default class FluidForm {
default: {};
};
$on(eventname: "submit", cb: (event: WindowEventMap["submit"]) => 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 ""
*/
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 {

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

@ -130,6 +130,18 @@ export interface MultiSelectProps extends svelte.JSX.HTMLAttributes<HTMLElementT
*/
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
* @default ""

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

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

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

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

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

@ -78,6 +78,18 @@ export interface NumberInputProps extends svelte.JSX.HTMLAttributes<HTMLElementT
*/
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
* @default ""

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

@ -43,6 +43,11 @@ export interface TagProps
*/
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
* @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
* @default "center"
*/
tooltipAlignment?: "start" | "center" | "end";
/**
* Set the position of the tooltip relative to the icon
* @default "bottom"
*/
tooltipPosition?: "top" | "right" | "bottom" | "left";

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

@ -1,6 +1,6 @@
/// <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
* @default false
@ -37,6 +37,18 @@ export interface ExpandableTileProps extends svelte.JSX.HTMLAttributes<HTMLEleme
*/
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
* @default "0"
@ -53,7 +65,7 @@ export interface ExpandableTileProps extends svelte.JSX.HTMLAttributes<HTMLEleme
* Obtain a reference to the top-level element
* @default null
*/
ref?: null | HTMLDivElement;
ref?: null | HTMLButtonElement;
}
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 TableRow } from "./DataTable/TableRow";
export { default as DataTable } from "./DataTable/DataTable";
export { default as DataTableSkeleton } from "./DataTable/DataTableSkeleton";
export { default as Toolbar } from "./DataTable/Toolbar";
export { default as ToolbarContent } from "./DataTable/ToolbarContent";
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 ToolbarMenu } from "./DataTable/ToolbarMenu";
export { default as ToolbarMenuItem } from "./DataTable/ToolbarMenuItem";
export { default as DataTableSkeleton } from "./DataTableSkeleton/DataTableSkeleton";
export { default as DatePicker } from "./DatePicker/DatePicker";
export { default as DatePickerInput } from "./DatePicker/DatePickerInput";
export { default as DatePickerSkeleton } from "./DatePicker/DatePickerSkeleton";

850
yarn.lock
View file

File diff suppressed because it is too large Load diff