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