fix(radio-button): allow value type to be a number (#1868)

carbon-design-system · Dec 17, 2023 · 4792257 · 4792257
1 parent 1d82eb6
commit 4792257
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 18 deletions.
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
@@ -2937,7 +2937,7 @@ None.
 | :------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | --------------------------------------------------- |
 | ref           | No       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element        |
 | checked       | No       | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to check the radio button             |
-| value         | No       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the value of the radio button               |
+| value         | No       | <code>let</code> | No       | <code>string &#124; number</code>         | <code>""</code>                                  | Specify the value of the radio button               |
 | disabled      | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to disable the radio button           |
 | required      | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to mark the field as required         |
 | labelPosition | No       | <code>let</code> | No       | <code>"right" &#124; "left"</code>        | <code>"right"</code>                             | Specify the label position                          |
@@ -2964,7 +2964,7 @@ None.
 
 | Prop name     | Required | Kind             | Reactive | Type                                        | Default value             | Description                                              |
 | :------------ | :------- | :--------------- | :------- | ------------------------------------------- | ------------------------- | -------------------------------------------------------- |
-| selected      | No       | <code>let</code> | Yes      | <code>string</code>                         | <code>undefined</code>    | Set the selected radio button value                      |
+| 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     |
@@ -2983,13 +2983,13 @@ None.
 
 ### Events
 
-| Event name | Type       | Detail              |
-| :--------- | :--------- | :------------------ |
-| change     | dispatched | <code>string</code> |
-| click      | forwarded  | --                  |
-| mouseover  | forwarded  | --                  |
-| mouseenter | forwarded  | --                  |
-| mouseleave | forwarded  | --                  |
+| Event name | Type       | Detail                            |
+| :--------- | :--------- | :-------------------------------- |
+| change     | dispatched | <code>string &#124; number</code> |
+| click      | forwarded  | --                                |
+| mouseover  | forwarded  | --                                |
+| mouseenter | forwarded  | --                                |
+| mouseleave | forwarded  | --                                |
 
 ## `RadioButtonSkeleton`
 

diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
@@ -9366,7 +9366,7 @@
           "name": "value",
           "kind": "let",
           "description": "Specify the value of the radio button",
-          "type": "string",
+          "type": "string | number",
           "value": "\"\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -9503,7 +9503,7 @@
           "name": "selected",
           "kind": "let",
           "description": "Set the selected radio button value",
-          "type": "string",
+          "type": "string | number",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -9615,7 +9615,7 @@
         }
       ],
       "events": [
-        { "type": "dispatched", "name": "change", "detail": "string" },
+        { "type": "dispatched", "name": "change", "detail": "string | number" },
         { "type": "forwarded", "name": "click", "element": "div" },
         { "type": "forwarded", "name": "mouseover", "element": "div" },
         { "type": "forwarded", "name": "mouseenter", "element": "div" },

diff --git a/src/RadioButton/RadioButton.svelte b/src/RadioButton/RadioButton.svelte
@@ -1,5 +1,8 @@
 <script>
-  /** Specify the value of the radio button */
+  /**
+   * Specify the value of the radio button
+   * @type {string | number}
+   */
   export let value = "";
 
   /** Set to `true` to check the radio button */

diff --git a/src/RadioButtonGroup/RadioButtonGroup.svelte b/src/RadioButtonGroup/RadioButtonGroup.svelte
@@ -1,11 +1,11 @@
 <script>
   /**
-   * @event {string} change
+   * @event {string | number} change
    */
 
   /**
    * Set the selected radio button value
-   * @type {string}
+   * @type {string | number}
    */
   export let selected = undefined;
 

diff --git a/types/RadioButton/RadioButton.svelte.d.ts b/types/RadioButton/RadioButton.svelte.d.ts
@@ -8,7 +8,7 @@ export interface RadioButtonProps extends RestProps {
    * Specify the value of the radio button
    * @default ""
    */
-  value?: string;
+  value?: string | number;
 
   /**
    * Set to `true` to check the radio button

diff --git a/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts b/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts
@@ -8,7 +8,7 @@ export interface RadioButtonGroupProps extends RestProps {
    * Set the selected radio button value
    * @default undefined
    */
-  selected?: string;
+  selected?: string | number;
 
   /**
    * Set to `true` to disable the radio buttons
@@ -64,7 +64,7 @@ export interface RadioButtonGroupProps extends RestProps {
 export default class RadioButtonGroup extends SvelteComponentTyped<
   RadioButtonGroupProps,
   {
-    change: CustomEvent<string>;
+    change: CustomEvent<string | number>;
     click: WindowEventMap["click"];
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];