mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge 5b715d1ab2 into 4881ff7ffd

Browse source
This commit is contained in:
brunnerh 2024-11-12 05:24:15 +00:00 • committed by GitHub
commit 1cb3fc59fb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 45 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

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

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

4
docs/src/pages/components/RadioButton.svx
View file

@ -79,7 +79,7 @@ Use the `selected` prop to bind and update the selected value.
## Skeleton
<RadioButtonGroup legendText="Storage tier (disk)">
<RadioButtonGroup legendText="Storage tier (disk)" name="skeleton">
<RadioButtonSkeleton />
<RadioButtonSkeleton />
<RadioButtonSkeleton />
@ -87,7 +87,7 @@ Use the `selected` prop to bind and update the selected value.
## Skeleton (vertical)
<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)">
<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" name="skeleton-vertical">
<RadioButtonSkeleton />
<RadioButtonSkeleton />
<RadioButtonSkeleton />

6
docs/src/pages/framed/Theme/Theme.svelte
View file

@ -10,7 +10,11 @@
<Theme bind:theme />
<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
<RadioButtonGroup
legendText="Carbon theme"
name="theme"
bind:selected="{theme}"
>
{#each ["white", "g10", "g80", "g90", "g100"] as value}
<RadioButton labelText="{value}" value="{value}" />
{/each}

6
docs/src/pages/framed/Theme/ThemePersist.svelte
View file

@ -10,7 +10,11 @@
<Theme bind:theme persist persistKey="__carbon-theme" />
<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
<RadioButtonGroup
legendText="Carbon theme"
name="theme"
bind:selected="{theme}"
>
{#each ["white", "g10", "g80", "g90", "g100"] as value}
<RadioButton labelText="{value}" value="{value}" />
{/each}

1
docs/src/pages/index.svelte
View file

@ -118,6 +118,7 @@
<RadioButtonGroup
style="margin-top: var(--cds-spacing-08)"
legendText="Carbon themes"
name="theme"
bind:selected="{$theme}"
>
{#each ["white", "g10", "g80", "g90", "g100"] as value}

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
tests/Form.test.svelte
View file

@ -20,7 +20,7 @@
<Checkbox id="checkbox-2" labelText="Checkbox Label" disabled />
</FormGroup>
<FormGroup legendText="Radio buttons">
<RadioButtonGroup selected="default-selected">
<RadioButtonGroup selected="default-selected" name="radio-group">
<RadioButton
id="radio-1"
value="standard"

8
tests/RadioButton.test.svelte
View file

@ -4,6 +4,7 @@
<RadioButtonGroup
legendText="Storage tier (disk)"
name="group-1"
selected="standard"
on:change="{(e) => {
console.log(e.detail); // string
@ -16,6 +17,7 @@
<RadioButtonGroup
legendText="Storage tier (disk)"
name="group-2"
labelPosition="left"
selected="standard"
>
@ -24,7 +26,11 @@
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)">
<RadioButtonGroup
orientation="vertical"
legendText="Storage tier (disk)"
name="group-3"
>
<RadioButtonSkeleton />
<RadioButtonSkeleton />
<RadioButtonSkeleton />

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

@ -26,7 +26,7 @@ type $Props = {
* Specify a name attribute for the radio button inputs
* @default undefined
*/
name?: string;
name: string;
/**
* Specify the legend text