From e51f50da0cd568e20b18bce5e32678c19ff8e578 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Sun, 27 Jun 2021 08:46:57 -0700 Subject: [PATCH] Align v10.38 (#698) * 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: https://github.com/carbon-design-system/carbon/commit/0dfde60e3 * fix(inline-loading): use error filled icon * fix(inline-loading): render iconDescription as title in error/warning icons Ref: https://github.com/carbon-design-system/carbon/commit/51c53c923 * fix(structured-list): update accessibility attributes * fix(tooltip-definition): use span instead of div Ref: https://github.com/carbon-design-system/carbon/commit/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 --- COMPONENT_INDEX.md | 3 +- docs/package.json | 2 +- docs/src/COMPONENT_API.json | 12 ++- docs/src/layouts/ComponentLayout.svelte | 4 + docs/src/pages/components/Dropdown.svx | 2 +- docs/src/pages/components/MultiSelect.svx | 2 +- docs/src/pages/components/Popover.svx | 73 +++++++++++++++++++ docs/src/pages/components/Select.svx | 2 +- docs/src/pages/components/TextInput.svx | 6 +- .../framed/ContextMenu/ContextMenu.svelte | 16 ++++ .../ContextMenu/ContextMenuGroups.svelte | 16 ++++ .../pages/framed/UIShell/HeaderNavRail.svelte | 30 ++++---- docs/yarn.lock | 10 +-- package.json | 2 +- src/Checkbox/Checkbox.svelte | 1 + src/ComboBox/ComboBox.svelte | 35 ++++++++- src/ContextMenu/ContextMenu.svelte | 11 +-- src/ContextMenu/ContextMenuDivider.svelte | 2 +- src/ContextMenu/ContextMenuOption.svelte | 30 ++++---- .../FileUploaderDropContainer.svelte | 38 +++++----- src/InlineLoading/InlineLoading.svelte | 12 ++- src/ListBox/ListBoxField.svelte | 1 + src/MultiSelect/MultiSelect.svelte | 17 ++++- src/StructuredList/StructuredList.svelte | 2 +- src/StructuredList/StructuredListBody.svelte | 2 +- src/StructuredList/StructuredListCell.svelte | 1 + src/StructuredList/StructuredListHead.svelte | 1 + src/StructuredList/StructuredListRow.svelte | 2 +- src/TextInput/TextInput.svelte | 12 ++- .../TooltipDefinition.svelte | 4 +- src/UIShell/SideNav/SideNav.svelte | 6 +- types/TextInput/TextInput.d.ts | 8 +- yarn.lock | 8 +- 33 files changed, 285 insertions(+), 88 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 95c76edd..2515ded1 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -4072,7 +4072,8 @@ None. | warn | let | No | boolean | false | Set to `true` to indicate an warning state | | warnText | let | No | string | "" | Specify the warning state text | | required | let | No | boolean | false | Set to `true` to mark the field as required | -| inline | let | No | boolean | false | Set to `true` to use inline version | +| inline | let | No | boolean | false | Set to `true` to use the inline variant | +| readonly | let | No | boolean | false | Set to `true` to use the read-only variant | ### Slots diff --git a/docs/package.json b/docs/package.json index 8b0bf24b..7425758e 100644 --- a/docs/package.json +++ b/docs/package.json @@ -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", diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index d145ab3b..df570d20 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -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, diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte index 799e3ec0..41982bcd 100644 --- a/docs/src/layouts/ComponentLayout.svelte +++ b/docs/src/layouts/ComponentLayout.svelte @@ -217,4 +217,8 @@ [data-outline] { position: relative; } + + [data-outline] ~ [data-outline] { + margin-top: var(--cds-spacing-08); + } diff --git a/docs/src/pages/components/Dropdown.svx b/docs/src/pages/components/Dropdown.svx index 2cc508d1..58fa35ff 100644 --- a/docs/src/pages/components/Dropdown.svx +++ b/docs/src/pages/components/Dropdown.svx @@ -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 -### Inline type +### Inline variant +### 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"`. + +
+ Parent + +
top-left
+ +
+
+ Parent + +
top-right
+ +
+
+ Parent + +
bottom
+ +
+
+ Parent + +
bottom-left
+ +
+
+ Parent + +
bottom-right
+ +
+
+ Parent + +
left
+ +
+
+ Parent + +
left-bottom
+ +
+
+ Parent + +
left-right
+ +
+
+ Parent + +
right
+ +
+
+ Parent + +
right-bottom
+ +
+
+ Parent + +
right-top
+ +
+ ### With caret
diff --git a/docs/src/pages/components/Select.svx b/docs/src/pages/components/Select.svx index acb069db..85735678 100644 --- a/docs/src/pages/components/Select.svx +++ b/docs/src/pages/components/Select.svx @@ -62,7 +62,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"] -### Inline type +### Inline variant
+ diff --git a/src/InlineLoading/InlineLoading.svelte b/src/InlineLoading/InlineLoading.svelte index 4be7d9dc..51977336 100644 --- a/src/InlineLoading/InlineLoading.svelte +++ b/src/InlineLoading/InlineLoading.svelte @@ -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 @@ >
{#if status === "error"} - + {:else if status === "finished"} - + {:else if status === "inactive" || status === "active"} diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte index 8f50ab5a..185dac63 100644 --- a/src/MultiSelect/MultiSelect.svelte +++ b/src/MultiSelect/MultiSelect.svelte @@ -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; + }}" /> {/each} diff --git a/src/StructuredList/StructuredList.svelte b/src/StructuredList/StructuredList.svelte index 988b3894..c3bc6a91 100644 --- a/src/StructuredList/StructuredList.svelte +++ b/src/StructuredList/StructuredList.svelte @@ -38,7 +38,7 @@