mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
feat!: initial pre-release - Carbon v11 styles (#1881)
**carbon-components-svelte has unstable styles and interactions during this pre-release phase. See #1872 for details.**
Breaking changes
- Overall, this is a major style change the will impact the appearance and features of many components. Use caution when upgrading and test your applications.
Components
- Button has new prop values for size and kind
- Theme follows v11 conventions: g80 theme isn't supported, toggled themes adjust data-carbon-theme attribute in <html> tag (for now, tokens use bx prefix, but that may change)
- Tabs has a contained prop instead of type, and a new mobile appearance (scrolling tabs)
- ContentSwitcher size prop no longer supports size="xl"; md is the new default
- MultiSelect no longer supports xl size
- OverflowMenu no longer supports xl size
- Search no longer supports xl size
- TreeView no longer supports compact size
- UIShell has a new light theme
CSS
- Several class names have been changed due to the v11 overhaul. If you're targeting or overriding component classes, be sure to test your code
- Many tokens and CSS variables have been renamed. Details: https://carbondesignsystem.com/migrating/guide/develop
- Themes are applied to the <html> element as data-carbon-theme="g10" instead of theme="g10"
- The g80 theme no longer exists
General
- Codebase uses npm instead of yarn
--- Commit notes
* chore: depend on @carbon/styles instead of carbon-components
See upgrade guide here: https://carbondesignsystem.com/migrating/guide/develop
* chore: use v11 styles for docs
* chore: stick to `bx` instead of `cds` class prefix
* chore: migrate layout spacing to v11
See [@carbon/layout](https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#carbonlayout) migration guide:
$layout-01 Removed, use $spacing-05 instead
$layout-02 Removed, use $spacing-06 instead
$layout-03 Removed, use $spacing-07 instead
$layout-04 Removed, use $spacing-09 instead
$layout-05 Removed, use $spacing-10 instead
$layout-06 Removed, use $spacing-12 instead
$layout-07 Removed, use $spacing-13 instead
* chore: migrate type tokens to v11
See https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#type-tokens
* chore: keep flex-grid instead of css grid for the moment
Upgrading to css-grid should be separate.
* chore: v11 Tabs
In v11 [Tabs](https://carbondesignsystem.com/migrating/guide/design/#tabs-breaking) received some additional modifiers. In this commit we only want to make sure that the Svelte v10 tabs still work using v11 styles. This probably needs additional testing.
* chore: use @ibm/plex fonts
* chore: v11 Button
* dependency: @carbon/styles update
* chore: v11 ComboBox
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 ContentSwitcher
For better compatibility with existing code bases size `xl` is still supported.
* chore: remove legacy v10 css files
Note that further work is needed here in order to make theming work again.
Also documentation needs updating.
* chore: v11 DatePicker
For better compatibility with existing codebases size xl is still supported.
* chore: v11 Dropdown
For better compatibility with existing codebases size xl is still supported.
* chore: v11 ExpandableTile
Note that state labels `tileCollapsedLabel` and `tileExpandedLabel` are no longer supported.
* chore: v11 FileUploader
For better compatibility with existing codebases sizes `field` and `small` are still supported. Note that flagship implementation does the same thing.
* chore: v11 Toggle
This removes legacy `ToggleSkeleton`.
* chore: v11 MultiSelect
Size `xl` changed to `lg`.
* chore: v11 NumberInput
For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 OverflowMenu
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 PasswordInput
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 Search
* chore: v11 Select
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 AspectRatio
The `bx--aspect-ratio--object` class is gone and needs to be replaced manually.
* chore: v11 TextArea
`cols` no longer has a defaults to 50 but remains at 100% width by default.
* chore: v11 TextInput
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 TimePicker
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 TreeView
Size `compact` changed to `xs`. For better compatibility with existing codebases size `compact` is still supported.
* chore: remove Truncate since it does not exist in Carbon v11
* chore: v11 UIShell
* chore: v11 Accordion
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* tmp: v11 PopoverContent
* Revert "chore: remove Truncate since it does not exist in Carbon v11"
This reverts commit 5833536199.
* chore: use truncate mixins
* docs: add truncate mixins
* chore: use `cds` class prefix in v11 styles
* build: switch to npm
* chore: set up all component styles, fonts, and themes
- Adapt documentation to new styles
* chore: add individual theme css
* feat: migrate Theme component to v11
- remove g80 theme option everywhere
- utilize new `data-carbon-theme` attribute when applying theme
- use cds instead of bx in places
* chore: use bx css prefixes for now
* chore: resolve peerDependencies
- Leaving out latest prettier for now
- Ignoring Sveld warnings for now
* chore: fix type errors and tests
---------
Co-authored-by: Gregor Wassmann <gregor.wassmann@gmail.com>
This commit is contained in:
Enrico Sacchetti
Eric Liu
parent
b3a4590872
commit
4dabb827ee
186 changed files with 7886 additions and 5628 deletions
|
|
@ -88,9 +88,9 @@ This example demonstrates how a list of items can be programmatically expanded a
|
|||
|
||||
<FileSource src="/framed/Accordion/ExpandableAccordion" />
|
||||
|
||||
## Extra-large size
|
||||
## Large size
|
||||
|
||||
<Accordion size="xl">
|
||||
<Accordion size="lg">
|
||||
<AccordionItem title="Natural Language Classifier">
|
||||
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
The [Carbon Design System grid implementation](https://carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options) defines five responsive breakpoints:
|
||||
|
||||
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
|
||||
<UnorderedList svx-ignore style="margin-bottom: var(--bx-spacing-08)">
|
||||
<ListItem><strong>Small</strong>: less than 672px</ListItem>
|
||||
<ListItem><strong>Medium</strong>: 672 - 1056px</ListItem>
|
||||
<ListItem><strong>Large</strong>: 1056 - 1312px</ListItem>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
## Danger tertiary button
|
||||
|
||||
<Button kind="danger-tertiary">Danger tertiary button</Button>
|
||||
<Button kind="danger--tertiary">Danger tertiary button</Button>
|
||||
|
||||
## Danger tertiary, icon-only button
|
||||
|
||||
|
|
@ -40,11 +40,11 @@
|
|||
</div>
|
||||
</InlineNotification>
|
||||
|
||||
<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan} />
|
||||
<Button kind="danger--tertiary"iconDescription="Delete" icon={TrashCan} />
|
||||
|
||||
## Danger ghost button
|
||||
|
||||
<Button kind="danger-ghost">Danger ghost button</Button>
|
||||
<Button kind="danger--ghost">Danger ghost button</Button>
|
||||
|
||||
## Button with icon
|
||||
|
||||
|
|
@ -98,36 +98,36 @@ If you need to render a different element, set `as` to `true` and spread `let:pr
|
|||
|
||||
## Field size
|
||||
|
||||
<Button size="field">Primary</Button>
|
||||
<Button size="field" kind="secondary">Secondary</Button>
|
||||
<Button size="field" kind="tertiary">Tertiary</Button>
|
||||
<Button size="field" kind="ghost">Ghost</Button>
|
||||
<Button size="field" kind="danger">Danger</Button>
|
||||
<Button size="md">Primary</Button>
|
||||
<Button size="md" kind="secondary">Secondary</Button>
|
||||
<Button size="md" kind="tertiary">Tertiary</Button>
|
||||
<Button size="md" kind="ghost">Ghost</Button>
|
||||
<Button size="md" kind="danger">Danger</Button>
|
||||
|
||||
## Small size
|
||||
|
||||
<Button size="small">Primary</Button>
|
||||
<Button size="small" kind="secondary">Secondary</Button>
|
||||
<Button size="small" kind="tertiary">Tertiary</Button>
|
||||
<Button size="small" kind="ghost">Ghost</Button>
|
||||
<Button size="small" kind="danger">Danger</Button>
|
||||
<Button size="sm">Primary</Button>
|
||||
<Button size="sm" kind="secondary">Secondary</Button>
|
||||
<Button size="sm" kind="tertiary">Tertiary</Button>
|
||||
<Button size="sm" kind="ghost">Ghost</Button>
|
||||
<Button size="sm" kind="danger">Danger</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>
|
||||
<Button size="xl" kind="tertiary">Tertiary</Button>
|
||||
<Button size="xl" kind="ghost">Ghost</Button>
|
||||
<Button size="xl" kind="danger">Danger</Button>
|
||||
|
||||
## Extra-large size
|
||||
|
||||
<Button size="2xl">Primary</Button>
|
||||
<Button size="2xl" kind="secondary">Secondary</Button>
|
||||
<Button size="2xl" kind="tertiary">Tertiary</Button>
|
||||
<Button size="2xl" kind="ghost">Ghost</Button>
|
||||
<Button size="2xl" kind="danger">Danger</Button>
|
||||
|
||||
## Disabled state
|
||||
|
||||
<Button disabled>Disabled button</Button>
|
||||
|
|
|
|||
|
|
@ -80,10 +80,10 @@ items={[
|
|||
{id: "2", text: "Fax"}
|
||||
]} />
|
||||
|
||||
## Extra-large size
|
||||
## Large size
|
||||
|
||||
<ComboBox titleText="Contact" placeholder="Select contact method"
|
||||
size="xl"
|
||||
size="lg"
|
||||
items={[
|
||||
{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
|
|
|
|||
|
|
@ -43,9 +43,9 @@ components: ["ContentSwitcher", "Switch"]
|
|||
</Switch>
|
||||
</ContentSwitcher>
|
||||
|
||||
## Extra-large size
|
||||
## Large size
|
||||
|
||||
<ContentSwitcher size="xl">
|
||||
<ContentSwitcher size="lg">
|
||||
<Switch text="All" />
|
||||
<Switch text="Archived" />
|
||||
</ContentSwitcher>
|
||||
|
|
|
|||
|
|
@ -1416,4 +1416,4 @@ Pass an object with `"empty"` set to `true` to render an empty table header colu
|
|||
|
||||
## Skeleton (compact size)
|
||||
|
||||
<DataTableSkeleton showHeader={false} showToolbar={false} size="compact" />
|
||||
<DataTableSkeleton showHeader={false} showToolbar={false} size="compact" />
|
||||
|
|
|
|||
|
|
@ -63,10 +63,10 @@ By default, the "simple" date picker does not have a dropdown calendar.
|
|||
<DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
||||
</DatePicker>
|
||||
|
||||
## Extra-large size
|
||||
## Large size
|
||||
|
||||
<DatePicker>
|
||||
<DatePickerInput size="xl" labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
||||
<DatePickerInput size="lg" labelText="Date of birth" placeholder="mm/dd/yyyy" />
|
||||
</DatePicker>
|
||||
|
||||
## Small size
|
||||
|
|
|
|||
|
|
@ -65,9 +65,9 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
|
|||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}]}" />
|
||||
|
||||
## Extra-large size
|
||||
## Large size
|
||||
|
||||
<Dropdown size="xl" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
|
||||
<Dropdown size="lg" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}]}" />
|
||||
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ Set a custom height for the tiles on the "above" and "below" slots.
|
|||
For tiles containing interactive content, use `stopPropagation` to prevent the tile from toggling.
|
||||
|
||||
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
|
||||
<div slot="above">
|
||||
<div slot="above" height="10rem">
|
||||
<a href="/" on:click|preventDefault|stopPropagation={() => console.log("Hello world")}>
|
||||
Native element
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ See the [item examples below](#item-uploading) for different statuses.
|
|||
|
||||
There are two ways to clear files in `FileUploader`:
|
||||
|
||||
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
|
||||
<UnorderedList svx-ignore style="margin-bottom: var(--bx-spacing-08)">
|
||||
<ListItem>programmatically using the <strong>clearFiles</strong> accessor</ListItem>
|
||||
<ListItem>two-way binding by setting <strong>files</strong> to <strong>[]</strong></ListItem>
|
||||
</UnorderedList>
|
||||
|
|
@ -95,11 +95,11 @@ Use the `errorSubject` and `errorBody` props to customize the error message.
|
|||
|
||||
## Item sizes
|
||||
|
||||
The default `FileUploaderItem` size is "default".
|
||||
The default `FileUploaderItem` size is "lg".
|
||||
|
||||
<FileUploaderItem size="default" name="README.md" status="uploading" />
|
||||
<FileUploaderItem size="field" name="README.md" status="uploading" />
|
||||
<FileUploaderItem size="small" name="README.md" status="uploading" />
|
||||
<FileUploaderItem size="lg" name="README.md" status="uploading" />
|
||||
<FileUploaderItem size="md" name="README.md" status="uploading" />
|
||||
<FileUploaderItem size="sm" name="README.md" status="uploading" />
|
||||
|
||||
## Drop container
|
||||
|
||||
|
|
@ -111,7 +111,7 @@ The following example accepts files smaller than 1 kB.
|
|||
|
||||
<FileUploaderDropContainer
|
||||
multiple
|
||||
labelText="Drag and drop files here or click to upload"
|
||||
labelText="Drag and drop files here or click to upload"
|
||||
validateFiles={files => {
|
||||
return files.filter(file => file.size < 1_024)
|
||||
}}
|
||||
|
|
@ -122,4 +122,4 @@ The following example accepts files smaller than 1 kB.
|
|||
|
||||
## Skeleton
|
||||
|
||||
<FileUploaderSkeleton />
|
||||
<FileUploaderSkeleton />
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ To prevent alphabetical item ordering, pass an empty function to the `sortItem`
|
|||
<MultiSelect titleText="Contact" label="Select contact methods..."
|
||||
items="{[{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}]}"
|
||||
{id: "2", text: "Fax"}]}"
|
||||
sortItem="{() => {}}"
|
||||
/>
|
||||
|
||||
|
|
@ -58,7 +58,7 @@ To select (or bind) items, pass an array of item ids to `selectedIds`.
|
|||
<MultiSelect selectedIds="{["0", "1"]}" titleText="Contact" label="Select contact methods..."
|
||||
items="{[{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}]}"
|
||||
{id: "2", text: "Fax"}]}"
|
||||
/>
|
||||
|
||||
## Multiple multi-select dropdowns
|
||||
|
|
@ -140,9 +140,9 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
|
|||
{id: "2", text: "Fax"}]}"
|
||||
/>
|
||||
|
||||
## Extra-large size
|
||||
## Large size
|
||||
|
||||
<MultiSelect size="xl" titleText="Contact" label="Select contact methods..."
|
||||
<MultiSelect size="lg" titleText="Contact" label="Select contact methods..."
|
||||
items="{[{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}]}"
|
||||
|
|
|
|||
|
|
@ -51,9 +51,9 @@ Set `value` to `null` to denote "no value."
|
|||
|
||||
<NumberInput readonly label="Clusters" value={0} />
|
||||
|
||||
## Extra-large size
|
||||
## Large size
|
||||
|
||||
<NumberInput size="xl" label="Clusters" value={0} />
|
||||
<NumberInput size="lg" label="Clusters" value={0} />
|
||||
|
||||
## Small size
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ Set `flipped` to `true` for the menu to be positioned to the left of the button.
|
|||
<OverflowMenuItem danger text="Delete service" />
|
||||
</OverflowMenu>
|
||||
|
||||
## Extra-large size
|
||||
## Large size
|
||||
|
||||
<OverflowMenu size="xl">
|
||||
<OverflowMenuItem text="Manage credentials" />
|
||||
|
|
|
|||
|
|
@ -31,9 +31,9 @@ Set prop `type` to `"text"` to toggle password visibility.
|
|||
|
||||
<PasswordInput inline labelText="Password" placeholder="Enter password..." />
|
||||
|
||||
## Extra-large size
|
||||
## Large size
|
||||
|
||||
<PasswordInput size="xl" labelText="Password" placeholder="Enter password..." />
|
||||
<PasswordInput size="lg" labelText="Password" placeholder="Enter password..." />
|
||||
|
||||
## Small size
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
---
|
||||
components: ["Popover", "PopoverContent"]
|
||||
---
|
||||
|
||||
<script>
|
||||
import { Popover } from "carbon-components-svelte";
|
||||
import { Popover, PopoverContent } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
|
|
@ -8,9 +12,9 @@
|
|||
By default, the position of the popover component is absolute.
|
||||
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open>
|
||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||
Parent
|
||||
<PopoverContent style="padding: var(--bx-spacing-05)">Content</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
|
|
@ -21,7 +25,7 @@ Set `relative` to `true` to use a relative position.
|
|||
<div data-outline>
|
||||
Parent
|
||||
<Popover relative open>
|
||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
|
|
@ -32,7 +36,7 @@ Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the
|
|||
<div data-outline>
|
||||
Parent
|
||||
<Popover open closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}>
|
||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
|
|
@ -45,67 +49,67 @@ The default `align` value is `"top"`.
|
|||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="top-left">
|
||||
<div style="padding: var(--cds-spacing-05)">top-left</div>
|
||||
<div style="padding: var(--bx-spacing-05)">top-left</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="top-right">
|
||||
<div style="padding: var(--cds-spacing-05)">top-right</div>
|
||||
<div style="padding: var(--bx-spacing-05)">top-right</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="bottom">
|
||||
<div style="padding: var(--cds-spacing-05)">bottom</div>
|
||||
<div style="padding: var(--bx-spacing-05)">bottom</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="bottom-left">
|
||||
<div style="padding: var(--cds-spacing-05)">bottom-left</div>
|
||||
<div style="padding: var(--bx-spacing-05)">bottom-left</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="bottom-right">
|
||||
<div style="padding: var(--cds-spacing-05)">bottom-right</div>
|
||||
<div style="padding: var(--bx-spacing-05)">bottom-right</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="left">
|
||||
<div style="padding: var(--cds-spacing-05)">left</div>
|
||||
<div style="padding: var(--bx-spacing-05)">left</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="left-bottom">
|
||||
<div style="padding: var(--cds-spacing-05)">left-bottom</div>
|
||||
<div style="padding: var(--bx-spacing-05)">left-bottom</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="left-right">
|
||||
<div style="padding: var(--cds-spacing-05)">left-right</div>
|
||||
<div style="padding: var(--bx-spacing-05)">left-right</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="right">
|
||||
<div style="padding: var(--cds-spacing-05)">right</div>
|
||||
<div style="padding: var(--bx-spacing-05)">right</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="right-bottom">
|
||||
<div style="padding: var(--cds-spacing-05)">right-bottom</div>
|
||||
<div style="padding: var(--bx-spacing-05)">right-bottom</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="right-top">
|
||||
<div style="padding: var(--cds-spacing-05)">right-top</div>
|
||||
<div style="padding: var(--bx-spacing-05)">right-top</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
|
|
@ -114,7 +118,7 @@ The default `align` value is `"top"`.
|
|||
<div data-outline>
|
||||
Parent
|
||||
<Popover caret open>
|
||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
|
|
@ -127,7 +131,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
|
|||
<div data-outline>
|
||||
Parent
|
||||
<Popover caret align="top-left" open>
|
||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
|
|
@ -136,7 +140,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
|
|||
<div data-outline>
|
||||
Parent
|
||||
<Popover light open>
|
||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
|
|
@ -145,7 +149,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
|
|||
<div data-outline>
|
||||
Parent
|
||||
<Popover highContrast open>
|
||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
|
|
@ -153,4 +157,4 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
|
|||
|
||||
Use the `open` prop to manage state with an external element, like a button.
|
||||
|
||||
<FileSource src="/framed/Popover/WithButton" />
|
||||
<FileSource src="/framed/Popover/WithButton" />
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
## Default
|
||||
|
||||
The `Search` component size is extra-large by default. There are [large](#large-size) and [small](#small-size) size variants.
|
||||
The `Search` component size is medium by default. There are [large](#large-size) and [small](#small-size) size variants.
|
||||
|
||||
<Search />
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ If the `selected` prop is not set, the value of the first `SelectItem` will be u
|
|||
<Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
|
||||
<SelectItem value="white" />
|
||||
<SelectItem value="g10" />
|
||||
<SelectItem value="g80" />
|
||||
<SelectItem value="g90" />
|
||||
<SelectItem value="g100" />
|
||||
</Select>
|
||||
|
|
@ -26,7 +25,6 @@ Use the `text` prop on `SelectItem` to customize the display value.
|
|||
<Select labelText="Carbon theme" on:change={e => console.log("value", e.target.value)}>
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
<SelectItem value="g80" text="Gray 80" />
|
||||
<SelectItem value="g90" text="Gray 90" />
|
||||
<SelectItem value="g100" text="Gray 100" />
|
||||
</Select>
|
||||
|
|
@ -38,7 +36,6 @@ Use the `selected` prop to specify an initial value.
|
|||
<Select labelText="Carbon theme" selected="g10" on:change={e => console.log("value", e.target.value)}>
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
<SelectItem value="g80" text="Gray 80" />
|
||||
<SelectItem value="g90" text="Gray 90" />
|
||||
<SelectItem value="g100" text="Gray 100" />
|
||||
</Select>
|
||||
|
|
@ -51,10 +48,9 @@ The `selected` prop is reactive and supports two-way binding.
|
|||
|
||||
## Helper text
|
||||
|
||||
<Select helperText="Carbon offers 4 themes (2 light, 3 dark)" labelText="Carbon theme" selected="g10" >
|
||||
<Select helperText="Carbon offers 4 themes (2 light, 2 dark)" labelText="Carbon theme" selected="g10" >
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
<SelectItem value="g80" text="Gray 80" />
|
||||
<SelectItem value="g90" text="Gray 90" />
|
||||
<SelectItem value="g100" text="Gray 100" />
|
||||
</Select>
|
||||
|
|
@ -64,7 +60,6 @@ The `selected` prop is reactive and supports two-way binding.
|
|||
<Select hideLabel labelText="Carbon theme" selected="g10" >
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
<SelectItem value="g80" text="Gray 80" />
|
||||
<SelectItem value="g90" text="Gray 90" />
|
||||
<SelectItem value="g100" text="Gray 100" />
|
||||
</Select>
|
||||
|
|
@ -78,7 +73,6 @@ The `selected` prop is reactive and supports two-way binding.
|
|||
<SelectItem value="g10" text="Gray 10" />
|
||||
</SelectItemGroup>
|
||||
<SelectItemGroup label="Dark theme">
|
||||
<SelectItem value="g80" text="Gray 80" />
|
||||
<SelectItem value="g90" text="Gray 90" />
|
||||
<SelectItem value="g100" text="Gray 100" />
|
||||
</SelectItemGroup>
|
||||
|
|
@ -89,7 +83,6 @@ The `selected` prop is reactive and supports two-way binding.
|
|||
<Select light labelText="Carbon theme" selected="g10" >
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
<SelectItem value="g80" text="Gray 80" />
|
||||
<SelectItem value="g90" text="Gray 90" />
|
||||
<SelectItem value="g100" text="Gray 100" />
|
||||
</Select>
|
||||
|
|
@ -99,17 +92,15 @@ The `selected` prop is reactive and supports two-way binding.
|
|||
<Select inline labelText="Carbon theme" selected="g10" >
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
<SelectItem value="g80" text="Gray 80" />
|
||||
<SelectItem value="g90" text="Gray 90" />
|
||||
<SelectItem value="g100" text="Gray 100" />
|
||||
</Select>
|
||||
|
||||
## Extra-large size
|
||||
## Large size
|
||||
|
||||
<Select size="xl" labelText="Carbon theme" selected="g10" >
|
||||
<Select size="lg" labelText="Carbon theme" selected="g10" >
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
<SelectItem value="g80" text="Gray 80" />
|
||||
<SelectItem value="g90" text="Gray 90" />
|
||||
<SelectItem value="g100" text="Gray 100" />
|
||||
</Select>
|
||||
|
|
@ -119,7 +110,6 @@ The `selected` prop is reactive and supports two-way binding.
|
|||
<Select size="sm" labelText="Carbon theme" selected="g10" >
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
<SelectItem value="g80" text="Gray 80" />
|
||||
<SelectItem value="g90" text="Gray 90" />
|
||||
<SelectItem value="g100" text="Gray 100" />
|
||||
</Select>
|
||||
|
|
@ -129,7 +119,6 @@ The `selected` prop is reactive and supports two-way binding.
|
|||
<Select invalid invalidText="Theme must be a dark variant" labelText="Carbon theme" selected="g10" >
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
<SelectItem value="g80" text="Gray 80" />
|
||||
<SelectItem value="g90" text="Gray 90" />
|
||||
<SelectItem value="g100" text="Gray 100" />
|
||||
</Select>
|
||||
|
|
@ -139,7 +128,6 @@ The `selected` prop is reactive and supports two-way binding.
|
|||
<Select warn warnText="The selected theme will not be persisted" labelText="Carbon theme" selected="g10" >
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
<SelectItem value="g80" text="Gray 80" />
|
||||
<SelectItem value="g90" text="Gray 90" />
|
||||
<SelectItem value="g100" text="Gray 100" />
|
||||
</Select>
|
||||
|
|
@ -149,7 +137,6 @@ The `selected` prop is reactive and supports two-way binding.
|
|||
<Select disabled labelText="Carbon theme" selected="g10" >
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
<SelectItem value="g80" text="Gray 80" />
|
||||
<SelectItem value="g90" text="Gray 90" />
|
||||
<SelectItem value="g100" text="Gray 100" />
|
||||
</Select>
|
||||
|
|
|
|||
|
|
@ -182,4 +182,4 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
|
|||
|
||||
## Skeleton
|
||||
|
||||
<StructuredListSkeleton rows={3} />
|
||||
<StructuredListSkeleton rows={3} />
|
||||
|
|
|
|||
|
|
@ -60,9 +60,9 @@ Using keyboard navigation (left and right arrow keys) will skip to the next non-
|
|||
</svelte:fragment>
|
||||
</Tabs>
|
||||
|
||||
## Container type
|
||||
## Contained
|
||||
|
||||
<Tabs type="container">
|
||||
<Tabs contained>
|
||||
<Tab label="Tab label 1" />
|
||||
<Tab label="Tab label 2" />
|
||||
<Tab label="Tab label 3" />
|
||||
|
|
@ -77,6 +77,6 @@ Using keyboard navigation (left and right arrow keys) will skip to the next non-
|
|||
|
||||
<TabsSkeleton count={3} />
|
||||
|
||||
## Skeleton (container)
|
||||
## Skeleton (contained)
|
||||
|
||||
<TabsSkeleton type="container" count={3} />
|
||||
<TabsSkeleton contained count={3} />
|
||||
|
|
@ -31,9 +31,9 @@ components: ["TextInput", "TextInputSkeleton"]
|
|||
|
||||
<TextInput readonly labelText="User name" value="IBM" />
|
||||
|
||||
## Extra-large size
|
||||
## Large size
|
||||
|
||||
<TextInput size="xl" labelText="User name" placeholder="Enter user name..." />
|
||||
<TextInput size="lg" labelText="User name" placeholder="Enter user name..." />
|
||||
|
||||
## Small size
|
||||
|
||||
|
|
|
|||
|
|
@ -33,9 +33,9 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
|
|||
</TimePickerSelect>
|
||||
</TimePicker>
|
||||
|
||||
## Extra-large size
|
||||
## Large size
|
||||
|
||||
<TimePicker size="xl" labelText="Cron job" placeholder="hh:mm">
|
||||
<TimePicker size="lg" labelText="Cron job" placeholder="hh:mm">
|
||||
<TimePickerSelect value="pm">
|
||||
<SelectItem value="am" text="AM" />
|
||||
<SelectItem value="pm" text="PM" />
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
---
|
||||
components: ["Toggle", "ToggleSkeleton"]
|
||||
components: ["Toggle"]
|
||||
---
|
||||
|
||||
<script>
|
||||
import { Toggle, ToggleSkeleton } from "carbon-components-svelte";
|
||||
import { Toggle } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
|
|
@ -33,15 +33,6 @@ Set `hideLabel` to `true` to visually hide the label text. It's recommended to s
|
|||
|
||||
<Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
|
||||
|
||||
## Slottable labels
|
||||
|
||||
An alternative to the "labelA" and "labelB" props is to use the corresponding named slots.
|
||||
|
||||
<Toggle labelText="Push notifications">
|
||||
<span slot="labelA" style="color: red">No</span>
|
||||
<span slot="labelB" style="color: green">Yes</span>
|
||||
</Toggle>
|
||||
|
||||
## Disabled
|
||||
|
||||
<Toggle labelText="Push notifications" disabled />
|
||||
|
|
@ -49,11 +40,3 @@ An alternative to the "labelA" and "labelB" props is to use the corresponding na
|
|||
## Small size
|
||||
|
||||
<Toggle size="sm" labelText="Push notifications" />
|
||||
|
||||
## Skeleton
|
||||
|
||||
<ToggleSkeleton />
|
||||
|
||||
## Skeleton (small)
|
||||
|
||||
<ToggleSkeleton size="sm" />
|
||||
|
|
@ -23,7 +23,7 @@ By default, each item renders the value of `node.text`. Use the data from `let:n
|
|||
|
||||
The destructured `let:node` contains the following properties:
|
||||
|
||||
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
|
||||
<UnorderedList svx-ignore style="margin-bottom: var(--bx-spacing-08)">
|
||||
<ListItem><strong>id</strong>: the node id</ListItem>
|
||||
<ListItem><strong>text</strong>: the node text</ListItem>
|
||||
<ListItem><strong>expanded</strong>: true if the node is expanded</ListItem>
|
||||
|
|
@ -40,11 +40,11 @@ The active node can be set through `activeId`.
|
|||
|
||||
<FileSource src="/framed/TreeView/TreeViewActive" />
|
||||
|
||||
## Compact size
|
||||
## Extra-small size
|
||||
|
||||
Set `size` to `"compact"` to use the compact variant.
|
||||
Set `size` to `"xs"` to use the extra-small variant.
|
||||
|
||||
<FileSource src="/framed/TreeView/TreeViewCompact" />
|
||||
<FileSource src="/framed/TreeView/TreeViewXs" />
|
||||
|
||||
## With icons
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
This utility component wraps the `.bx--text-truncate--*` CSS selectors from [carbon-components](https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/globals/scss/_helper-classes.scss#L11) for single-line text truncation.
|
||||
This utility component wraps the `.bx--text-truncate-*` Sass mixins from [@carbon/styles](https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/utilities/_text-truncate.scss) for single-line text truncation.
|
||||
|
||||
## Default
|
||||
|
||||
|
|
@ -31,4 +31,4 @@ The `truncate` action can be used on plain HTML elements.
|
|||
</h4>
|
||||
<h4 use:truncate={{ clamp: "front" }}>
|
||||
Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
|
||||
</h4>
|
||||
</h4>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,10 @@
|
|||
let events = [];
|
||||
</script>
|
||||
|
||||
<Breakpoint bind:size on:change="{(e) => (events = [...events, e.detail])}" />
|
||||
<Breakpoint
|
||||
bind:size="{size}"
|
||||
on:change="{(e) => (events = [...events, e.detail])}"
|
||||
/>
|
||||
|
||||
<p>Resize the width of your browser.</p>
|
||||
<h6>Breakpoint size</h6>
|
||||
|
|
@ -17,10 +20,10 @@
|
|||
<style>
|
||||
p,
|
||||
h1 {
|
||||
margin-bottom: var(--cds-spacing-08);
|
||||
margin-bottom: var(--bx-spacing-08);
|
||||
}
|
||||
|
||||
h6 {
|
||||
margin-bottom: var(--cds-spacing-03);
|
||||
margin-bottom: var(--bx-spacing-03);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
let checked = false;
|
||||
</script>
|
||||
|
||||
<Checkbox labelText="Label text" bind:checked />
|
||||
<Checkbox labelText="Label text" bind:checked="{checked}" />
|
||||
|
||||
<div style="margin: var(--cds-layout-01) 0">
|
||||
<div style="margin: var(--bx-spacing-05) 0">
|
||||
<Button on:click="{() => (checked = !checked)}">Toggle</Button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@
|
|||
</script>
|
||||
|
||||
{#each values as value}
|
||||
<Checkbox bind:group labelText="{value}" value="{value}" />
|
||||
<Checkbox bind:group="{group}" labelText="{value}" value="{value}" />
|
||||
{/each}
|
||||
|
||||
<div style="margin: var(--cds-layout-01) 0">
|
||||
<div style="margin: var(--bx-spacing-05) 0">
|
||||
<Button on:click="{() => (group = ['Banana'])}">Set to ["Banana"]</Button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
</script>
|
||||
|
||||
<Toggle
|
||||
bind:toggled
|
||||
bind:toggled="{toggled}"
|
||||
size="sm"
|
||||
labelText="Trigger snippet overflow"
|
||||
style="margin-bottom: var(--cds-spacing-05)"
|
||||
style="margin-bottom: var(--bx-spacing-05)"
|
||||
/>
|
||||
<CodeSnippet type="multi" code="{code}" />
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
|
||||
<Toggle
|
||||
size="sm"
|
||||
style="margin-bottom: var(--cds-spacing-05)"
|
||||
style="margin-bottom: var(--bx-spacing-05)"
|
||||
labelText="Show code snippets"
|
||||
bind:toggled
|
||||
bind:toggled="{toggled}"
|
||||
/>
|
||||
|
||||
{#if toggled}
|
||||
|
|
|
|||
|
|
@ -37,6 +37,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
|
||||
margin: var(--bx-spacing-05) 0 var(--bx-spacing-07);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
let selectedIndex = 1;
|
||||
</script>
|
||||
|
||||
<ContentSwitcher bind:selectedIndex>
|
||||
<ContentSwitcher bind:selectedIndex="{selectedIndex}">
|
||||
<Switch text="Latest news" />
|
||||
<Switch text="Trending" />
|
||||
<Switch text="Recommended" />
|
||||
|
|
@ -24,6 +24,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
margin-top: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,10 @@
|
|||
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
|
||||
<ContextMenuDivider />
|
||||
<ContextMenuOption indented labelText="Export as">
|
||||
<ContextMenuGroup labelText="Export options" bind:selectedIds>
|
||||
<ContextMenuGroup
|
||||
labelText="Export options"
|
||||
bind:selectedIds="{selectedIds}"
|
||||
>
|
||||
<ContextMenuOption id="pdf" labelText="PDF" />
|
||||
<ContextMenuOption id="txt" labelText="TXT" />
|
||||
<ContextMenuOption id="mp3" labelText="MP3" />
|
||||
|
|
@ -48,11 +51,11 @@
|
|||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
width: calc(100% - var(--cds-spacing-05));
|
||||
height: calc(100% - var(--cds-spacing-06));
|
||||
width: calc(100% - var(--bx-spacing-05));
|
||||
height: calc(100% - var(--bx-spacing-06));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--cds-text-02);
|
||||
color: var(--bx-text-02);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<ContextMenu>
|
||||
<ContextMenuOption indented labelText="Open" />
|
||||
<ContextMenuDivider />
|
||||
<ContextMenuRadioGroup bind:selectedId labelText="Radio group">
|
||||
<ContextMenuRadioGroup bind:selectedId="{selectedId}" labelText="Radio group">
|
||||
<ContextMenuOption id="0" labelText="Set as foreground" />
|
||||
<ContextMenuOption id="1" labelText="Set as background" />
|
||||
</ContextMenuRadioGroup>
|
||||
|
|
@ -29,11 +29,11 @@
|
|||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
width: calc(100% - var(--cds-spacing-05));
|
||||
height: calc(100% - var(--cds-spacing-06));
|
||||
width: calc(100% - var(--bx-spacing-05));
|
||||
height: calc(100% - var(--bx-spacing-06));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--cds-text-02);
|
||||
color: var(--bx-text-02);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -46,15 +46,15 @@
|
|||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
width: calc(100% - var(--cds-spacing-05));
|
||||
height: calc(100% - var(--cds-spacing-06));
|
||||
width: calc(100% - var(--bx-spacing-05));
|
||||
height: calc(100% - var(--bx-spacing-06));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--cds-text-02);
|
||||
color: var(--bx-text-02);
|
||||
}
|
||||
|
||||
p {
|
||||
outline: 1px solid var(--cds-interactive-01);
|
||||
outline: 1px solid var(--bx-interactive-01);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -51,15 +51,15 @@
|
|||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
width: calc(100% - var(--cds-spacing-05));
|
||||
height: calc(100% - var(--cds-spacing-06));
|
||||
width: calc(100% - var(--bx-spacing-05));
|
||||
height: calc(100% - var(--bx-spacing-06));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--cds-text-02);
|
||||
color: var(--bx-text-02);
|
||||
}
|
||||
|
||||
p {
|
||||
outline: 1px solid var(--cds-interactive-01);
|
||||
outline: 1px solid var(--bx-interactive-01);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -37,6 +37,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
|
||||
margin: var(--bx-spacing-05) 0 var(--bx-spacing-07);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
padding: var(--cds-spacing-05);
|
||||
margin-top: var(--bx-spacing-05);
|
||||
padding: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -39,6 +39,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
|
||||
margin: var(--bx-spacing-05) 0 var(--bx-spacing-07);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
let value = null;
|
||||
</script>
|
||||
|
||||
<NumberInput allowEmpty bind:value />
|
||||
<NumberInput allowEmpty bind:value="{value}" />
|
||||
|
||||
<div style="margin: var(--cds-layout-01) 0">
|
||||
<div style="margin: var(--bx-spacing-05) 0">
|
||||
<Button on:click="{() => (value = null)}">Set to null</Button>
|
||||
<Button on:click="{() => (value = 0)}">Set to 0</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
let page = 2;
|
||||
</script>
|
||||
|
||||
<PaginationNav bind:page />
|
||||
<PaginationNav bind:page="{page}" />
|
||||
|
||||
<div style="margin: var(--cds-layout-01) 0">
|
||||
<div style="margin: var(--bx-spacing-05) 0">
|
||||
<Button on:click="{() => (page = 1)}" disabled="{page === 0}">
|
||||
Set page to 1
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@
|
|||
<div bind:this="{ref}" style:position="relative">
|
||||
<Button on:click="{() => (open = !open)}">Toggle popover</Button>
|
||||
<Popover
|
||||
bind:open
|
||||
bind:open="{open}"
|
||||
align="bottom-left"
|
||||
on:click:outside="{({ detail }) => {
|
||||
console.log('on:click:outside');
|
||||
open = ref.contains(detail.target);
|
||||
}}"
|
||||
>
|
||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
status="{status}"
|
||||
/>
|
||||
|
||||
<ButtonSet style="margin-top: var(--cds-spacing-08)">
|
||||
<ButtonSet style="margin-top: var(--bx-spacing-08)">
|
||||
<Button
|
||||
disabled="{value > 0}"
|
||||
on:click="{() => {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
let thirdStepCurrent = false;
|
||||
</script>
|
||||
|
||||
<ProgressIndicator bind:currentIndex>
|
||||
<ProgressIndicator bind:currentIndex="{currentIndex}">
|
||||
<ProgressStep
|
||||
complete
|
||||
label="Step 1"
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
/>
|
||||
</ProgressIndicator>
|
||||
|
||||
<div style="margin: var(--cds-layout-02) 0">
|
||||
<div style="margin: var(--bx-spacing-06) 0">
|
||||
<Button
|
||||
kind="{currentIndex === 2 ? 'secondary' : 'primary'}"
|
||||
on:click="{() => {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
{/each}
|
||||
</RadioButtonGroup>
|
||||
|
||||
<div style="margin: var(--cds-layout-03) 0">
|
||||
<div style="margin: var(--bx-layout-03) 0">
|
||||
{#each plans as value (value)}
|
||||
<Button
|
||||
size="small"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,11 @@
|
|||
let selected = values[1];
|
||||
</script>
|
||||
|
||||
<TileGroup legend="Service pricing tiers" name="plan" bind:selected>
|
||||
<TileGroup
|
||||
legend="Service pricing tiers"
|
||||
name="plan"
|
||||
bind:selected="{selected}"
|
||||
>
|
||||
{#each values as value}
|
||||
<RadioTile value="{value}">{value}</RadioTile>
|
||||
{/each}
|
||||
|
|
@ -26,6 +30,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin: var(--cds-spacing-05) 0;
|
||||
margin: var(--bx-spacing-05) 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
let value = "";
|
||||
</script>
|
||||
|
||||
<Search bind:value />
|
||||
<Search bind:value="{value}" />
|
||||
|
||||
<div>
|
||||
<ButtonSet>
|
||||
|
|
@ -30,6 +30,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
margin-top: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,15 +4,14 @@
|
|||
let selected = "g10";
|
||||
</script>
|
||||
|
||||
<Select labelText="Carbon theme" bind:selected>
|
||||
<Select labelText="Carbon theme" bind:selected="{selected}">
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
<SelectItem value="g80" text="Gray 80" />
|
||||
<SelectItem value="g90" text="Gray 90" />
|
||||
<SelectItem value="g100" text="Gray 100" />
|
||||
</Select>
|
||||
|
||||
<div style="margin: var(--cds-layout-01) 0">
|
||||
<div style="margin: var(--bx-spacing-05) 0">
|
||||
Selected: <strong>{selected}</strong>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
let selected = 0;
|
||||
</script>
|
||||
|
||||
<Tabs bind:selected>
|
||||
<Tabs bind:selected="{selected}">
|
||||
<Tab label="Tab label 1" />
|
||||
<Tab label="Tab label 2" />
|
||||
<Tab label="Tab label 3" />
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
</svelte:fragment>
|
||||
</Tabs>
|
||||
|
||||
<div style="margin: var(--cds-layout-01) 0">
|
||||
<div style="margin: var(--bx-spacing-05) 0">
|
||||
<Button on:click="{() => (selected = 1)}">Set index to 1</Button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<Theme bind:theme />
|
||||
|
||||
<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
|
||||
{#each ["white", "g10", "g80", "g90", "g100"] as value}
|
||||
{#each ["white", "g10", "g90", "g100"] as value}
|
||||
<RadioButton labelText="{value}" value="{value}" />
|
||||
{/each}
|
||||
</RadioButtonGroup>
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@
|
|||
let theme = "g90";
|
||||
</script>
|
||||
|
||||
<Theme bind:theme persist persistKey="__carbon-theme" />
|
||||
<Theme bind:theme="{theme}" persist persistKey="__carbon-theme" />
|
||||
|
||||
<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
|
||||
{#each ["white", "g10", "g80", "g90", "g100"] as value}
|
||||
{#each ["white", "g10", "g90", "g100"] as value}
|
||||
<RadioButton labelText="{value}" value="{value}" />
|
||||
{/each}
|
||||
</RadioButtonGroup>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<Theme
|
||||
render="toggle"
|
||||
toggle="{{
|
||||
themes: ['g10', 'g80'],
|
||||
themes: ['g10', 'g90'],
|
||||
labelA: 'Enable dark mode',
|
||||
labelB: 'Enable dark mode',
|
||||
hideLabel: true,
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
let toggled = true;
|
||||
</script>
|
||||
|
||||
<Toggle labelText="Push notifications" bind:toggled />
|
||||
<Toggle labelText="Push notifications" bind:toggled="{toggled}" />
|
||||
|
||||
<div>
|
||||
<Button size="small" on:click="{() => (toggled = !toggled)}">
|
||||
|
|
@ -17,6 +17,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
margin-top: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@
|
|||
let open = true;
|
||||
</script>
|
||||
|
||||
<Tooltip bind:open triggerText="Resource list" align="start">
|
||||
<Tooltip bind:open="{open}" triggerText="Resource list" align="start">
|
||||
<p>Resources are provisioned based on your account's organization.</p>
|
||||
</Tooltip>
|
||||
|
||||
<div style="margin-top: var(--cds-spacing-12);">
|
||||
<div style="margin-top: var(--bx-spacing-12);">
|
||||
<Button size="small" on:click="{() => (open = !open)}">
|
||||
{open ? "Close tooltip" : "Open tooltip"}
|
||||
</Button>
|
||||
|
|
@ -18,6 +18,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
margin-top: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -48,8 +48,8 @@
|
|||
<TreeView
|
||||
labelText="Cloud Products"
|
||||
children="{children}"
|
||||
bind:activeId
|
||||
bind:selectedIds
|
||||
bind:activeId="{activeId}"
|
||||
bind:selectedIds="{selectedIds}"
|
||||
on:select="{({ detail }) => console.log('select', detail)}"
|
||||
on:toggle="{({ detail }) => console.log('toggle', detail)}"
|
||||
on:focus="{({ detail }) => console.log('focus', detail)}"
|
||||
|
|
@ -60,6 +60,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
margin-top: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -48,8 +48,8 @@
|
|||
<TreeView
|
||||
labelText="Cloud Products"
|
||||
children="{children}"
|
||||
bind:activeId
|
||||
bind:selectedIds
|
||||
bind:activeId="{activeId}"
|
||||
bind:selectedIds="{selectedIds}"
|
||||
on:select="{({ detail }) => console.log('select', detail)}"
|
||||
on:toggle="{({ detail }) => console.log('toggle', detail)}"
|
||||
on:focus="{({ detail }) => console.log('focus', detail)}"
|
||||
|
|
@ -60,6 +60,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
margin-top: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -51,13 +51,13 @@
|
|||
|
||||
<TreeView
|
||||
bind:this="{treeview}"
|
||||
bind:expandedIds
|
||||
bind:expandedIds="{expandedIds}"
|
||||
labelText="Cloud Products"
|
||||
children="{children}"
|
||||
/>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -59,13 +59,13 @@
|
|||
|
||||
<TreeView
|
||||
bind:this="{treeview}"
|
||||
bind:expandedIds
|
||||
bind:expandedIds="{expandedIds}"
|
||||
labelText="Cloud Products"
|
||||
children="{children}"
|
||||
/>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -56,6 +56,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -62,6 +62,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -49,9 +49,9 @@
|
|||
<TreeView
|
||||
labelText="Cloud Products"
|
||||
children="{children}"
|
||||
bind:activeId
|
||||
bind:selectedIds
|
||||
bind:expandedIds
|
||||
bind:activeId="{activeId}"
|
||||
bind:selectedIds="{selectedIds}"
|
||||
bind:expandedIds="{expandedIds}"
|
||||
on:select="{({ detail }) => console.log('select', detail)}"
|
||||
on:toggle="{({ detail }) => console.log('toggle', detail)}"
|
||||
on:focus="{({ detail }) => console.log('focus', detail)}"
|
||||
|
|
@ -63,6 +63,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
margin-top: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -77,8 +77,8 @@
|
|||
<TreeView
|
||||
labelText="Cloud Products"
|
||||
children="{children}"
|
||||
bind:activeId
|
||||
bind:selectedIds
|
||||
bind:activeId="{activeId}"
|
||||
bind:selectedIds="{selectedIds}"
|
||||
on:select="{({ detail }) => console.log('select', detail)}"
|
||||
on:toggle="{({ detail }) => console.log('toggle', detail)}"
|
||||
on:focus="{({ detail }) => console.log('focus', detail)}"
|
||||
|
|
@ -89,6 +89,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
margin-top: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -48,8 +48,8 @@
|
|||
<TreeView
|
||||
labelText="Cloud Products"
|
||||
children="{children}"
|
||||
bind:activeId
|
||||
bind:selectedIds
|
||||
bind:activeId="{activeId}"
|
||||
bind:selectedIds="{selectedIds}"
|
||||
on:select="{({ detail }) => console.log('select', detail)}"
|
||||
on:toggle="{({ detail }) => console.log('toggle', detail)}"
|
||||
on:focus="{({ detail }) => console.log('focus', detail)}"
|
||||
|
|
@ -60,6 +60,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
margin-top: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
];
|
||||
</script>
|
||||
|
||||
<ButtonSet style="margin-bottom: var(--cds-spacing-05)">
|
||||
<ButtonSet style="margin-bottom: var(--bx-spacing-05)">
|
||||
{#each [nodeSpark, nodeBlockchain] as { id, text }}
|
||||
<Button
|
||||
on:click="{() => {
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
let:node
|
||||
>
|
||||
<span
|
||||
style:color="{node.selected ? "var(--cds-interactive-04)" : "inherit"}"
|
||||
style:color="{node.selected ? "var(--bx-interactive-04)" : "inherit"}"
|
||||
style:text-decoration="{node.disabled ? "inherit" : "underline"}"
|
||||
>
|
||||
{node.text} (id: {node.id})
|
||||
|
|
|
|||
|
|
@ -46,11 +46,11 @@
|
|||
</script>
|
||||
|
||||
<TreeView
|
||||
size="compact"
|
||||
size="xs"
|
||||
labelText="Cloud Products"
|
||||
children="{children}"
|
||||
bind:activeId
|
||||
bind:selectedIds
|
||||
bind:activeId="{activeId}"
|
||||
bind:selectedIds="{selectedIds}"
|
||||
on:select="{({ detail }) => console.log('select', detail)}"
|
||||
on:toggle="{({ detail }) => console.log('toggle', detail)}"
|
||||
on:focus="{({ detail }) => console.log('focus', detail)}"
|
||||
|
|
@ -61,6 +61,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
margin-top: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -67,10 +67,10 @@
|
|||
</svelte:fragment>
|
||||
<HeaderUtilities>
|
||||
<HeaderSearch
|
||||
bind:ref
|
||||
bind:active
|
||||
bind:value
|
||||
bind:selectedResultIndex
|
||||
bind:ref="{ref}"
|
||||
bind:active="{active}"
|
||||
bind:value="{value}"
|
||||
bind:selectedResultIndex="{selectedResultIndex}"
|
||||
placeholder="Search services"
|
||||
results="{results}"
|
||||
on:active="{() => {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
// NOTE: we *do not* want to persist the theme as this can
|
||||
// conflict with how the iframe is displayed in the docs.
|
||||
// Instead, we want the theme to be overridden in the standalone page.
|
||||
if (["white", "g10", "g80", "g90", "g100"].includes(current_theme)) {
|
||||
if (["white", "g10", "g90", "g100"].includes(current_theme)) {
|
||||
document.documentElement.setAttribute("theme", current_theme);
|
||||
document.documentElement.style.setProperty(
|
||||
"color-scheme",
|
||||
|
|
@ -31,11 +31,11 @@
|
|||
:global(body.framed) {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
padding: var(--cds-spacing-06) var(--cds-spacing-05);
|
||||
padding: var(--bx-spacing-06) var(--bx-spacing-05);
|
||||
}
|
||||
|
||||
:global(.framed :not(.bx--content) [class^="bx--col"]) {
|
||||
outline: 1px solid var(--cds-interactive-04);
|
||||
outline: 1px solid var(--bx-interactive-04);
|
||||
}
|
||||
|
||||
:global(.framed .bx--content [class^="bx--col"]) {
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@
|
|||
const themes = {
|
||||
white: "White",
|
||||
g10: "Gray 10",
|
||||
g80: "Gray 80",
|
||||
g90: "Gray 90",
|
||||
g100: "Gray 100",
|
||||
all: "All",
|
||||
|
|
@ -35,7 +34,7 @@
|
|||
|
||||
const cssImportAll = `import "carbon-components-svelte/css/all.css";`;
|
||||
const cssThemeToggle = `<script>
|
||||
let theme = "${$theme}"; // "white" | "g10" | "g80" | "g90" | "g100"
|
||||
let theme = "${$theme}"; // "white" | "g10" | "g90" | "g100"
|
||||
|
||||
$: document.documentElement.setAttribute("theme", theme);
|
||||
<\/script>
|
||||
|
|
@ -92,45 +91,45 @@
|
|||
</p>
|
||||
</Column>
|
||||
</Row>
|
||||
<Row style="margin-bottom: var(--cds-layout-02)">
|
||||
<Row style="margin-bottom: var(--bx-spacing-06)">
|
||||
<Column max="{10}" xlg="{10}">
|
||||
<h2 style="margin-top: var(--cds-layout-02)">Installation</h2>
|
||||
<h2 style="margin-top: var(--bx-spacing-06)">Installation</h2>
|
||||
</Column>
|
||||
</Row>
|
||||
<Row style="margin-bottom: var(--cds-layout-02)">
|
||||
<Row style="margin-bottom: var(--bx-spacing-06)">
|
||||
<Column noGutter>
|
||||
<Tabs>
|
||||
<Tab label="Yarn" />
|
||||
<Tab label="NPM" />
|
||||
<Tab label="pnpm" />
|
||||
<Tab label="Yarn" />
|
||||
<div slot="content" style="margin: 1rem -1rem">
|
||||
<TabContent>
|
||||
<CodeSnippet code="{installYarn}" />
|
||||
</TabContent>
|
||||
<TabContent>
|
||||
<CodeSnippet code="{installNpm}" />
|
||||
</TabContent>
|
||||
<TabContent>
|
||||
<CodeSnippet code="{installPnpm}" />
|
||||
</TabContent>
|
||||
<TabContent>
|
||||
<CodeSnippet code="{installYarn}" />
|
||||
</TabContent>
|
||||
</div>
|
||||
</Tabs>
|
||||
</Column>
|
||||
</Row>
|
||||
<Row style="margin-bottom: var(--cds-layout-04)">
|
||||
<Row style="margin-bottom: var(--bx-spacing-09)">
|
||||
<Column>
|
||||
<h2>Styling</h2>
|
||||
<p>
|
||||
Before importing components, you will need to first apply Carbon
|
||||
component styles. The Carbon Design System supports five themes (2
|
||||
light, 3 dark).
|
||||
component styles. The Carbon Design System supports four themes (2
|
||||
light, 2 dark).
|
||||
</p>
|
||||
<RadioButtonGroup
|
||||
style="margin-top: var(--cds-spacing-08)"
|
||||
style="margin-top: var(--bx-spacing-08)"
|
||||
legendText="Carbon themes"
|
||||
bind:selected="{$theme}"
|
||||
>
|
||||
{#each ["white", "g10", "g80", "g90", "g100"] as value}
|
||||
{#each ["white", "g10", "g90", "g100"] as value}
|
||||
<RadioButton labelText="{themes[value]}" value="{value}" />
|
||||
{/each}
|
||||
</RadioButtonGroup>
|
||||
|
|
@ -216,7 +215,7 @@
|
|||
</Column>
|
||||
</Row>
|
||||
|
||||
<Row style="margin-bottom: var(--cds-layout-02)">
|
||||
<Row style="margin-bottom: var(--bx-spacing-06)">
|
||||
<Column>
|
||||
<h2>Dynamic theming</h2>
|
||||
<p>Use the "all.css" StyleSheet for dynamic, client-side theming.</p>
|
||||
|
|
@ -248,7 +247,7 @@
|
|||
</Column>
|
||||
</Row>
|
||||
|
||||
<Row style="margin-bottom: var(--cds-layout-02)">
|
||||
<Row style="margin-bottom: var(--bx-spacing-06)">
|
||||
<Column>
|
||||
<h2>Portfolio</h2>
|
||||
<p>
|
||||
|
|
@ -314,6 +313,6 @@
|
|||
|
||||
<style>
|
||||
p {
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue