mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 10:51:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update checked for radio buttons without group.

Browse source 
Make radio button group `name` a required property.
This commit is contained in:
brunnerh 2024-01-03 04:05:51 +01:00
commit 6f51bdbf1b
7 changed files with 33 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

@ -2967,7 +2967,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 |

2
docs/src/COMPONENT_API.json
View file

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

5
docs/src/pages/_layout.svelte
View file

@ -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'
);
}}"
>
<Header

7
docs/src/pages/framed/_reset.svelte
View file

@ -16,8 +16,11 @@
// conflict with how the iframe is displayed in the docs.
// Instead, we want the theme to be overridden in the standalone page.
if (["white", "g10", "g80", "g90", "g100"].includes(current_theme)) {
document.documentElement.setAttribute("theme", current_theme)
document.documentElement.style.setProperty("color-scheme", ["white", "g10"].includes(current_theme) ? "light" : "dark");
document.documentElement.setAttribute("theme", current_theme);
document.documentElement.style.setProperty(
"color-scheme",
["white", "g10"].includes(current_theme) ? "light" : "dark"
);
}
}
</script>

23
src/RadioButton/RadioButton.svelte
View file

@ -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="{() => {
if (update) {
update(value);
}
on:change="{onChange}"
on:carbon:checked-change="{(e) => {
checked = e.currentTarget.checked;
}}"
/>
<label class:bx--radio-button__label="{true}" for="{id}">

2
src/RadioButtonGroup/RadioButtonGroup.svelte
View file

@ -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 = "";

2
types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts vendored
View file

@ -26,7 +26,7 @@ export interface RadioButtonGroupProps extends RestProps {
* Specify a name attribute for the radio button inputs
* @default undefined
*/
name?: string;
name: string;
/**
* Specify the legend text