- 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

@@ -4788,7 +4788,7 @@
         {
           "name": "company",
           "kind": "let",
-          "description": "Specify the company name.  \nAlternatively, use the named slot \"company\" (e.g., `<span slot=\"company\">...</span>`)",
+          "description": "Specify the company name.\n\nAlternatively, use the named slot \"company\" (e.g., `<span slot=\"company\">...</span>`)",
           "type": "string",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -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,9 +9527,9 @@
           "kind": "let",
           "description": "Set to `true` to require the selection of a radio button",
           "type": "boolean",
-          "value": "false",
           "isFunction": false,
           "isFunctionDeclaration": false,
+          "isRequired": false,
           "constant": false,
           "reactive": false
         },
@@ -9539,9 +9538,9 @@
           "kind": "let",
           "description": "Specify a name attribute for the radio button inputs",
           "type": "string",
-          "value": "\"\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
+          "isRequired": false,
           "constant": false,
           "reactive": false
         },

docs/src/COMPONENT_API.json

@@ -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/RadioButton/RadioButton.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);

src/RadioButtonGroup/RadioButtonGroup.svelte

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

types/RadioButton/RadioButton.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;
 

types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts

@@ -30,6 +30,7 @@ export interface HeaderProps extends RestProps {
 
   /**
    * Specify the company name.
+   *
    * Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`)
    * @default undefined
    */