From 47c79b16c72be9f907534ddc3a25bab19665e677 Mon Sep 17 00:00:00 2001 From: rafadess <42934425+rafadess@users.noreply.github.com> Date: Fri, 30 Apr 2021 20:18:47 -0300 Subject: [PATCH 01/92] Adding display attr to DataTableCell (#615) --- src/DataTable/DataTable.svelte | 16 ++++++++-------- types/DataTable/DataTable.d.ts | 1 + 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte index 06ced220..a85aa924 100644 --- a/src/DataTable/DataTable.svelte +++ b/src/DataTable/DataTable.svelte @@ -7,7 +7,7 @@ * @typedef {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader * @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow * @typedef {string} DataTableRowId - * @typedef {{ key: DataTableKey; value: DataTableValue; }} DataTableCell + * @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; }} DataTableCell * @slot {{ row: DataTableRow; }} expanded-row * @slot {{ header: DataTableNonEmptyHeader; }} cell-header * @slot {{ row: DataTableRow; cell: DataTableCell; }} cell @@ -167,7 +167,11 @@ $: headerKeys = headers.map(({ key }) => key); $: rows = rows.map((row) => ({ ...row, - cells: headerKeys.map((key) => ({ key, value: resolvePath(row, key, "") })), + cells: headerKeys.map((key, index) => ({ + key, + value: resolvePath(row, key, ""), + display: headers[index].display, + })), })); $: sortedRows = rows; $: ascending = $sortHeader.sortDirection === "ascending"; @@ -377,9 +381,7 @@ {#if headers[j].empty} - {headers[j].display - ? headers[j].display(cell.value) - : cell.value} + {cell.display ? cell.display(cell.value) : cell.value} {:else} @@ -390,9 +392,7 @@ }}" > - {headers[j].display - ? headers[j].display(cell.value) - : cell.value} + {cell.display ? cell.display(cell.value) : cell.value} {/if} diff --git a/types/DataTable/DataTable.d.ts b/types/DataTable/DataTable.d.ts index 66812d6a..ab82b5ed 100644 --- a/types/DataTable/DataTable.d.ts +++ b/types/DataTable/DataTable.d.ts @@ -33,6 +33,7 @@ export type DataTableRowId = string; export interface DataTableCell { key: DataTableKey; value: DataTableValue; + display?: (item: Value) => DataTableValue; } export interface DataTableProps From 081783c719465a8e633e6085a95b6f90f584b9f3 Mon Sep 17 00:00:00 2001 From: mabentley85 Date: Fri, 30 Apr 2021 16:24:35 -0700 Subject: [PATCH 02/92] Fix the colspan when a DataTable is Expandable and Selectable (#618) --- src/DataTable/DataTable.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte index a85aa924..bd10dcab 100644 --- a/src/DataTable/DataTable.svelte +++ b/src/DataTable/DataTable.svelte @@ -410,7 +410,7 @@ parentRowId = null; }}" > - +
From f3cddbad9fc07610d806bdaa725cdc469f8130e6 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Fri, 30 Apr 2021 17:08:09 -0700 Subject: [PATCH 03/92] Align v10.33 (#619) * chore(deps-dev): upgrade carbon-components to v10.33.0 * fix(clickable-tile): support disabled state for ClickableTile * fix(aspect-ratio): add missing 3x2 ratio * docs: update number of supported chart types * feat(link): support link with icon * refactor(outbound-link): use icon prop * fix(search): wrap search icon with div --- COMPONENT_INDEX.md | 44 +++++++++++---------- README.md | 2 +- docs/package.json | 2 +- docs/src/COMPONENT_API.json | 35 ++++++++++++---- docs/src/pages/components/AspectRatio.svx | 8 +++- docs/src/pages/components/ClickableTile.svx | 4 ++ docs/src/pages/components/ImageLoader.svx | 2 +- docs/src/pages/components/Link.svx | 10 +++++ docs/src/pages/index.svelte | 2 +- docs/yarn.lock | 10 ++--- package.json | 2 +- src/AspectRatio/AspectRatio.svelte | 3 +- src/ImageLoader/ImageLoader.svelte | 2 +- src/Link/Link.svelte | 16 +++++++- src/Link/OutboundLink.svelte | 2 +- src/Search/Search.svelte | 4 +- src/Tile/ClickableTile.svelte | 18 +++++---- types/AspectRatio/AspectRatio.d.ts | 2 +- types/ImageLoader/ImageLoader.d.ts | 2 +- types/Link/Link.d.ts | 6 +++ types/Tile/ClickableTile.d.ts | 9 ++++- yarn.lock | 8 ++-- 22 files changed, 131 insertions(+), 62 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 03c6f99e..3d2cdec6 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -257,9 +257,9 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ | -| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2" | "2x1" | Specify the aspect ratio | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ | +| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | "2x1" | Specify the aspect ratio | ### Slots @@ -479,6 +479,7 @@ None. | :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- | | clicked | let | Yes | boolean | false | Set to `true` to click the tile | | light | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | let | No | boolean | false | Set to `true` to disable the tile | | href | let | No | string | -- | Set the `href` | ### Slots @@ -1858,16 +1859,16 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :----------------- | :------- | :------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | -| error | let | Yes | boolean | false | Set to `true` if an error occurs when loading the image | -| loaded | let | Yes | boolean | false | Set to `true` when the image is loaded | -| loading | let | Yes | boolean | false | Set to `true` when `loaded` is `true` and `error` is false | -| src | let | No | string | "" | Specify the image source | -| alt | let | No | string | "" | Specify the image alt text | -| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2" | -- | Specify the aspect ratio for the image wrapper | -| fadeIn | let | No | boolean | false | Set to `true` to fade in the image on load
The duration uses the `fast-02` value following Carbon guidelines on motion | -| loadImage | const | No | (url?: string) => void | (url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); } | Method invoked to load the image provided a `src` value | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :----------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | +| error | let | Yes | boolean | false | Set to `true` if an error occurs when loading the image | +| loaded | let | Yes | boolean | false | Set to `true` when the image is loaded | +| loading | let | Yes | boolean | false | Set to `true` when `loaded` is `true` and `error` is false | +| src | let | No | string | "" | Specify the image source | +| alt | let | No | string | "" | Specify the image alt text | +| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | -- | Specify the aspect ratio for the image wrapper | +| fadeIn | let | No | boolean | false | Set to `true` to fade in the image on load
The duration uses the `fast-02` value following Carbon guidelines on motion | +| loadImage | const | No | (url?: string) => void | (url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); } | Method invoked to load the image provided a `src` value | ### Slots @@ -1944,14 +1945,15 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ------------------ | ------------------------------------------------ | -| ref | let | Yes | null | HTMLAnchorElement | HTMLParagraphElement | null | Obtain a reference to the top-level HTML element | -| size | let | No | "sm" | "lg" | -- | Specify the size of the link | -| href | let | No | string | -- | Specify the href value | -| inline | let | No | boolean | false | Set to `true` to use the inline variant | -| disabled | let | No | boolean | false | Set to `true` to disable the checkbox | -| visited | let | No | boolean | false | Set to `true` to allow visited styles | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------- | +| ref | let | Yes | null | HTMLAnchorElement | HTMLParagraphElement | null | Obtain a reference to the top-level HTML element | +| size | let | No | "sm" | "lg" | -- | Specify the size of the link | +| href | let | No | string | -- | Specify the href value | +| inline | let | No | boolean | false | Set to `true` to use the inline variant | +| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render
`inline` must be `false` | +| disabled | let | No | boolean | false | Set to `true` to disable the checkbox | +| visited | let | No | boolean | false | Set to `true` to allow visited styles | ### Slots diff --git a/README.md b/README.md index a576e34f..119dcc6d 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)**: 16 chart types, powered by d3 +- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 17 chart types, powered by d3 ## [Documentation](http://ibm.biz/carbon-svelte) diff --git a/docs/package.json b/docs/package.json index d5ebc5be..2f85e322 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.32.1", + "carbon-components": "10.33.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 106ca4c0..3253c26b 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -202,7 +202,7 @@ "name": "ratio", "kind": "let", "description": "Specify the aspect ratio", - "type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"9x16\" | \"1x2\"", + "type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"3x2\" | \"9x16\" | \"1x2\"", "value": "\"2x1\"", "isFunction": false, "constant": false, @@ -767,6 +767,16 @@ "constant": false, "reactive": false }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the tile", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, { "name": "href", "kind": "let", @@ -779,14 +789,14 @@ ], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], "events": [ - { "type": "forwarded", "name": "click", "element": "a" }, - { "type": "forwarded", "name": "keydown", "element": "a" }, - { "type": "forwarded", "name": "mouseover", "element": "a" }, - { "type": "forwarded", "name": "mouseenter", "element": "a" }, - { "type": "forwarded", "name": "mouseleave", "element": "a" } + { "type": "forwarded", "name": "click", "element": "Link" }, + { "type": "forwarded", "name": "keydown", "element": "Link" }, + { "type": "forwarded", "name": "mouseover", "element": "Link" }, + { "type": "forwarded", "name": "mouseenter", "element": "Link" }, + { "type": "forwarded", "name": "mouseleave", "element": "Link" } ], "typedefs": [], - "rest_props": { "type": "Element", "name": "a" } + "rest_props": { "type": "InlineComponent", "name": "Link" } }, { "moduleName": "CodeSnippet", @@ -4348,7 +4358,7 @@ "name": "ratio", "kind": "let", "description": "Specify the aspect ratio for the image wrapper", - "type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"9x16\" | \"1x2\"", + "type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"3x2\" | \"9x16\" | \"1x2\"", "isFunction": false, "constant": false, "reactive": false @@ -4604,6 +4614,15 @@ "constant": false, "reactive": false }, + { + "name": "icon", + "kind": "let", + "description": "Specify the icon from `carbon-icons-svelte` to render\n`inline` must be `false`", + "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", + "isFunction": false, + "constant": false, + "reactive": false + }, { "name": "disabled", "kind": "let", diff --git a/docs/src/pages/components/AspectRatio.svx b/docs/src/pages/components/AspectRatio.svx index 8b920a20..cb7c86e8 100644 --- a/docs/src/pages/components/AspectRatio.svx +++ b/docs/src/pages/components/AspectRatio.svx @@ -5,7 +5,7 @@ The `AspectRatio` component is useful for constraining fluid content within an aspect ratio. To demo this, resize your browser for the examples below. -Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"9x16"` and `"1x2"`. +Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`. ### Default (2x1) @@ -37,6 +37,12 @@ Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `" 3x4 +### Ratio 3x2 + + + 3x2 + + ### Ratio 9x16 diff --git a/docs/src/pages/components/ClickableTile.svx b/docs/src/pages/components/ClickableTile.svx index 4535df18..0fa46459 100644 --- a/docs/src/pages/components/ClickableTile.svx +++ b/docs/src/pages/components/ClickableTile.svx @@ -14,3 +14,7 @@ source: Tile/ClickableTile.svelte ### Light variant Carbon Design System + +### Disabled state + +Carbon Design System diff --git a/docs/src/pages/components/ImageLoader.svx b/docs/src/pages/components/ImageLoader.svx index 9a7057f7..34808896 100644 --- a/docs/src/pages/components/ImageLoader.svx +++ b/docs/src/pages/components/ImageLoader.svx @@ -28,7 +28,7 @@ Use the "loading" and "error" named slots to render an element when the image is If `ratio` is set, this component uses the [AspectRatio](/components/AspectRatio) to constrain the image. -Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"9x16"` and `"1x2"`. +Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`. diff --git a/docs/src/pages/components/Link.svx b/docs/src/pages/components/Link.svx index 115ec048..52bc215f 100644 --- a/docs/src/pages/components/Link.svx +++ b/docs/src/pages/components/Link.svx @@ -4,6 +4,7 @@ components: ["Link", "OutboundLink"] @@ -32,6 +33,15 @@ An alternative to manually setting `target` to `"_blank"` is to use the `Outboun Carbon Design System. +### Link with icon + +Note that `inline` must be `false` when rendering a link with an icon. + +
+ Visit the + Carbon Design System. +
+ ### Large size Carbon Design System diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte index 3d6d4244..2bbff299 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 ee129f67..e2532299 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.32.1" + version "0.32.2" dependencies: carbon-icons-svelte "^10.27.0" clipboard-copy "3.2.0" flatpickr "4.6.9" -carbon-components@10.32.1: - version "10.32.1" - resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.32.1.tgz#064d4504daafafa379ee2fbc5b2997204fb2e5eb" - integrity sha512-m9Q9y1NSsXcLINSYmRmOOuxwvSNrXqC2FIN3ykg+WO3+WrmozbPsgFSyMs0gd/RUgNXP6edt8k0Op//oks01gA== +carbon-components@10.33.0: + version "10.33.0" + resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.33.0.tgz#c573de233530270d172a2cae0faba5d1530725e5" + integrity sha512-u9eqP0tZTdyd4RzD5isK1LqTH+Lb+3jUtei7dkKXBK5sm+Xx8yP8l2koOZqzsFzaMGpeZOlO/3ajmDQ+LK6Gbw== dependencies: "@carbon/telemetry" "0.0.0-alpha.6" flatpickr "4.6.1" diff --git a/package.json b/package.json index b62f8f40..eac1da4d 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.32.1", + "carbon-components": "10.33.0", "gh-pages": "^3.1.0", "husky": "^4.3.8", "lint-staged": "^10.5.3", diff --git a/src/AspectRatio/AspectRatio.svelte b/src/AspectRatio/AspectRatio.svelte index a4cb0577..e0af4be0 100644 --- a/src/AspectRatio/AspectRatio.svelte +++ b/src/AspectRatio/AspectRatio.svelte @@ -1,7 +1,7 @@ @@ -13,6 +13,7 @@ class:bx--aspect-ratio--4x3="{ratio === '4x3'}" class:bx--aspect-ratio--1x1="{ratio === '1x1'}" class:bx--aspect-ratio--3x4="{ratio === '3x4'}" + class:bx--aspect-ratio--3x2="{ratio === '3x2'}" class:bx--aspect-ratio--9x16="{ratio === '9x16'}" class:bx--aspect-ratio--1x2="{ratio === '1x2'}" {...$$restProps} diff --git a/src/ImageLoader/ImageLoader.svelte b/src/ImageLoader/ImageLoader.svelte index b8fd4d7f..1c089568 100644 --- a/src/ImageLoader/ImageLoader.svelte +++ b/src/ImageLoader/ImageLoader.svelte @@ -16,7 +16,7 @@ /** * Specify the aspect ratio for the image wrapper - * @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"} + * @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"} */ export let ratio = undefined; diff --git a/src/Link/Link.svelte b/src/Link/Link.svelte index 15eff2ab..275c1932 100644 --- a/src/Link/Link.svelte +++ b/src/Link/Link.svelte @@ -14,6 +14,13 @@ /** Set to `true` to use the inline variant */ export let inline = false; + /** + * Specify the icon from `carbon-icons-svelte` to render + * `inline` must be `false` + * @type {typeof import("carbon-icons-svelte").CarbonIcon} + */ + export let icon = undefined; + /** Set to `true` to disable the checkbox */ export let disabled = false; @@ -37,7 +44,9 @@ on:mouseenter on:mouseleave > - + {#if !inline && icon}
+ +
{/if}

{:else} {#if !inline && icon}
+ +
{/if} {/if} diff --git a/src/Link/OutboundLink.svelte b/src/Link/OutboundLink.svelte index be2307e7..90e00f67 100644 --- a/src/Link/OutboundLink.svelte +++ b/src/Link/OutboundLink.svelte @@ -12,7 +12,7 @@ on:mouseenter on:mouseleave target="_blank" + icon="{Launch16}" > - diff --git a/src/Search/Search.svelte b/src/Search/Search.svelte index 271587c2..0f5eca6d 100644 --- a/src/Search/Search.svelte +++ b/src/Search/Search.svelte @@ -103,7 +103,9 @@ class:bx--search--xl="{size === 'xl'}" class="{searchClass}" > - +
+ +
diff --git a/src/Tile/ClickableTile.svelte b/src/Tile/ClickableTile.svelte index 980216c4..8832c323 100644 --- a/src/Tile/ClickableTile.svelte +++ b/src/Tile/ClickableTile.svelte @@ -5,21 +5,23 @@ /** Set to `true` to enable the light variant */ export let light = false; + /** Set to `true` to disable the tile */ + export let disabled = false; + /** * Set the `href` * @type {string} */ export let href = undefined; + + import Link from "../Link/Link.svelte"; - - import { SvelteComponentTyped } from "svelte"; -export interface ClickableTileProps - extends svelte.JSX.HTMLAttributes { +export interface ClickableTileProps { /** * Set to `true` to click the tile * @default false @@ -15,6 +14,12 @@ export interface ClickableTileProps */ light?: boolean; + /** + * Set to `true` to disable the tile + * @default false + */ + disabled?: boolean; + /** * Set the `href` */ diff --git a/yarn.lock b/yarn.lock index cf319fe4..88e255c7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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.32.1: - version "10.32.1" - resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.32.1.tgz#064d4504daafafa379ee2fbc5b2997204fb2e5eb" - integrity sha512-m9Q9y1NSsXcLINSYmRmOOuxwvSNrXqC2FIN3ykg+WO3+WrmozbPsgFSyMs0gd/RUgNXP6edt8k0Op//oks01gA== +carbon-components@10.33.0: + version "10.33.0" + resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.33.0.tgz#c573de233530270d172a2cae0faba5d1530725e5" + integrity sha512-u9eqP0tZTdyd4RzD5isK1LqTH+Lb+3jUtei7dkKXBK5sm+Xx8yP8l2koOZqzsFzaMGpeZOlO/3ajmDQ+LK6Gbw== dependencies: "@carbon/telemetry" "0.0.0-alpha.6" flatpickr "4.6.1" From cff16e5d7de19652df6a905360bbfe01ea6d0d7f Mon Sep 17 00:00:00 2001 From: Eric Y Liu Date: Fri, 30 Apr 2021 17:12:02 -0700 Subject: [PATCH 04/92] v0.33.0 --- CHANGELOG.md | 25 +++++++++++++++++++++++++ COMPONENT_INDEX.md | 15 ++++++++------- docs/src/COMPONENT_API.json | 6 +++--- package.json | 2 +- preprocess/api.json | 2 +- src/DataTable/DataTable.svelte | 4 +++- 6 files changed, 41 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b63628ac..c6236228 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,31 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 +## [0.33.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.33.0) - 2021-04-30 + +**Features** + +- support nested object values for DataTable sorting +- pass DataTable header display function to slotted cell +- add icon prop to `Link` to support rendering links with icons; refactor `OutboundLink` to use `Link.icon` prop + +**Fixes** + +- prevent DataTable sorting from crashing by defaulting `undefined` to an empty string +- add extra DataTable cell `colspan` to support expandable, selectable rows +- support disabled state for `ClickableTile` +- add missing "3x2" ratio to `AspectRatio` + +**Documentation** + +- add DataTable example ["Sortable with nested object values"](https://carbon-svelte.vercel.app/components/DataTable#sortable-with-nested-object-values) +- add ClickableTile example ["Disabled state"](https://carbon-svelte.vercel.app/components/ClickableTile#disabled-state) +- add Link example ["Link with icon"](https://carbon-svelte.vercel.app/components/Link#link-with-icon) + +**Housekeeping** + +- upgrade `carbon-components` to version 10.33.0 + ## [0.32.2](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.32.2) - 2021-04-23 **Fixes** diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 3d2cdec6..e565a00a 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1,6 +1,6 @@ # Component Index -> 167 components exported from carbon-components-svelte@0.32.2. +> 167 components exported from carbon-components-svelte@0.33.0. ## Components @@ -924,6 +924,7 @@ export type DataTableRowId = string; export interface DataTableCell { key: DataTableKey; value: DataTableValue; + display?: (item: Value) => DataTableValue; } ``` @@ -949,12 +950,12 @@ export interface DataTableCell { ### Slots -| Slot name | Default | Props | Fallback | -| :----------- | :------ | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------ | -| -- | Yes | -- | -- | -| cell | No | { row: DataTableRow; cell: DataTableCell; } | {headers[j].display
? headers[j].display(cell.value)
: cell.value} | -| cell-header | No | { header: DataTableNonEmptyHeader; } | {header.value} | -| expanded-row | No | { row: DataTableRow; } | -- | +| Slot name | Default | Props | Fallback | +| :----------- | :------ | :-------------------------------------------------------- | :------------------------------------------------------------------ | +| -- | Yes | -- | -- | +| cell | No | { row: DataTableRow; cell: DataTableCell; } | {cell.display ? cell.display(cell.value) : cell.value} | +| cell-header | No | { header: DataTableNonEmptyHeader; } | {header.value} | +| expanded-row | No | { row: DataTableRow; } | -- | ### Events diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 3253c26b..bccb25f4 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -2062,7 +2062,7 @@ { "name": "cell", "default": false, - "fallback": "{headers[j].display\n ? headers[j].display(cell.value)\n : cell.value}", + "fallback": "{cell.display ? cell.display(cell.value) : cell.value}", "slot_props": "{ row: DataTableRow; cell: DataTableCell; }" }, { @@ -2152,9 +2152,9 @@ "ts": "type DataTableRowId = string" }, { - "type": "{ key: DataTableKey; value: DataTableValue; }", + "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; }", "name": "DataTableCell", - "ts": "interface DataTableCell { key: DataTableKey; value: DataTableValue; }" + "ts": "interface DataTableCell { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; }" } ], "rest_props": { "type": "Element", "name": "div" } diff --git a/package.json b/package.json index eac1da4d..aff41de0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "carbon-components-svelte", - "version": "0.32.2", + "version": "0.33.0", "license": "Apache-2.0", "author": "IBM", "description": "Svelte implementation of the Carbon Design System", diff --git a/preprocess/api.json b/preprocess/api.json index deb99818..a25317b5 100644 --- a/preprocess/api.json +++ b/preprocess/api.json @@ -1,5 +1,5 @@ { - "version": "0.32.2", + "version": "0.33.0", "components": { "Accordion": { "path": "carbon-components-svelte/src/Accordion/Accordion.svelte" diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte index bd10dcab..7e888f66 100644 --- a/src/DataTable/DataTable.svelte +++ b/src/DataTable/DataTable.svelte @@ -410,7 +410,9 @@ parentRowId = null; }}" > - +
From 630e19b57ad727334951b826693a9fab792c4404 Mon Sep 17 00:00:00 2001 From: Gregor Wassmann Date: Wed, 16 Jun 2021 00:13:34 +0200 Subject: [PATCH 05/92] Add input props to ToolbarSearch (#647) --- docs/src/COMPONENT_API.json | 2 +- src/DataTable/ToolbarSearch.svelte | 2 ++ types/DataTable/ToolbarSearch.d.ts | 3 ++- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index bccb25f4..b65b953b 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -11016,7 +11016,7 @@ { "type": "forwarded", "name": "blur", "element": "Search" } ], "typedefs": [], - "rest_props": { "type": "InlineComponent", "name": "Search" } + "rest_props": { "type": "Element", "name": "input" } }, { "moduleName": "Tooltip", diff --git a/src/DataTable/ToolbarSearch.svelte b/src/DataTable/ToolbarSearch.svelte index 77a43862..76fd2d77 100644 --- a/src/DataTable/ToolbarSearch.svelte +++ b/src/DataTable/ToolbarSearch.svelte @@ -1,4 +1,6 @@ {#if skeleton} @@ -101,9 +98,17 @@ class:bx--search--sm="{size === 'sm' || small}" class:bx--search--lg="{size === 'lg'}" class:bx--search--xl="{size === 'xl'}" + class:bx--search--expandable="{expandable}" + class:bx--search--expanded="{expanded}" class="{searchClass}" > -
+
diff --git a/src/UIShell/GlobalHeader/Header.svelte b/src/UIShell/GlobalHeader/Header.svelte index c106e746..ff74f9bd 100644 --- a/src/UIShell/GlobalHeader/Header.svelte +++ b/src/UIShell/GlobalHeader/Header.svelte @@ -35,6 +35,22 @@ /** Obtain a reference to the HTML anchor element */ export let ref = null; + /** + * Specify the icon from `carbon-icons-svelte` to render for the closed state + * Defaults to `Menu20` + * @type {typeof import("carbon-icons-svelte").CarbonIcon} + */ + export let iconMenu = Menu20; + + /** + * Specify the icon from `carbon-icons-svelte` to render for the opened state + * Defaults to `Close20` + * @type {typeof import("carbon-icons-svelte").CarbonIcon} + */ + export let iconClose = Close20; + + import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte"; + import Menu20 from "carbon-icons-svelte/lib/Menu20/Menu20.svelte"; import { shouldRenderHamburgerMenu } from "../navStore"; import HamburgerMenu from "../SideNav/HamburgerMenu.svelte"; @@ -52,7 +68,11 @@
{#if ($shouldRenderHamburgerMenu && winWidth < 1056) || persistentHamburgerMenu} - + {/if} - + - + diff --git a/src/UIShell/SideNav/HamburgerMenu.svelte b/src/UIShell/SideNav/HamburgerMenu.svelte index 7cbad33e..4437a35a 100644 --- a/src/UIShell/SideNav/HamburgerMenu.svelte +++ b/src/UIShell/SideNav/HamburgerMenu.svelte @@ -8,18 +8,31 @@ /** Set to `true` to toggle the open state */ export let isOpen = false; + /** + * Specify the icon from `carbon-icons-svelte` to render for the closed state + * Defaults to `Menu20` + * @type {typeof import("carbon-icons-svelte").CarbonIcon} + */ + export let iconMenu = Menu20; + + /** + * Specify the icon from `carbon-icons-svelte` to render for the opened state + * Defaults to `Close20` + * @type {typeof import("carbon-icons-svelte").CarbonIcon} + */ + export let iconClose = Close20; + /** Obtain a reference to the HTML button element */ export let ref = null; import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte"; import Menu20 from "carbon-icons-svelte/lib/Menu20/Menu20.svelte"; - import { Icon } from "../../Icon"; diff --git a/src/UIShell/SideNav/SideNav.svelte b/src/UIShell/SideNav/SideNav.svelte index 728ffdb2..c6599986 100644 --- a/src/UIShell/SideNav/SideNav.svelte +++ b/src/UIShell/SideNav/SideNav.svelte @@ -1,4 +1,10 @@
  • @@ -42,7 +40,7 @@ class:bx--side-nav__icon="{true}" class:bx--side-nav__icon--small="{true}" > - + {/if} {text} diff --git a/src/UIShell/SideNav/SideNavMenu.svelte b/src/UIShell/SideNav/SideNavMenu.svelte index c68bb5df..0625f3ac 100644 --- a/src/UIShell/SideNav/SideNavMenu.svelte +++ b/src/UIShell/SideNav/SideNavMenu.svelte @@ -18,7 +18,6 @@ export let ref = null; import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte"; - import Icon from "../../Icon/Icon.svelte";
  • @@ -35,7 +34,7 @@ > {#if icon}
    - +
    {/if} {text} @@ -44,7 +43,7 @@ class:bx--side-nav__icon--small="{true}" class:bx--side-nav__submenu-chevron="{true}" > - +
      diff --git a/types/Button/Button.d.ts b/types/Button/Button.d.ts index 97d62ed0..67b9f1f3 100644 --- a/types/Button/Button.d.ts +++ b/types/Button/Button.d.ts @@ -24,7 +24,7 @@ export interface ButtonProps * Specify the size of button * @default "default" */ - size?: "default" | "field" | "small"; + size?: "default" | "field" | "small" | "xl"; /** * Set to `true` to enable the selected state for an icon-only, ghost button diff --git a/types/DataTable/DataTable.d.ts b/types/DataTable/DataTable.d.ts index ab82b5ed..394aa1d6 100644 --- a/types/DataTable/DataTable.d.ts +++ b/types/DataTable/DataTable.d.ts @@ -54,7 +54,7 @@ export interface DataTableProps /** * Set the size of the data table */ - size?: "compact" | "short" | "tall"; + size?: "compact" | "short" | "medium" | "tall"; /** * Specify the title of the data table diff --git a/types/DataTable/Table.d.ts b/types/DataTable/Table.d.ts index 6e9cf0de..6c951052 100644 --- a/types/DataTable/Table.d.ts +++ b/types/DataTable/Table.d.ts @@ -6,7 +6,7 @@ export interface TableProps /** * Set the size of the table */ - size?: "compact" | "short" | "tall"; + size?: "compact" | "short" | "medium" | "tall"; /** * Set to `true` to use zebra styles diff --git a/types/Search/Search.d.ts b/types/Search/Search.d.ts index ce62a728..2b2d5475 100644 --- a/types/Search/Search.d.ts +++ b/types/Search/Search.d.ts @@ -37,6 +37,18 @@ export interface SearchProps { */ disabled?: boolean; + /** + * Set to `true` to enable the expandable variant + * @default false + */ + expandable?: boolean; + + /** + * Set to `true to expand the search input + * @default false + */ + expanded?: boolean; + /** * Specify the value of the search input * @default "" @@ -95,6 +107,8 @@ export interface SearchProps { export default class Search extends SvelteComponentTyped< SearchProps, { + expand: CustomEvent; + collapse: CustomEvent; click: WindowEventMap["click"]; mouseover: WindowEventMap["mouseover"]; mouseenter: WindowEventMap["mouseenter"]; diff --git a/types/TextInput/PasswordInput.d.ts b/types/TextInput/PasswordInput.d.ts index 55ab9b10..c5a5a752 100644 --- a/types/TextInput/PasswordInput.d.ts +++ b/types/TextInput/PasswordInput.d.ts @@ -92,6 +92,24 @@ export interface PasswordInputProps */ invalidText?: string; + /** + * Set to `true` to indicate an warning state + * @default false + */ + warn?: boolean; + + /** + * Specify the warning state text + * @default "" + */ + warnText?: string; + + /** + * Set to `true` to use inline version + * @default false + */ + inline?: boolean; + /** * Set an id for the input element * @default "ccs-" + Math.random().toString(36) diff --git a/types/UIShell/GlobalHeader/Header.d.ts b/types/UIShell/GlobalHeader/Header.d.ts index 676f328e..237ef161 100644 --- a/types/UIShell/GlobalHeader/Header.d.ts +++ b/types/UIShell/GlobalHeader/Header.d.ts @@ -48,6 +48,18 @@ export interface HeaderProps * @default null */ ref?: null | HTMLAnchorElement; + + /** + * Specify the icon from `carbon-icons-svelte` to render for the closed state + * Defaults to `Menu20` + */ + iconMenu?: typeof import("carbon-icons-svelte").CarbonIcon; + + /** + * Specify the icon from `carbon-icons-svelte` to render for the opened state + * Defaults to `Close20` + */ + iconClose?: typeof import("carbon-icons-svelte").CarbonIcon; } export default class Header extends SvelteComponentTyped< diff --git a/types/UIShell/SideNav/SideNav.d.ts b/types/UIShell/SideNav/SideNav.d.ts index ecec9933..4663c9fb 100644 --- a/types/UIShell/SideNav/SideNav.d.ts +++ b/types/UIShell/SideNav/SideNav.d.ts @@ -23,6 +23,10 @@ export interface SideNavProps export default class SideNav extends SvelteComponentTyped< SideNavProps, - {}, + { + open: CustomEvent; + close: CustomEvent; + ["click:overlay"]: CustomEvent; + }, { default: {} } > {} diff --git a/yarn.lock b/yarn.lock index 88e255c7..ee69d07c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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.33.0: - version "10.33.0" - resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.33.0.tgz#c573de233530270d172a2cae0faba5d1530725e5" - integrity sha512-u9eqP0tZTdyd4RzD5isK1LqTH+Lb+3jUtei7dkKXBK5sm+Xx8yP8l2koOZqzsFzaMGpeZOlO/3ajmDQ+LK6Gbw== +carbon-components@10.34.0: + version "10.34.0" + resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.34.0.tgz#38a8bc4e03193e09459b22caf0fe2c72a64a63e8" + integrity sha512-KgWIFvJv5lg0puFsjXwIqv99ew8u1gUnrjN6/0vmyz2T/sJxGkDuiGAUlZsjmpsF+z2weK9pDu4cutjHYId2Sg== dependencies: "@carbon/telemetry" "0.0.0-alpha.6" flatpickr "4.6.1" From 2d92f7f8cdbe4c8562d644314a0b40479977570c Mon Sep 17 00:00:00 2001 From: Eric Y Liu Date: Fri, 25 Jun 2021 04:00:49 -0700 Subject: [PATCH 07/92] v0.34.0 --- COMPONENT_INDEX.md | 2 +- package.json | 2 +- preprocess/api.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 7c9819a2..e92c1d2f 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1,6 +1,6 @@ # Component Index -> 167 components exported from carbon-components-svelte@0.33.0. +> 167 components exported from carbon-components-svelte@0.34.0. ## Components diff --git a/package.json b/package.json index f366a2c8..d239dd66 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "carbon-components-svelte", - "version": "0.33.0", + "version": "0.34.0", "license": "Apache-2.0", "author": "IBM", "description": "Svelte implementation of the Carbon Design System", diff --git a/preprocess/api.json b/preprocess/api.json index a25317b5..cc9e43ca 100644 --- a/preprocess/api.json +++ b/preprocess/api.json @@ -1,5 +1,5 @@ { - "version": "0.33.0", + "version": "0.34.0", "components": { "Accordion": { "path": "carbon-components-svelte/src/Accordion/Accordion.svelte" From 9fe2b28648c62c346227129c39766dbcc86471dc Mon Sep 17 00:00:00 2001 From: Eric Y Liu Date: Fri, 25 Jun 2021 04:03:15 -0700 Subject: [PATCH 08/92] chore: update v0.34.0 changelog --- CHANGELOG.md | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c6236228..4ce5db36 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,41 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 +## [0.34.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.34.0) - 2021-06-25 + +**Features** + +- add new Gray 80 (g80) theme +- support expandable `Search` variant +- dispatch open, close, click:overlay events in `SideNav` +- allow custom hamburger menu icons (`iconMenu`, `iconClose`) +- support "xl" `Button` size +- support "medium" `DataTable` size +- support warning state, inline variant for `PasswordInput` + +**Fixes** + +- replace `` with semantic paragraph element for file uploader label +- wrap `code` element with `pre` +- add missing restProps annotation to `ToolbarSearch` + +**Refactor** + +- remove usage of deprecated `Icon` component +- use button specific tooltip class for icon-only variant + +**Documentation** + +- update available site theming options to include Gray 80 (g80) +- add Search example "Expandable variant" +- add Button example "Extra-large size" +- add DataTable example "Medium rows" +- add PasswordInput examples "Inline" and "Warning state" + +**Housekeeping** + +- upgrade `carbon-components` to version 10.34.0 + ## [0.33.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.33.0) - 2021-04-30 **Features** From db645c30f0033b2155cb9fee5badcb22015b0a15 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Sat, 26 Jun 2021 07:13:28 -0700 Subject: [PATCH 09/92] Align v10.35 (#694) * chore(deps-dev): upgrade carbon-components to v10.35 * feat(tooltip-icon): add icon prop This allows consumers to pass a Carbon icon as a prop instead of using the default slot. * fix(tooltip): make screenreader description less verbose Ref: https://github.com/carbon-design-system/carbon/commit/b5f40d8fc * feat(search): allow custom search icon Allows consumers to render a different Carbon icon instead of the default Search16 icon. * feat(number-input): add hideSteppers prop Allows consumers to hide the input stepper buttons. * feat: support expressive styles for Button, UnorderedList, OrderedList * feat(button): support large size button Set size to "lg" to use the large size. * feat(button-skeleton): support xl, lg sizes * docs(button): add "lg" size to expressive styles example * feat(file-uploader-item): support field, small sizes * feat(tooltip-icon): support disabled state --- COMPONENT_INDEX.md | 130 +++++++++++--------- docs/package.json | 2 +- docs/src/COMPONENT_API.json | 89 +++++++++++++- docs/src/pages/components/Button.svx | 40 +++++- docs/src/pages/components/FileUploader.svx | 8 ++ docs/src/pages/components/NumberInput.svx | 4 + docs/src/pages/components/OrderedList.svx | 10 ++ docs/src/pages/components/Search.svx | 5 + docs/src/pages/components/TooltipIcon.svx | 21 ++-- docs/src/pages/components/UnorderedList.svx | 10 ++ docs/yarn.lock | 10 +- package.json | 2 +- src/Button/Button.svelte | 13 +- src/Button/ButtonSkeleton.svelte | 6 +- src/FileUploader/FileUploaderItem.svelte | 8 ++ src/NumberInput/NumberInput.svelte | 70 ++++++----- src/OrderedList/OrderedList.svelte | 4 + src/Search/Search.svelte | 8 +- src/Tooltip/Tooltip.svelte | 5 +- src/TooltipIcon/TooltipIcon.svelte | 19 ++- src/UnorderedList/UnorderedList.svelte | 4 + types/Button/Button.d.ts | 8 +- types/Button/ButtonSkeleton.d.ts | 2 +- types/FileUploader/FileUploaderItem.d.ts | 6 + types/NumberInput/NumberInput.d.ts | 6 + types/OrderedList/OrderedList.d.ts | 6 + types/Search/Search.d.ts | 5 + types/TooltipIcon/TooltipIcon.d.ts | 11 ++ types/UnorderedList/UnorderedList.d.ts | 6 + yarn.lock | 8 +- 30 files changed, 396 insertions(+), 130 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index e92c1d2f..b58846ef 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -350,7 +350,8 @@ None. | ref | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | | hasIconOnly | let | Yes | boolean | false | Set to `true` for the icon-only variant | | kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost" | "primary" | Specify the kind of button | -| size | let | No | "default" | "field" | "small" | "xl" | "default" | Specify the size of button | +| size | let | No | "default" | "field" | "small" | "lg" | "xl" | "default" | Specify the size of button | +| expressive | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting | | isSelected | let | No | boolean | false | Set to `true` to enable the selected state for an icon-only, ghost button | | icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | | iconDescription | let | No | string | -- | Specify the ARIA label for the button icon | @@ -400,11 +401,11 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | ------------------------------------ | -| href | let | No | string | -- | Set the `href` to use an anchor link | -| size | let | No | "default" | "field" | "small" | "default" | Specify the size of button skeleton | -| small | let | No | boolean | false | -- | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :--------------------------------------------------------------------------- | ---------------------- | ------------------------------------ | +| href | let | No | string | -- | Set the `href` to use an anchor link | +| size | let | No | "default" | "field" | "small" | "lg" | "xl" | "default" | Specify the size of button skeleton | +| small | let | No | boolean | false | -- | ### Slots @@ -1299,6 +1300,7 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------- | :--------------- | :------- | :------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ | | status | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status | +| size | let | No | "default" | "field" | "small" | "default" | Specify the size of button skeleton | | iconDescription | let | No | string | "" | Specify the ARIA label used for the status icons | | invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | | errorSubject | let | No | string | "" | Specify the error subject text | @@ -2471,31 +2473,32 @@ export type NumberInputTranslationId = "increment" | "decrement"; ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| value | let | Yes | number | string | "" | Specify the input value | -| size | let | No | "sm" | "xl" | -- | Set the size of the input | -| step | let | No | number | 1 | Specify the step increment | -| max | let | No | number | -- | Specify the maximum value | -| min | let | No | number | -- | Specify the minimum value | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| readonly | let | No | boolean | false | Set to `true` for the input to be read-only | -| mobile | let | No | boolean | false | Set to `true` to enable the mobile variant | -| allowEmpty | let | No | boolean | false | Set to `true` to allow for an empty value | -| disabled | let | No | boolean | false | Set to `true` to disable the input | -| iconDescription | let | No | string | "" | Specify the ARIA label for the increment icons | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| invalidText | let | No | string | "" | Specify the invalid state text | -| warn | let | No | boolean | false | Set to `true` to indicate an warning state | -| warnText | let | No | string | "" | Specify the warning state text | -| helperText | let | No | string | "" | Specify the helper text | -| label | let | No | string | "" | Specify the label text | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | -| translateWithId | let | No | (id: NumberInputTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | -| translationIds | const | No | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } | Default translation ids | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | -- | Specify a name attribute for the input | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------- | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| value | let | Yes | number | string | "" | Specify the input value | +| size | let | No | "sm" | "xl" | -- | Set the size of the input | +| step | let | No | number | 1 | Specify the step increment | +| max | let | No | number | -- | Specify the maximum value | +| min | let | No | number | -- | Specify the minimum value | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| readonly | let | No | boolean | false | Set to `true` for the input to be read-only | +| mobile | let | No | boolean | false | Set to `true` to enable the mobile variant | +| allowEmpty | let | No | boolean | false | Set to `true` to allow for an empty value | +| disabled | let | No | boolean | false | Set to `true` to disable the input | +| hideSteppers | let | No | boolean | false | Set to `true` to hide the input stepper buttons | +| iconDescription | let | No | string | "" | Specify the ARIA label for the increment icons | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | let | No | string | "" | Specify the invalid state text | +| warn | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | let | No | string | "" | Specify the warning state text | +| helperText | let | No | string | "" | Specify the helper text | +| label | let | No | string | "" | Specify the label text | +| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | +| translateWithId | let | No | (id: NumberInputTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | +| translationIds | const | No | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } | Default translation ids | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | let | No | string | -- | Specify a name attribute for the input | ### Slots @@ -2539,10 +2542,11 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- | -| nested | let | No | boolean | false | Set to `true` to use the nested variant | -| native | let | No | boolean | false | Set to `true` to use native list styles | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------- | +| nested | let | No | boolean | false | Set to `true` to use the nested variant | +| native | let | No | boolean | false | Set to `true` to use native list styles | +| expressive | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting | ### Slots @@ -3012,25 +3016,26 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| value | let | Yes | string | "" | Specify the value of the search input | -| expanded | let | Yes | boolean | false | Set to `true to expand the search input | -| small | let | No | boolean | false | -- | -| size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | -| searchClass | let | No | string | "" | Specify the class name passed to the outer div element | -| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | let | No | boolean | false | Set to `true` to disable the search input | -| expandable | let | No | boolean | false | Set to `true` to enable the expandable variant | -| type | let | No | string | "text" | Specify the `type` attribute of the search input | -| placeholder | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input | -| autocomplete | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute | -| autofocus | let | No | boolean | false | Set to `true` to auto focus the search element | -| closeButtonLabelText | let | No | string | "Clear search input" | Specify the close button label text | -| labelText | let | No | string | "" | Specify the label text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| value | let | Yes | string | "" | Specify the value of the search input | +| expanded | let | Yes | boolean | false | Set to `true to expand the search input | +| small | let | No | boolean | false | -- | +| size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | +| searchClass | let | No | string | "" | Specify the class name passed to the outer div element | +| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | let | No | boolean | false | Set to `true` to disable the search input | +| expandable | let | No | boolean | false | Set to `true` to enable the expandable variant | +| type | let | No | string | "text" | Specify the `type` attribute of the search input | +| placeholder | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input | +| autocomplete | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute | +| autofocus | let | No | boolean | false | Set to `true` to auto focus the search element | +| closeButtonLabelText | let | No | string | "Clear search input" | Specify the close button label text | +| labelText | let | No | string | "" | Specify the label text | +| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | ### Slots @@ -4517,16 +4522,18 @@ None. | :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ | | ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | | tooltipText | let | No | string | "" | Specify the tooltip text.
      Alternatively, use the "tooltipText" slot | +| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | +| disabled | let | No | boolean | false | Set to `true` to disable the tooltip icon | | align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | | direction | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the icon | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the span element | ### Slots -| Slot name | Default | Props | Fallback | -| :---------- | :------ | :---- | :------------------------- | -| -- | Yes | -- | -- | -| tooltipText | No | -- | {tooltipText} | +| Slot name | Default | Props | Fallback | +| :---------- | :------ | :---- | :---------------------------------------------------- | +| -- | Yes | -- | <svelte:component this="{icon}" /> | +| tooltipText | No | -- | {tooltipText} | ### Events @@ -4560,9 +4567,10 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- | -| nested | let | No | boolean | false | Set to `true` to use the nested variant | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------- | +| nested | let | No | boolean | false | Set to `true` to use the nested variant | +| expressive | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting | ### Slots diff --git a/docs/package.json b/docs/package.json index 89e1ddf1..291ca596 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.34.0", + "carbon-components": "10.35.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 65782756..dd36608f 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -362,12 +362,22 @@ "name": "size", "kind": "let", "description": "Specify the size of button", - "type": "\"default\" | \"field\" | \"small\" | \"xl\"", + "type": "\"default\" | \"field\" | \"small\" | \"lg\" | \"xl\"", "value": "\"default\"", "isFunction": false, "constant": false, "reactive": false }, + { + "name": "expressive", + "kind": "let", + "description": "Set to `true` to use Carbon's expressive typesetting", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, { "name": "isSelected", "kind": "let", @@ -565,7 +575,7 @@ "name": "size", "kind": "let", "description": "Specify the size of button skeleton", - "type": "\"default\" | \"field\" | \"small\"", + "type": "\"default\" | \"field\" | \"small\" | \"lg\" | \"xl\"", "value": "\"default\"", "isFunction": false, "constant": false, @@ -3347,6 +3357,16 @@ "constant": false, "reactive": false }, + { + "name": "size", + "kind": "let", + "description": "Specify the size of button skeleton", + "type": "\"default\" | \"field\" | \"small\"", + "value": "\"default\"", + "isFunction": false, + "constant": false, + "reactive": false + }, { "name": "iconDescription", "kind": "let", @@ -6134,6 +6154,16 @@ "constant": false, "reactive": false }, + { + "name": "hideSteppers", + "kind": "let", + "description": "Set to `true` to hide the input stepper buttons", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, { "name": "iconDescription", "kind": "let", @@ -6337,6 +6367,16 @@ "isFunction": false, "constant": false, "reactive": false + }, + { + "name": "expressive", + "kind": "let", + "description": "Set to `true` to use Carbon's expressive typesetting", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false } ], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], @@ -7939,6 +7979,15 @@ "constant": false, "reactive": false }, + { + "name": "icon", + "kind": "let", + "description": "Specify the icon from `carbon-icons-svelte` to render", + "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", + "isFunction": false, + "constant": false, + "reactive": false + }, { "name": "id", "kind": "let", @@ -11365,6 +11414,25 @@ "constant": false, "reactive": false }, + { + "name": "icon", + "kind": "let", + "description": "Specify the icon from `carbon-icons-svelte` to render", + "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the tooltip icon", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, { "name": "align", "kind": "let", @@ -11407,7 +11475,12 @@ } ], "slots": [ - { "name": "__default__", "default": true, "slot_props": "{}" }, + { + "name": "__default__", + "default": true, + "fallback": "", + "slot_props": "{}" + }, { "name": "tooltipText", "default": false, @@ -11457,6 +11530,16 @@ "isFunction": false, "constant": false, "reactive": false + }, + { + "name": "expressive", + "kind": "let", + "description": "Set to `true` to use Carbon's expressive typesetting", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false } ], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx index cced1fae..2b2f0f45 100644 --- a/docs/src/pages/components/Button.svx +++ b/docs/src/pages/components/Button.svx @@ -78,7 +78,7 @@ If an `href` value is specified, the component will render an [anchor element](h

      Custom element

      -### Field button +### Field size @@ -86,7 +86,7 @@ If an `href` value is specified, the component will render an [anchor element](h -### Small button +### Small size @@ -94,7 +94,15 @@ If an `href` value is specified, the component will render an [anchor element](h -### Extra-large button +### Large size + + + + + + + +### Extra-large size @@ -106,8 +114,34 @@ If an `href` value is specified, the component will render an [anchor element](h +### Expressive styles + +Set `expressive` to `true` to use Carbon's expressive typesetting. + +Note: the expressive styles only apply to the default, `"lg"`, and `"xl"` button sizes. + + + + + + +

      + + + + + +

      + + + + + + ### Skeleton + -
      - -
      - + {#if !hideSteppers} +
      + +
      + +
      +
      + {/if} {/if} {#if !error && !warn && helperText} diff --git a/src/OrderedList/OrderedList.svelte b/src/OrderedList/OrderedList.svelte index d4facb31..c1f783be 100644 --- a/src/OrderedList/OrderedList.svelte +++ b/src/OrderedList/OrderedList.svelte @@ -4,12 +4,16 @@ /** Set to `true` to use native list styles */ export let native = false; + + /** Set to `true` to use Carbon's expressive typesetting */ + export let expressive = false;
        - + diff --git a/src/TooltipIcon/TooltipIcon.svelte b/src/TooltipIcon/TooltipIcon.svelte index 5bffcebb..ef76e957 100644 --- a/src/TooltipIcon/TooltipIcon.svelte +++ b/src/TooltipIcon/TooltipIcon.svelte @@ -5,6 +5,15 @@ */ export let tooltipText = ""; + /** + * Specify the icon from `carbon-icons-svelte` to render + * @type {typeof import("carbon-icons-svelte").CarbonIcon} + */ + export let icon = undefined; + + /** Set to `true` to disable the tooltip icon */ + export let disabled = false; + /** * Set the alignment of the tooltip relative to the icon * @type {"start" | "center" | "end"} @@ -35,10 +44,11 @@ diff --git a/src/UnorderedList/UnorderedList.svelte b/src/UnorderedList/UnorderedList.svelte index 83632d00..4f8b7c51 100644 --- a/src/UnorderedList/UnorderedList.svelte +++ b/src/UnorderedList/UnorderedList.svelte @@ -1,11 +1,15 @@
          Date: Sat, 26 Jun 2021 07:20:54 -0700 Subject: [PATCH 10/92] v0.35.0 --- CHANGELOG.md | 30 ++++++++++++++++++++++++++++++ COMPONENT_INDEX.md | 2 +- package.json | 2 +- preprocess/api.json | 2 +- 4 files changed, 33 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4ce5db36..625402a9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,36 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 +## [0.35.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.35.0) - 2021-06-26 + +**Features** + +- support expressive styles for `Button`, `UnorderedList`, `OrderedList` +- support large size for `Button` (`size="lg"`) +- support large, extra-large `ButtonSkeleton` sizes +- support field, small sizes for `FileUploaderItem` +- allow custom `Search` icon +- allow `NumberInput` input steppers to be hidden (`hideSteppers={true}`) +- add `icon` prop to `TooltipIcon` +- support disabled `TooltipIcon` + +**Fixes** + +- make `Tooltip` screenreader description less verbose + +**Documentation** + +- add Button examples "Large size", "Expressive styles" +- add OrderedList example "Expressive styles" +- add UnorderedList example "Expressive styles" +- add Search example "Custom search icon" +- add NumberInput example "Hidden steppers" +- add TooltipIcon example "Disabled" + +**Housekeeping** + +- upgrade `carbon-components` to version 10.35.0 + ## [0.34.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.34.0) - 2021-06-25 **Features** diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index b58846ef..92cd5ed9 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1,6 +1,6 @@ # Component Index -> 167 components exported from carbon-components-svelte@0.34.0. +> 167 components exported from carbon-components-svelte@0.35.0. ## Components diff --git a/package.json b/package.json index 07a2077d..f86a0e93 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "carbon-components-svelte", - "version": "0.34.0", + "version": "0.35.0", "license": "Apache-2.0", "author": "IBM", "description": "Svelte implementation of the Carbon Design System", diff --git a/preprocess/api.json b/preprocess/api.json index cc9e43ca..86d0ae10 100644 --- a/preprocess/api.json +++ b/preprocess/api.json @@ -1,5 +1,5 @@ { - "version": "0.34.0", + "version": "0.35.0", "components": { "Accordion": { "path": "carbon-components-svelte/src/Accordion/Accordion.svelte" From 8ddf2def8b6b25bf59b21a609fd481b22f0a682b Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Sat, 26 Jun 2021 14:39:49 -0700 Subject: [PATCH 11/92] 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 @@
     >
       
     
-    
+