Align v10.54 (carbon-design-system#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
Mattchine · Feb 26, 2022 · a3d1162 · a3d1162
1 parent faeee2b
commit a3d1162
Show file tree

Hide file tree

Showing 13 changed files with 90 additions and 20 deletions.
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
@@ -2903,14 +2903,15 @@ None.
 
 ### Props
 
-| Prop name  | Kind             | Reactive | Type                 | Default value                                    | Description                                   |
-| :--------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | --------------------------------------------- |
-| value      | <code>let</code> | No       | <code>number</code>  | <code>undefined</code>                           | Specify the current value                     |
-| max        | <code>let</code> | No       | <code>number</code>  | <code>100</code>                                 | Specify the maximum value                     |
-| labelText  | <code>let</code> | No       | <code>string</code>  | <code>""</code>                                  | Specify the label text                        |
-| hideLabel  | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to visually hide the label text |
-| helperText | <code>let</code> | No       | <code>string</code>  | <code>""</code>                                  | Specify the helper text                       |
-| id         | <code>let</code> | No       | <code>string</code>  | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the progress bar element        |
+| Prop name  | Kind             | Reactive | Type                          | Default value                                    | Description                                   |
+| :--------- | :--------------- | :------- | :---------------------------- | ------------------------------------------------ | --------------------------------------------- |
+| value      | <code>let</code> | No       | <code>number</code>           | <code>undefined</code>                           | Specify the current value                     |
+| max        | <code>let</code> | No       | <code>number</code>           | <code>100</code>                                 | Specify the maximum value                     |
+| size       | <code>let</code> | No       | <code>"sm" &#124; "md"</code> | <code>"md"</code>                                | Specify the size                              |
+| labelText  | <code>let</code> | No       | <code>string</code>           | <code>""</code>                                  | Specify the label text                        |
+| hideLabel  | <code>let</code> | No       | <code>boolean</code>          | <code>false</code>                               | Set to `true` to visually hide the label text |
+| helperText | <code>let</code> | No       | <code>string</code>           | <code>""</code>                                  | Specify the helper text                       |
+| id         | <code>let</code> | No       | <code>string</code>           | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the progress bar element        |
 
 ### Slots
 
@@ -3040,6 +3041,7 @@ None.
 | selected      | <code>let</code> | Yes      | <code>string</code>                         | <code>undefined</code>    | Set the selected radio button value          |
 | disabled      | <code>let</code> | No       | <code>boolean</code>                        | <code>false</code>        | Set to `true` to disable the radio buttons   |
 | legendText    | <code>let</code> | No       | <code>string</code>                         | <code>""</code>           | Specify the legend text                      |
+| hideLegend    | <code>let</code> | No       | <code>boolean</code>                        | <code>false</code>        | Set to `true` to visually hide the legend    |
 | labelPosition | <code>let</code> | No       | <code>"right" &#124; "left"</code>          | <code>"right"</code>      | Specify the label position                   |
 | orientation   | <code>let</code> | No       | <code>"horizontal" &#124; "vertical"</code> | <code>"horizontal"</code> | Specify the orientation of the radio buttons |
 | id            | <code>let</code> | No       | <code>string</code>                         | <code>undefined</code>    | Set an id for the container div element      |

diff --git 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:[email protected]",
     "carbon-components-svelte": "../",
     "carbon-icons-svelte": "^10.44.3",

diff --git 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
@@ -9,8 +9,16 @@ Without a specified `value` prop, the progress bar is indeterminate.
 
 <ProgressBar helperText="Loading..." />
 
+### Small size
+
+Specify `size="sm"` to use the small variant.
+
+<ProgressBar size="sm" helperText="Loading..." />
+
 ### Percentage
 
+Specify a `value` for the progress bar to be determinate.
+
 <ProgressBar value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
 
 ### 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.
+
 <ProgressBar hideLabel value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
 
 ### UX example

diff --git 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.
   <RadioButton labelText="Pro (128 GB)" value="pro" />
 </RadioButtonGroup>
 
+### Hidden legend
+
+It's recommended that you provide a legend for accessibility.
+
+Use `hideLegend` to visually hide the legend text.
+
+<RadioButtonGroup hideLegend legendText="Storage tier (disk)" selected="standard">
+  <RadioButton labelText="Free (1 GB)" value="free" />
+  <RadioButton labelText="Standard (10 GB)" value="standard" />
+  <RadioButton labelText="Pro (128 GB)" value="pro" />
+</RadioButtonGroup>
+
 ### Reactive example
 
 Use the `selected` prop to bind and update the selected value.

diff --git 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
@@ -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:[email protected]",
     "carbon-icons-svelte": "^10.38.0",
     "husky": "^4.3.8",

diff --git 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 @@
 <div
   class:bx--progress-bar="{true}"
   class:bx--progress-bar--indeterminate="{indeterminate}"
+  class:bx--progress-bar--big="{size === 'md'}"
+  class:bx--progress-bar--small="{size === 'sm'}"
   {...$$restProps}
 >
   <label

diff --git a/src/RadioButtonGroup/RadioButtonGroup.svelte b/src/RadioButtonGroup/RadioButtonGroup.svelte
@@ -11,6 +11,9 @@
   /** Specify the legend text */
   export let legendText = "";
 
+  /** Set to `true` to visually hide the legend */
+  export let hideLegend = false;
+
   /**
    * Specify the label position
    * @type {"right" | "left"}
@@ -84,7 +87,7 @@
     disabled="{disabled}"
   >
     {#if legendText || $$slots.legendText}
-      <legend class:bx--label="{true}">
+      <legend class:bx--label="{true}" class:bx--visually-hidden="{hideLegend}">
         <slot name="legendText">{legendText}</slot>
       </legend>
     {/if}

diff --git a/src/StructuredList/StructuredList.svelte b/src/StructuredList/StructuredList.svelte
@@ -46,7 +46,6 @@
   class:bx--structured-list--condensed="{condensed}"
   class:bx--structured-list--flush="{flush}"
   {...$$restProps}
-  style="overflow-y: visible; {$$restProps.style}"
   on:click
   on:mouseover
   on:mouseenter

diff --git a/types/ProgressBar/ProgressBar.svelte.d.ts b/types/ProgressBar/ProgressBar.svelte.d.ts
@@ -15,6 +15,12 @@ export interface ProgressBarProps
    */
   max?: number;
 
+  /**
+   * Specify the size
+   * @default "md"
+   */
+  size?: "sm" | "md";
+
   /**
    * Specify the label text
    * @default ""

diff --git a/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts b/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts
@@ -21,6 +21,12 @@ export interface RadioButtonGroupProps
    */
   legendText?: string;
 
+  /**
+   * Set to `true` to visually hide the legend
+   * @default false
+   */
+  hideLegend?: boolean;
+
   /**
    * Specify the label position
    * @default "right"

diff --git a/yarn.lock b/yarn.lock
@@ -469,10 +469,10 @@ caniuse-lite@^1.0.30001181:
     lodash.debounce "^4.0.8"
     warning "^3.0.0"
 
-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"