From 6f51bdbf1b5ba4f00a2bfea29f9791bed45decea Mon Sep 17 00:00:00 2001 From: brunnerh Date: Wed, 3 Jan 2024 04:05:51 +0100 Subject: [PATCH 1/2] Update checked for radio buttons without group. Make radio button group `name` a required property. --- COMPONENT_INDEX.md | 2 +- docs/src/COMPONENT_API.json | 2 +- docs/src/pages/_layout.svelte | 5 +++- docs/src/pages/framed/_reset.svelte | 9 +++++--- src/RadioButton/RadioButton.svelte | 23 +++++++++++++++---- src/RadioButtonGroup/RadioButtonGroup.svelte | 2 +- .../RadioButtonGroup.svelte.d.ts | 2 +- 7 files changed, 33 insertions(+), 12 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 45441651..8999c645 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2967,7 +2967,7 @@ None. | selected | No | let | Yes | string | number | undefined | Set the selected radio button value | | disabled | No | let | No | boolean | false | Set to `true` to disable the radio buttons | | required | No | let | No | boolean | undefined | Set to `true` to require the selection of a radio button | -| name | No | let | No | string | undefined | Specify a name attribute for the radio button inputs | +| name | Yes | let | No | string | undefined | Specify a name attribute for the radio button inputs | | legendText | No | let | No | string | "" | Specify the legend text | | hideLegend | No | let | No | boolean | false | Set to `true` to visually hide the legend | | labelPosition | No | let | No | "right" | "left" | "right" | Specify the label position | diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 60178302..19eec645 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -9540,7 +9540,7 @@ "type": "string", "isFunction": false, "isFunctionDeclaration": false, - "isRequired": false, + "isRequired": true, "constant": false, "reactive": false }, diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte index 7dd0f43d..17ca12ef 100644 --- a/docs/src/pages/_layout.svelte +++ b/docs/src/pages/_layout.svelte @@ -85,7 +85,10 @@ bind:theme="{$theme}" on:update="{(e) => { const theme = e.detail.theme; - document.documentElement.style.setProperty("color-scheme", ["white", "g10"].includes(theme) ? "light" : "dark"); + document.documentElement.style.setProperty( + 'color-scheme', + ['white', 'g10'].includes(theme) ? 'light' : 'dark' + ); }}" >
diff --git a/src/RadioButton/RadioButton.svelte b/src/RadioButton/RadioButton.svelte index 233faf28..4382bd0f 100644 --- a/src/RadioButton/RadioButton.svelte +++ b/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")) + ); + } + } + }