Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
metonym wants to merge 1 commit into from
Closed

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 11 additions & 10 deletions COMPONENT_INDEX.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand All @@ -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

Expand All @@ -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

Expand Down
13 changes: 12 additions & 1 deletion docs/src/COMPONENT_API.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9468,7 +9468,7 @@
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
"reactive": true
},
{
"name": "ref",
Expand Down Expand Up @@ -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",
Expand Down
14 changes: 13 additions & 1 deletion src/RadioButton/RadioButton.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,26 @@
/** 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");
const selectedValue = ctx
? 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 });
}
Expand Down
10 changes: 10 additions & 0 deletions src/RadioButtonGroup/RadioButtonGroup.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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);
Expand All @@ -67,6 +75,8 @@
selected = value;
dispatch("change", value);
});

$: inputName.set(name);
</script>

<!-- svelte-ignore a11y-mouse-events-have-key-events -->
Expand Down
6 changes: 6 additions & 0 deletions types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down