- RadioButtonGroup values for name/required override those of RadioButton

- Fix reactivity when RadioButton is used without group
- Use `readable` when writing is not required
- Use `readonly` to make intent clearer.
- Remove default values for `required` and `name`
  - More consistent with other input types
  - Means that `name` attribute will not be added for no reason

Author: brunnerh

COMPONENT_INDEX.md

@@ -2944,7 +2944,7 @@ None.
 | labelText     | No       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the label text                              |
 | hideLabel     | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to visually hide the label text       |
 | 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 radio button input |
+| name          | No       | <code>let</code> | No       | <code>string</code>                       | <code>undefined</code>                           | Specify a name attribute for the radio button input |
 
 ### Slots
 
@@ -2966,8 +2966,8 @@ None.
 | :------------ | :------- | :--------------- | :------- | ------------------------------------------- | ------------------------- | -------------------------------------------------------- |
 | selected      | No       | <code>let</code> | Yes      | <code>string</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>false</code>        | Set to `true` to require the selection of a radio button |
-| name          | No       | <code>let</code> | No       | <code>string</code>                         | <code>""</code>           | Specify a name attribute for the radio button inputs     |
+| 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     |
 | 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

@@ -9463,7 +9463,6 @@
           "kind": "let",
           "description": "Specify a name attribute for the radio button input",
           "type": "string",
-          "value": "\"\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -9528,7 +9527,6 @@
           "kind": "let",
           "description": "Set to `true` to require the selection of a radio button",
           "type": "boolean",
-          "value": "false",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -9540,7 +9538,6 @@
           "kind": "let",
           "description": "Specify a name attribute for the radio button inputs",
           "type": "string",
-          "value": "\"\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,

src/RadioButton/RadioButton.svelte

@@ -26,21 +26,24 @@
   /** Set an id for the input element */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /** Specify a name attribute for the radio button input */
-  export let name = "";
+  /**
+   * Specify a name attribute for the radio button input
+   * @type {string}
+   */
+  export let name = undefined;
 
   /** Obtain a reference to the input HTML element */
   export let ref = null;
 
   import { getContext } from "svelte";
-  import { writable } from "svelte/store";
+  import { readable } from "svelte/store";
 
   const { add, update, selectedValue, groupName, groupRequired } = getContext(
     "RadioButtonGroup"
   ) ?? {
-    groupName: writable(name),
-    groupRequired: writable(required),
-    selectedValue: writable(checked ? value : undefined),
+    groupName: readable(undefined),
+    groupRequired: readable(undefined),
+    selectedValue: readable(checked ? value : undefined),
   };
 
   if (add) {
@@ -59,10 +62,10 @@
     bind:this="{ref}"
     type="radio"
     id="{id}"
-    name="{'name' in $$props ? name : $groupName}"
+    name="{$groupName ?? name}"
     checked="{checked}"
     disabled="{disabled}"
-    required="{'required' in $$props ? required : $groupRequired}"
+    required="{$groupRequired ?? required}"
     value="{value}"
     class:bx--radio-button="{true}"
     on:change

src/RadioButtonGroup/RadioButtonGroup.svelte

@@ -8,11 +8,17 @@
   /** Set to `true` to disable the radio buttons */
   export let disabled = false;
 
-  /** Set to `true` to require the selection of a radio button */
-  export let required = 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 */
-  export let name = "";
+  /**
+   * Specify a name attribute for the radio button inputs
+   * @type {string}
+   */
+  export let name = undefined;
 
   /** Specify the legend text */
   export let legendText = "";
@@ -44,7 +50,7 @@
     onMount,
     setContext,
   } from "svelte";
-  import { writable } from "svelte/store";
+  import { readonly, writable } from "svelte/store";
 
   const dispatch = createEventDispatcher();
   const selectedValue = writable(selected);
@@ -53,8 +59,8 @@
 
   setContext("RadioButtonGroup", {
     selectedValue,
-    groupName: { subscribe: groupName.subscribe },
-    groupRequired: { subscribe: groupRequired.subscribe },
+    groupName: readonly(groupName),
+    groupRequired: readonly(groupRequired),
     add: ({ checked, value }) => {
       if (checked) {
         selectedValue.set(value);

types/RadioButton/RadioButton.svelte.d.ts

@@ -54,7 +54,7 @@ export interface RadioButtonProps extends RestProps {
 
   /**
    * Specify a name attribute for the radio button input
-   * @default ""
+   * @default undefined
    */
   name?: string;
 

types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts

@@ -18,13 +18,13 @@ export interface RadioButtonGroupProps extends RestProps {
 
   /**
    * Set to `true` to require the selection of a radio button
-   * @default false
+   * @default undefined
    */
   required?: boolean;
 
   /**
    * Specify a name attribute for the radio button inputs
-   * @default ""
+   * @default undefined
    */
   name?: string;