From 8ddf2def8b6b25bf59b21a609fd481b22f0a682b Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Sat, 26 Jun 2021 14:39:49 -0700 Subject: [PATCH] Align v10.36 (#696) * chore(deps-dev): upgrade carbon-components to v10.36.0 * feat(structured-list): add condensed, flush props * fix(structured-list): deprecate the border prop * fix(code-snippet): set min/max height for multi-line code snippet #656 Fixes #656 * fix(image-loader): make SSR compatible using a window type check guard * docs(tag): add separate disabled example for filterable/interactive tags * docs: update number of supported chart types * feat(side-nav): support rail variant * feat(ui-shell): add isSelected prop to HeaderNavItem * fix(ui-shell): default isSelected to false in SideNavMenuItem * fix(text-area): forward missing keydown event #665 Fixes #665 * feat: forward keyup event to components with inputs * feat(checkbox): make labelText slottable #563 Closes #563 * feat: make labelText slottable Related #563 * docs(component-api): account for undefined type * docs(ui-shell): link to correct rail source * fix(ui-shell): default isSelected in HeaderNavItem to false --- COMPONENT_INDEX.md | 105 +++++++--- README.md | 2 +- docs/package.json | 2 +- docs/src/COMPONENT_API.json | 189 ++++++++++++++++-- docs/src/components/ComponentApi.svelte | 4 +- docs/src/pages/components/StructuredList.svx | 88 ++++++++ docs/src/pages/components/Tag.svx | 6 + docs/src/pages/components/UIShell.svx | 6 + .../pages/framed/UIShell/HeaderNavRail.svelte | 65 ++++++ docs/src/pages/index.svelte | 2 +- docs/yarn.lock | 10 +- package.json | 2 +- src/Checkbox/Checkbox.svelte | 4 +- src/CodeSnippet/CodeSnippet.svelte | 3 + src/ComboBox/ComboBox.svelte | 1 + src/DatePicker/DatePickerInput.svelte | 5 +- src/FileUploader/FileUploaderButton.svelte | 6 +- .../FileUploaderDropContainer.svelte | 4 +- src/ImageLoader/ImageLoader.svelte | 2 +- src/MultiSelect/MultiSelect.svelte | 1 + src/RadioButton/RadioButton.svelte | 6 +- src/Search/Search.svelte | 9 +- src/Select/Select.svelte | 4 +- src/Slider/Slider.svelte | 4 +- src/StructuredList/StructuredList.svelte | 13 +- src/TextArea/TextArea.svelte | 6 +- src/TextInput/PasswordInput.svelte | 9 +- src/TextInput/TextInput.svelte | 9 +- src/TimePicker/TimePicker.svelte | 6 +- src/TimePicker/TimePickerSelect.svelte | 4 +- src/Toggle/Toggle.svelte | 4 +- src/Toggle/ToggleSkeleton.svelte | 6 +- src/UIShell/GlobalHeader/HeaderNavItem.svelte | 4 + src/UIShell/SideNav/SideNav.svelte | 8 +- src/UIShell/SideNav/SideNavMenuItem.svelte | 7 +- types/Checkbox/Checkbox.d.ts | 2 +- types/ComboBox/ComboBox.d.ts | 1 + types/DatePicker/DatePickerInput.d.ts | 3 +- types/FileUploader/FileUploaderButton.d.ts | 2 +- .../FileUploaderDropContainer.d.ts | 2 +- types/MultiSelect/MultiSelect.d.ts | 1 + types/RadioButton/RadioButton.d.ts | 2 +- types/Search/Search.d.ts | 3 +- types/Select/Select.d.ts | 2 +- types/Slider/Slider.d.ts | 2 +- types/StructuredList/StructuredList.d.ts | 12 ++ types/TextArea/TextArea.d.ts | 4 +- types/TextInput/PasswordInput.d.ts | 3 +- types/TextInput/TextInput.d.ts | 3 +- types/TimePicker/TimePicker.d.ts | 4 +- types/TimePicker/TimePickerSelect.d.ts | 2 +- types/Toggle/Toggle.d.ts | 2 +- types/Toggle/ToggleSkeleton.d.ts | 2 +- types/UIShell/GlobalHeader/HeaderNavItem.d.ts | 6 + types/UIShell/SideNav/SideNav.d.ts | 6 + types/UIShell/SideNav/SideNavMenuItem.d.ts | 1 + yarn.lock | 8 +- 57 files changed, 574 insertions(+), 105 deletions(-) create mode 100644 docs/src/pages/framed/UIShell/HeaderNavRail.svelte diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 92cd5ed9..418bc5df 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -440,7 +440,9 @@ None. ### Slots -None. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :----------------------- | +| labelText | No | -- | {labelText} | ### Events @@ -650,6 +652,7 @@ None. | :--------- | :--------- | :------------------------------------------------------------------------------------- | | select | dispatched | { selectedId: string; selectedIndex: number; selectedItem: ComboBoxItem } | | keydown | forwarded | -- | +| keyup | forwarded | -- | | focus | forwarded | -- | | blur | forwarded | -- | | clear | forwarded | -- | @@ -1055,7 +1058,9 @@ None. ### Slots -None. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :----------------------- | +| labelText | No | -- | {labelText} | ### Events @@ -1063,6 +1068,7 @@ None. | :--------- | :-------- | :----- | | input | forwarded | -- | | keydown | forwarded | -- | +| keyup | forwarded | -- | | blur | forwarded | -- | ## `DatePickerSkeleton` @@ -1250,7 +1256,9 @@ None. ### Slots -None. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :----------------------- | +| labelText | No | -- | {labelText} | ### Events @@ -1279,7 +1287,9 @@ None. ### Slots -None. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :----------------------- | +| labelText | No | -- | {labelText} | ### Events @@ -1653,11 +1663,12 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :----------------------------------------- | ----------------- | --------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| href | let | No | string | -- | Specify the `href` attribute | -| text | let | No | string | -- | Specify the text | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------- | :--------------- | :------- | :----------------------------------------- | ------------------ | --------------------------------------------- | +| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| href | let | No | string | -- | Specify the `href` attribute | +| text | let | No | string | -- | Specify the text | +| isSelected | let | No | boolean | false | Set to `true` to select the item | ### Slots @@ -2376,6 +2387,7 @@ None. | select | dispatched | { selectedIds: string[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; } | | clear | dispatched | any | | keydown | forwarded | -- | +| keyup | forwarded | -- | | focus | forwarded | -- | | blur | forwarded | -- | @@ -2759,7 +2771,9 @@ None. ### Slots -None. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :----------------------- | +| labelText | No | -- | {labelText} | ### Events @@ -2772,6 +2786,7 @@ None. | change | forwarded | -- | | input | forwarded | -- | | keydown | forwarded | -- | +| keyup | forwarded | -- | | focus | forwarded | -- | | blur | forwarded | -- | @@ -2899,7 +2914,9 @@ None. ### Slots -None. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :----------------------- | +| labelText | No | -- | {labelText} | ### Events @@ -3039,7 +3056,9 @@ None. ### Slots -None. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :----------------------- | +| labelText | No | -- | {labelText} | ### Events @@ -3056,6 +3075,7 @@ None. | focus | forwarded | -- | | blur | forwarded | -- | | keydown | forwarded | -- | +| keyup | forwarded | -- | | clear | dispatched | -- | ## `SearchSkeleton` @@ -3105,9 +3125,10 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :----------------------- | +| -- | Yes | -- | -- | +| labelText | No | -- | {labelText} | ### Events @@ -3216,6 +3237,7 @@ None. | :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------------ | | isOpen | let | Yes | boolean | false | Set to `true` to toggle the expanded state | | fixed | let | No | boolean | false | Set to `true` to use the fixed variant | +| rail | let | No | boolean | false | Set to `true` to use the rail variant | | ariaLabel | let | No | string | -- | Specify the ARIA label for the nav | ### Slots @@ -3311,12 +3333,12 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :----------------------------------------- | ----------------- | --------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| isSelected | let | No | boolean | -- | Set to `true` to select the item | -| href | let | No | string | -- | Specify the `href` attribute | -| text | let | No | string | -- | Specify the item text | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------- | :--------------- | :------- | :----------------------------------------- | ------------------ | --------------------------------------------- | +| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| isSelected | let | No | boolean | false | Set to `true` to select the item | +| href | let | No | string | -- | Specify the `href` attribute | +| text | let | No | string | -- | Specify the item text | ### Slots @@ -3420,7 +3442,9 @@ None. ### Slots -None. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :----------------------- | +| labelText | No | -- | {labelText} | ### Events @@ -3461,6 +3485,8 @@ None. | :-------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------- | | selected | let | Yes | string | -- | Specify the selected structured list row value | | border | let | No | boolean | false | Set to `true` to use the bordered variant | +| condensed | let | No | boolean | false | Set to `true` to use the condensed variant | +| flush | let | No | boolean | false | Set to `true` to flush the list | | selection | let | No | boolean | false | Set to `true` to use the selection variant | ### Slots @@ -3960,7 +3986,9 @@ None. ### Slots -None. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :----------------------- | +| labelText | No | -- | {labelText} | ### Events @@ -3972,6 +4000,8 @@ None. | mouseleave | forwarded | -- | | change | forwarded | -- | | input | forwarded | -- | +| keydown | forwarded | -- | +| keyup | forwarded | -- | | focus | forwarded | -- | | blur | forwarded | -- | @@ -4023,7 +4053,9 @@ None. ### Slots -None. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :----------------------- | +| labelText | No | -- | {labelText} | ### Events @@ -4036,6 +4068,7 @@ None. | change | forwarded | -- | | input | forwarded | -- | | keydown | forwarded | -- | +| keyup | forwarded | -- | | focus | forwarded | -- | | blur | forwarded | -- | @@ -4129,9 +4162,10 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :----------------------- | +| -- | Yes | -- | -- | +| labelText | No | -- | {labelText} | ### Events @@ -4143,6 +4177,8 @@ None. | mouseleave | forwarded | -- | | change | forwarded | -- | | input | forwarded | -- | +| keydown | forwarded | -- | +| keyup | forwarded | -- | | focus | forwarded | -- | | blur | forwarded | -- | @@ -4163,9 +4199,10 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :----------------------- | +| -- | Yes | -- | -- | +| labelText | No | -- | {labelText} | ### Events @@ -4225,7 +4262,9 @@ None. ### Slots -None. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :----------------------- | +| labelText | No | -- | {labelText} | ### Events @@ -4253,7 +4292,9 @@ None. ### Slots -None. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :----------------------- | +| labelText | No | -- | {labelText} | ### Events diff --git a/README.md b/README.md index a49b4350..278dfde9 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ The Carbon Svelte portfolio also includes: - **[Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte)**: 6000+ Carbon icons as Svelte components - **[Carbon Pictograms Svelte](https://github.com/IBM/carbon-pictograms-svelte)**: 700+ Carbon pictograms as Svelte components -- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 17 chart types, powered by d3 +- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20 chart types, powered by d3 ## [Documentation](http://ibm.biz/carbon-svelte) diff --git a/docs/package.json b/docs/package.json index 291ca596..e5d21215 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.35.0", + "carbon-components": "10.36.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 dd36608f..ef039e51 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -715,7 +715,14 @@ "reactive": true } ], - "slots": [], + "slots": [ + { + "name": "labelText", + "default": false, + "fallback": "{labelText}", + "slot_props": "{}" + } + ], "events": [ { "type": "dispatched", "name": "check", "detail": "boolean" }, { "type": "forwarded", "name": "click", "element": "CheckboxSkeleton" }, @@ -1410,6 +1417,7 @@ "detail": "{ selectedId: string; selectedIndex: number; selectedItem: ComboBoxItem }" }, { "type": "forwarded", "name": "keydown", "element": "input" }, + { "type": "forwarded", "name": "keyup", "element": "input" }, { "type": "forwarded", "name": "focus", "element": "input" }, { "type": "forwarded", "name": "blur", "element": "input" }, { "type": "forwarded", "name": "clear", "element": "ListBoxSelection" }, @@ -2522,10 +2530,18 @@ "reactive": true } ], - "slots": [], + "slots": [ + { + "name": "labelText", + "default": false, + "fallback": "{labelText}", + "slot_props": "{}" + } + ], "events": [ { "type": "forwarded", "name": "input", "element": "input" }, { "type": "forwarded", "name": "keydown", "element": "input" }, + { "type": "forwarded", "name": "keyup", "element": "input" }, { "type": "forwarded", "name": "blur", "element": "input" } ], "typedefs": [], @@ -3216,7 +3232,14 @@ "reactive": true } ], - "slots": [], + "slots": [ + { + "name": "labelText", + "default": false, + "fallback": "{labelText}", + "slot_props": "{}" + } + ], "events": [ { "type": "forwarded", "name": "keydown", "element": "label" }, { "type": "forwarded", "name": "change", "element": "input" }, @@ -3330,7 +3353,14 @@ "reactive": true } ], - "slots": [], + "slots": [ + { + "name": "labelText", + "default": false, + "fallback": "{labelText}", + "slot_props": "{}" + } + ], "events": [ { "type": "dispatched", "name": "add", "detail": "FileList" }, { "type": "forwarded", "name": "dragover", "element": "div" }, @@ -4078,6 +4108,16 @@ "constant": false, "reactive": false }, + { + "name": "isSelected", + "kind": "let", + "description": "Set to `true` to select the item", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, { "name": "ref", "kind": "let", @@ -5876,6 +5916,7 @@ }, { "type": "dispatched", "name": "clear", "detail": "any" }, { "type": "forwarded", "name": "keydown", "element": "input" }, + { "type": "forwarded", "name": "keyup", "element": "input" }, { "type": "forwarded", "name": "focus", "element": "input" }, { "type": "forwarded", "name": "blur", "element": "input" } ], @@ -7158,7 +7199,14 @@ "reactive": true } ], - "slots": [], + "slots": [ + { + "name": "labelText", + "default": false, + "fallback": "{labelText}", + "slot_props": "{}" + } + ], "events": [ { "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" }, @@ -7167,6 +7215,7 @@ { "type": "forwarded", "name": "change", "element": "input" }, { "type": "forwarded", "name": "input", "element": "input" }, { "type": "forwarded", "name": "keydown", "element": "input" }, + { "type": "forwarded", "name": "keyup", "element": "input" }, { "type": "forwarded", "name": "focus", "element": "input" }, { "type": "forwarded", "name": "blur", "element": "input" } ], @@ -7542,7 +7591,14 @@ "reactive": true } ], - "slots": [], + "slots": [ + { + "name": "labelText", + "default": false, + "fallback": "{labelText}", + "slot_props": "{}" + } + ], "events": [{ "type": "forwarded", "name": "change", "element": "input" }], "typedefs": [], "rest_props": { "type": "Element", "name": "div" } @@ -8009,7 +8065,14 @@ "reactive": true } ], - "slots": [], + "slots": [ + { + "name": "labelText", + "default": false, + "fallback": "{labelText}", + "slot_props": "{}" + } + ], "events": [ { "type": "dispatched", "name": "expand", "detail": "any" }, { "type": "dispatched", "name": "collapse", "detail": "any" }, @@ -8034,6 +8097,7 @@ { "type": "forwarded", "name": "focus", "element": "input" }, { "type": "forwarded", "name": "blur", "element": "input" }, { "type": "forwarded", "name": "keydown", "element": "input" }, + { "type": "forwarded", "name": "keyup", "element": "input" }, { "type": "dispatched", "name": "clear" } ], "typedefs": [], @@ -8235,7 +8299,15 @@ "reactive": true } ], - "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "slots": [ + { "name": "__default__", "default": true, "slot_props": "{}" }, + { + "name": "labelText", + "default": false, + "fallback": "{labelText}", + "slot_props": "{}" + } + ], "events": [ { "type": "dispatched", "name": "change", "detail": "string" }, { "type": "forwarded", "name": "blur", "element": "select" } @@ -8477,6 +8549,16 @@ "constant": false, "reactive": false }, + { + "name": "rail", + "kind": "let", + "description": "Set to `true` to use the rail variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, { "name": "ariaLabel", "kind": "let", @@ -8637,6 +8719,7 @@ "kind": "let", "description": "Set to `true` to select the item", "type": "boolean", + "value": "false", "isFunction": false, "constant": false, "reactive": false @@ -8963,7 +9046,14 @@ "reactive": true } ], - "slots": [], + "slots": [ + { + "name": "labelText", + "default": false, + "fallback": "{labelText}", + "slot_props": "{}" + } + ], "events": [ { "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" }, @@ -9022,6 +9112,26 @@ "constant": false, "reactive": false }, + { + "name": "condensed", + "kind": "let", + "description": "Set to `true` to use the condensed variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "flush", + "kind": "let", + "description": "Set to `true` to flush the list", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, { "name": "selection", "kind": "let", @@ -10017,7 +10127,14 @@ "reactive": true } ], - "slots": [], + "slots": [ + { + "name": "labelText", + "default": false, + "fallback": "{labelText}", + "slot_props": "{}" + } + ], "events": [ { "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" }, @@ -10025,6 +10142,8 @@ { "type": "forwarded", "name": "mouseleave", "element": "div" }, { "type": "forwarded", "name": "change", "element": "textarea" }, { "type": "forwarded", "name": "input", "element": "textarea" }, + { "type": "forwarded", "name": "keydown", "element": "textarea" }, + { "type": "forwarded", "name": "keyup", "element": "textarea" }, { "type": "forwarded", "name": "focus", "element": "textarea" }, { "type": "forwarded", "name": "blur", "element": "textarea" } ], @@ -10239,7 +10358,14 @@ "reactive": false } ], - "slots": [], + "slots": [ + { + "name": "labelText", + "default": false, + "fallback": "{labelText}", + "slot_props": "{}" + } + ], "events": [ { "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" }, @@ -10248,6 +10374,7 @@ { "type": "forwarded", "name": "change", "element": "input" }, { "type": "forwarded", "name": "input", "element": "input" }, { "type": "forwarded", "name": "keydown", "element": "input" }, + { "type": "forwarded", "name": "keyup", "element": "input" }, { "type": "forwarded", "name": "focus", "element": "input" }, { "type": "forwarded", "name": "blur", "element": "input" } ], @@ -10496,7 +10623,15 @@ "reactive": true } ], - "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "slots": [ + { "name": "__default__", "default": true, "slot_props": "{}" }, + { + "name": "labelText", + "default": false, + "fallback": "{labelText}", + "slot_props": "{}" + } + ], "events": [ { "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" }, @@ -10504,6 +10639,8 @@ { "type": "forwarded", "name": "mouseleave", "element": "div" }, { "type": "forwarded", "name": "change", "element": "input" }, { "type": "forwarded", "name": "input", "element": "input" }, + { "type": "forwarded", "name": "keydown", "element": "input" }, + { "type": "forwarded", "name": "keyup", "element": "input" }, { "type": "forwarded", "name": "focus", "element": "input" }, { "type": "forwarded", "name": "blur", "element": "input" } ], @@ -10593,7 +10730,15 @@ "reactive": true } ], - "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "slots": [ + { "name": "__default__", "default": true, "slot_props": "{}" }, + { + "name": "labelText", + "default": false, + "fallback": "{labelText}", + "slot_props": "{}" + } + ], "events": [ { "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" }, @@ -10797,7 +10942,14 @@ "reactive": false } ], - "slots": [], + "slots": [ + { + "name": "labelText", + "default": false, + "fallback": "{labelText}", + "slot_props": "{}" + } + ], "events": [ { "type": "dispatched", @@ -10851,7 +11003,14 @@ "reactive": false } ], - "slots": [], + "slots": [ + { + "name": "labelText", + "default": false, + "fallback": "{labelText}", + "slot_props": "{}" + } + ], "events": [ { "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" }, diff --git a/docs/src/components/ComponentApi.svelte b/docs/src/components/ComponentApi.svelte index 25874ab2..de54abb0 100644 --- a/docs/src/components/ComponentApi.svelte +++ b/docs/src/components/ComponentApi.svelte @@ -78,10 +78,10 @@ {/if} - {#each prop.type.split(" | ") as type, i (type)} + {#each (prop.type || "").split(" | ") as type, i (type)}
{#if type.startsWith("typeof")} +### Condensed variant + + + + + Column A + Column B + Column C + + + + + Row 1 + Row 1 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum. + + + + Row 2 + Row 2 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum. + + + + Row 3 + Row 3 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum. + + + + + +### Flush + + + + + Column A + Column B + Column C + + + + + Row 1 + Row 1 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum. + + + + Row 2 + Row 2 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum. + + + + Row 3 + Row 3 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum. + + + + + ### Selectable rows diff --git a/docs/src/pages/components/Tag.svx b/docs/src/pages/components/Tag.svx index 1c15daf1..d4832c67 100644 --- a/docs/src/pages/components/Tag.svx +++ b/docs/src/pages/components/Tag.svx @@ -49,6 +49,12 @@ Note: rendering a custom icon cannnot be used with the filterable variant. Set `interactive` to `true` to render a `button` element instead of a `div`. Machine learning + +### Disabled + +The filterable and interactive tag variants have a disabled state. + +Machine learning Machine learning ### Skeleton diff --git a/docs/src/pages/components/UIShell.svx b/docs/src/pages/components/UIShell.svx index 76bd3b76..870ee2b5 100644 --- a/docs/src/pages/components/UIShell.svx +++ b/docs/src/pages/components/UIShell.svx @@ -36,6 +36,12 @@ The hamburger menu will automatically be rendered if the `SideNav` component is +### Header with side navigation (rail) + +Set `rail` to `true` on `SideNav` to use the rail variant. + + + ### Header with app switcher The `HeaderAction` component uses the [transition:slide API](https://svelte.dev/docs#slide); you can customize the transition duration, delay, and easing with the `transition` prop. diff --git a/docs/src/pages/framed/UIShell/HeaderNavRail.svelte b/docs/src/pages/framed/UIShell/HeaderNavRail.svelte new file mode 100644 index 00000000..e5b7c20e --- /dev/null +++ b/docs/src/pages/framed/UIShell/HeaderNavRail.svelte @@ -0,0 +1,65 @@ + + +
+
+ +
+ + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + +

Welcome

+ + + + diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte index 2bbff299..a7d9560b 100644 --- a/docs/src/pages/index.svelte +++ b/docs/src/pages/index.svelte @@ -100,7 +100,7 @@ diff --git a/docs/yarn.lock b/docs/yarn.lock index 3fc38a51..187a373a 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -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.34.0" + version "0.35.0" dependencies: carbon-icons-svelte "^10.27.0" clipboard-copy "3.2.0" flatpickr "4.6.9" -carbon-components@10.35.0: - version "10.35.0" - resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.35.0.tgz#2669d8f6f989a5dc96843c43a5ac12e4a9c3dfa7" - integrity sha512-1njVUjaN/+gVd5WkHPW4EkmweZvpsWOaUP2FgRglxLQNtRXbi902HJYsl9mufV3Op/oGvN4rSdtttxgYCf8YFg== +carbon-components@10.36.0: + version "10.36.0" + resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.36.0.tgz#ce523b19df3a404e379113dafbbe0219bb22b17f" + integrity sha512-k+UR+Whz/qXbev2RT9JjV+QbkSKcHrLNF25bEpr3KZHmpCGhwGz5mVyv0ohZ4B6rKkpuvlgYfLsANL0yQX77zA== dependencies: "@carbon/telemetry" "0.0.0-alpha.6" flatpickr "4.6.1" diff --git a/package.json b/package.json index f86a0e93..fce832de 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "@rollup/plugin-node-resolve": "^11.1.1", "@tsconfig/svelte": "^1.0.10", "autoprefixer": "^10.2.4", - "carbon-components": "10.35.0", + "carbon-components": "10.36.0", "gh-pages": "^3.1.0", "husky": "^4.3.8", "lint-staged": "^10.5.3", diff --git a/src/Checkbox/Checkbox.svelte b/src/Checkbox/Checkbox.svelte index f3c67062..e819ced3 100644 --- a/src/Checkbox/Checkbox.svelte +++ b/src/Checkbox/Checkbox.svelte @@ -85,7 +85,9 @@ class:bx--checkbox-label-text="{true}" class:bx--visually-hidden="{hideLabel}" > - {labelText} + + {labelText} +
diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte index b6c5fc55..994934ed 100644 --- a/src/CodeSnippet/CodeSnippet.svelte +++ b/src/CodeSnippet/CodeSnippet.svelte @@ -97,6 +97,8 @@ } $: expandText = expanded ? showLessText : showMoreText; + $: minHeight = expanded ? 16 * 15 : 48; + $: maxHeight = expanded ? "none" : 16 * 15 + "px"; $: if (type === "multi" && ref) { if (code === undefined) setShowMoreLess(); if (code) tick().then(setShowMoreLess); @@ -178,6 +180,7 @@ tabindex="{type === 'single' && !disabled ? '0' : undefined}" aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}" class:bx--snippet-container="{true}" + style="width: 100%; min-height: {minHeight}px; max-height: {maxHeight}" > 
diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index da93611f..6763c895 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@@ -238,6 +238,7 @@
             open = false;
           }
         }}"
+        on:keyup
         on:focus
         on:blur
         on:blur="{({ relatedTarget }) => {
diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte
index 162e1443..0e35ba4b 100644
--- a/src/DatePicker/DatePickerInput.svelte
+++ b/src/DatePicker/DatePickerInput.svelte
@@ -85,7 +85,9 @@
       class:bx--visually-hidden="{hideLabel}"
       class:bx--label--disabled="{disabled}"
     >
-      {labelText}
+      
+        {labelText}
+      
     
   {/if}
   

-  {labelText}
+  
+    
+      {labelText}
+    
+  
 
 
-      {labelText}
+      
+        {labelText}
+      
       
     
     {#if labelText}
-      {labelText}
+      
+        
+          {labelText}
+        
+      
     {/if}
   
 

diff --git a/src/Search/Search.svelte b/src/Search/Search.svelte
index ecd13f16..8b18c2ae 100644
--- a/src/Search/Search.svelte
+++ b/src/Search/Search.svelte
@@ -117,9 +117,11 @@
     >
       
     
-    
+