mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +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

3
COMPONENT_INDEX.md
View file

@ -4072,7 +4072,8 @@ None.
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| required | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to mark the field as required |
| inline | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use inline version |
| inline | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
| readonly | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the read-only variant |
### Slots

2
docs/package.json
View file

@ -11,7 +11,7 @@
"devDependencies": {
"@sveltech/routify": "^1.9.9",
"autoprefixer": "^10.2.3",
"carbon-components": "10.37.0",
"carbon-components": "10.38.0",
"carbon-components-svelte": "../",
"mdsvex": "^0.8.8",
"npm-run-all": "^4.1.5",

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>

10
docs/yarn.lock
View file

@ -837,16 +837,16 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
carbon-components-svelte@../:
version "0.36.0"
version "0.37.0"
dependencies:
carbon-icons-svelte "^10.27.0"
clipboard-copy "3.2.0"
flatpickr "4.6.9"
carbon-components@10.37.0:
version "10.37.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.37.0.tgz#bc53138151ea58e79f5b249b1ec5be8ae2c0a7e4"
integrity sha512-LHReeqzzieP/q/xAHfKJNWLdWhOkr7+DIVZkrQGPf6kZYj5H8tb1KYKOIhasvCNRxJ2es8QJXuH7XW0JoLDfdQ==
carbon-components@10.38.0:
version "10.38.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.38.0.tgz#f275192f70eccf0d0052a192113ee20059594d4f"
integrity sha512-o5Ns3M2LQMuQ41UJiT+WFU+t/hAerde+77LKmrBpiPRBHJ+/VEBAfKmjB5TiH5QM/VWVDWo0Dvr8gc6yNKRqug==
dependencies:
"@carbon/telemetry" "0.0.0-alpha.6"
flatpickr "4.6.1"

2
package.json
View file

@ -32,7 +32,7 @@
"@rollup/plugin-node-resolve": "^11.1.1",
"@tsconfig/svelte": "^1.0.10",
"autoprefixer": "^10.2.4",
"carbon-components": "10.37.0",
"carbon-components": "10.38.0",
"gh-pages": "^3.1.0",
"husky": "^4.3.8",
"lint-staged": "^10.5.3",

1
src/Checkbox/Checkbox.svelte
View file

@ -79,6 +79,7 @@
on:change="{() => {
checked = !checked;
}}"
on:blur
/>
<label for="{id}" title="{title}" class:bx--checkbox-label="{true}">
<span

35
src/ComboBox/ComboBox.svelte
View file

@ -95,6 +95,7 @@
export let listRef = null;
import { createEventDispatcher, afterUpdate, tick } from "svelte";
import Checkmark16 from "carbon-icons-svelte/lib/Checkmark16/Checkmark16.svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
import ListBox from "../ListBox/ListBox.svelte";
@ -128,7 +129,6 @@
filteredItems = items.filter((item) => shouldFilterItem(item, value));
} else {
highlightedIndex = -1;
inputValue = selectedItem ? selectedItem.text : "";
if (!selectedItem) {
selectedId = undefined;
@ -149,7 +149,6 @@
: undefined;
$: filteredItems = items.filter((item) => shouldFilterItem(item, value));
$: selectedItem = items[selectedIndex];
$: inputValue = selectedItem ? selectedItem.text : undefined;
$: value = inputValue;
</script>
@ -217,16 +216,31 @@
class:bx--text-input="{true}"
class:bx--text-input--light="{light}"
class:bx--text-input--empty="{inputValue === ''}"
on:input="{({ target }) => {
on:input="{async ({ target }) => {
if (!open && target.value.length > 0) {
open = true;
}
inputValue = target.value;
}}"
on:keydown
on:keydown|stopPropagation="{({ key }) => {
if (key === 'Enter') {
open = !open;
if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) {
selectedIndex = highlightedIndex;
open = false;
if (filteredItems[selectedIndex]) {
inputValue = filteredItems[selectedIndex].text;
}
}
if (highlightedIndex < 0 && selectedIndex > -1) {
if (filteredItems[selectedIndex]) {
inputValue = filteredItems[selectedIndex].text;
}
}
} else if (key === 'Tab') {
open = false;
@ -242,6 +256,12 @@
on:focus
on:blur
on:blur="{({ relatedTarget }) => {
if (inputValue.length === 0 && selectedIndex > -1) {
if (filteredItems[selectedIndex]) {
inputValue = filteredItems[selectedIndex].text;
}
}
if (!open || !relatedTarget) return;
if (
relatedTarget &&
@ -266,7 +286,9 @@
on:clear
on:clear="{() => {
selectedIndex = -1;
highlightedIndex = -1;
open = false;
inputValue = '';
ref.focus();
}}"
translateWithId="{translateWithId}"
@ -300,12 +322,19 @@
.map(({ id }) => id)
.indexOf(filteredItems[i].id);
open = false;
if (filteredItems[i]) {
inputValue = filteredItems[i].text;
}
}}"
on:mouseenter="{() => {
highlightedIndex = i;
}}"
>
{itemToString(item)}
{#if selectedItem && selectedItem.id === item.id}
<Checkmark16 class="bx--list-box__menu-item__selected-icon" />
{/if}
</ListBoxMenuItem>
{/each}
</ListBoxMenu>

11
src/ContextMenu/ContextMenu.svelte
View file

@ -79,6 +79,7 @@
<svelte:window
on:contextmenu|preventDefault="{(e) => {
if (level > 1) return;
if (!ref) return;
const { height, width } = ref.getBoundingClientRect();
@ -104,7 +105,7 @@
}}"
on:click="{(e) => {
if (!open) return;
if (e.target.contains(ref)) close();
close();
}}"
on:keydown="{(e) => {
if (open && e.key === 'Escape') close();
@ -117,10 +118,10 @@
tabindex="-1"
data-direction="{direction}"
data-level="{level}"
class:bx--context-menu="{true}"
class:bx--context-menu--open="{open}"
class:bx--context-menu--invisible="{open && x === 0 && y === 0}"
class:bx--context-menu--root="{level === 1}"
class:bx--menu="{true}"
class:bx--menu--open="{open}"
class:bx--menu--invisible="{open && x === 0 && y === 0}"
class:bx--menu--root="{level === 1}"
{...$$restProps}
style="left: {x}px; top: {y}px; {$$restProps.style}"
on:click

2
src/ContextMenu/ContextMenuDivider.svelte
View file

@ -1 +1 @@
<li role="separator" class:bx--context-menu-divider="{true}"></li>
<li role="separator" class:bx--menu-divider="{true}"></li>

30
src/ContextMenu/ContextMenuOption.svelte
View file

@ -173,14 +173,14 @@
aria-disabled="{!subOptions && disabled}"
aria-haspopup="{subOptions ? true : undefined}"
aria-expanded="{subOptions ? submenuOpen : undefined}"
class:bx--context-menu-option="{true}"
class:bx--context-menu-option--disabled="{true}"
class:bx--context-menu-option--active="{subOptions && submenuOpen}"
class:bx--context-menu-option--danger="{!subOptions && kind === 'danger'}"
class:bx--menu-option="{true}"
class:bx--menu-option--disabled="{true}"
class:bx--menu-option--active="{subOptions && submenuOpen}"
class:bx--menu-option--danger="{!subOptions && kind === 'danger'}"
indented="{indented}"
aria-checked="{isSelectable || isRadio ? selected : undefined}"
data-nested="{ref &&
ref.closest('.bx--context-menu').getAttribute('data-level') === '2'}"
ref.closest('.bx--menu').getAttribute('data-level') === '2'}"
data-sub="{subOptions}"
data-id="{id}"
{...$$restProps}
@ -240,18 +240,18 @@
>
{#if subOptions}
<div
class:bx--context-menu-option__content="{true}"
class:bx--context-menu-option__content--disabled="{disabled}"
class:bx--menu-option__content="{true}"
class:bx--menu-option__content--disabled="{disabled}"
>
{#if indented}
<div class:bx--context-menu-option__icon="{true}">
<div class:bx--menu-option__icon="{true}">
<svelte:component this="{icon}" />
</div>
{/if}
<span class:bx--context-menu-option__label="{true}" title="{labelText}">
<span class:bx--menu-option__label="{true}" title="{labelText}">
<slot name="labelText">{labelText}</slot>
</span>
<div class:bx--context-menu-option__info="{true}"><CaretRight16 /></div>
<div class:bx--menu-option__info="{true}"><CaretRight16 /></div>
</div>
<ContextMenu
@ -263,18 +263,18 @@
</ContextMenu>
{:else}
<div
class:bx--context-menu-option__content="{true}"
class:bx--context-menu-option__content--disabled="{disabled}"
class:bx--menu-option__content="{true}"
class:bx--menu-option__content--disabled="{disabled}"
>
{#if indented}
<div class:bx--context-menu-option__icon="{true}">
<div class:bx--menu-option__icon="{true}">
<svelte:component this="{icon}" />
</div>
{/if}
<span class:bx--context-menu-option__label="{true}" title="{labelText}">
<span class:bx--menu-option__label="{true}" title="{labelText}">
<slot name="labelText">{labelText}</slot>
</span>
<div class:bx--context-menu-option__info="{true}">
<div class:bx--menu-option__info="{true}">
<slot name="shortcutText">{shortcutText}</slot>
</div>
</div>

38
src/FileUploader/FileUploaderDropContainer.svelte
View file

@ -92,25 +92,25 @@
<slot name="labelText">
{labelText}
</slot>
<input
bind:this="{ref}"
type="file"
tabindex="-1"
id="{id}"
disabled="{disabled}"
accept="{accept}"
name="{name}"
multiple="{multiple}"
class:bx--file-input="{true}"
on:change
on:change="{({ target }) => {
dispatch('add', validateFiles(target.files));
}}"
on:click
on:click="{({ target }) => {
target.value = null;
}}"
/>
</div>
<input
bind:this="{ref}"
type="file"
tabindex="-1"
id="{id}"
disabled="{disabled}"
accept="{accept}"
name="{name}"
multiple="{multiple}"
class:bx--file-input="{true}"
on:change
on:change="{({ target }) => {
dispatch('add', validateFiles(target.files));
}}"
on:click
on:click="{({ target }) => {
target.value = null;
}}"
/>
</label>
</div>

12
src/InlineLoading/InlineLoading.svelte
View file

@ -22,7 +22,7 @@
import { createEventDispatcher, afterUpdate, onMount } from "svelte";
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16/CheckmarkFilled16.svelte";
import Error20 from "carbon-icons-svelte/lib/Error20/Error20.svelte";
import ErrorFilled16 from "carbon-icons-svelte/lib/ErrorFilled16/ErrorFilled16.svelte";
import Loading from "../Loading/Loading.svelte";
const dispatch = createEventDispatcher();
@ -55,9 +55,15 @@
>
<div class:bx--inline-loading__animation="{true}">
{#if status === "error"}
<Error20 class="bx--inline-loading--error" />
<ErrorFilled16
class="bx--inline-loading--error"
title="{iconDescription}"
/>
{:else if status === "finished"}
<CheckmarkFilled16 class="bx--inline-loading__checkmark-container" />
<CheckmarkFilled16
class="bx--inline-loading__checkmark-container"
title="{iconDescription}"
/>
{:else if status === "inactive" || status === "active"}
<Loading
small

1
src/ListBox/ListBoxField.svelte
View file

@ -61,6 +61,7 @@
on:mouseenter
on:mouseleave
on:keydown|preventDefault|stopPropagation
on:focus
on:blur
>
<slot />

17
src/MultiSelect/MultiSelect.svelte
View file

@ -319,6 +319,12 @@
}
}
}}"
on:focus="{() => {
if (filterable) {
open = true;
if (inputRef) inputRef.focus();
}
}}"
on:blur="{({ relatedTarget }) => {
if (
relatedTarget &&
@ -342,7 +348,7 @@
...item,
checked: false,
}));
fieldRef.blur();
if (fieldRef) fieldRef.blur();
}}"
translateWithId="{translateWithId}"
disabled="{disabled}"
@ -388,7 +394,11 @@
on:blur="{({ relatedTarget }) => {
if (
relatedTarget &&
relatedTarget.getAttribute('role') !== 'button'
!['INPUT', 'SELECT', 'TEXTAREA'].includes(
relatedTarget.tagName
) &&
relatedTarget.getAttribute('role') !== 'button' &&
relatedTarget.getAttribute('role') !== 'searchbox'
) {
inputRef.focus();
}
@ -453,6 +463,9 @@
labelText="{itemToString(item)}"
checked="{item.checked}"
disabled="{disabled}"
on:blur="{() => {
if (i === filteredItems.length - 1) open = false;
}}"
/>
</ListBoxMenuItem>
{/each}

2
src/StructuredList/StructuredList.svelte
View file

@ -38,7 +38,7 @@
</script>
<div
aria-label="Structured list section"
role="table"
class:bx--structured-list="{true}"
class:bx--structured-list--border="{border}"
class:bx--structured-list--selection="{selection}"

2
src/StructuredList/StructuredListBody.svelte
View file

@ -1,6 +1,6 @@
<div
class:bx--structured-list-tbody="{true}"
role="rowgroup"
class:bx--structured-list-tbody="{true}"
{...$$restProps}
on:click
on:mouseover

1
src/StructuredList/StructuredListCell.svelte
View file

@ -7,6 +7,7 @@
</script>
<div
role="{head ? 'columnheader' : 'cell'}"
class:bx--structured-list-th="{head}"
class:bx--structured-list-td="{!head}"
class:bx--structured-list-content--nowrap="{noWrap}"

1
src/StructuredList/StructuredListHead.svelte
View file

@ -1,4 +1,5 @@
<div
role="rowgroup"
class:bx--structured-list-thead="{true}"
{...$$restProps}
on:click

2
src/StructuredList/StructuredListRow.svelte
View file

@ -12,7 +12,6 @@
{#if label}
<!-- svelte-ignore a11y-label-has-associated-control -->
<label
role="presentation"
tabindex="{tabindex}"
class:bx--structured-list-row="{true}"
class:bx--structured-list-row--header-row="{head}"
@ -27,6 +26,7 @@
</label>
{:else}
<div
role="row"
class:bx--structured-list-row="{true}"
class:bx--structured-list-row--header-row="{head}"
{...$$restProps}

12
src/TextInput/TextInput.svelte
View file

@ -59,12 +59,16 @@
/** Set to `true` to mark the field as required */
export let required = false;
/** Set to `true` to use inline version */
/** Set to `true` to use the inline variant */
export let inline = false;
/** Set to `true` to use the read-only variant */
export let readonly = false;
import { getContext } from "svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
import EditOff16 from "carbon-icons-svelte/lib/EditOff16/EditOff16.svelte";
const ctx = getContext("Form");
@ -77,6 +81,8 @@
class:bx--form-item="{true}"
class:bx--text-input-wrapper="{true}"
class:bx--text-input-wrapper--inline="{inline}"
class:bx--text-input-wrapper--light="{light}"
class:bx--text-input-wrapper--readonly="{readonly}"
on:click
on:mouseover
on:mouseenter
@ -142,6 +148,9 @@
bx--text-input__invalid-icon--warning"
/>
{/if}
{#if readonly}
<EditOff16 class="bx--text-input__readonly-icon" />
{/if}
<input
bind:this="{ref}"
data-invalid="{invalid || undefined}"
@ -155,6 +164,7 @@
type="{type}"
value="{value}"
required="{required}"
readonly="{readonly}"
class:bx--text-input="{true}"
class:bx--text-input--light="{light}"
class:bx--text-input--invalid="{invalid}"

4
src/TooltipDefinition/TooltipDefinition.svelte
View file

@ -36,7 +36,7 @@
if (key === 'Escape') hide();
}}" />
<div
<span
class:bx--tooltip--definition="{true}"
class:bx--tooltip--a11y="{true}"
{...$$restProps}
@ -69,4 +69,4 @@
<div role="tooltip" id="{id}" class:bx--assistive-text="{true}">
<slot name="tooltip">{tooltipText}</slot>
</div>
</div>
</span>

6
src/UIShell/SideNav/SideNav.svelte
View file

@ -25,6 +25,8 @@
const dispatch = createEventDispatcher();
let winWidth = undefined;
$: dispatch(isOpen ? "open" : "close");
onMount(() => {
@ -33,6 +35,8 @@
});
</script>
<svelte:window bind:innerWidth="{winWidth}" />
{#if !fixed}
<div
on:click="{() => {
@ -49,7 +53,7 @@
class:bx--side-nav__navigation="{true}"
class:bx--side-nav="{true}"
class:bx--side-nav--ux="{true}"
class:bx--side-nav--expanded="{isOpen && !rail}"
class:bx--side-nav--expanded="{rail && winWidth >= 1056 ? false : isOpen}"
class:bx--side-nav--collapsed="{!isOpen && !rail}"
class:bx--side-nav--rail="{rail}"
{...$$restProps}

8
types/TextInput/TextInput.d.ts vendored
View file

@ -104,10 +104,16 @@ export interface TextInputProps
required?: boolean;
/**
* Set to `true` to use inline version
* Set to `true` to use the inline variant
* @default false
*/
inline?: boolean;
/**
* Set to `true` to use the read-only variant
* @default false
*/
readonly?: boolean;
}
export default class TextInput extends SvelteComponentTyped<

8
yarn.lock
View file

@ -453,10 +453,10 @@ caniuse-lite@^1.0.30001181:
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001183.tgz#7a57ba9d6584119bb5f2bc76d3cc47ba9356b3e2"
integrity sha512-7JkwTEE1hlRKETbCFd8HDZeLiQIUcl8rC6JgNjvHCNaxOeNmQ9V4LvQXRUsKIV2CC73qKxljwVhToaA3kLRqTw==
carbon-components@10.37.0:
version "10.37.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.37.0.tgz#bc53138151ea58e79f5b249b1ec5be8ae2c0a7e4"
integrity sha512-LHReeqzzieP/q/xAHfKJNWLdWhOkr7+DIVZkrQGPf6kZYj5H8tb1KYKOIhasvCNRxJ2es8QJXuH7XW0JoLDfdQ==
carbon-components@10.38.0:
version "10.38.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.38.0.tgz#f275192f70eccf0d0052a192113ee20059594d4f"
integrity sha512-o5Ns3M2LQMuQ41UJiT+WFU+t/hAerde+77LKmrBpiPRBHJ+/VEBAfKmjB5TiH5QM/VWVDWo0Dvr8gc6yNKRqug==
dependencies:
"@carbon/telemetry" "0.0.0-alpha.6"
flatpickr "4.6.1"