From a3d116215df5cc95309ea54da32e4a9cc58072b1 Mon Sep 17 00:00:00 2001 From: metonym Date: Sat, 26 Feb 2022 11:26:31 -0800 Subject: [PATCH] Align v10.54 (#1133) * chore(deps-dev): bump carbon-components to v10.54.0 * feat(progress-bar): add size prop * docs(progress-bar): add "Small size" example * docs(progress-bar): add descriptions * refactor(structured-list): remove monkey patch * feat(radio-button-group): add hideLegend prop * docs(radio-button): add "Hidden legend" example --- COMPONENT_INDEX.md | 18 ++++++++------- docs/package.json | 2 +- docs/src/COMPONENT_API.json | 22 +++++++++++++++++++ docs/src/pages/components/ProgressBar.svx | 12 ++++++++++ docs/src/pages/components/RadioButton.svx | 12 ++++++++++ docs/yarn.lock | 8 +++---- package.json | 2 +- src/ProgressBar/ProgressBar.svelte | 8 +++++++ src/RadioButtonGroup/RadioButtonGroup.svelte | 5 ++++- src/StructuredList/StructuredList.svelte | 1 - types/ProgressBar/ProgressBar.svelte.d.ts | 6 +++++ .../RadioButtonGroup.svelte.d.ts | 6 +++++ yarn.lock | 8 +++---- 13 files changed, 90 insertions(+), 20 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 7668f9e18e..69ad1f90d8 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2903,14 +2903,15 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | --------------------------------------------- | -| value | let | No | number | undefined | Specify the current value | -| max | let | No | number | 100 | Specify the maximum value | -| labelText | let | No | string | "" | Specify the label text | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | -| helperText | let | No | string | "" | Specify the helper text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the progress bar element | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------- | :--------------- | :------- | :---------------------------- | ------------------------------------------------ | --------------------------------------------- | +| value | let | No | number | undefined | Specify the current value | +| max | let | No | number | 100 | Specify the maximum value | +| size | let | No | "sm" | "md" | "md" | Specify the size | +| labelText | let | No | string | "" | Specify the label text | +| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | +| helperText | let | No | string | "" | Specify the helper text | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the progress bar element | ### Slots @@ -3040,6 +3041,7 @@ None. | selected | let | Yes | string | undefined | Set the selected radio button value | | disabled | let | No | boolean | false | Set to `true` to disable the radio buttons | | legendText | let | No | string | "" | Specify the legend text | +| hideLegend | let | No | boolean | false | Set to `true` to visually hide the legend | | labelPosition | let | No | "right" | "left" | "right" | Specify the label position | | orientation | let | No | "horizontal" | "vertical" | "horizontal" | Specify the orientation of the radio buttons | | id | let | No | string | undefined | Set an id for the container div element | diff --git a/docs/package.json b/docs/package.json index 87dd32d39e..7d4c6515d4 100644 --- a/docs/package.json +++ b/docs/package.json @@ -12,7 +12,7 @@ "@sveltech/routify": "^1.9.9", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.33", "autoprefixer": "^10.2.3", - "carbon-components": "10.53.0", + "carbon-components": "10.54.0", "carbon-components-10.47": "npm:carbon-components@10.47", "carbon-components-svelte": "../", "carbon-icons-svelte": "^10.44.3", diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 027452915a..b9ccb5ce51 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -8354,6 +8354,17 @@ "constant": false, "reactive": false }, + { + "name": "size", + "kind": "let", + "description": "Specify the size", + "type": "\"sm\" | \"md\"", + "value": "\"md\"", + "isFunction": false, + "isFunctionDeclaration": false, + "constant": false, + "reactive": false + }, { "name": "labelText", "kind": "let", @@ -8782,6 +8793,17 @@ "constant": false, "reactive": false }, + { + "name": "hideLegend", + "kind": "let", + "description": "Set to `true` to visually hide the legend", + "type": "boolean", + "value": "false", + "isFunction": false, + "isFunctionDeclaration": false, + "constant": false, + "reactive": false + }, { "name": "labelPosition", "kind": "let", diff --git a/docs/src/pages/components/ProgressBar.svx b/docs/src/pages/components/ProgressBar.svx index 7ed85752da..e24a46f1b2 100644 --- a/docs/src/pages/components/ProgressBar.svx +++ b/docs/src/pages/components/ProgressBar.svx @@ -9,8 +9,16 @@ Without a specified `value` prop, the progress bar is indeterminate. +### Small size + +Specify `size="sm"` to use the small variant. + + + ### Percentage +Specify a `value` for the progress bar to be determinate. + ### Custom max value @@ -21,6 +29,10 @@ The default `max` value is `100`. ### Hidden label +It's recommended that you provide a `labelText` for accessibility. + +Use `hideLabel` to visually hide the label text. + ### UX example diff --git a/docs/src/pages/components/RadioButton.svx b/docs/src/pages/components/RadioButton.svx index dcde6c208b..4ee862297b 100644 --- a/docs/src/pages/components/RadioButton.svx +++ b/docs/src/pages/components/RadioButton.svx @@ -41,6 +41,18 @@ Use the named "legendText" slot to customize the legend text. +### Hidden legend + +It's recommended that you provide a legend for accessibility. + +Use `hideLegend` to visually hide the legend text. + + + + + + + ### Reactive example Use the `selected` prop to bind and update the selected value. diff --git a/docs/yarn.lock b/docs/yarn.lock index 072b6b5a18..9b1b182150 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -471,10 +471,10 @@ carbon-components-svelte@../: dependencies: flatpickr "4.6.9" -carbon-components@10.53.0: - version "10.53.0" - resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.53.0.tgz#260d77550a6f33b6cf69e3e61ce0be8089308f48" - integrity sha512-w1my4Jm//CYeraDM002TT/rMULxDSJ8wG0MCWPHGXFF/9OPHVGWo9idbLppM3lCS/PMfl/gpLvfpUVedFr7Yfw== +carbon-components@10.54.0: + version "10.54.0" + resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.54.0.tgz#f70d0a9fcc7e84f8fb00a45b6b9894d77155acce" + integrity sha512-gl0b4wRG1E/ns02nG/M0FaNm4FCT91iTr1XFzqY+h1wFsjG1/2OOu7A6lth8Qtk0jsr//YZcB0MNjq8WFaFciw== dependencies: "@carbon/telemetry" "0.0.0-alpha.6" flatpickr "4.6.1" diff --git a/package.json b/package.json index 9487350789..eef607bc28 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "@rollup/plugin-node-resolve": "^11.1.1", "@tsconfig/svelte": "^1.0.10", "autoprefixer": "^10.2.4", - "carbon-components": "10.53.0", + "carbon-components": "10.54.0", "carbon-components-10.47": "npm:carbon-components@10.47", "carbon-icons-svelte": "^10.38.0", "husky": "^4.3.8", diff --git a/src/ProgressBar/ProgressBar.svelte b/src/ProgressBar/ProgressBar.svelte index 609aff6dad..f4b388a08f 100644 --- a/src/ProgressBar/ProgressBar.svelte +++ b/src/ProgressBar/ProgressBar.svelte @@ -8,6 +8,12 @@ /** Specify the maximum value */ export let max = 100; + /** + * Specify the size + * @type {"sm" | "md"} + */ + export let size = "md"; + /** Specify the label text */ export let labelText = ""; @@ -29,6 +35,8 @@