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

fix(radio-button-group): set name attribute on inputs

Browse source
This commit is contained in:
metonym 2023-09-28 14:44:14 -07:00
commit 050eb122d0
5 changed files with 52 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

21
COMPONENT_INDEX.md
View file

@ -2936,6 +2936,7 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | --------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| name | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify a name attribute for the radio button input |
| 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 |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the radio button |
@ -2944,7 +2945,6 @@ None.
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the radio button input |
### Slots
@ -2962,15 +2962,16 @@ None.
### Props
| 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 |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the radio buttons |
| 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 |
| orientation | No | <code>let</code> | No | <code>"horizontal" &#124; "vertical"</code> | <code>"horizontal"</code> | Specify the orientation of the radio buttons |
| id | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set an id for the container div element |
| 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 |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the radio buttons |
| 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 |
| orientation | No | <code>let</code> | No | <code>"horizontal" &#124; "vertical"</code> | <code>"horizontal"</code> | Specify the orientation of the radio buttons |
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set a name for all radio button input elements within the group |
| id | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set an id for the container div element |
### Slots

13
docs/src/COMPONENT_API.json
View file

@ -9468,7 +9468,7 @@
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
"reactive": true
},
{
"name": "ref",
@ -9571,6 +9571,17 @@
"constant": false,
"reactive": false
},
{
"name": "name",
"kind": "let",
"description": "Set a name for all radio button input elements within the group",
"type": "string",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "id",
"kind": "let",

14
src/RadioButton/RadioButton.svelte
View file

@ -32,7 +32,7 @@
/** Obtain a reference to the input HTML element */
export let ref = null;
import { getContext } from "svelte";
import { getContext, onMount } from "svelte";
import { writable } from "svelte/store";
const ctx = getContext("RadioButtonGroup");
@ -40,6 +40,18 @@
? ctx.selectedValue
: writable(checked ? value : undefined);
const unsubName = ctx?.name.subscribe((value) => {
// Use `name` if set on the `RadioButtonGroup`
if (value) {
name = value;
}
});
console.log(ctx)
onMount(() => {
return () => unsubName?.();
});
if (ctx) {
ctx.add({ id, checked, disabled, value });
}

10
src/RadioButtonGroup/RadioButtonGroup.svelte
View file

@ -26,6 +26,12 @@
*/
export let orientation = "horizontal";
/**
* Set a name for all radio button input elements within the group
* @type {string}
*/
export let name = undefined;
/**
* Set an id for the container div element
* @type {string}
@ -42,9 +48,11 @@
const dispatch = createEventDispatcher();
const selectedValue = writable(selected);
const inputName = writable(name);
setContext("RadioButtonGroup", {
selectedValue,
name: inputName,
add: ({ checked, value }) => {
if (checked) {
selectedValue.set(value);
@ -67,6 +75,8 @@
selected = value;
dispatch("change", value);
});
$: inputName.set(name);
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->

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

@ -40,6 +40,12 @@ export interface RadioButtonGroupProps extends RestProps {
*/
orientation?: "horizontal" | "vertical";
/**
* Set a name for all radio button input elements within the group
* @default undefined
*/
name?: string;
/**
* Set an id for the container div element
* @default undefined