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

Align v10.35 (#694)

Browse source 
* chore(deps-dev): upgrade carbon-components to v10.35

* feat(tooltip-icon): add icon prop

This allows consumers to pass a Carbon icon as a prop instead of using the default slot.

* fix(tooltip): make screenreader description less verbose

Ref: b5f40d8fc

* feat(search): allow custom search icon

Allows consumers to render a different Carbon icon instead of the default Search16 icon.

* feat(number-input): add hideSteppers prop

Allows consumers to hide the input stepper buttons.

* feat: support expressive styles for Button, UnorderedList, OrderedList

* feat(button): support large size button

Set size to "lg" to use the large size.

* feat(button-skeleton): support xl, lg sizes

* docs(button): add "lg" size to expressive styles example

* feat(file-uploader-item): support field, small sizes

* feat(tooltip-icon): support disabled state
This commit is contained in:
Eric Liu 2021-06-26 07:13:28 -07:00 • committed by GitHub
commit db645c30f0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 396 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

130
COMPONENT_INDEX.md
View file

@ -350,7 +350,8 @@ None.
| 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 | | 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" &#124; "xl"</code> | <code>"default"</code> | Specify the size of button | | size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code> | <code>"default"</code> | Specify the size of button |
| expressive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
| isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button | | isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button |
| 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 |
@ -400,11 +401,11 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | ------------------------------------ | | :-------- | :--------------- | :------- | :--------------------------------------------------------------------------- | ---------------------- | ------------------------------------ |
| href | <code>let</code> | No | <code>string</code> | -- | Set the `href` to use an anchor link | | href | <code>let</code> | No | <code>string</code> | -- | Set the `href` to use an anchor link |
| size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small"</code> | <code>"default"</code> | Specify the size of button skeleton | | size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code> | <code>"default"</code> | Specify the size of button skeleton |
| small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | -- | | small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | -- |
### Slots ### Slots
@ -1299,6 +1300,7 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ | | :-------------- | :--------------- | :------- | :------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ |
| status | <code>let</code> | No | <code>"uploading" &#124; "edit" &#124; "complete"</code> | <code>"uploading"</code> | Specify the file uploader status | | status | <code>let</code> | No | <code>"uploading" &#124; "edit" &#124; "complete"</code> | <code>"uploading"</code> | Specify the file uploader status |
| size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small"</code> | <code>"default"</code> | Specify the size of button skeleton |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label used for the status icons | | iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label used for the status 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 |
| errorSubject | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the error subject text | | errorSubject | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the error subject text |
@ -2471,31 +2473,32 @@ export type NumberInputTranslationId = "increment" | "decrement";
### 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; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| value | <code>let</code> | Yes | <code>number &#124; string</code> | <code>""</code> | Specify the input value | | value | <code>let</code> | Yes | <code>number &#124; string</code> | <code>""</code> | Specify the input value |
| size | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | -- | Set the size of the input | | size | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | -- | Set the size of the input |
| step | <code>let</code> | No | <code>number</code> | <code>1</code> | Specify the step increment | | step | <code>let</code> | No | <code>number</code> | <code>1</code> | Specify the step increment |
| max | <code>let</code> | No | <code>number</code> | -- | Specify the maximum value | | max | <code>let</code> | No | <code>number</code> | -- | Specify the maximum value |
| min | <code>let</code> | No | <code>number</code> | -- | Specify the minimum value | | min | <code>let</code> | No | <code>number</code> | -- | Specify the minimum value |
| 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 |
| readonly | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the input to be read-only | | readonly | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the input to be read-only |
| mobile | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the mobile variant | | mobile | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the mobile variant |
| allowEmpty | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow for an empty value | | allowEmpty | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow for an empty value |
| 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 |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the increment icons | | hideSteppers | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the input stepper buttons |
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state | | iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the increment icons |
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text | | invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state | | invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text | | warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text | | warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| label | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text | | helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text | | label | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| translateWithId | <code>let</code> | No | <code>(id: NumberInputTranslationId) => string</code> | <code>(id) => defaultTranslations[id]</code> | Override the default translation ids | | hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| translationIds | <code>const</code> | No | <code>{ increment: "increment"; decrement: "decrement" }</code> | <code>{ increment: "increment", decrement: "decrement", }</code> | Default translation ids | | translateWithId | <code>let</code> | No | <code>(id: NumberInputTranslationId) => string</code> | <code>(id) => defaultTranslations[id]</code> | Override the default translation ids |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element | | translationIds | <code>const</code> | No | <code>{ increment: "increment"; decrement: "decrement" }</code> | <code>{ increment: "increment", decrement: "decrement", }</code> | Default translation ids |
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the input | | id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the input |
### Slots ### Slots
@ -2539,10 +2542,11 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- | | :--------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------- |
| nested | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the nested variant | | nested | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the nested variant |
| native | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use native list styles | | native | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use native list styles |
| expressive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
### Slots ### Slots
@ -3012,25 +3016,26 @@ 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; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the value of the search input | | value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the value of the search input |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input | | expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input |
| small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | -- | | small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | -- |
| size | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>"xl"</code> | Specify the size of the search input | | size | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
| searchClass | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element | | searchClass | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element |
| 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 |
| 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 search input | | disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the search input |
| expandable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the expandable variant | | expandable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the expandable variant |
| type | <code>let</code> | No | <code>string</code> | <code>"text"</code> | Specify the `type` attribute of the search input | | type | <code>let</code> | No | <code>string</code> | <code>"text"</code> | Specify the `type` attribute of the search input |
| placeholder | <code>let</code> | No | <code>string</code> | <code>"Search..."</code> | Specify the `placeholder` attribute of the search input | | placeholder | <code>let</code> | No | <code>string</code> | <code>"Search..."</code> | Specify the `placeholder` attribute of the search input |
| autocomplete | <code>let</code> | No | <code>"on" &#124; "off"</code> | <code>"off"</code> | Specify the `autocomplete` attribute | | autocomplete | <code>let</code> | No | <code>"on" &#124; "off"</code> | <code>"off"</code> | Specify the `autocomplete` attribute |
| autofocus | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element | | autofocus | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element |
| closeButtonLabelText | <code>let</code> | No | <code>string</code> | <code>"Clear search input"</code> | Specify the close button label text | | closeButtonLabelText | <code>let</code> | No | <code>string</code> | <code>"Clear search input"</code> | Specify the close button label text |
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text | | labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element | | 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 input element |
### Slots ### Slots
@ -4517,16 +4522,18 @@ None.
| :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ | | :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| tooltipText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tooltip text.<br />Alternatively, use the "tooltipText" slot | | tooltipText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tooltip text.<br />Alternatively, use the "tooltipText" slot |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tooltip icon |
| align | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon | | align | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
| direction | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the icon | | direction | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the icon |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the span element | | id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the span element |
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :---------- | :------ | :---- | :------------------------- | | :---------- | :------ | :---- | :---------------------------------------------------- |
| -- | Yes | -- | -- | | -- | Yes | -- | <code>&lt;svelte:component this="{icon}" /&gt;</code> |
| tooltipText | No | -- | <code>{tooltipText}</code> | | tooltipText | No | -- | <code>{tooltipText}</code> |
### Events ### Events
@ -4560,9 +4567,10 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- | | :--------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------- |
| nested | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the nested variant | | nested | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the nested variant |
| expressive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
### Slots ### Slots

2
docs/package.json
View file

@ -11,7 +11,7 @@
"devDependencies": { "devDependencies": {
"@sveltech/routify": "^1.9.9", "@sveltech/routify": "^1.9.9",
"autoprefixer": "^10.2.3", "autoprefixer": "^10.2.3",
"carbon-components": "10.34.0", "carbon-components": "10.35.0",
"carbon-components-svelte": "../", "carbon-components-svelte": "../",
"mdsvex": "^0.8.8", "mdsvex": "^0.8.8",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",

89
docs/src/COMPONENT_API.json
View file

@ -362,12 +362,22 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Specify the size of button", "description": "Specify the size of button",
"type": "\"default\" | \"field\" | \"small\" | \"xl\"", "type": "\"default\" | \"field\" | \"small\" | \"lg\" | \"xl\"",
"value": "\"default\"", "value": "\"default\"",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
"reactive": false "reactive": false
}, },
{
"name": "expressive",
"kind": "let",
"description": "Set to `true` to use Carbon's expressive typesetting",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{ {
"name": "isSelected", "name": "isSelected",
"kind": "let", "kind": "let",
@ -565,7 +575,7 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Specify the size of button skeleton", "description": "Specify the size of button skeleton",
"type": "\"default\" | \"field\" | \"small\"", "type": "\"default\" | \"field\" | \"small\" | \"lg\" | \"xl\"",
"value": "\"default\"", "value": "\"default\"",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
@ -3347,6 +3357,16 @@
"constant": false, "constant": false,
"reactive": false "reactive": false
}, },
{
"name": "size",
"kind": "let",
"description": "Specify the size of button skeleton",
"type": "\"default\" | \"field\" | \"small\"",
"value": "\"default\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{ {
"name": "iconDescription", "name": "iconDescription",
"kind": "let", "kind": "let",
@ -6134,6 +6154,16 @@
"constant": false, "constant": false,
"reactive": false "reactive": false
}, },
{
"name": "hideSteppers",
"kind": "let",
"description": "Set to `true` to hide the input stepper buttons",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{ {
"name": "iconDescription", "name": "iconDescription",
"kind": "let", "kind": "let",
@ -6337,6 +6367,16 @@
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
"reactive": false "reactive": false
},
{
"name": "expressive",
"kind": "let",
"description": "Set to `true` to use Carbon's expressive typesetting",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
} }
], ],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
@ -7939,6 +7979,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",
@ -11365,6 +11414,25 @@
"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": "disabled",
"kind": "let",
"description": "Set to `true` to disable the tooltip icon",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{ {
"name": "align", "name": "align",
"kind": "let", "kind": "let",
@ -11407,7 +11475,12 @@
} }
], ],
"slots": [ "slots": [
{ "name": "__default__", "default": true, "slot_props": "{}" }, {
"name": "__default__",
"default": true,
"fallback": "<svelte:component this=\"{icon}\" />",
"slot_props": "{}"
},
{ {
"name": "tooltipText", "name": "tooltipText",
"default": false, "default": false,
@ -11457,6 +11530,16 @@
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
"reactive": false "reactive": false
},
{
"name": "expressive",
"kind": "let",
"description": "Set to `true` to use Carbon's expressive typesetting",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
} }
], ],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],

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

@ -78,7 +78,7 @@ If an `href` value is specified, the component will render an [anchor element](h
<p {...props}>Custom element</p> <p {...props}>Custom element</p>
</Button> </Button>
### Field button ### Field size
<Button size="field">Primary</Button> <Button size="field">Primary</Button>
<Button size="field" kind="secondary">Secondary</Button> <Button size="field" kind="secondary">Secondary</Button>
@ -86,7 +86,7 @@ If an `href` value is specified, the component will render an [anchor element](h
<Button size="field" kind="ghost">Ghost</Button> <Button size="field" kind="ghost">Ghost</Button>
<Button size="field" kind="danger">Danger</Button> <Button size="field" kind="danger">Danger</Button>
### Small button ### Small size
<Button size="small">Primary</Button> <Button size="small">Primary</Button>
<Button size="small" kind="secondary">Secondary</Button> <Button size="small" kind="secondary">Secondary</Button>
@ -94,7 +94,15 @@ If an `href` value is specified, the component will render an [anchor element](h
<Button size="small" kind="ghost">Ghost</Button> <Button size="small" kind="ghost">Ghost</Button>
<Button size="small" kind="danger">Danger</Button> <Button size="small" kind="danger">Danger</Button>
### Extra-large button ### Large size
<Button size="lg">Primary</Button>
<Button size="lg" kind="secondary">Secondary</Button>
<Button size="lg" kind="tertiary">Tertiary</Button>
<Button size="lg" kind="ghost">Ghost</Button>
<Button size="lg" kind="danger">Danger</Button>
### Extra-large size
<Button size="xl">Primary</Button> <Button size="xl">Primary</Button>
<Button size="xl" kind="secondary">Secondary</Button> <Button size="xl" kind="secondary">Secondary</Button>
@ -106,8 +114,34 @@ If an `href` value is specified, the component will render an [anchor element](h
<Button disabled>Disabled button</Button> <Button disabled>Disabled button</Button>
### Expressive styles
Set `expressive` to `true` to use Carbon's expressive typesetting.
Note: the expressive styles only apply to the default, `"lg"`, and `"xl"` button sizes.
<Button expressive size="xl">Primary</Button>
<Button expressive size="xl" kind="secondary">Secondary</Button>
<Button expressive size="xl" kind="tertiary">Tertiary</Button>
<Button expressive size="xl" kind="ghost">Ghost</Button>
<Button expressive size="xl" kind="danger">Danger</Button>
<br /><br />
<Button expressive size="lg">Primary</Button>
<Button expressive size="lg" kind="secondary">Secondary</Button>
<Button expressive size="lg" kind="tertiary">Tertiary</Button>
<Button expressive size="lg" kind="ghost">Ghost</Button>
<Button expressive size="lg" kind="danger">Danger</Button>
<br /><br />
<Button expressive>Primary</Button>
<Button expressive kind="secondary">Secondary</Button>
<Button expressive kind="tertiary">Tertiary</Button>
<Button expressive kind="ghost">Ghost</Button>
<Button expressive kind="danger">Danger</Button>
### Skeleton ### Skeleton
<Button size="xl" skeleton />
<Button size="lg" skeleton />
<Button skeleton /> <Button skeleton />
<Button skeleton size="field" /> <Button skeleton size="field" />
<Button skeleton size="small" /> <Button skeleton size="small" />

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

@ -27,6 +27,14 @@ components: ["FileUploaderButton", "FileUploader", "FileUploaderDropContainer",
<FileUploaderItem invalid name="README.md" status="edit" /> <FileUploaderItem invalid name="README.md" status="edit" />
### Item sizes
The default `FileUploaderItem` size is "default".
<FileUploaderItem size="default" name="README.md" status="uploading" />
<FileUploaderItem size="field" name="README.md" status="uploading" />
<FileUploaderItem size="small" name="README.md" status="uploading" />
### Drop container ### Drop container
<FileUploaderDropContainer labelText="Drag and drop files here or click to upload" multiple /> <FileUploaderDropContainer labelText="Drag and drop files here or click to upload" multiple />

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

@ -23,6 +23,10 @@ components: ["NumberInput", "NumberInputSkeleton"]
<NumberInput hideLabel label="Clusters" /> <NumberInput hideLabel label="Clusters" />
### Hidden steppers
<NumberInput hideSteppers label="Clusters" />
### Light variant ### Light variant
<NumberInput light label="Clusters" /> <NumberInput light label="Clusters" />

10
docs/src/pages/components/OrderedList.svx
View file

@ -69,4 +69,14 @@ Use the `native` attribute to enable default browser list styles. This is useful
</ListItem> </ListItem>
<ListItem>Ordered list level 1</ListItem> <ListItem>Ordered list level 1</ListItem>
<ListItem>Ordered list level 1</ListItem> <ListItem>Ordered list level 1</ListItem>
</OrderedList>
### Expressive styles
Set `expressive` to `true` to use Carbon's expressive typesetting.
<OrderedList expressive>
<ListItem><Link size="lg" href="#">Ordered list item</Link></ListItem>
<ListItem>Ordered list item</ListItem>
<ListItem>Ordered list item</ListItem>
</OrderedList> </OrderedList>

5
docs/src/pages/components/Search.svx
View file

@ -1,4 +1,5 @@
<script> <script>
import Query16 from "carbon-icons-svelte/lib/Query16";
import { Search } from "carbon-components-svelte"; import { Search } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
@ -43,6 +44,10 @@ The "clear" event is dispatched when clicking the "X" button in the search input
<Search disabled /> <Search disabled />
### Custom search icon
<Search icon={Query16} />
### Skeleton ### Skeleton
<Search skeleton /> <Search skeleton />

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

@ -7,22 +7,23 @@
### Default ("bottom" direction, "center" aligned) ### Default ("bottom" direction, "center" aligned)
<TooltipIcon tooltipText="Carbon is an open source design system by IBM."> <TooltipIcon tooltipText="Carbon is an open source design system by IBM." icon={Carbon24} />
<Carbon24 />
</TooltipIcon>
### Directions ### Directions
<TooltipIcon tooltipText="Top start" direction="top" align="start"><Filter20 /></TooltipIcon> <TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter20} />
<TooltipIcon tooltipText="Right end" direction="right" align="end"><Filter20 /></TooltipIcon> <TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter20} />
<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start"><Filter20 /></TooltipIcon> <TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter20} />
<TooltipIcon tooltipText="Left start" direction="left" align="start"><Filter20 /></TooltipIcon> <TooltipIcon tooltipText="Left start" direction="left" align="start" icon={Filter20} />
### Custom tooltip text ### Custom tooltip text
Use the "text" slot to customize the tooltip text. Use the "text" slot to customize the tooltip text.
<TooltipIcon> <TooltipIcon icon={Carbon24}>
<span slot="tooltipText" style="color: red">Carbon is an open source design system by IBM.</span> <span slot="tooltipText" style="color: red">Carbon is an open source design system by IBM.</span>
<Carbon24 /> </TooltipIcon>
</TooltipIcon>
### Disabled
<TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon24} />

10
docs/src/pages/components/UnorderedList.svx
View file

@ -47,4 +47,14 @@ components: ["UnorderedList", "ListItem"]
</ListItem> </ListItem>
<ListItem>Unordered list level 1</ListItem> <ListItem>Unordered list level 1</ListItem>
<ListItem>Unordered list level 1</ListItem> <ListItem>Unordered list level 1</ListItem>
</UnorderedList>
### Expressive styles
Set `expressive` to `true` to use Carbon's expressive typesetting.
<UnorderedList expressive>
<ListItem><Link size="lg" href="#">Unordered list item</Link></ListItem>
<ListItem>Unordered list item</ListItem>
<ListItem>Unordered list item</ListItem>
</UnorderedList> </UnorderedList>

10
docs/yarn.lock
View file

@ -837,16 +837,16 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw== integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
carbon-components-svelte@../: carbon-components-svelte@../:
version "0.33.0" version "0.34.0"
dependencies: dependencies:
carbon-icons-svelte "^10.27.0" carbon-icons-svelte "^10.27.0"
clipboard-copy "3.2.0" clipboard-copy "3.2.0"
flatpickr "4.6.9" flatpickr "4.6.9"
carbon-components@10.34.0: carbon-components@10.35.0:
version "10.34.0" version "10.35.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.34.0.tgz#38a8bc4e03193e09459b22caf0fe2c72a64a63e8" resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.35.0.tgz#2669d8f6f989a5dc96843c43a5ac12e4a9c3dfa7"
integrity sha512-KgWIFvJv5lg0puFsjXwIqv99ew8u1gUnrjN6/0vmyz2T/sJxGkDuiGAUlZsjmpsF+z2weK9pDu4cutjHYId2Sg== integrity sha512-1njVUjaN/+gVd5WkHPW4EkmweZvpsWOaUP2FgRglxLQNtRXbi902HJYsl9mufV3Op/oGvN4rSdtttxgYCf8YFg==
dependencies: dependencies:
"@carbon/telemetry" "0.0.0-alpha.6" "@carbon/telemetry" "0.0.0-alpha.6"
flatpickr "4.6.1" flatpickr "4.6.1"

2
package.json
View file

@ -32,7 +32,7 @@
"@rollup/plugin-node-resolve": "^11.1.1", "@rollup/plugin-node-resolve": "^11.1.1",
"@tsconfig/svelte": "^1.0.10", "@tsconfig/svelte": "^1.0.10",
"autoprefixer": "^10.2.4", "autoprefixer": "^10.2.4",
"carbon-components": "10.34.0", "carbon-components": "10.35.0",
"gh-pages": "^3.1.0", "gh-pages": "^3.1.0",
"husky": "^4.3.8", "husky": "^4.3.8",
"lint-staged": "^10.5.3", "lint-staged": "^10.5.3",

13
src/Button/Button.svelte
View file

@ -13,10 +13,13 @@
/** /**
* Specify the size of button * Specify the size of button
* @type {"default" | "field" | "small" | "xl"} * @type {"default" | "field" | "small" | "lg" | "xl"}
*/ */
export let size = "default"; export let size = "default";
/** Set to `true` to use Carbon's expressive typesetting */
export let expressive = false;
/** /**
* Set to `true` to enable the selected state for an icon-only, ghost button * Set to `true` to enable the selected state for an icon-only, ghost button
*/ */
@ -98,8 +101,16 @@
...$$restProps, ...$$restProps,
class: [ class: [
"bx--btn", "bx--btn",
expressive && "bx--btn--expressive",
((size === "small" && !expressive) ||
(size === "sm" && !expressive) ||
(size === "small" && !expressive)) &&
"bx--btn--sm",
(size === "field" && !expressive) ||
(size === "md" && !expressive && "bx--btn--md"),
size === "field" && "bx--btn--field", size === "field" && "bx--btn--field",
size === "small" && "bx--btn--sm", size === "small" && "bx--btn--sm",
size === "lg" && "bx--btn--lg",
size === "xl" && "bx--btn--xl", size === "xl" && "bx--btn--xl",
kind && `bx--btn--${kind}`, kind && `bx--btn--${kind}`,
disabled && "bx--btn--disabled", disabled && "bx--btn--disabled",

6
src/Button/ButtonSkeleton.svelte
View file

@ -7,7 +7,7 @@
/** /**
* Specify the size of button skeleton * Specify the size of button skeleton
* @type {"default" | "field" | "small"} * @type {"default" | "field" | "small" | "lg" | "xl"}
*/ */
export let size = "default"; export let size = "default";
@ -27,6 +27,8 @@
class:bx--btn="{true}" class:bx--btn="{true}"
class:bx--btn--field="{size === 'field'}" class:bx--btn--field="{size === 'field'}"
class:bx--btn--sm="{size === 'small' || small}" class:bx--btn--sm="{size === 'small' || small}"
class:bx--btn--lg="{size === 'lg'}"
class:bx--btn--xl="{size === 'xl'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
@ -41,6 +43,8 @@
class:bx--btn="{true}" class:bx--btn="{true}"
class:bx--btn--field="{size === 'field'}" class:bx--btn--field="{size === 'field'}"
class:bx--btn--sm="{size === 'small' || small}" class:bx--btn--sm="{size === 'small' || small}"
class:bx--btn--lg="{size === 'lg'}"
class:bx--btn--xl="{size === 'xl'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

8
src/FileUploader/FileUploaderItem.svelte
View file

@ -9,6 +9,12 @@
*/ */
export let status = "uploading"; export let status = "uploading";
/**
* Specify the size of button skeleton
* @type {"default" | "field" | "small"}
*/
export let size = "default";
/** Specify the ARIA label used for the status icons */ /** Specify the ARIA label used for the status icons */
export let iconDescription = ""; export let iconDescription = "";
@ -37,6 +43,8 @@
id="{id}" id="{id}"
class:bx--file__selected-file="{true}" class:bx--file__selected-file="{true}"
class:bx--file__selected-file--invalid="{invalid}" class:bx--file__selected-file--invalid="{invalid}"
class:bx--file__selected-file--md="{size === 'field'}"
class:bx--file__selected-file--sm="{size === 'small'}"
{...$$restProps} {...$$restProps}
on:mouseover on:mouseover
on:mouseenter on:mouseenter

70
src/NumberInput/NumberInput.svelte
View file

@ -49,6 +49,9 @@
/** Set to `true` to disable the input */ /** Set to `true` to disable the input */
export let disabled = false; export let disabled = false;
/** Set to `true` to hide the input stepper buttons */
export let hideSteppers = false;
/** Specify the ARIA label for the increment icons */ /** Specify the ARIA label for the increment icons */
export let iconDescription = ""; export let iconDescription = "";
@ -156,6 +159,7 @@
class:bx--number--readonly="{readonly}" class:bx--number--readonly="{readonly}"
class:bx--number--light="{light}" class:bx--number--light="{light}"
class:bx--number--nolabel="{hideLabel}" class:bx--number--nolabel="{hideLabel}"
class:bx--number--nosteppers="{hideSteppers}"
class:bx--number--mobile="{mobile}" class:bx--number--mobile="{mobile}"
class="{size && `bx--number--${size}`}" class="{size && `bx--number--${size}`}"
> >
@ -269,38 +273,40 @@
class="bx--number__invalid bx--number__invalid--warning" class="bx--number__invalid bx--number__invalid--warning"
/> />
{/if} {/if}
<div class:bx--number__controls="{true}"> {#if !hideSteppers}
<button <div class:bx--number__controls="{true}">
type="button" <button
tabindex="-1" type="button"
title="{decrementLabel || iconDescription}" tabindex="-1"
aria-label="{decrementLabel || iconDescription}" title="{decrementLabel || iconDescription}"
class:bx--number__control-btn="{true}" aria-label="{decrementLabel || iconDescription}"
class:down-icon="{true}" class:bx--number__control-btn="{true}"
on:click="{() => { class:down-icon="{true}"
updateValue(-1); on:click="{() => {
}}" updateValue(-1);
disabled="{disabled}" }}"
> disabled="{disabled}"
<Subtract16 class="down-icon" /> >
</button> <Subtract16 class="down-icon" />
<div class:bx--number__rule-divider="{true}"></div> </button>
<button <div class:bx--number__rule-divider="{true}"></div>
type="button" <button
tabindex="-1" type="button"
title="{incrementLabel || iconDescription}" tabindex="-1"
aria-label="{incrementLabel || iconDescription}" title="{incrementLabel || iconDescription}"
class:bx--number__control-btn="{true}" aria-label="{incrementLabel || iconDescription}"
class:up-icon="{true}" class:bx--number__control-btn="{true}"
on:click="{() => { class:up-icon="{true}"
updateValue(1); on:click="{() => {
}}" updateValue(1);
disabled="{disabled}" }}"
> disabled="{disabled}"
<Add16 class="up-icon" /> >
</button> <Add16 class="up-icon" />
<div class:bx--number__rule-divider="{true}"></div> </button>
</div> <div class:bx--number__rule-divider="{true}"></div>
</div>
{/if}
</div> </div>
{/if} {/if}
{#if !error && !warn && helperText} {#if !error && !warn && helperText}

4
src/OrderedList/OrderedList.svelte
View file

@ -4,12 +4,16 @@
/** Set to `true` to use native list styles */ /** Set to `true` to use native list styles */
export let native = false; export let native = false;
/** Set to `true` to use Carbon's expressive typesetting */
export let expressive = false;
</script> </script>
<ol <ol
class:bx--list--ordered="{!native}" class:bx--list--ordered="{!native}"
class:bx--list--ordered--native="{native}" class:bx--list--ordered--native="{native}"
class:bx--list--nested="{nested}" class:bx--list--nested="{nested}"
class:bx--list--expressive="{expressive}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

8
src/Search/Search.svelte
View file

@ -58,6 +58,12 @@
/** Specify the label text */ /** Specify the label text */
export let labelText = ""; export let labelText = "";
/**
* Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte").CarbonIcon}
*/
export let icon = Search16;
/** Set an id for the input element */ /** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
@ -109,7 +115,7 @@
if (expandable) expanded = true; if (expandable) expanded = true;
}}" }}"
> >
<Search16 class="bx--search-magnifier-icon" /> <svelte:component this="{icon}" class="bx--search-magnifier-icon" />
</div> </div>
<label id="{id}-search" for="{id}" class:bx--label="{true}" <label id="{id}-search" for="{id}" class:bx--label="{true}"
>{labelText}</label >{labelText}</label

5
src/Tooltip/Tooltip.svelte
View file

@ -186,6 +186,7 @@
<div <div
bind:this="{refIcon}" bind:this="{refIcon}"
{...buttonProps} {...buttonProps}
aria-describedby="{tooltipId}"
on:click|preventDefault|stopPropagation="{openMenu}" on:click|preventDefault|stopPropagation="{openMenu}"
on:focus="{openMenu}" on:focus="{openMenu}"
on:blur="{onBlur}" on:blur="{onBlur}"
@ -200,6 +201,7 @@
<div <div
bind:this="{ref}" bind:this="{ref}"
{...buttonProps} {...buttonProps}
aria-describedby="{tooltipId}"
on:click|preventDefault|stopPropagation="{openMenu}" on:click|preventDefault|stopPropagation="{openMenu}"
on:focus="{openMenu}" on:focus="{openMenu}"
on:blur="{onBlur}" on:blur="{onBlur}"
@ -211,7 +213,6 @@
{#if open} {#if open}
<div <div
bind:this="{refTooltip}" bind:this="{refTooltip}"
role="tooltip"
id="{tooltipId}" id="{tooltipId}"
data-floating-menu-direction="{direction}" data-floating-menu-direction="{direction}"
class:bx--tooltip="{true}" class:bx--tooltip="{true}"
@ -231,8 +232,6 @@
class:bx--tooltip__content="{true}" class:bx--tooltip__content="{true}"
tabIndex="-1" tabIndex="-1"
role="dialog" role="dialog"
aria-describedby="{$$props['tooltipBodyId']}"
aria-labelledby="{triggerId}"
> >
<slot /> <slot />
</div> </div>

19
src/TooltipIcon/TooltipIcon.svelte
View file

@ -5,6 +5,15 @@
*/ */
export let tooltipText = ""; export let tooltipText = "";
/**
* Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte").CarbonIcon}
*/
export let icon = undefined;
/** Set to `true` to disable the tooltip icon */
export let disabled = false;
/** /**
* 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"}
@ -35,10 +44,11 @@
<button <button
bind:this="{ref}" bind:this="{ref}"
disabled="{disabled}"
aria-describedby="{id}" aria-describedby="{id}"
class:bx--tooltip__trigger="{true}" class:bx--tooltip__trigger="{true}"
class:bx--tooltip--a11y="{true}" class:bx--tooltip--a11y="{true}"
class:bx--tooltip--hidden="{hidden}" class:bx--tooltip--hidden="{hidden || disabled}"
class:bx--tooltip--top="{direction === 'top'}" class:bx--tooltip--top="{direction === 'top'}"
class:bx--tooltip--right="{direction === 'right'}" class:bx--tooltip--right="{direction === 'right'}"
class:bx--tooltip--bottom="{direction === 'bottom'}" class:bx--tooltip--bottom="{direction === 'bottom'}"
@ -47,20 +57,25 @@
class:bx--tooltip--align-center="{align === 'center'}" class:bx--tooltip--align-center="{align === 'center'}"
class:bx--tooltip--align-end="{align === 'end'}" class:bx--tooltip--align-end="{align === 'end'}"
{...$$restProps} {...$$restProps}
style="cursor: {disabled ? 'not-allowed' : 'default'}; {$$restProps.style}"
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseenter="{() => { on:mouseenter="{() => {
if (disabled) return;
hidden = false; hidden = false;
}}" }}"
on:mouseleave on:mouseleave
on:focus on:focus
on:focus="{() => { on:focus="{() => {
if (disabled) return;
hidden = false; hidden = false;
}}" }}"
> >
<span id="{id}" class:bx--assistive-text="{true}"> <span id="{id}" class:bx--assistive-text="{true}">
<slot name="tooltipText">{tooltipText}</slot> <slot name="tooltipText">{tooltipText}</slot>
</span> </span>
<slot /> <slot>
<svelte:component this="{icon}" />
</slot>
</button> </button>

4
src/UnorderedList/UnorderedList.svelte
View file

@ -1,11 +1,15 @@
<script> <script>
/** Set to `true` to use the nested variant */ /** Set to `true` to use the nested variant */
export let nested = false; export let nested = false;
/** Set to `true` to use Carbon's expressive typesetting */
export let expressive = false;
</script> </script>
<ul <ul
class:bx--list--unordered="{true}" class:bx--list--unordered="{true}"
class:bx--list--nested="{nested}" class:bx--list--nested="{nested}"
class:bx--list--expressive="{expressive}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

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

@ -24,7 +24,13 @@ export interface ButtonProps
* Specify the size of button * Specify the size of button
* @default "default" * @default "default"
*/ */
size?: "default" | "field" | "small" | "xl"; size?: "default" | "field" | "small" | "lg" | "xl";
/**
* Set to `true` to use Carbon's expressive typesetting
* @default false
*/
expressive?: boolean;
/** /**
* Set to `true` to enable the selected state for an icon-only, ghost button * Set to `true` to enable the selected state for an icon-only, ghost button

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

@ -12,7 +12,7 @@ export interface ButtonSkeletonProps
* Specify the size of button skeleton * Specify the size of button skeleton
* @default "default" * @default "default"
*/ */
size?: "default" | "field" | "small"; size?: "default" | "field" | "small" | "lg" | "xl";
/** /**
* @default false * @default false

6
types/FileUploader/FileUploaderItem.d.ts vendored
View file

@ -9,6 +9,12 @@ export interface FileUploaderItemProps
*/ */
status?: "uploading" | "edit" | "complete"; status?: "uploading" | "edit" | "complete";
/**
* Specify the size of button skeleton
* @default "default"
*/
size?: "default" | "field" | "small";
/** /**
* Specify the ARIA label used for the status icons * Specify the ARIA label used for the status icons
* @default "" * @default ""

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

@ -62,6 +62,12 @@ export interface NumberInputProps
*/ */
disabled?: boolean; disabled?: boolean;
/**
* Set to `true` to hide the input stepper buttons
* @default false
*/
hideSteppers?: boolean;
/** /**
* Specify the ARIA label for the increment icons * Specify the ARIA label for the increment icons
* @default "" * @default ""

6
types/OrderedList/OrderedList.d.ts vendored
View file

@ -14,6 +14,12 @@ export interface OrderedListProps
* @default false * @default false
*/ */
native?: boolean; native?: boolean;
/**
* Set to `true` to use Carbon's expressive typesetting
* @default false
*/
expressive?: boolean;
} }
export default class OrderedList extends SvelteComponentTyped< export default class OrderedList extends SvelteComponentTyped<

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

@ -91,6 +91,11 @@ export interface SearchProps {
*/ */
labelText?: string; labelText?: string;
/**
* Specify the icon from `carbon-icons-svelte` to render
*/
icon?: typeof import("carbon-icons-svelte").CarbonIcon;
/** /**
* Set an id for the input element * Set an id for the input element
* @default "ccs-" + Math.random().toString(36) * @default "ccs-" + Math.random().toString(36)

11
types/TooltipIcon/TooltipIcon.d.ts vendored
View file

@ -10,6 +10,17 @@ export interface TooltipIconProps
*/ */
tooltipText?: string; tooltipText?: string;
/**
* Specify the icon from `carbon-icons-svelte` to render
*/
icon?: typeof import("carbon-icons-svelte").CarbonIcon;
/**
* Set to `true` to disable the tooltip icon
* @default false
*/
disabled?: boolean;
/** /**
* Set the alignment of the tooltip relative to the icon * Set the alignment of the tooltip relative to the icon
* @default "center" * @default "center"

6
types/UnorderedList/UnorderedList.d.ts vendored
View file

@ -8,6 +8,12 @@ export interface UnorderedListProps
* @default false * @default false
*/ */
nested?: boolean; nested?: boolean;
/**
* Set to `true` to use Carbon's expressive typesetting
* @default false
*/
expressive?: boolean;
} }
export default class UnorderedList extends SvelteComponentTyped< export default class UnorderedList extends SvelteComponentTyped<

8
yarn.lock
View file

@ -453,10 +453,10 @@ caniuse-lite@^1.0.30001181:
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001183.tgz#7a57ba9d6584119bb5f2bc76d3cc47ba9356b3e2" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001183.tgz#7a57ba9d6584119bb5f2bc76d3cc47ba9356b3e2"
integrity sha512-7JkwTEE1hlRKETbCFd8HDZeLiQIUcl8rC6JgNjvHCNaxOeNmQ9V4LvQXRUsKIV2CC73qKxljwVhToaA3kLRqTw== integrity sha512-7JkwTEE1hlRKETbCFd8HDZeLiQIUcl8rC6JgNjvHCNaxOeNmQ9V4LvQXRUsKIV2CC73qKxljwVhToaA3kLRqTw==
carbon-components@10.34.0: carbon-components@10.35.0:
version "10.34.0" version "10.35.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.34.0.tgz#38a8bc4e03193e09459b22caf0fe2c72a64a63e8" resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.35.0.tgz#2669d8f6f989a5dc96843c43a5ac12e4a9c3dfa7"
integrity sha512-KgWIFvJv5lg0puFsjXwIqv99ew8u1gUnrjN6/0vmyz2T/sJxGkDuiGAUlZsjmpsF+z2weK9pDu4cutjHYId2Sg== integrity sha512-1njVUjaN/+gVd5WkHPW4EkmweZvpsWOaUP2FgRglxLQNtRXbi902HJYsl9mufV3Op/oGvN4rSdtttxgYCf8YFg==
dependencies: dependencies:
"@carbon/telemetry" "0.0.0-alpha.6" "@carbon/telemetry" "0.0.0-alpha.6"
flatpickr "4.6.1" flatpickr "4.6.1"