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

Align v10.38 (#698)

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

* feat(text-input): support read-only variant

* docs: use consistent lingo for inline variant examples

* docs(popover): add Popover alignment example

* fix(file-uploader): adjust markup to avoid accessibility errors

Ref: 0dfde60e3

* fix(inline-loading): use error filled icon

* fix(inline-loading): render iconDescription as title in error/warning icons

Ref: 51c53c923

* fix(structured-list): update accessibility attributes

* fix(tooltip-definition): use span instead of div

Ref: cb6de3025

* fix(multi-select): close menu when blurring the last filterable option

* fix(multi-select): open/focus field for filterable multiselect #635

* fix(multi-select): unblock focus when blurring input #635

* fix(combo-box): select correct item with keys, allow input after clearing #195

* fix(combo-box): update input text if item is selected

* feat(combo-box): render checkmark icon for selected item

* fix(ui-shell): toggle SideNav rail when clicking the hamburger menu #699

* fix(context-menu): update context menu classes #684

* docs(context-menu): improve demo instructions #684

* fix(context-menu): close menu when clicking anywhere
This commit is contained in:
Eric Liu 2021-06-27 08:46:57 -07:00 • committed by GitHub
commit e51f50da0c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
33 changed files with 285 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

12
docs/src/COMPONENT_API.json
View file

@ -10416,7 +10416,17 @@
{
"name": "inline",
"kind": "let",
"description": "Set to `true` to use inline version",
"description": "Set to `true` to use the inline variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "readonly",
"kind": "let",
"description": "Set to `true` to use the read-only variant",
"type": "boolean",
"value": "false",
"isFunction": false,

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

@ -217,4 +217,8 @@
[data-outline] {
position: relative;
}
[data-outline] ~ [data-outline] {
margin-top: var(--cds-spacing-08);
}
</style>

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

@ -47,7 +47,7 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Inline type
### Inline variant
<Dropdown type="inline" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},

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

@ -79,7 +79,7 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
{id: "2", text: "Fax"}]}"
/>
### Inline type
### Inline variant
<MultiSelect type="inline" titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"},

73
docs/src/pages/components/Popover.svx
View file

@ -36,6 +36,79 @@ Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the
</Popover>
</div>
### Popover alignment
Customize the popover alignment using the `align` prop. Valid values include: `"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top"`.
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>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="top-right">
<div style="padding: var(--cds-spacing-05)">top-right</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="bottom">
<div style="padding: var(--cds-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>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="bottom-right">
<div style="padding: var(--cds-spacing-05)">bottom-right</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="left">
<div style="padding: var(--cds-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>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="left-right">
<div style="padding: var(--cds-spacing-05)">left-right</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="right">
<div style="padding: var(--cds-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>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="right-top">
<div style="padding: var(--cds-spacing-05)">right-top</div>
</Popover>
</div>
### With caret
<div data-outline>

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

@ -62,7 +62,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<SelectItem value="g100" text="Gray 100" />
</Select>
### Inline type
### Inline variant
<Select inline labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />

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

@ -23,10 +23,14 @@ components: ["TextInput", "TextInputSkeleton"]
<TextInput light labelText="User name" placeholder="Enter user name..." />
### Inline
### Inline variant
<TextInput inline labelText="User name" placeholder="Enter user name..." />
### Read-only variant
<TextInput readonly labelText="User name" value="IBM" />
### Extra-large size
<TextInput size="xl" labelText="User name" placeholder="Enter user name..." />

16
docs/src/pages/framed/ContextMenu/ContextMenu.svelte
View file

@ -45,3 +45,19 @@
<ContextMenuDivider />
<ContextMenuOption indented kind="danger" labelText="Delete" />
</ContextMenu>
<div>
<p>Right click anywhere on this page</p>
</div>
<style>
div {
position: absolute;
width: calc(100% - var(--cds-spacing-05));
height: calc(100% - var(--cds-spacing-06));
display: flex;
align-items: center;
justify-content: center;
color: var(--cds-text-02);
}
</style>

16
docs/src/pages/framed/ContextMenu/ContextMenuGroups.svelte
View file

@ -21,3 +21,19 @@
<ContextMenuDivider />
<ContextMenuOption selectable labelText="Lock layer" />
</ContextMenu>
<div>
<p>Right click anywhere on this page</p>
</div>
<style>
div {
position: absolute;
width: calc(100% - var(--cds-spacing-05));
height: calc(100% - var(--cds-spacing-06));
display: flex;
align-items: center;
justify-content: center;
color: var(--cds-text-02);
}
</style>

30
docs/src/pages/framed/UIShell/HeaderNavRail.svelte
View file

@ -37,22 +37,22 @@
</HeaderNavMenu>
<HeaderNavItem href="/" text="Link 4" />
</HeaderNav>
</Header>
<SideNav bind:isOpen="{isSideNavOpen}" rail>
<SideNavItems>
<SideNavLink icon="{Fade16}" text="Link 1" href="/" isSelected />
<SideNavLink icon="{Fade16}" text="Link 2" href="/" />
<SideNavLink icon="{Fade16}" text="Link 3" href="/" />
<SideNavMenu icon="{Fade16}" text="Menu">
<SideNavMenuItem href="/" text="Link 1" />
<SideNavMenuItem href="/" text="Link 2" />
<SideNavMenuItem href="/" text="Link 3" />
</SideNavMenu>
<SideNavDivider />
<SideNavLink icon="{Fade16}" text="Link 4" href="/" />
</SideNavItems>
</SideNav>
<SideNav bind:isOpen="{isSideNavOpen}" rail>
<SideNavItems>
<SideNavLink icon="{Fade16}" text="Link 1" href="/" isSelected />
<SideNavLink icon="{Fade16}" text="Link 2" href="/" />
<SideNavLink icon="{Fade16}" text="Link 3" href="/" />
<SideNavMenu icon="{Fade16}" text="Menu">
<SideNavMenuItem href="/" text="Link 1" />
<SideNavMenuItem href="/" text="Link 2" />
<SideNavMenuItem href="/" text="Link 3" />
</SideNavMenu>
<SideNavDivider />
<SideNavLink icon="{Fade16}" text="Link 4" href="/" />
</SideNavItems>
</SideNav>
</Header>
<Content>
<Grid>