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

Alignment with Carbon version 10.30 (#559)

Browse source 
* feat(toolbar): forward "clear" event in ToolbarSearch

* docs(search): add on:clear example

* fix(ui-shell): set aria-hidden in SideNav

Ref c2b4f1f00

* chore(deps-dev): upgrade carbon-components to v10.30.0

* fix(text-input): use bx--text-input class for TextInputSkeleton

* fix(radio-button): only render span if labelText is truthy

* docs(password-input): add custom tooltip example

* feat(button): add isSelected prop for icon-only, ghost buttons

* feat(radio-button): add legendText prop to RadioButtonGroup

* docs(tag): add filterable (disabled) variant

* feat(tag): add interactive prop

* chore(number-input): deprecate the mobile variant

Mobile variant styles will no longer work.

* feat(button): set aria-pressed attribute if icon-only, ghost button is selected

* fix(multi-select): type dispatched select event

* fix(button): remove redundant "button" role

* feat(icon): deprecate Icon, IconSkeleton

* feat(ui-shell): make SideNavMenuItem text slottable

* fix(list-box): update styles for ListBoxSelection

* fix(list-box): temporarily apply override styles to ListBoxMenuIcon for chevron

* fix(tag): set disabled prop on interactive tag

* docs(button): extract selected, icon-only button example

* feat(tooltip): elevate z-index of tooltip when open

* feat: forward restProps to input element

* fix(types): fix TimePicker test to pass svelte-check

* feat: add ImageLoader component

* test: add ImageLoader

* feat: add LocalStorage component

* test(local-storage): fix invalid file

* chore(docs): use green tag type
This commit is contained in:
Eric Liu 2021-03-13 14:53:37 -08:00 • committed by GitHub
commit 1b234ca2e3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
68 changed files with 1079 additions and 217 deletions
Download patch file Download diff file Expand all files Collapse all files

203
docs/src/COMPONENT_API.json
View file

@ -1,5 +1,5 @@
{
"total": 158,
"total": 160,
"components": [
{
"moduleName": "Accordion",
@ -368,6 +368,16 @@
"constant": false,
"reactive": false
},
{
"name": "isSelected",
"kind": "let",
"description": "Set to `true` to enable the selected state for an icon-only, ghost button",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "hasIconOnly",
"kind": "let",
@ -1387,7 +1397,7 @@
"ts": "interface ComboBoxItem { id: string; text: string; }"
}
],
"rest_props": { "type": "Element", "name": "div" }
"rest_props": { "type": "Element", "name": "input" }
},
{
"moduleName": "ComposedModal",
@ -2239,7 +2249,7 @@
{ "type": "forwarded", "name": "blur", "element": "input" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
"rest_props": { "type": "Element", "name": "input" }
},
{
"moduleName": "DatePickerSkeleton",
@ -4042,6 +4052,101 @@
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
},
{
"moduleName": "ImageLoader",
"filePath": "src/ImageLoader/ImageLoader.svelte",
"props": [
{
"name": "src",
"kind": "let",
"description": "Specify the image source",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "alt",
"kind": "let",
"description": "Specify the image alt text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "ratio",
"kind": "let",
"description": "Specify the aspect ratio for the image wrapper",
"type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"9x16\" | \"1x2\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "loading",
"kind": "let",
"description": "Set to `true` when `loaded` is `true` and `error` is false",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "loaded",
"kind": "let",
"description": "Set to `true` when the image is loaded",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "error",
"kind": "let",
"description": "Set to `true` if an error occurs when loading the image",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "fadeIn",
"kind": "let",
"description": "Set to `true` to fade in the image on load\nThe duration uses the `fast-02` value following Carbon guidelines on motion",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "loadImage",
"kind": "const",
"description": "Method invoked to load the image provided a `src` value",
"type": "(url?: string) => void",
"value": "(url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); }",
"isFunction": true,
"constant": true,
"reactive": false
}
],
"slots": [
{ "name": "error", "default": false, "slot_props": "{}" },
{ "name": "loading", "default": false, "slot_props": "{}" }
],
"events": [
{ "type": "dispatched", "name": "load", "detail": "any" },
{ "type": "dispatched", "name": "error", "detail": "any" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "img" }
},
{
"moduleName": "InlineLoading",
"filePath": "src/InlineLoading/InlineLoading.svelte",
@ -4585,7 +4690,7 @@
"name": "selectionCount",
"kind": "let",
"description": "Specify the number of selected items",
"type": "any",
"type": "number",
"isFunction": false,
"constant": false,
"reactive": false
@ -4716,6 +4821,42 @@
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
},
{
"moduleName": "LocalStorage",
"filePath": "src/LocalStorage/LocalStorage.svelte",
"props": [
{
"name": "key",
"kind": "let",
"description": "Specify the local storage key",
"type": "string",
"value": "\"local-storage-key\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "value",
"kind": "let",
"description": "Provide a value to persist",
"type": "any",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": true
}
],
"slots": [],
"events": [
{ "type": "dispatched", "name": "save", "detail": "any" },
{
"type": "dispatched",
"name": "update",
"detail": "{ prevValue: any; value: any; }"
}
],
"typedefs": []
},
{
"moduleName": "Modal",
"filePath": "src/Modal/Modal.svelte",
@ -5393,11 +5534,15 @@
],
"slots": [],
"events": [
{
"type": "dispatched",
"name": "select",
"detail": "{ selectedIds: string[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }"
},
{ "type": "forwarded", "name": "clear", "element": "ListBoxSelection" },
{ "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" },
{ "type": "dispatched", "name": "select" }
{ "type": "forwarded", "name": "blur", "element": "input" }
],
"typedefs": [
{
@ -5416,7 +5561,7 @@
"ts": "interface MultiSelectItem { id: MultiSelectItemId; text: MultiSelectItemText; }"
}
],
"rest_props": { "type": "Element", "name": "div" }
"rest_props": { "type": "Element", "name": "input" }
},
{
"moduleName": "NotificationActionButton",
@ -5827,7 +5972,7 @@
"ts": "type NumberInputTranslationId = \"increment\" | \"decrement\""
}
],
"rest_props": { "type": "Element", "name": "div" }
"rest_props": { "type": "Element", "name": "input" }
},
{
"moduleName": "NumberInputSkeleton",
@ -6950,6 +7095,16 @@
"constant": false,
"reactive": false
},
{
"name": "legendText",
"kind": "let",
"description": "Specify the legend text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "labelPosition",
"kind": "let",
@ -6980,7 +7135,15 @@
"reactive": false
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"slots": [
{ "name": "__default__", "default": true, "slot_props": "{}" },
{
"name": "legendText",
"default": false,
"fallback": "{legendText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
@ -7947,7 +8110,14 @@
"reactive": true
}
],
"slots": [],
"slots": [
{
"name": "__default__",
"default": true,
"fallback": "{text}",
"slot_props": "{}"
}
],
"events": [{ "type": "forwarded", "name": "click", "element": "a" }],
"typedefs": [],
"rest_props": { "type": "Element", "name": "a" }
@ -9032,6 +9202,16 @@
"constant": false,
"reactive": false
},
{
"name": "interactive",
"kind": "let",
"description": "Set to `true` to render a `button` element instead of a `div`",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "skeleton",
"kind": "let",
@ -9748,7 +9928,7 @@
{ "type": "forwarded", "name": "blur", "element": "input" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
"rest_props": { "type": "Element", "name": "input" }
},
{
"moduleName": "TimePickerSelect",
@ -10372,6 +10552,7 @@
],
"slots": [],
"events": [
{ "type": "forwarded", "name": "clear", "element": "Search" },
{ "type": "forwarded", "name": "change", "element": "Search" },
{ "type": "forwarded", "name": "input", "element": "Search" },
{ "type": "forwarded", "name": "focus", "element": "Search" },

19
docs/src/pages/_layout.svelte
View file

@ -13,11 +13,15 @@
SideNavItems,
SideNavMenu,
SideNavMenuItem,
Tag,
} from "carbon-components-svelte";
import LogoGithub20 from "carbon-icons-svelte/lib/LogoGithub20";
import Theme from "../components/Theme.svelte";
import Footer from "../components/Footer.svelte";
const deprecated = ["ToggleSmall", "Icon"];
const new_components = ["ImageLoader", "LocalStorage"];
let isOpen = false;
let isSideNavOpen = true;
let innerWidth = 2048;
@ -98,16 +102,25 @@
text="{child.title}"
href="{$url(child.path)}"
isSelected="{$isActive($url(child.path))}"
/>
>
{child.title}
{#if deprecated.includes(child.title)}
<Tag size="sm" type="red">Deprecated</Tag>
{/if}
{#if new_components.includes(child.title)}
<Tag size="sm" type="green">New</Tag>
{/if}
</SideNavMenuItem>
{/each}
</SideNavMenu>
<SideNavMenu expanded="{$isActive($url('/recipes'))}" text="Recipes">
{#each recipes.children as child, i (child.path)}
<SideNavMenuItem
text="{child.title}"
href="{$url(child.path)}"
isSelected="{$isActive($url(child.path))}"
/>
>
{child.title}
</SideNavMenuItem>
{/each}
</SideNavMenu>
</SideNavItems>

2
docs/src/pages/components/AspectRatio.svx
View file

@ -5,7 +5,7 @@
The `AspectRatio` component is useful for constraining fluid content within an aspect ratio. To demo this, resize your browser for the examples below.
Supported aspect ratios: `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"9x16"`, `"1x2"`
Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"9x16"` and `"1x2"`.
### Default (2x1)

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

@ -2,7 +2,12 @@
import { Button } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16";
import TrashCan16 from "carbon-icons-svelte/lib/TrashCan16";
import TextBold16 from "carbon-icons-svelte/lib/TextBold16";
import TextItalic16 from "carbon-icons-svelte/lib/TextItalic16";
import TextUnderline16 from "carbon-icons-svelte/lib/TextUnderline16";
import Preview from "../../components/Preview.svelte";
let index = 1;
</script>
### Primary button
@ -55,6 +60,12 @@ The tooltip position and alignment can be controlled by `tooltipPosition` and `t
<Button tooltipPosition="right" tooltipAlignment="end" iconDescription="Tooltip text" icon={Add16} />
### Selected icon-only, ghost button
Set `isSelected` to `true` to enable the selected state for an icon-only, ghost button.
<FileSource src="/framed/Button/SelectedIconOnlyButton" />
### Link button
If an `href` value is specified, the component will render an [anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) with a "button" role.

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

@ -1,5 +1,5 @@
<script>
import { Icon } from "carbon-components-svelte";
import { Icon, InlineNotification, OutboundLink } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16";
import Add20 from "carbon-icons-svelte/lib/Add20";
import Add24 from "carbon-icons-svelte/lib/Add24";
@ -7,6 +7,12 @@
import Preview from "../../components/Preview.svelte";
</script>
<InlineNotification svx-ignore title="Deprecation warning" kind="warning" hideCloseButton>
<div>
This component will be removed in the next major release. Use icons from <OutboundLink href="https://github.com/IBM/carbon-icons-svelte">carbon-icons-svelte</OutboundLink> instead.
</div>
</InlineNotification>
### Default
<Icon render={Add16} />

46
docs/src/pages/components/ImageLoader.svx Normal file
View file

@ -0,0 +1,46 @@
<script>
import { ImageLoader, Button, InlineLoading } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
let key = 0;
</script>
This utility component uses the [Image API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) to programmatically load an image with slottable loading and error states.
### Default
<ImageLoader src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />
### Slots
Use the "loading" and "error" named slots to render an element when the image is loading or has an error.
<ImageLoader src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg">
<div slot="loading">
<InlineLoading />
</div>
<div slot="error">
An error occurred.
</div>
</ImageLoader>
### With aspect ratio
If `ratio` is set, this component uses the [AspectRatio](/components/AspectRatio) to constrain the image.
Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"9x16"` and `"1x2"`.
<ImageLoader ratio="16x9" src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />
### Fade in
Set `fadeIn` to `true` to fade in the image if successfully loaded.
<Button kind="ghost" on:click="{() => { key++;}}">Reload image</Button>
{#key key}<ImageLoader fadeIn ratio="16x9" src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />{/key}
### Programmatic usage
In this example, a component reference is obtained to programmatically trigger the `loadImage` method.
<FileSource src="/framed/ImageLoader/ProgrammaticImageLoader" />

9
docs/src/pages/components/LocalStorage.svx Normal file
View file

@ -0,0 +1,9 @@
<script>
import Preview from "../../components/Preview.svelte";
</script>
This utility component wraps the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and is useful for persisting ephemeral data (e.g., color theme) at the browser level.
### Reactive example
<FileSource src="/framed/LocalStorage/LocalStorage" />

16
docs/src/pages/components/MultiSelect.svx
View file

@ -24,6 +24,16 @@ To prevent alphabetical item ordering, pass an empty function to the `sortItem`
sortItem="{() => {}}"
/>
### Filterable
`$$restProps` are spread to the underlying input element.
<MultiSelect spellcheck="false" filterable titleText="Contact" placeholder="Filter contact methods..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
/>
### Initial selected items
To select (or bind) items, pass an array of item ids to `selectedIds`.
@ -93,13 +103,7 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
{id: "2", text: "Fax"}]}"
/>
### Filterable
<MultiSelect filterable titleText="Contact" placeholder="Filter contact methods..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
/>
### Invalid state

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

@ -27,10 +27,6 @@ components: ["NumberInput", "NumberInputSkeleton"]
<NumberInput light label="Clusters" />
### Mobile variant
<NumberInput mobile label="Clusters" />
### Extra-large size
<NumberInput size="xl" label="Clusters" />

6
docs/src/pages/components/PasswordInput.svx
View file

@ -7,6 +7,12 @@
<PasswordInput labelText="Password" placeholder="Enter password..." />
### Custom tooltip alignment
Customize the tooltip alignment and position of the visibility toggle through the `tooltipAlignment` and `tooltipPosition` props.
<PasswordInput tooltipAlignment="start" tooltipPosition="left" labelText="Password" placeholder="Enter password..." />
### Password is visible
Set prop `type` to `"text"` to toggle password visibility.

88
docs/src/pages/components/RadioButton.svx
View file

@ -3,19 +3,43 @@ components: ["RadioButtonGroup", "RadioButton", "RadioButtonSkeleton"]
---
<script>
import { FormGroup, RadioButton, RadioButtonSkeleton, RadioButtonGroup } from "carbon-components-svelte";
import { RadioButton, RadioButtonSkeleton, RadioButtonGroup, Tooltip } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<FormGroup legendText="Storage tier (disk)">
<RadioButtonGroup selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
</FormGroup>
<RadioButtonGroup selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
### With legend text
<RadioButtonGroup legendText="Storage tier (disk)" selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
### Legend text slot
Use the named "legendText" slot to customize the legend text.
<RadioButtonGroup selected="standard">
<div slot="legendText" style="display: flex">
Storage tier (disk)
<Tooltip tooltipBodyId="tooltip-body">
<p id="tooltip-body">
Storage tiers may vary based on geolocation.
</p>
</Tooltip>
</div>
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
### Programmatic usage
@ -25,40 +49,32 @@ Bind the selected value using the `selected` prop.
### Label text aligned left
<FormGroup legendText="Storage tier (disk)">
<RadioButtonGroup labelPosition="left" selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
</FormGroup>
<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
### Vertical orientation
<FormGroup legendText="Storage tier (disk)">
<RadioButtonGroup orientation="vertical" selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
</FormGroup>
<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
### Skeleton
<FormGroup legendText="Storage tier (disk)">
<RadioButtonGroup>
<RadioButtonSkeleton />
<RadioButtonSkeleton />
<RadioButtonSkeleton />
</RadioButtonGroup>
</FormGroup>
<RadioButtonGroup legendText="Storage tier (disk)">
<RadioButtonSkeleton />
<RadioButtonSkeleton />
<RadioButtonSkeleton />
</RadioButtonGroup>
### Skeleton (vertical orientation)
<FormGroup legendText="Storage tier (disk)">
<RadioButtonGroup orientation="vertical">
<RadioButtonSkeleton />
<RadioButtonSkeleton />
<RadioButtonSkeleton />
</RadioButtonGroup>
</FormGroup>
<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)">
<RadioButtonSkeleton />
<RadioButtonSkeleton />
<RadioButtonSkeleton />
</RadioButtonGroup>

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

@ -17,6 +17,12 @@ The `Search` component size is extra-large by default. There are [large](#large-
<FileSource src="/framed/Search/SearchReactive" />
### on:clear
The "clear" event is dispatched when clicking the "X" button in the search input element.
<Search value="Cloud functions" on:clear={() => console.log('clear')}/>
### Light variant
<Search light />

12
docs/src/pages/components/Tag.svx
View file

@ -1,7 +1,6 @@
<script>
import { Tag } from "carbon-components-svelte";
import IbmCloud16 from "carbon-icons-svelte/lib/IbmCloud16";
import Document16 from "carbon-icons-svelte/lib/Document16";
import Preview from "../../components/Preview.svelte";
</script>
@ -31,6 +30,10 @@
<Tag filter on:close>carbon-components</Tag>
### Filterable (disabled)
<Tag filter disabled on:close>carbon-components</Tag>
### Filterable (small)
<Tag size="sm" filter on:close>carbon-components</Tag>
@ -41,6 +44,13 @@ Note: rendering a custom icon cannnot be used with the filterable variant.
<Tag icon={IbmCloud16}>IBM Cloud</Tag>
### Interactive variant
Set `interactive` to `true` to render a `button` element instead of a `div`.
<Tag interactive>Machine learning</Tag>
<Tag interactive disabled>Machine learning</Tag>
### Skeleton
<Tag skeleton />

2
docs/src/pages/components/ToggleSmall.svx
View file

@ -7,7 +7,7 @@ components: ["ToggleSmall", "ToggleSmallSkeleton"]
import Preview from "../../components/Preview.svelte";
</script>
<InlineNotification svx-ignore title="Deprecation warning:" kind="warning" hideCloseButton>
<InlineNotification svx-ignore title="Deprecation warning" kind="warning" hideCloseButton>
<div>
This component will be removed in the next major release. Use the <Link href="/components/Toggle#small-size">Toggle small variant</Link> instead.
</div>

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

@ -4,7 +4,9 @@
import Preview from "../../components/Preview.svelte";
</script>
### Default (icon-only, "bottom" direction)
### Default
By default, the tooltip is triggered by an information icon.
<Tooltip tooltipBodyId="tooltip-body">
<p id="tooltip-body">

30
docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte Normal file
View file

@ -0,0 +1,30 @@
<script>
import { Button } from "carbon-components-svelte";
import TextBold16 from "carbon-icons-svelte/lib/TextBold16";
import TextItalic16 from "carbon-icons-svelte/lib/TextItalic16";
import TextUnderline16 from "carbon-icons-svelte/lib/TextUnderline16";
let index = 1;
</script>
<Button
isSelected="{index === 0}"
kind="ghost"
iconDescription="Bold"
icon="{TextBold16}"
on:click="{() => (index = 0)}"
/>
<Button
isSelected="{index === 1}"
kind="ghost"
iconDescription="Italicize"
icon="{TextItalic16}"
on:click="{() => (index = 1)}"
/>
<Button
isSelected="{index === 2}"
kind="ghost"
iconDescription="Underline"
icon="{TextUnderline16}"
on:click="{() => (index = 2)}"
/>

26
docs/src/pages/framed/ImageLoader/ProgrammaticImageLoader.svelte Normal file
View file

@ -0,0 +1,26 @@
<script>
import { ImageLoader, Button } from "carbon-components-svelte";
const src =
"https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg";
const srcError = src + "1";
let imageLoader;
let error;
</script>
<Button
kind="ghost"
disabled="{!imageLoader || error}"
on:click="{() => imageLoader.loadImage(srcError)}"
>
Simulate error
</Button>
<ImageLoader bind:this="{imageLoader}" bind:error fadeIn src="{src}">
<div slot="error">
<Button kind="ghost" on:click="{() => imageLoader.loadImage(src)}">
Error. Try again
</Button>
</div>
</ImageLoader>

29
docs/src/pages/framed/LocalStorage/LocalStorage.svelte Normal file
View file

@ -0,0 +1,29 @@
<script>
import { LocalStorage, Toggle, Button } from "carbon-components-svelte";
let storage;
let toggled = false;
let events = [];
$: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
</script>
<LocalStorage
bind:this="{storage}"
key="dark-mode"
bind:value="{toggled}"
on:save="{() => {
events = [...events, { event: 'on:save' }];
}}"
on:update="{({ detail }) => {
events = [...events, { event: 'on:update', detail }];
}}"
/>
<Toggle size="sm" labelText="Dark mode" bind:toggled />
<br />
<pre>
{JSON.stringify(events, null, 2)}
</pre>

17
docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte
View file

@ -2,7 +2,6 @@
import {
ButtonSet,
Button,
FormGroup,
RadioButtonGroup,
RadioButton,
} from "carbon-components-svelte";
@ -10,17 +9,17 @@
let plan = "standard";
</script>
<FormGroup legendText="Storage tier (disk)">
<RadioButtonGroup bind:selected="{plan}">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
</FormGroup>
<RadioButtonGroup legendText="Storage tier (disk)" bind:selected="{plan}">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
<ButtonSet>
<ButtonSet style="margin-top: var(--cds-layout-03)">
{#each ["free", "standard", "pro"] as value}
<Button
disabled="{plan === value}"
kind="secondary"
on:click="{() => {
plan = value;
}}"