mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +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

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

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

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

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

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

@ -47,4 +47,14 @@ components: ["UnorderedList", "ListItem"]
</ListItem>
<ListItem>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>