From 621fea5f42fbf78597ad21225b65e802e3c81d01 Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Fri, 5 Mar 2021 14:38:00 -0800
Subject: [PATCH] feat(radio-button): add legendText prop to RadioButtonGroup

---
 COMPONENT_INDEX.md                            |  8 +-
 docs/src/COMPONENT_API.json                   | 20 ++++-
 docs/src/pages/components/RadioButton.svx     | 88 +++++++++++--------
 .../ProgrammaticRadioButton.svelte            | 17 ++--
 src/RadioButtonGroup/RadioButtonGroup.svelte  | 15 +++-
 tests/RadioButton.test.svelte                 | 63 +++++--------
 types/RadioButtonGroup/RadioButtonGroup.d.ts  |  8 +-
 7 files changed, 123 insertions(+), 96 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index a1cc6e75..12677ee2 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -2695,15 +2695,17 @@ None.
 | :------------ | :--------------- | :------- | :------------------------------------------ | ------------------------- | -------------------------------------------- |
 | selected      | <code>let</code> | Yes      | <code>string</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                      |
 | 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>                         | --                        | Set an id for the container div element      |
 
 ### Slots
 
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :------- |
-| --        | Yes     | --    | --       |
+| Slot name  | Default | Props | Fallback                  |
+| :--------- | :------ | :---- | :------------------------ |
+| --         | Yes     | --    | --                        |
+| legendText | No      | --    | <code>{legendText}</code> |
 
 ### Events
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index d29c6124..2dc351c2 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -6960,6 +6960,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "legendText",
+          "kind": "let",
+          "description": "Specify the legend text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "labelPosition",
           "kind": "let",
@@ -6990,7 +7000,15 @@
           "reactive": false
         }
       ],
-      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "slots": [
+        { "name": "__default__", "default": true, "slot_props": "{}" },
+        {
+          "name": "legendText",
+          "default": false,
+          "fallback": "{legendText}",
+          "slot_props": "{}"
+        }
+      ],
       "events": [
         { "type": "forwarded", "name": "click", "element": "div" },
         { "type": "forwarded", "name": "mouseover", "element": "div" },
diff --git a/docs/src/pages/components/RadioButton.svx b/docs/src/pages/components/RadioButton.svx
index b1aed1ce..54ec568d 100644
--- a/docs/src/pages/components/RadioButton.svx
+++ b/docs/src/pages/components/RadioButton.svx
@@ -3,19 +3,43 @@ components: ["RadioButtonGroup", "RadioButton", "RadioButtonSkeleton"]
 ---
 
 <script>
-  import { FormGroup, RadioButton, RadioButtonSkeleton, RadioButtonGroup } from "carbon-components-svelte";
+  import { RadioButton, RadioButtonSkeleton, RadioButtonGroup, Tooltip } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
 ### Default
 
-<FormGroup legendText="Storage tier (disk)">
-  <RadioButtonGroup selected="standard">
-    <RadioButton labelText="Free (1 GB)" value="free" />
-    <RadioButton labelText="Standard (10 GB)" value="standard" />
-    <RadioButton labelText="Pro (128 GB)" value="pro" />
-  </RadioButtonGroup>
-</FormGroup>
+<RadioButtonGroup selected="standard">
+  <RadioButton labelText="Free (1 GB)" value="free" />
+  <RadioButton labelText="Standard (10 GB)" value="standard" />
+  <RadioButton labelText="Pro (128 GB)" value="pro" />
+</RadioButtonGroup>
+
+### With legend text
+
+<RadioButtonGroup 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>
+
+### Legend text slot
+
+Use the named "legendText" slot to customize the legend text.
+
+<RadioButtonGroup selected="standard">
+  <div slot="legendText" style="display: flex">
+    Storage tier (disk)
+    <Tooltip tooltipBodyId="tooltip-body">
+      <p id="tooltip-body">
+        Storage tiers may vary based on geolocation.
+      </p>
+    </Tooltip>
+  </div>
+  <RadioButton labelText="Free (1 GB)" value="free" />
+  <RadioButton labelText="Standard (10 GB)" value="standard" />
+  <RadioButton labelText="Pro (128 GB)" value="pro" />
+</RadioButtonGroup>
 
 ### Programmatic usage
 
@@ -25,40 +49,32 @@ Bind the selected value using the `selected` prop.
 
 ### Label text aligned left
 
-<FormGroup legendText="Storage tier (disk)">
-  <RadioButtonGroup labelPosition="left" selected="standard">
-    <RadioButton labelText="Free (1 GB)" value="free" />
-    <RadioButton labelText="Standard (10 GB)" value="standard" />
-    <RadioButton labelText="Pro (128 GB)" value="pro" />
-  </RadioButtonGroup>
-</FormGroup>
+<RadioButtonGroup labelPosition="left" 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>
 
 ### Vertical orientation
 
-<FormGroup legendText="Storage tier (disk)">
-  <RadioButtonGroup orientation="vertical" selected="standard">
-    <RadioButton labelText="Free (1 GB)" value="free" />
-    <RadioButton labelText="Standard (10 GB)" value="standard" />
-    <RadioButton labelText="Pro (128 GB)" value="pro" />
-  </RadioButtonGroup>
-</FormGroup>
+<RadioButtonGroup orientation="vertical" 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>
 
 ### Skeleton
 
-<FormGroup legendText="Storage tier (disk)">
-  <RadioButtonGroup>
-    <RadioButtonSkeleton />
-    <RadioButtonSkeleton />
-    <RadioButtonSkeleton />
-  </RadioButtonGroup>
-</FormGroup>
+<RadioButtonGroup legendText="Storage tier (disk)">
+  <RadioButtonSkeleton />
+  <RadioButtonSkeleton />
+  <RadioButtonSkeleton />
+</RadioButtonGroup>
 
 ### Skeleton (vertical orientation)
 
-<FormGroup legendText="Storage tier (disk)">
-  <RadioButtonGroup orientation="vertical">
-    <RadioButtonSkeleton />
-    <RadioButtonSkeleton />
-    <RadioButtonSkeleton />
-  </RadioButtonGroup>
-</FormGroup>
\ No newline at end of file
+<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)">
+  <RadioButtonSkeleton />
+  <RadioButtonSkeleton />
+  <RadioButtonSkeleton />
+</RadioButtonGroup>
\ No newline at end of file
diff --git a/docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte b/docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte
index f0cffa46..ee361f5b 100644
--- a/docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte
+++ b/docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte
@@ -2,7 +2,6 @@
   import {
     ButtonSet,
     Button,
-    FormGroup,
     RadioButtonGroup,
     RadioButton,
   } from "carbon-components-svelte";
@@ -10,17 +9,17 @@
   let plan = "standard";
 </script>
 
-<FormGroup legendText="Storage tier (disk)">
-  <RadioButtonGroup bind:selected="{plan}">
-    <RadioButton labelText="Free (1 GB)" value="free" />
-    <RadioButton labelText="Standard (10 GB)" value="standard" />
-    <RadioButton labelText="Pro (128 GB)" value="pro" />
-  </RadioButtonGroup>
-</FormGroup>
+<RadioButtonGroup legendText="Storage tier (disk)" bind:selected="{plan}">
+  <RadioButton labelText="Free (1 GB)" value="free" />
+  <RadioButton labelText="Standard (10 GB)" value="standard" />
+  <RadioButton labelText="Pro (128 GB)" value="pro" />
+</RadioButtonGroup>
 
-<ButtonSet>
+<ButtonSet style="margin-top: var(--cds-layout-03)">
   {#each ["free", "standard", "pro"] as value}
     <Button
+      disabled="{plan === value}"
+      kind="secondary"
       on:click="{() => {
         plan = value;
       }}"
diff --git a/src/RadioButtonGroup/RadioButtonGroup.svelte b/src/RadioButtonGroup/RadioButtonGroup.svelte
index a9072ec2..f7582d23 100644
--- a/src/RadioButtonGroup/RadioButtonGroup.svelte
+++ b/src/RadioButtonGroup/RadioButtonGroup.svelte
@@ -8,6 +8,9 @@
   /** Set to `true` to disable the radio buttons */
   export let disabled = false;
 
+  /** Specify the legend text */
+  export let legendText = "";
+
   /**
    * Specify the label position
    * @type {"right" | "left"}
@@ -72,12 +75,18 @@
   on:mouseenter
   on:mouseleave
 >
-  <div
+  <fieldset
     class:bx--radio-button-group="{true}"
     class:bx--radio-button-group--vertical="{orientation === 'vertical'}"
-    class="{labelPosition && `bx--radio-button-group--label-${labelPosition}`}"
+    class:bx--radio-button-group--label-left="{labelPosition === 'left'}"
+    class:bx--radio-button-group--label-right="{labelPosition === 'right'}"
     disabled="{disabled}"
   >
+    {#if legendText || $$slots.legendText}
+      <legend class:bx--label="{true}">
+        <slot name="legendText">{legendText}</slot>
+      </legend>
+    {/if}
     <slot />
-  </div>
+  </fieldset>
 </div>
diff --git a/tests/RadioButton.test.svelte b/tests/RadioButton.test.svelte
index 6f5e0fb0..7060aad1 100644
--- a/tests/RadioButton.test.svelte
+++ b/tests/RadioButton.test.svelte
@@ -1,48 +1,25 @@
 <script lang="ts">
-  import {
-    FormGroup,
-    RadioButton,
-    RadioButtonSkeleton,
-    RadioButtonGroup,
-  } from "../types";
+  import { RadioButton, RadioButtonSkeleton, RadioButtonGroup } from "../types";
 </script>
 
-<FormGroup legendText="Storage tier (disk)">
-  <RadioButtonGroup selected="standard">
-    <RadioButton labelText="Free (1 GB)" value="free" />
-    <RadioButton labelText="Standard (10 GB)" value="standard" />
-    <RadioButton labelText="Pro (128 GB)" value="pro" />
-  </RadioButtonGroup>
-</FormGroup>
+<RadioButtonGroup 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>
 
-<FormGroup legendText="Storage tier (disk)">
-  <RadioButtonGroup labelPosition="left" selected="standard">
-    <RadioButton labelText="Free (1 GB)" value="free" />
-    <RadioButton labelText="Standard (10 GB)" value="standard" />
-    <RadioButton labelText="Pro (128 GB)" value="pro" />
-  </RadioButtonGroup>
-</FormGroup>
+<RadioButtonGroup
+  legendText="Storage tier (disk)"
+  labelPosition="left"
+  selected="standard"
+>
+  <RadioButton labelText="Free (1 GB)" value="free" />
+  <RadioButton labelText="Standard (10 GB)" value="standard" />
+  <RadioButton labelText="Pro (128 GB)" value="pro" />
+</RadioButtonGroup>
 
-<FormGroup legendText="Storage tier (disk)">
-  <RadioButtonGroup orientation="vertical" selected="standard">
-    <RadioButton labelText="Free (1 GB)" value="free" />
-    <RadioButton labelText="Standard (10 GB)" value="standard" />
-    <RadioButton labelText="Pro (128 GB)" value="pro" />
-  </RadioButtonGroup>
-</FormGroup>
-
-<FormGroup legendText="Storage tier (disk)">
-  <RadioButtonGroup>
-    <RadioButtonSkeleton />
-    <RadioButtonSkeleton />
-    <RadioButtonSkeleton />
-  </RadioButtonGroup>
-</FormGroup>
-
-<FormGroup legendText="Storage tier (disk)">
-  <RadioButtonGroup orientation="vertical">
-    <RadioButtonSkeleton />
-    <RadioButtonSkeleton />
-    <RadioButtonSkeleton />
-  </RadioButtonGroup>
-</FormGroup>
+<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)">
+  <RadioButtonSkeleton />
+  <RadioButtonSkeleton />
+  <RadioButtonSkeleton />
+</RadioButtonGroup>
diff --git a/types/RadioButtonGroup/RadioButtonGroup.d.ts b/types/RadioButtonGroup/RadioButtonGroup.d.ts
index 6505e2a4..3b0f95db 100644
--- a/types/RadioButtonGroup/RadioButtonGroup.d.ts
+++ b/types/RadioButtonGroup/RadioButtonGroup.d.ts
@@ -14,6 +14,12 @@ export interface RadioButtonGroupProps
    */
   disabled?: boolean;
 
+  /**
+   * Specify the legend text
+   * @default ""
+   */
+  legendText?: string;
+
   /**
    * Specify the label position
    * @default "right"
@@ -41,5 +47,5 @@ export default class RadioButtonGroup extends SvelteComponentTyped<
     mouseleave: WindowEventMap["mouseleave"];
     change: CustomEvent<any>;
   },
-  { default: {} }
+  { default: {}; legendText: {} }
 > {}