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

26
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 |
| hasIconOnly | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the icon-only variant |
| kind | <code>let</code> | No | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger-tertiary" &#124; "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button |
| size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small" &#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 |
| 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 |
@ -401,9 +402,9 @@ 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" &#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> | -- |
### Slots
@ -1299,6 +1300,7 @@ None.
| 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 |
| 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 |
| 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 |
@ -2472,7 +2474,7 @@ export type NumberInputTranslationId = "increment" | "decrement";
### Props
| 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 |
| 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 |
@ -2484,6 +2486,7 @@ export type NumberInputTranslationId = "increment" | "decrement";
| 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 |
@ -2540,9 +2543,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 |
| 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
@ -3013,7 +3017,7 @@ None.
### Props
| 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 |
| 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 |
@ -3030,6 +3034,7 @@ None.
| 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,6 +4522,8 @@ None.
| :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
| 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 |
| 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 |
| 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 |
@ -4524,8 +4531,8 @@ None.
### Slots
| Slot name | Default | Props | Fallback |
| :---------- | :------ | :---- | :------------------------- |
| -- | Yes | -- | -- |
| :---------- | :------ | :---- | :---------------------------------------------------- |
| -- | Yes | -- | <code>&lt;svelte:component this="{icon}" /&gt;</code> |
| tooltipText | No | -- | <code>{tooltipText}</code> |
### Events
@ -4561,8 +4568,9 @@ 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 |
| expressive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
### Slots

2
docs/package.json
View file

@ -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",

89
docs/src/COMPONENT_API.json
View file

@ -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": "{}" }],

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>
</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" />

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

@ -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 />

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

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

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

@ -70,3 +70,13 @@ Use the `native` attribute to enable default browser list styles. This is useful
<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>

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

@ -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 />

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

@ -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>
### Disabled
<TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon24} />

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

@ -48,3 +48,13 @@ components: ["UnorderedList", "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>

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==
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"

2
package.json
View file

@ -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
src/Button/Button.svelte
View file

@ -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",

6
src/Button/ButtonSkeleton.svelte
View file

@ -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

8
src/FileUploader/FileUploaderItem.svelte
View file

@ -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

6
src/NumberInput/NumberInput.svelte
View file

@ -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,6 +273,7 @@
class="bx--number__invalid bx--number__invalid--warning"
/>
{/if}
{#if !hideSteppers}
<div class:bx--number__controls="{true}">
<button
type="button"
@ -301,6 +306,7 @@
</button>
<div class:bx--number__rule-divider="{true}"></div>
</div>
{/if}
</div>
{/if}
{#if !error && !warn && helperText}

4
src/OrderedList/OrderedList.svelte
View file

@ -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

8
src/Search/Search.svelte
View file

@ -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

5
src/Tooltip/Tooltip.svelte
View file

@ -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>

19
src/TooltipIcon/TooltipIcon.svelte
View file

@ -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>

4
src/UnorderedList/UnorderedList.svelte
View file

@ -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
View file

@ -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
View file

@ -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
View file

@ -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
View file

@ -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
View file

@ -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
View file

@ -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
View file

@ -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
View file

@ -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<

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"
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"