Merge 5b715d1ab2 into 4881ff7ffd

COMPONENT_INDEX.md

@@ -2974,7 +2974,7 @@ None.
 | selected      | No       | <code>let</code> | Yes      | <code>string &#124; number</code>           | <code>undefined</code>    | Set the selected radio button value                      |
 | disabled      | No       | <code>let</code> | No       | <code>boolean</code>                        | <code>false</code>        | Set to `true` to disable the radio buttons               |
 | 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     |
+| name          | Yes      | <code>let</code> | No       | <code>string</code>                         | <code>undefined</code>    | Specify a name attribute for the radio button inputs     |
 | legendText    | No       | <code>let</code> | No       | <code>string</code>                         | <code>""</code>           | Specify the legend text                                  |
 | hideLegend    | No       | <code>let</code> | No       | <code>boolean</code>                        | <code>false</code>        | Set to `true` to visually hide the legend                |
 | labelPosition | No       | <code>let</code> | No       | <code>"right" &#124; "left"</code>          | <code>"right"</code>      | Specify the label position                               |

docs/src/COMPONENT_API.json

@@ -9641,7 +9641,7 @@
           "type": "string",
           "isFunction": false,
           "isFunctionDeclaration": false,
-          "isRequired": false,
+          "isRequired": true,
           "constant": false,
           "reactive": false
         },

docs/src/pages/components/RadioButton.svx

@@ -79,7 +79,7 @@ Use the `selected` prop to bind and update the selected value.
 
 ## Skeleton
 
-<RadioButtonGroup legendText="Storage tier (disk)">
+<RadioButtonGroup legendText="Storage tier (disk)" name="skeleton">
   <RadioButtonSkeleton />
   <RadioButtonSkeleton />
   <RadioButtonSkeleton />
@@ -87,8 +87,8 @@ Use the `selected` prop to bind and update the selected value.
 
 ## Skeleton (vertical)
 
-<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)">
+<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" name="skeleton-vertical">
   <RadioButtonSkeleton />
   <RadioButtonSkeleton />
   <RadioButtonSkeleton />
-</RadioButtonGroup>
+</RadioButtonGroup>

docs/src/pages/framed/Theme/Theme.svelte

@@ -10,7 +10,11 @@
 
 <Theme bind:theme />
 
-<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
+<RadioButtonGroup
+  legendText="Carbon theme"
+  name="theme"
+  bind:selected="{theme}"
+>
   {#each ["white", "g10", "g80", "g90", "g100"] as value}
     <RadioButton labelText="{value}" value="{value}" />
   {/each}

docs/src/pages/framed/Theme/ThemePersist.svelte

@@ -10,7 +10,11 @@
 
 <Theme bind:theme persist persistKey="__carbon-theme" />
 
-<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
+<RadioButtonGroup
+  legendText="Carbon theme"
+  name="theme"
+  bind:selected="{theme}"
+>
   {#each ["white", "g10", "g80", "g90", "g100"] as value}
     <RadioButton labelText="{value}" value="{value}" />
   {/each}

docs/src/pages/index.svelte

@@ -118,6 +118,7 @@
         <RadioButtonGroup
           style="margin-top: var(--cds-spacing-08)"
           legendText="Carbon themes"
+          name="theme"
           bind:selected="{$theme}"
         >
           {#each ["white", "g10", "g80", "g90", "g100"] as value}

src/RadioButton/RadioButton.svelte

@@ -54,6 +54,22 @@
   }
 
   $: checked = $selectedValue === value;
+
+  function onChange() {
+    if (update) {
+      update(value);
+    } else {
+      checked = ref.checked;
+
+      if (name != null && name != "") {
+        Array.from(document.getElementsByName(name))
+          .filter((element) => element !== ref)
+          .forEach((element) =>
+            element.dispatchEvent(new CustomEvent("carbon:checked-change"))
+          );
+      }
+    }
+  }
 </script>
 
 <div
@@ -72,10 +88,9 @@
     value="{value}"
     class:bx--radio-button="{true}"
     on:change
-    on:change="{() => {
+    on:change="{onChange}"
-      if (update) {
+    on:carbon:checked-change="{(e) => {
-        update(value);
+      checked = e.currentTarget.checked;
-      }
     }}"
   />
   <label class:bx--radio-button__label="{true}" for="{id}">

src/RadioButtonGroup/RadioButtonGroup.svelte

@@ -22,7 +22,7 @@
    * Specify a name attribute for the radio button inputs
    * @type {string}
    */
-  export let name = undefined;
+  export let name;
 
   /** Specify the legend text */
   export let legendText = "";

tests/Form.test.svelte

@@ -20,7 +20,7 @@
     <Checkbox id="checkbox-2" labelText="Checkbox Label" disabled />
   </FormGroup>
   <FormGroup legendText="Radio buttons">
-    <RadioButtonGroup selected="default-selected">
+    <RadioButtonGroup selected="default-selected" name="radio-group">
       <RadioButton
         id="radio-1"
         value="standard"

tests/RadioButton.test.svelte

@@ -4,6 +4,7 @@
 
 <RadioButtonGroup
   legendText="Storage tier (disk)"
+  name="group-1"
   selected="standard"
   on:change="{(e) => {
     console.log(e.detail); // string
@@ -16,6 +17,7 @@
 
 <RadioButtonGroup
   legendText="Storage tier (disk)"
+  name="group-2"
   labelPosition="left"
   selected="standard"
 >
@@ -24,7 +26,11 @@
   <RadioButton labelText="Pro (128 GB)" value="pro" />
 </RadioButtonGroup>
 
-<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)">
+<RadioButtonGroup
+  orientation="vertical"
+  legendText="Storage tier (disk)"
+  name="group-3"
+>
   <RadioButtonSkeleton />
   <RadioButtonSkeleton />
   <RadioButtonSkeleton />

types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts

@@ -26,7 +26,7 @@ type $Props = {
    * Specify a name attribute for the radio button inputs
    * @default undefined
    */
-  name?: string;
+  name: string;
 
   /**
    * Specify the legend text