fix(tile-group): add name and required props (#1818)

carbon-design-system · Oct 3, 2023 · 836b360 · 836b360
1 parent 5ef4dc1
commit 836b360
Show file tree

Hide file tree

Showing 11 changed files with 127 additions and 45 deletions.
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
@@ -3019,11 +3019,12 @@ None.
 | checked         | No       | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>                               | Set to `true` to check the tile                          |
 | light           | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to enable the light variant                |
 | disabled        | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to disable the tile                        |
+| required        | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to mark the field as required              |
 | value           | No       | <code>let</code> | No       | <code>string</code>  | <code>""</code>                                  | Specify the value of the radio input                     |
 | tabindex        | No       | <code>let</code> | No       | <code>string</code>  | <code>"0"</code>                                 | Specify the tabindex                                     |
 | iconDescription | No       | <code>let</code> | No       | <code>string</code>  | <code>"Tile checkmark"</code>                    | Specify the ARIA label for the radio tile checkmark icon |
 | id              | No       | <code>let</code> | No       | <code>string</code>  | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                          |
-| name            | No       | <code>let</code> | No       | <code>string</code>  | <code>""</code>                                  | Specify a name attribute for the input                   |
+| name            | No       | <code>let</code> | No       | <code>string</code>  | <code>undefined</code>                           | Specify a name attribute for the radio tile input        |
 
 ### Slots
 
@@ -4234,11 +4235,13 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
 
 ### Props
 
-| Prop name | Required | Kind             | Reactive | Type                 | Default value          | Description                             |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | --------------------------------------- |
-| selected  | No       | <code>let</code> | Yes      | <code>string</code>  | <code>undefined</code> | Specify the selected tile value         |
-| disabled  | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>     | Set to `true` to disable the tile group |
-| legend    | No       | <code>let</code> | No       | <code>string</code>  | <code>""</code>        | Specify the legend text                 |
+| Prop name | Required | Kind             | Reactive | Type                 | Default value          | Description                                              |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | -------------------------------------------------------- |
+| selected  | No       | <code>let</code> | Yes      | <code>string</code>  | <code>undefined</code> | Specify the selected tile value                          |
+| disabled  | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>     | Set to `true` to disable the tile group                  |
+| required  | No       | <code>let</code> | No       | <code>boolean</code> | <code>undefined</code> | Set to `true` to require the selection of a radio button |
+| name      | No       | <code>let</code> | No       | <code>string</code>  | <code>undefined</code> | Specify a name attribute for the radio button inputs     |
+| legend    | No       | <code>let</code> | No       | <code>string</code>  | <code>""</code>        | Specify the legend text                                  |
 
 ### Slots
 

diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
@@ -9679,6 +9679,18 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "required",
+          "kind": "let",
+          "description": "Set to `true` to mark the field as required",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "value",
           "kind": "let",
@@ -9730,9 +9742,8 @@
         {
           "name": "name",
           "kind": "let",
-          "description": "Specify a name attribute for the input",
+          "description": "Specify a name attribute for the radio tile input",
           "type": "string",
-          "value": "\"\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -13110,6 +13121,28 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "required",
+          "kind": "let",
+          "description": "Set to `true` to require the selection of a radio button",
+          "type": "boolean",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "name",
+          "kind": "let",
+          "description": "Specify a name attribute for the radio button inputs",
+          "type": "string",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "legend",
           "kind": "let",

diff --git a/docs/src/pages/components/RadioButton.svx b/docs/src/pages/components/RadioButton.svx
@@ -23,7 +23,7 @@ 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">
+<RadioButtonGroup hideLegend legendText="Storage tier (disk)" name="plan-legend" selected="standard">
   <RadioButton labelText="Free (1 GB)" value="free" />
   <RadioButton labelText="Standard (10 GB)" value="standard" />
   <RadioButton labelText="Pro (128 GB)" value="pro" />
@@ -33,7 +33,7 @@ Use `hideLegend` to visually hide the legend text.
 
 Use the named "legendText" slot to customize the legend text.
 
-<RadioButtonGroup name="plan" selected="standard">
+<RadioButtonGroup name="plan-legend-slot" selected="standard">
   <div slot="legendText" style:display="flex">
     Storage tier (disk)
     <Tooltip>
@@ -55,23 +55,23 @@ Use the `selected` prop to bind and update the selected value.
 
 ## Left-aligned label text
 
-<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" name="plan" selected="standard">
+<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" name="plan-left-aligned" selected="standard">
   <RadioButton labelText="Free (1 GB)" value="free" />
   <RadioButton labelText="Standard (10 GB)" value="standard" />
   <RadioButton labelText="Pro (128 GB)" value="pro" />
 </RadioButtonGroup>
 
 ## Disabled buttons
 
-<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" name="plan" selected="standard">
+<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" name="plan-disabled" selected="standard">
   <RadioButton disabled labelText="Free (1 GB)" value="free" />
   <RadioButton labelText="Standard (10 GB)" value="standard" />
   <RadioButton disabled labelText="Pro (128 GB)" value="pro" />
 </RadioButtonGroup>
 
 ## Vertical orientation
 
-<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" name="plan" selected="standard">
+<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" name="plan-vertical" selected="standard">
   <RadioButton labelText="Free (1 GB)" value="free" />
   <RadioButton labelText="Standard (10 GB)" value="standard" />
   <RadioButton labelText="Pro (128 GB)" value="pro" />

diff --git a/docs/src/pages/components/RadioTile.svx b/docs/src/pages/components/RadioTile.svx
@@ -9,14 +9,14 @@ components: ["TileGroup", "RadioTile"]
 
 ## Default
 
-<TileGroup legend="Service pricing tiers">
-  <RadioTile value="0" checked>
+<TileGroup legend="Service pricing tiers" name="plan" selected="standard">
+  <RadioTile value="lite">
     Lite plan
   </RadioTile>
-  <RadioTile value="1">
+  <RadioTile value="standard">
     Standard plan
   </RadioTile>
-  <RadioTile value="2">
+  <RadioTile value="plus">
     Plus plan
   </RadioTile>
 </TileGroup>
@@ -33,28 +33,28 @@ Binding to the `selected` prop is a more concise approach to managing state.
 
 ## Light variant
 
-<TileGroup legend="Service pricing tiers">
-  <RadioTile light value="0" checked>
+<TileGroup legend="Service pricing tiers" name="plan-light" selected="standard">
+  <RadioTile light value="lite">
     Lite plan
   </RadioTile>
-  <RadioTile light value="1">
+  <RadioTile light value="standard">
     Standard plan
   </RadioTile>
-  <RadioTile light value="2">
+  <RadioTile light value="plus">
     Plus plan
   </RadioTile>
 </TileGroup>
 
 ## Disabled state
 
-<TileGroup legend="Service pricing tiers">
-  <RadioTile value="0" checked>
+<TileGroup legend="Service pricing tiers" name="plan-disabled" selected="standard">
+  <RadioTile value="lite" disabled>
     Lite plan
   </RadioTile>
-  <RadioTile value="1" disabled>
+  <RadioTile value="standard">
     Standard plan
   </RadioTile>
-  <RadioTile value="2" disabled>
+  <RadioTile value="plus" disabled>
     Plus plan
   </RadioTile>
 </TileGroup>
diff --git a/docs/src/pages/framed/RadioTile/RadioTileReactive.svelte b/docs/src/pages/framed/RadioTile/RadioTileReactive.svelte
@@ -3,10 +3,10 @@
 
   const values = ["Lite plan", "Standard plan", "Plus plan"];
 
-  let selected = values[0];
+  let selected = values[1];
 </script>
 
-<TileGroup legend="Service pricing tiers" bind:selected>
+<TileGroup legend="Service pricing tiers" name="plan" bind:selected>
   {#each values as value}
     <RadioTile value="{value}">{value}</RadioTile>
   {/each}

diff --git a/docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte b/docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte
@@ -3,16 +3,18 @@
 
   const values = ["Lite plan", "Standard plan", "Plus plan"];
 
-  let selected = values[0];
+  let selected = values[1];
 </script>
 
 <TileGroup
   legend="Service pricing tiers"
+  name="plan"
   on:select="{({ detail }) => (selected = detail)}"
 >
   {#each values as value}
-    <RadioTile value="{value}" checked="{selected === value}">{value}</RadioTile
-    >
+    <RadioTile value="{value}" checked="{selected === value}">
+      {value}
+    </RadioTile>
   {/each}
 </TileGroup>
 

diff --git a/src/Tile/RadioTile.svelte b/src/Tile/RadioTile.svelte
@@ -8,6 +8,9 @@
   /** Set to `true` to disable the tile */
   export let disabled = false;
 
+  /** Set to `true` to mark the field as required */
+  export let required = false;
+
   /** Specify the value of the radio input */
   export let value = "";
 
@@ -20,13 +23,23 @@
   /** Set an id for the input element */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /** Specify a name attribute for the input */
-  export let name = "";
+  /**
+   * Specify a name attribute for the radio tile input
+   * @type {string}
+   */
+  export let name = undefined;
 
   import { getContext } from "svelte";
+  import { readable } from "svelte/store";
   import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
 
-  const { add, update, selectedValue } = getContext("TileGroup");
+  const { add, update, selectedValue, groupName, groupRequired } = getContext(
+    "TileGroup"
+  ) ?? {
+    groupName: readable(undefined),
+    groupRequired: readable(undefined),
+    selectedValue: readable(checked ? value : undefined),
+  };
 
   add({ value, checked });
 
@@ -36,11 +49,12 @@
 <input
   type="radio"
   id="{id}"
-  name="{name}"
+  name="{$groupName ?? name}"
   value="{value}"
   checked="{checked}"
   tabindex="{disabled ? undefined : tabindex}"
   disabled="{disabled}"
+  required="{$groupRequired ?? required}"
   class:bx--tile-input="{true}"
   on:change
   on:change="{() => {

diff --git a/src/Tile/TileGroup.svelte b/src/Tile/TileGroup.svelte
@@ -8,17 +8,33 @@
   /** Set to `true` to disable the tile group */
   export let disabled = false;
 
+  /**
+   * Set to `true` to require the selection of a radio button
+   * @type {boolean}
+   */
+  export let required = undefined;
+
+  /**
+   * Specify a name attribute for the radio button inputs
+   * @type {string}
+   */
+  export let name = undefined;
+
   /** Specify the legend text */
   export let legend = "";
 
   import { createEventDispatcher, setContext } from "svelte";
-  import { writable } from "svelte/store";
+  import { writable, readonly } from "svelte/store";
 
   const dispatch = createEventDispatcher();
   const selectedValue = writable(selected);
+  const groupName = writable(name);
+  const groupRequired = writable(required);
 
   setContext("TileGroup", {
     selectedValue,
+    groupName: readonly(groupName),
+    groupRequired: readonly(groupRequired),
     add: ({ checked, value }) => {
       if (checked) {
         selectedValue.set(value);
@@ -32,6 +48,8 @@
 
   $: selected = $selectedValue;
   $: selectedValue.set(selected);
+  $: $groupName = name;
+  $: $groupRequired = required;
 </script>
 
 <fieldset disabled="{disabled}" class:bx--tile-group="{true}" {...$$restProps}>

diff --git a/tests/RadioTile.test.svelte b/tests/RadioTile.test.svelte
@@ -2,14 +2,8 @@
   import { TileGroup, RadioTile } from "../types";
 </script>
 
-<TileGroup legend="Service pricing tiers">
-  <RadioTile value="0" checked>Lite plan</RadioTile>
+<TileGroup name="plan" required legend="Service pricing tiers">
+  <RadioTile light value="0" checked>Lite plan</RadioTile>
   <RadioTile value="1">Standard plan</RadioTile>
   <RadioTile value="2">Plus plan</RadioTile>
 </TileGroup>
-
-<TileGroup legend="Service pricing tiers">
-  <RadioTile light value="0" checked>Lite plan</RadioTile>
-  <RadioTile light value="1">Standard plan</RadioTile>
-  <RadioTile light value="2">Plus plan</RadioTile>
-</TileGroup>
diff --git a/types/Tile/RadioTile.svelte.d.ts b/types/Tile/RadioTile.svelte.d.ts
@@ -22,6 +22,12 @@ export interface RadioTileProps extends RestProps {
    */
   disabled?: boolean;
 
+  /**
+   * Set to `true` to mark the field as required
+   * @default false
+   */
+  required?: boolean;
+
   /**
    * Specify the value of the radio input
    * @default ""
@@ -47,8 +53,8 @@ export interface RadioTileProps extends RestProps {
   id?: string;
 
   /**
-   * Specify a name attribute for the input
-   * @default ""
+   * Specify a name attribute for the radio tile input
+   * @default undefined
    */
   name?: string;
 

diff --git a/types/Tile/TileGroup.svelte.d.ts b/types/Tile/TileGroup.svelte.d.ts
@@ -16,6 +16,18 @@ export interface TileGroupProps extends RestProps {
    */
   disabled?: boolean;
 
+  /**
+   * Set to `true` to require the selection of a radio button
+   * @default undefined
+   */
+  required?: boolean;
+
+  /**
+   * Specify a name attribute for the radio button inputs
+   * @default undefined
+   */
+  name?: string;
+
   /**
    * Specify the legend text
    * @default ""