mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 18:31:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

Alignment with Carbon version 10.31 (#571)

Browse source 
* chore(deps-dev): upgrade carbon-components to v10.31.0

* fix(slider): use CSS to hide input if hideTextInput is true

* docs(slider): add hidden text input, invalid, disabled examples

* feat(tabs): support "container" type for TabsSkeleton

* chore(list-box): remove hotfix inline style to center dropdown chevron

* fix(number-input): use add, subtract icons and update markup

* feat(select): add warning state

* docs(select): add invalid state example

* docs(select): add helper text example

* fix(structured-list): add "rowgroup" role to StructuredListBody

* docs: release code snippet max-width

* docs(select): add skeleton hidden label example

* feat(popover): add Popover component

* feat(pagination): dispatch button click events to be consistent with PaginationNav

* fix(multi-select): type clear as a custom event

* docs(radio-button): add disabled buttons example

* chore(tabs): use absolute icon import

* fix(link): remove line breaks within anchor link

* docs(radio-button): adjust section copy verbiage

* chore(deps-dev): upgrade carbon-icons-svelte to v10.27

v10.27 uses the SvelteComponentTyped interface

* docs(accordion): adjust section title verbiage

* test(types): fix warnings from svelte-check

* fix(search): only set autofocus attribute if equals true

* feat(popover): add closeOnOutsideClick prop

* docs: style [data-outline] as relative positioned

* feat(context-menu): add initial ContextMenu

* feat(context-menu): annotate props, generate types

* feat(context-menu): add initial focus logic

* fix(context-menu): correctly tab in/out of nested menus

* chore(context-menu): update types

* fix(context-menu): obtain radio id from node directly

* docs(context-menu): add examples and test

* fix(context-menu): prevent default keydown behavior
This commit is contained in:
Eric Liu 2021-03-20 10:39:14 -07:00 • committed by GitHub
commit 5fad0cb3c7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
52 changed files with 1758 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -20,7 +20,7 @@
import Footer from "../components/Footer.svelte";
const deprecated = ["ToggleSmall", "Icon"];
const new_components = ["ImageLoader", "LocalStorage"];
const new_components = ["Popover", "ContextMenu"];
let isOpen = false;
let isSideNavOpen = true;
@ -105,10 +105,18 @@
>
{child.title}
{#if deprecated.includes(child.title)}
<Tag size="sm" type="red">Deprecated</Tag>
<Tag size="sm" type="red" style="margin-top: 0; margin-bottom: 0">
Deprecated
</Tag>
{/if}
{#if new_components.includes(child.title)}
<Tag size="sm" type="green">New</Tag>
<Tag
size="sm"
type="green"
style="margin-top: 0; margin-bottom: 0"
>
New
</Tag>
{/if}
</SideNavMenuItem>
{/each}

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

@ -27,7 +27,7 @@ See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a togglea
</AccordionItem>
</Accordion>
### Chevron aligned left
### Left-aligned chevron
<Accordion align="start">
<AccordionItem title="Natural Language Classifier">
@ -148,7 +148,7 @@ See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a togglea
<Accordion skeleton />
### Skeleton (chevron aligned left)
### Skeleton (left-aligned chevron)
<Accordion skeleton align="start" />

17
docs/src/pages/components/ContextMenu.svx Normal file
View file

@ -0,0 +1,17 @@
---
components: ["ContextMenu", "ContextMenuGroup", "ContextMenuRadioGroup", "ContextMenuOption", "ContextMenuDivider"]
---
<script>
import Preview from "../../components/Preview.svelte";
</script>
In the examples, right click anywhere within the iframe.
### Default
<FileSource src="/framed/ContextMenu/ContextMenu" />
### Radio groups
<FileSource src="/framed/ContextMenu/ContextMenuGroups" />

77
docs/src/pages/components/Popover.svx Normal file
View file

@ -0,0 +1,77 @@
<script>
import { Popover } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
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>
</Popover>
</div>
### Relative position
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>
</Popover>
</div>
### Close on outside click
Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the popover.
<div data-outline>
Parent
<Popover open closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}>
<div style="padding: var(--cds-spacing-05)">Content</div>
</Popover>
</div>
### With caret
<div data-outline>
Parent
<Popover caret open>
<div style="padding: var(--cds-spacing-05)">Content</div>
</Popover>
</div>
### Custom caret alignment
By default, the caret is aligned "top".
Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"left"`, `"left-bottom"`, `"left-top"`, `"right"`, `"right-bottom"` or `"right-top"`.
<div data-outline>
Parent
<Popover caret align="top-left" open>
<div style="padding: var(--cds-spacing-05)">Content</div>
</Popover>
</div>
### Light variant
<div data-outline>
Parent
<Popover light open>
<div style="padding: var(--cds-spacing-05)">Content</div>
</Popover>
</div>
### High contrast variant
<div data-outline>
Parent
<Popover highContrast open>
<div style="padding: var(--cds-spacing-05)">Content</div>
</Popover>
</div>

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

@ -47,7 +47,7 @@ Bind the selected value using the `selected` prop.
<FileSource src="/framed/RadioButton/ProgrammaticRadioButton" />
### Label text aligned left
### Left-aligned label text
<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
@ -55,6 +55,14 @@ Bind the selected value using the `selected` prop.
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
### Disabled buttons
<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" selected="standard">
<RadioButton disabled labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton disabled labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
### Vertical orientation
<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" selected="standard">
@ -71,7 +79,7 @@ Bind the selected value using the `selected` prop.
<RadioButtonSkeleton />
</RadioButtonGroup>
### Skeleton (vertical orientation)
### Skeleton (vertical)
<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)">
<RadioButtonSkeleton />

35
docs/src/pages/components/Select.svx
View file

@ -16,6 +16,15 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<SelectItem value="g100" text="Gray 100" />
</Select>
### Helper text
<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="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
### Hidden label
<Select hideLabel labelText="Carbon theme" selected="g10" >
@ -75,7 +84,25 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<SelectItem value="g100" text="Gray 100" />
</Select>
### Disabled
### Invalid state
<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="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
### Warning state
<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="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
### Disabled state
<Select disabled labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
@ -86,4 +113,8 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
### Skeleton
<SelectSkeleton />
<SelectSkeleton />
### Skeleton (hidden label)
<SelectSkeleton hideLabel />

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

@ -11,6 +11,10 @@ components: ["Slider", "SliderSkeleton"]
<Slider />
### Hidden text input
<Slider hideTextInput />
### Custom minimum, maximum values
<Slider labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} />
@ -23,6 +27,14 @@ components: ["Slider", "SliderSkeleton"]
<Slider light labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} />
### Invalid state
<Slider invalid labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} />
### Disabled state
<Slider disabled labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} />
### Skeleton
<SliderSkeleton />

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

@ -37,6 +37,10 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"]
</div>
</Tabs>
### Skeleton
### Skeleton (default)
<TabsSkeleton count={3} />
<TabsSkeleton count={3} />
### Skeleton (container)
<TabsSkeleton type="container" count={3} />

45
docs/src/pages/framed/ContextMenu/ContextMenu.svelte Normal file
View file

@ -0,0 +1,45 @@
<script>
import {
ContextMenu,
ContextMenuDivider,
ContextMenuGroup,
ContextMenuOption,
} from "carbon-components-svelte";
import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16";
import Cut16 from "carbon-icons-svelte/lib/Cut16";
let selectedIds = [];
$: console.log("selectedIds", selectedIds);
</script>
<ContextMenu>
<ContextMenuOption
indented
labelText="Copy"
shortcutText="⌘C"
icon="{CopyFile16}"
/>
<ContextMenuOption
indented
labelText="Cut"
shortcutText="⌘X"
icon="{Cut16}"
/>
<ContextMenuDivider />
<ContextMenuOption indented labelText="Export as">
<ContextMenuGroup labelText="Export options" bind:selectedIds>
<ContextMenuOption id="pdf" labelText="PDF" />
<ContextMenuOption id="txt" labelText="TXT" />
<ContextMenuOption id="mp3" labelText="MP3" />
</ContextMenuGroup>
</ContextMenuOption>
<ContextMenuDivider />
<ContextMenuOption selectable labelText="Remove metadata" />
<ContextMenuDivider />
<ContextMenuGroup labelText="Style options">
<ContextMenuOption id="0" labelText="Font smoothing" selected />
<ContextMenuOption id="1" labelText="Reduce noise" />
<ContextMenuOption id="2" labelText="Auto-sharpen" />
</ContextMenuGroup>
</ContextMenu>

23
docs/src/pages/framed/ContextMenu/ContextMenuGroups.svelte Normal file
View file

@ -0,0 +1,23 @@
<script>
import {
ContextMenu,
ContextMenuDivider,
ContextMenuOption,
ContextMenuRadioGroup,
} from "carbon-components-svelte";
let selectedId = "0";
$: console.log("selectedId", selectedId);
</script>
<ContextMenu>
<ContextMenuOption indented labelText="Open" />
<ContextMenuDivider />
<ContextMenuRadioGroup bind:selectedId labelText="Radio group">
<ContextMenuOption id="0" labelText="Set as foreground" />
<ContextMenuOption id="1" labelText="Set as background" />
</ContextMenuRadioGroup>
<ContextMenuDivider />
<ContextMenuOption selectable labelText="Lock layer" />
</ContextMenu>