mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
Align v10.35 (#694)
* 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
GitHub
parent
9fe2b28648
commit
db645c30f0
30 changed files with 396 additions and 130 deletions
|
|
@ -350,7 +350,8 @@ None.
|
|||
| ref | <code>let</code> | Yes | <code>null | HTMLAnchorElement | 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" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button |
|
||||
| size | <code>let</code> | No | <code>"default" | "field" | "small" | "xl"</code> | <code>"default"</code> | Specify the size of button |
|
||||
| size | <code>let</code> | No | <code>"default" | "field" | "small" | "lg" | "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 |
|
||||
| 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 |
|
||||
|
|
@ -400,11 +401,11 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | ------------------------------------ |
|
||||
| href | <code>let</code> | No | <code>string</code> | -- | Set the `href` to use an anchor link |
|
||||
| size | <code>let</code> | No | <code>"default" | "field" | "small"</code> | <code>"default"</code> | Specify the size of button skeleton |
|
||||
| small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | -- |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :--------------------------------------------------------------------------- | ---------------------- | ------------------------------------ |
|
||||
| href | <code>let</code> | No | <code>string</code> | -- | Set the `href` to use an anchor link |
|
||||
| size | <code>let</code> | No | <code>"default" | "field" | "small" | "lg" | "xl"</code> | <code>"default"</code> | Specify the size of button skeleton |
|
||||
| small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | -- |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -1299,6 +1300,7 @@ None.
|
|||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :--------------- | :------- | :------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ |
|
||||
| status | <code>let</code> | No | <code>"uploading" | "edit" | "complete"</code> | <code>"uploading"</code> | Specify the file uploader status |
|
||||
| size | <code>let</code> | No | <code>"default" | "field" | "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 |
|
||||
| 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 |
|
||||
|
|
@ -2471,31 +2473,32 @@ export type NumberInputTranslationId = "increment" | "decrement";
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| value | <code>let</code> | Yes | <code>number | string</code> | <code>""</code> | Specify the input value |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | -- | Set the size of the input |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| translateWithId | <code>let</code> | No | <code>(id: NumberInputTranslationId) => string</code> | <code>(id) => defaultTranslations[id]</code> | Override the default translation ids |
|
||||
| translationIds | <code>const</code> | No | <code>{ increment: "increment"; decrement: "decrement" }</code> | <code>{ increment: "increment", decrement: "decrement", }</code> | 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 |
|
||||
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the input |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| value | <code>let</code> | Yes | <code>number | string</code> | <code>""</code> | Specify the input value |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | -- | Set the size of the input |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| hideSteppers | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the input stepper buttons |
|
||||
| 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 |
|
||||
| translateWithId | <code>let</code> | No | <code>(id: NumberInputTranslationId) => string</code> | <code>(id) => defaultTranslations[id]</code> | Override the default translation ids |
|
||||
| translationIds | <code>const</code> | No | <code>{ increment: "increment"; decrement: "decrement" }</code> | <code>{ increment: "increment", decrement: "decrement", }</code> | 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 |
|
||||
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the input |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -2539,10 +2542,11 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| 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 |
|
||||
| native | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use native list styles |
|
||||
| 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 |
|
||||
| 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
|
||||
|
||||
|
|
@ -3012,25 +3016,26 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | 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 |
|
||||
| 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> | -- |
|
||||
| size | <code>let</code> | No | <code>"sm" | "lg" | "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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| autocomplete | <code>let</code> | No | <code>"on" | "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 |
|
||||
| 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 |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | 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 |
|
||||
| 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> | -- |
|
||||
| size | <code>let</code> | No | <code>"sm" | "lg" | "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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| autocomplete | <code>let</code> | No | <code>"on" | "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 |
|
||||
| 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 |
|
||||
| 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
|
||||
|
||||
|
|
@ -4517,16 +4522,18 @@ None.
|
|||
| :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
|
||||
| ref | <code>let</code> | Yes | <code>null | 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 |
|
||||
| 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" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
|
||||
| direction | <code>let</code> | No | <code>"top" | "right" | "bottom" | "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 |
|
||||
|
||||
### Slots
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :---------- | :------ | :---- | :------------------------- |
|
||||
| -- | Yes | -- | -- |
|
||||
| tooltipText | No | -- | <code>{tooltipText}</code> |
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :---------- | :------ | :---- | :---------------------------------------------------- |
|
||||
| -- | Yes | -- | <code><svelte:component this="{icon}" /></code> |
|
||||
| tooltipText | No | -- | <code>{tooltipText}</code> |
|
||||
|
||||
### Events
|
||||
|
||||
|
|
@ -4560,9 +4567,10 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| 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 |
|
||||
| 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 |
|
||||
| expressive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
"devDependencies": {
|
||||
"@sveltech/routify": "^1.9.9",
|
||||
"autoprefixer": "^10.2.3",
|
||||
"carbon-components": "10.34.0",
|
||||
"carbon-components": "10.35.0",
|
||||
"carbon-components-svelte": "../",
|
||||
"mdsvex": "^0.8.8",
|
||||
"npm-run-all": "^4.1.5",
|
||||
|
|
|
|||
|
|
@ -362,12 +362,22 @@
|
|||
"name": "size",
|
||||
"kind": "let",
|
||||
"description": "Specify the size of button",
|
||||
"type": "\"default\" | \"field\" | \"small\" | \"xl\"",
|
||||
"type": "\"default\" | \"field\" | \"small\" | \"lg\" | \"xl\"",
|
||||
"value": "\"default\"",
|
||||
"isFunction": false,
|
||||
"constant": 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",
|
||||
"kind": "let",
|
||||
|
|
@ -565,7 +575,7 @@
|
|||
"name": "size",
|
||||
"kind": "let",
|
||||
"description": "Specify the size of button skeleton",
|
||||
"type": "\"default\" | \"field\" | \"small\"",
|
||||
"type": "\"default\" | \"field\" | \"small\" | \"lg\" | \"xl\"",
|
||||
"value": "\"default\"",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
|
|
@ -3347,6 +3357,16 @@
|
|||
"constant": 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",
|
||||
"kind": "let",
|
||||
|
|
@ -6134,6 +6154,16 @@
|
|||
"constant": 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",
|
||||
"kind": "let",
|
||||
|
|
@ -6337,6 +6367,16 @@
|
|||
"isFunction": false,
|
||||
"constant": 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": "{}" }],
|
||||
|
|
@ -7939,6 +7979,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",
|
||||
|
|
@ -11365,6 +11414,25 @@
|
|||
"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": "disabled",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to disable the tooltip icon",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "align",
|
||||
"kind": "let",
|
||||
|
|
@ -11407,7 +11475,12 @@
|
|||
}
|
||||
],
|
||||
"slots": [
|
||||
{ "name": "__default__", "default": true, "slot_props": "{}" },
|
||||
{
|
||||
"name": "__default__",
|
||||
"default": true,
|
||||
"fallback": "<svelte:component this=\"{icon}\" />",
|
||||
"slot_props": "{}"
|
||||
},
|
||||
{
|
||||
"name": "tooltipText",
|
||||
"default": false,
|
||||
|
|
@ -11457,6 +11530,16 @@
|
|||
"isFunction": false,
|
||||
"constant": 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": "{}" }],
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ If an `href` value is specified, the component will render an [anchor element](h
|
|||
<p {...props}>Custom element</p>
|
||||
</Button>
|
||||
|
||||
### Field button
|
||||
### Field size
|
||||
|
||||
<Button size="field">Primary</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="danger">Danger</Button>
|
||||
|
||||
### Small button
|
||||
### Small size
|
||||
|
||||
<Button size="small">Primary</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="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" 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>
|
||||
|
||||
### 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
|
||||
|
||||
<Button size="xl" skeleton />
|
||||
<Button size="lg" skeleton />
|
||||
<Button skeleton />
|
||||
<Button skeleton size="field" />
|
||||
<Button skeleton size="small" />
|
||||
|
|
@ -27,6 +27,14 @@ components: ["FileUploaderButton", "FileUploader", "FileUploaderDropContainer",
|
|||
|
||||
<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
|
||||
|
||||
<FileUploaderDropContainer labelText="Drag and drop files here or click to upload" multiple />
|
||||
|
|
|
|||
|
|
@ -23,6 +23,10 @@ components: ["NumberInput", "NumberInputSkeleton"]
|
|||
|
||||
<NumberInput hideLabel label="Clusters" />
|
||||
|
||||
### Hidden steppers
|
||||
|
||||
<NumberInput hideSteppers label="Clusters" />
|
||||
|
||||
### Light variant
|
||||
|
||||
<NumberInput light label="Clusters" />
|
||||
|
|
|
|||
|
|
@ -69,4 +69,14 @@ Use the `native` attribute to enable default browser list styles. This is useful
|
|||
</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>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<script>
|
||||
import Query16 from "carbon-icons-svelte/lib/Query16";
|
||||
import { Search } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
|
@ -43,6 +44,10 @@ The "clear" event is dispatched when clicking the "X" button in the search input
|
|||
|
||||
<Search disabled />
|
||||
|
||||
### Custom search icon
|
||||
|
||||
<Search icon={Query16} />
|
||||
|
||||
### Skeleton
|
||||
|
||||
<Search skeleton />
|
||||
|
|
|
|||
|
|
@ -7,22 +7,23 @@
|
|||
|
||||
### Default ("bottom" direction, "center" aligned)
|
||||
|
||||
<TooltipIcon tooltipText="Carbon is an open source design system by IBM.">
|
||||
<Carbon24 />
|
||||
</TooltipIcon>
|
||||
<TooltipIcon tooltipText="Carbon is an open source design system by IBM." icon={Carbon24} />
|
||||
|
||||
### Directions
|
||||
|
||||
<TooltipIcon tooltipText="Top start" direction="top" align="start"><Filter20 /></TooltipIcon>
|
||||
<TooltipIcon tooltipText="Right end" direction="right" align="end"><Filter20 /></TooltipIcon>
|
||||
<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start"><Filter20 /></TooltipIcon>
|
||||
<TooltipIcon tooltipText="Left start" direction="left" align="start"><Filter20 /></TooltipIcon>
|
||||
<TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter20} />
|
||||
<TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter20} />
|
||||
<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter20} />
|
||||
<TooltipIcon tooltipText="Left start" direction="left" align="start" icon={Filter20} />
|
||||
|
||||
### Custom 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>
|
||||
<Carbon24 />
|
||||
</TooltipIcon>
|
||||
</TooltipIcon>
|
||||
|
||||
### Disabled
|
||||
|
||||
<TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon24} />
|
||||
|
|
@ -47,4 +47,14 @@ components: ["UnorderedList", "ListItem"]
|
|||
</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>
|
||||
|
|
@ -837,16 +837,16 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
|
|||
integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
|
||||
|
||||
carbon-components-svelte@../:
|
||||
version "0.33.0"
|
||||
version "0.34.0"
|
||||
dependencies:
|
||||
carbon-icons-svelte "^10.27.0"
|
||||
clipboard-copy "3.2.0"
|
||||
flatpickr "4.6.9"
|
||||
|
||||
carbon-components@10.34.0:
|
||||
version "10.34.0"
|
||||
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.34.0.tgz#38a8bc4e03193e09459b22caf0fe2c72a64a63e8"
|
||||
integrity sha512-KgWIFvJv5lg0puFsjXwIqv99ew8u1gUnrjN6/0vmyz2T/sJxGkDuiGAUlZsjmpsF+z2weK9pDu4cutjHYId2Sg==
|
||||
carbon-components@10.35.0:
|
||||
version "10.35.0"
|
||||
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.35.0.tgz#2669d8f6f989a5dc96843c43a5ac12e4a9c3dfa7"
|
||||
integrity sha512-1njVUjaN/+gVd5WkHPW4EkmweZvpsWOaUP2FgRglxLQNtRXbi902HJYsl9mufV3Op/oGvN4rSdtttxgYCf8YFg==
|
||||
dependencies:
|
||||
"@carbon/telemetry" "0.0.0-alpha.6"
|
||||
flatpickr "4.6.1"
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
"@rollup/plugin-node-resolve": "^11.1.1",
|
||||
"@tsconfig/svelte": "^1.0.10",
|
||||
"autoprefixer": "^10.2.4",
|
||||
"carbon-components": "10.34.0",
|
||||
"carbon-components": "10.35.0",
|
||||
"gh-pages": "^3.1.0",
|
||||
"husky": "^4.3.8",
|
||||
"lint-staged": "^10.5.3",
|
||||
|
|
|
|||
|
|
@ -13,10 +13,13 @@
|
|||
|
||||
/**
|
||||
* Specify the size of button
|
||||
* @type {"default" | "field" | "small" | "xl"}
|
||||
* @type {"default" | "field" | "small" | "lg" | "xl"}
|
||||
*/
|
||||
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
|
||||
*/
|
||||
|
|
@ -98,8 +101,16 @@
|
|||
...$$restProps,
|
||||
class: [
|
||||
"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 === "small" && "bx--btn--sm",
|
||||
size === "lg" && "bx--btn--lg",
|
||||
size === "xl" && "bx--btn--xl",
|
||||
kind && `bx--btn--${kind}`,
|
||||
disabled && "bx--btn--disabled",
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
/**
|
||||
* Specify the size of button skeleton
|
||||
* @type {"default" | "field" | "small"}
|
||||
* @type {"default" | "field" | "small" | "lg" | "xl"}
|
||||
*/
|
||||
export let size = "default";
|
||||
|
||||
|
|
@ -27,6 +27,8 @@
|
|||
class:bx--btn="{true}"
|
||||
class:bx--btn--field="{size === 'field'}"
|
||||
class:bx--btn--sm="{size === 'small' || small}"
|
||||
class:bx--btn--lg="{size === 'lg'}"
|
||||
class:bx--btn--xl="{size === 'xl'}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
@ -41,6 +43,8 @@
|
|||
class:bx--btn="{true}"
|
||||
class:bx--btn--field="{size === 'field'}"
|
||||
class:bx--btn--sm="{size === 'small' || small}"
|
||||
class:bx--btn--lg="{size === 'lg'}"
|
||||
class:bx--btn--xl="{size === 'xl'}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
|
|||
|
|
@ -9,6 +9,12 @@
|
|||
*/
|
||||
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 */
|
||||
export let iconDescription = "";
|
||||
|
||||
|
|
@ -37,6 +43,8 @@
|
|||
id="{id}"
|
||||
class:bx--file__selected-file="{true}"
|
||||
class:bx--file__selected-file--invalid="{invalid}"
|
||||
class:bx--file__selected-file--md="{size === 'field'}"
|
||||
class:bx--file__selected-file--sm="{size === 'small'}"
|
||||
{...$$restProps}
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
|
|
|
|||
|
|
@ -49,6 +49,9 @@
|
|||
/** Set to `true` to disable the input */
|
||||
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 */
|
||||
export let iconDescription = "";
|
||||
|
||||
|
|
@ -156,6 +159,7 @@
|
|||
class:bx--number--readonly="{readonly}"
|
||||
class:bx--number--light="{light}"
|
||||
class:bx--number--nolabel="{hideLabel}"
|
||||
class:bx--number--nosteppers="{hideSteppers}"
|
||||
class:bx--number--mobile="{mobile}"
|
||||
class="{size && `bx--number--${size}`}"
|
||||
>
|
||||
|
|
@ -269,38 +273,40 @@
|
|||
class="bx--number__invalid bx--number__invalid--warning"
|
||||
/>
|
||||
{/if}
|
||||
<div class:bx--number__controls="{true}">
|
||||
<button
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
title="{decrementLabel || iconDescription}"
|
||||
aria-label="{decrementLabel || iconDescription}"
|
||||
class:bx--number__control-btn="{true}"
|
||||
class:down-icon="{true}"
|
||||
on:click="{() => {
|
||||
updateValue(-1);
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<Subtract16 class="down-icon" />
|
||||
</button>
|
||||
<div class:bx--number__rule-divider="{true}"></div>
|
||||
<button
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
title="{incrementLabel || iconDescription}"
|
||||
aria-label="{incrementLabel || iconDescription}"
|
||||
class:bx--number__control-btn="{true}"
|
||||
class:up-icon="{true}"
|
||||
on:click="{() => {
|
||||
updateValue(1);
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<Add16 class="up-icon" />
|
||||
</button>
|
||||
<div class:bx--number__rule-divider="{true}"></div>
|
||||
</div>
|
||||
{#if !hideSteppers}
|
||||
<div class:bx--number__controls="{true}">
|
||||
<button
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
title="{decrementLabel || iconDescription}"
|
||||
aria-label="{decrementLabel || iconDescription}"
|
||||
class:bx--number__control-btn="{true}"
|
||||
class:down-icon="{true}"
|
||||
on:click="{() => {
|
||||
updateValue(-1);
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<Subtract16 class="down-icon" />
|
||||
</button>
|
||||
<div class:bx--number__rule-divider="{true}"></div>
|
||||
<button
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
title="{incrementLabel || iconDescription}"
|
||||
aria-label="{incrementLabel || iconDescription}"
|
||||
class:bx--number__control-btn="{true}"
|
||||
class:up-icon="{true}"
|
||||
on:click="{() => {
|
||||
updateValue(1);
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<Add16 class="up-icon" />
|
||||
</button>
|
||||
<div class:bx--number__rule-divider="{true}"></div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{#if !error && !warn && helperText}
|
||||
|
|
|
|||
|
|
@ -4,12 +4,16 @@
|
|||
|
||||
/** Set to `true` to use native list styles */
|
||||
export let native = false;
|
||||
|
||||
/** Set to `true` to use Carbon's expressive typesetting */
|
||||
export let expressive = false;
|
||||
</script>
|
||||
|
||||
<ol
|
||||
class:bx--list--ordered="{!native}"
|
||||
class:bx--list--ordered--native="{native}"
|
||||
class:bx--list--nested="{nested}"
|
||||
class:bx--list--expressive="{expressive}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
|
|||
|
|
@ -58,6 +58,12 @@
|
|||
/** Specify the label text */
|
||||
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 */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
|
|
@ -109,7 +115,7 @@
|
|||
if (expandable) expanded = true;
|
||||
}}"
|
||||
>
|
||||
<Search16 class="bx--search-magnifier-icon" />
|
||||
<svelte:component this="{icon}" class="bx--search-magnifier-icon" />
|
||||
</div>
|
||||
<label id="{id}-search" for="{id}" class:bx--label="{true}"
|
||||
>{labelText}</label
|
||||
|
|
|
|||
|
|
@ -186,6 +186,7 @@
|
|||
<div
|
||||
bind:this="{refIcon}"
|
||||
{...buttonProps}
|
||||
aria-describedby="{tooltipId}"
|
||||
on:click|preventDefault|stopPropagation="{openMenu}"
|
||||
on:focus="{openMenu}"
|
||||
on:blur="{onBlur}"
|
||||
|
|
@ -200,6 +201,7 @@
|
|||
<div
|
||||
bind:this="{ref}"
|
||||
{...buttonProps}
|
||||
aria-describedby="{tooltipId}"
|
||||
on:click|preventDefault|stopPropagation="{openMenu}"
|
||||
on:focus="{openMenu}"
|
||||
on:blur="{onBlur}"
|
||||
|
|
@ -211,7 +213,6 @@
|
|||
{#if open}
|
||||
<div
|
||||
bind:this="{refTooltip}"
|
||||
role="tooltip"
|
||||
id="{tooltipId}"
|
||||
data-floating-menu-direction="{direction}"
|
||||
class:bx--tooltip="{true}"
|
||||
|
|
@ -231,8 +232,6 @@
|
|||
class:bx--tooltip__content="{true}"
|
||||
tabIndex="-1"
|
||||
role="dialog"
|
||||
aria-describedby="{$$props['tooltipBodyId']}"
|
||||
aria-labelledby="{triggerId}"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,15 @@
|
|||
*/
|
||||
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
|
||||
* @type {"start" | "center" | "end"}
|
||||
|
|
@ -35,10 +44,11 @@
|
|||
|
||||
<button
|
||||
bind:this="{ref}"
|
||||
disabled="{disabled}"
|
||||
aria-describedby="{id}"
|
||||
class:bx--tooltip__trigger="{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--right="{direction === 'right'}"
|
||||
class:bx--tooltip--bottom="{direction === 'bottom'}"
|
||||
|
|
@ -47,20 +57,25 @@
|
|||
class:bx--tooltip--align-center="{align === 'center'}"
|
||||
class:bx--tooltip--align-end="{align === 'end'}"
|
||||
{...$$restProps}
|
||||
style="cursor: {disabled ? 'not-allowed' : 'default'}; {$$restProps.style}"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseenter="{() => {
|
||||
if (disabled) return;
|
||||
hidden = false;
|
||||
}}"
|
||||
on:mouseleave
|
||||
on:focus
|
||||
on:focus="{() => {
|
||||
if (disabled) return;
|
||||
hidden = false;
|
||||
}}"
|
||||
>
|
||||
<span id="{id}" class:bx--assistive-text="{true}">
|
||||
<slot name="tooltipText">{tooltipText}</slot>
|
||||
</span>
|
||||
<slot />
|
||||
<slot>
|
||||
<svelte:component this="{icon}" />
|
||||
</slot>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
<script>
|
||||
/** Set to `true` to use the nested variant */
|
||||
export let nested = false;
|
||||
|
||||
/** Set to `true` to use Carbon's expressive typesetting */
|
||||
export let expressive = false;
|
||||
</script>
|
||||
|
||||
<ul
|
||||
class:bx--list--unordered="{true}"
|
||||
class:bx--list--nested="{nested}"
|
||||
class:bx--list--expressive="{expressive}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
|
|||
8
types/Button/Button.d.ts
vendored
8
types/Button/Button.d.ts
vendored
|
|
@ -24,7 +24,13 @@ export interface ButtonProps
|
|||
* Specify the size of button
|
||||
* @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
|
||||
|
|
|
|||
2
types/Button/ButtonSkeleton.d.ts
vendored
2
types/Button/ButtonSkeleton.d.ts
vendored
|
|
@ -12,7 +12,7 @@ export interface ButtonSkeletonProps
|
|||
* Specify the size of button skeleton
|
||||
* @default "default"
|
||||
*/
|
||||
size?: "default" | "field" | "small";
|
||||
size?: "default" | "field" | "small" | "lg" | "xl";
|
||||
|
||||
/**
|
||||
* @default false
|
||||
|
|
|
|||
6
types/FileUploader/FileUploaderItem.d.ts
vendored
6
types/FileUploader/FileUploaderItem.d.ts
vendored
|
|
@ -9,6 +9,12 @@ export interface FileUploaderItemProps
|
|||
*/
|
||||
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
|
||||
* @default ""
|
||||
|
|
|
|||
6
types/NumberInput/NumberInput.d.ts
vendored
6
types/NumberInput/NumberInput.d.ts
vendored
|
|
@ -62,6 +62,12 @@ export interface NumberInputProps
|
|||
*/
|
||||
disabled?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to hide the input stepper buttons
|
||||
* @default false
|
||||
*/
|
||||
hideSteppers?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the ARIA label for the increment icons
|
||||
* @default ""
|
||||
|
|
|
|||
6
types/OrderedList/OrderedList.d.ts
vendored
6
types/OrderedList/OrderedList.d.ts
vendored
|
|
@ -14,6 +14,12 @@ export interface OrderedListProps
|
|||
* @default false
|
||||
*/
|
||||
native?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to use Carbon's expressive typesetting
|
||||
* @default false
|
||||
*/
|
||||
expressive?: boolean;
|
||||
}
|
||||
|
||||
export default class OrderedList extends SvelteComponentTyped<
|
||||
|
|
|
|||
5
types/Search/Search.d.ts
vendored
5
types/Search/Search.d.ts
vendored
|
|
@ -91,6 +91,11 @@ export interface SearchProps {
|
|||
*/
|
||||
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
|
||||
* @default "ccs-" + Math.random().toString(36)
|
||||
|
|
|
|||
11
types/TooltipIcon/TooltipIcon.d.ts
vendored
11
types/TooltipIcon/TooltipIcon.d.ts
vendored
|
|
@ -10,6 +10,17 @@ export interface TooltipIconProps
|
|||
*/
|
||||
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
|
||||
* @default "center"
|
||||
|
|
|
|||
6
types/UnorderedList/UnorderedList.d.ts
vendored
6
types/UnorderedList/UnorderedList.d.ts
vendored
|
|
@ -8,6 +8,12 @@ export interface UnorderedListProps
|
|||
* @default false
|
||||
*/
|
||||
nested?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to use Carbon's expressive typesetting
|
||||
* @default false
|
||||
*/
|
||||
expressive?: boolean;
|
||||
}
|
||||
|
||||
export default class UnorderedList extends SvelteComponentTyped<
|
||||
|
|
|
|||
|
|
@ -453,10 +453,10 @@ caniuse-lite@^1.0.30001181:
|
|||
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001183.tgz#7a57ba9d6584119bb5f2bc76d3cc47ba9356b3e2"
|
||||
integrity sha512-7JkwTEE1hlRKETbCFd8HDZeLiQIUcl8rC6JgNjvHCNaxOeNmQ9V4LvQXRUsKIV2CC73qKxljwVhToaA3kLRqTw==
|
||||
|
||||
carbon-components@10.34.0:
|
||||
version "10.34.0"
|
||||
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.34.0.tgz#38a8bc4e03193e09459b22caf0fe2c72a64a63e8"
|
||||
integrity sha512-KgWIFvJv5lg0puFsjXwIqv99ew8u1gUnrjN6/0vmyz2T/sJxGkDuiGAUlZsjmpsF+z2weK9pDu4cutjHYId2Sg==
|
||||
carbon-components@10.35.0:
|
||||
version "10.35.0"
|
||||
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.35.0.tgz#2669d8f6f989a5dc96843c43a5ac12e4a9c3dfa7"
|
||||
integrity sha512-1njVUjaN/+gVd5WkHPW4EkmweZvpsWOaUP2FgRglxLQNtRXbi902HJYsl9mufV3Op/oGvN4rSdtttxgYCf8YFg==
|
||||
dependencies:
|
||||
"@carbon/telemetry" "0.0.0-alpha.6"
|
||||
flatpickr "4.6.1"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue