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

Custom element

-### Field button +### Field size @@ -86,7 +86,7 @@ If an `href` value is specified, the component will render an [anchor element](h -### Small button +### Small size @@ -94,7 +94,15 @@ If an `href` value is specified, the component will render an [anchor element](h -### Extra-large button +### Large size + + + + + + + +### Extra-large size @@ -106,8 +114,34 @@ If an `href` value is specified, the component will render an [anchor element](h +### 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. + + + + + + +

+ + + + + +

+ + + + + + ### Skeleton + -
- -
- + {#if !hideSteppers} +
+ +
+ +
+
+ {/if} {/if} {#if !error && !warn && helperText} diff --git a/src/OrderedList/OrderedList.svelte b/src/OrderedList/OrderedList.svelte index d4facb31..c1f783be 100644 --- a/src/OrderedList/OrderedList.svelte +++ b/src/OrderedList/OrderedList.svelte @@ -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;
    - + diff --git a/src/TooltipIcon/TooltipIcon.svelte b/src/TooltipIcon/TooltipIcon.svelte index 5bffcebb..ef76e957 100644 --- a/src/TooltipIcon/TooltipIcon.svelte +++ b/src/TooltipIcon/TooltipIcon.svelte @@ -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 @@ diff --git a/src/UnorderedList/UnorderedList.svelte b/src/UnorderedList/UnorderedList.svelte index 83632d00..4f8b7c51 100644 --- a/src/UnorderedList/UnorderedList.svelte +++ b/src/UnorderedList/UnorderedList.svelte @@ -1,11 +1,15 @@