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

362
docs/src/COMPONENT_API.json
View file

@ -1,5 +1,5 @@
{
"total": 160,
"total": 166,
"components": [
{
"moduleName": "Accordion",
@ -1556,6 +1556,244 @@
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
},
{
"moduleName": "ContextMenu",
"filePath": "src/ContextMenu/ContextMenu.svelte",
"props": [
{
"name": "open",
"kind": "let",
"description": "Set to `true` to open the menu\nEither `x` and `y` must be greater than zero",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "x",
"kind": "let",
"description": "Specify the horizontal offset of the menu position",
"type": "number",
"value": "0",
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "y",
"kind": "let",
"description": "Specify the vertical offset of the menu position",
"type": "number",
"value": "0",
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "ref",
"kind": "let",
"description": "Obtain a reference to the unordered list HTML element",
"type": "null | HTMLUListElement",
"value": "null",
"isFunction": false,
"constant": false,
"reactive": true
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [
{ "type": "forwarded", "name": "click", "element": "ul" },
{ "type": "forwarded", "name": "keydown", "element": "ul" },
{ "type": "dispatched", "name": "open" },
{ "type": "dispatched", "name": "close" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "ul" }
},
{
"moduleName": "ContextMenuDivider",
"filePath": "src/ContextMenu/ContextMenuDivider.svelte",
"props": [],
"slots": [],
"events": [],
"typedefs": []
},
{
"moduleName": "ContextMenuGroup",
"filePath": "src/ContextMenu/ContextMenuGroup.svelte",
"props": [
{
"name": "selectedIds",
"kind": "let",
"type": "string[]",
"value": "[]",
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "labelText",
"kind": "let",
"description": "Specify the label text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [],
"typedefs": []
},
{
"moduleName": "ContextMenuOption",
"filePath": "src/ContextMenu/ContextMenuOption.svelte",
"props": [
{
"name": "disabled",
"kind": "let",
"description": "Set to `true` to enable the disabled state",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "indented",
"kind": "let",
"description": "Set to `true` to indent the label",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "icon",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render\nIcon is rendered to the left of the label text",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "labelText",
"kind": "let",
"description": "Specify the label text\nAlternatively, use the \"labelText\" slot (e.g., <span slot=\"labelText\">...</span>)",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "selected",
"kind": "let",
"description": "Set to `true` to use the selected variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "selectable",
"kind": "let",
"description": "Set to `true` to enable the selectable variant\nAutomatically set to `true` if `selected` is `true`",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "shortcutText",
"kind": "let",
"description": "Specify the shortcut text\nAlternatively, use the \"shortcutText\" slot (e.g., <span slot=\"shortcutText\">...</span>)",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "id",
"kind": "let",
"description": "Specify the id\nIt's recommended to provide an id as a value to bind to within a selectable/radio menu group",
"type": "string",
"value": "\"ccs-\" + Math.random().toString(36)",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "ref",
"kind": "let",
"description": "Obtain a reference to the list item HTML element",
"type": "null | HTMLLIElement",
"value": "null",
"isFunction": false,
"constant": false,
"reactive": true
}
],
"slots": [
{ "name": "__default__", "default": true, "slot_props": "{}" },
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
},
{
"name": "shortcutText",
"default": false,
"fallback": "{shortcutText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "keydown", "element": "li" },
{ "type": "forwarded", "name": "mouseenter", "element": "li" },
{ "type": "forwarded", "name": "mouseleave", "element": "li" },
{ "type": "dispatched", "name": "click" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "li" }
},
{
"moduleName": "ContextMenuRadioGroup",
"filePath": "src/ContextMenu/ContextMenuRadioGroup.svelte",
"props": [
{
"name": "selectedId",
"kind": "let",
"description": "Set the selected radio group id",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "labelText",
"kind": "let",
"description": "Specify the label text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [],
"typedefs": []
},
{
"moduleName": "Copy",
"filePath": "src/Copy/Copy.svelte",
@ -5539,7 +5777,7 @@
"name": "select",
"detail": "{ selectedIds: string[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }"
},
{ "type": "forwarded", "name": "clear", "element": "ListBoxSelection" },
{ "type": "dispatched", "name": "clear", "detail": "any" },
{ "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" }
@ -6475,6 +6713,16 @@
"type": "dispatched",
"name": "update",
"detail": "{ pageSize: number; page: number; }"
},
{
"type": "dispatched",
"name": "click:button--previous",
"detail": "{ page: number; }"
},
{
"type": "dispatched",
"name": "click:button--next",
"detail": "{ page: number; }"
}
],
"typedefs": [],
@ -6778,6 +7026,86 @@
"typedefs": [],
"rest_props": { "type": "Element", "name": "input" }
},
{
"moduleName": "Popover",
"filePath": "src/Popover/Popover.svelte",
"props": [
{
"name": "open",
"kind": "let",
"description": "Set to `true` to display the popover",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "closeOnOutsideClick",
"kind": "let",
"description": "Set to `true` to close the popover on an outside click",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "caret",
"kind": "let",
"description": "Set to `true` render a caret",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "align",
"kind": "let",
"description": "Specify the alignment of the caret",
"type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"",
"value": "\"top\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "light",
"kind": "let",
"description": "Set to `true` to enable the light variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "highContrast",
"kind": "let",
"description": "Set to `true` to enable the high contrast variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "relative",
"kind": "let",
"description": "Set to `true` to use a relative position",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [{ "type": "dispatched", "name": "click:outside" }],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
},
{
"moduleName": "ProgressIndicator",
"filePath": "src/ProgressIndicator/ProgressIndicator.svelte",
@ -7638,6 +7966,26 @@
"constant": false,
"reactive": false
},
{
"name": "warn",
"kind": "let",
"description": "Set to `true` to indicate an warning state",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "warnText",
"kind": "let",
"description": "Specify the warning state text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "helperText",
"kind": "let",
@ -9148,6 +9496,16 @@
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "type",
"kind": "let",
"description": "Specify the type of tabs",
"type": "\"default\" | \"container\"",
"value": "\"default\"",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [],

4
docs/src/components/Preview.svelte
View file

@ -55,6 +55,10 @@
max-width: 56rem;
}
.code-override .bx--snippet {
max-width: none;
}
.code-override .bx--copy-btn,
.code-override .bx--snippet,
.code-override button.bx--btn.bx--snippet-btn--expand {

7
docs/src/layouts/ComponentLayout.svelte
View file

@ -208,7 +208,12 @@
}
}
.preview-viewer > .bx--aspect-ratio {
.preview-viewer > .bx--aspect-ratio,
.preview-viewer [data-outline] {
outline: 1px solid var(--cds-interactive-04);
}
[data-outline] {
position: relative;
}
</style>

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>