Skip to content

Commit 24e2a88

Browse files
brunnerhbrunnerh
authored
fix(radio-button-group): add name and required props (#1037)
Fixes #1036
1 parent 108eb52 commit 24e2a88

File tree

10 files changed

+98
-36
lines changed

10 files changed

+98
-36
lines changed

‎COMPONENT_INDEX.md

+13-11
Original file line numberDiff line numberDiff line change
@@ -1580,7 +1580,7 @@ None.
15801580
| expandedByDefault | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
15811581
| uiShellAriaLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the header |
15821582
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
1583-
| company | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the company name. <br />Alternatively, use the named slot "company" (e.g., `&lt;span slot="company"&gt;...&lt;/span&gt;`) |
1583+
| company | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the company name.<br /><br />Alternatively, use the named slot "company" (e.g., `&lt;span slot="company"&gt;...&lt;/span&gt;`) |
15841584
| platformName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name.<br />Alternatively, use the named slot "platform" (e.g., `&lt;span slot="platform"&gt;...&lt;/span&gt;`) |
15851585
| persistentHamburgerMenu | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
15861586
| expansionBreakpoint | No | <code>let</code> | No | <code>number</code> | <code>1056</code> | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />- small: 320<br />- medium: 672<br />- large: 1056<br />- x-large: 1312<br />- max: 1584 |
@@ -2944,7 +2944,7 @@ None.
29442944
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
29452945
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
29462946
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
2947-
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the radio button input |
2947+
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the radio button input |
29482948

29492949
### Slots
29502950

@@ -2962,15 +2962,17 @@ None.
29622962

29632963
### Props
29642964

2965-
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
2966-
| :------------ | :------- | :--------------- | :------- | ------------------------------------------- | ------------------------- | -------------------------------------------- |
2967-
| selected | No | <code>let</code> | Yes | <code>string</code> | <code>undefined</code> | Set the selected radio button value |
2968-
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the radio buttons |
2969-
| legendText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
2970-
| hideLegend | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the legend |
2971-
| labelPosition | No | <code>let</code> | No | <code>"right" &#124; "left"</code> | <code>"right"</code> | Specify the label position |
2972-
| orientation | No | <code>let</code> | No | <code>"horizontal" &#124; "vertical"</code> | <code>"horizontal"</code> | Specify the orientation of the radio buttons |
2973-
| id | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set an id for the container div element |
2965+
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
2966+
| :------------ | :------- | :--------------- | :------- | ------------------------------------------- | ------------------------- | -------------------------------------------------------- |
2967+
| selected | No | <code>let</code> | Yes | <code>string</code> | <code>undefined</code> | Set the selected radio button value |
2968+
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the radio buttons |
2969+
| required | No | <code>let</code> | No | <code>boolean</code> | <code>undefined</code> | Set to `true` to require the selection of a radio button |
2970+
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the radio button inputs |
2971+
| legendText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
2972+
| hideLegend | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the legend |
2973+
| labelPosition | No | <code>let</code> | No | <code>"right" &#124; "left"</code> | <code>"right"</code> | Specify the label position |
2974+
| orientation | No | <code>let</code> | No | <code>"horizontal" &#124; "vertical"</code> | <code>"horizontal"</code> | Specify the orientation of the radio buttons |
2975+
| id | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set an id for the container div element |
29742976

29752977
### Slots
29762978

‎docs/src/COMPONENT_API.json

+23-2
Original file line numberDiff line numberDiff line change
@@ -4788,7 +4788,7 @@
47884788
{
47894789
"name": "company",
47904790
"kind": "let",
4791-
"description": "Specify the company name. \nAlternatively, use the named slot \"company\" (e.g., `<span slot=\"company\">...</span>`)",
4791+
"description": "Specify the company name.\n\nAlternatively, use the named slot \"company\" (e.g., `<span slot=\"company\">...</span>`)",
47924792
"type": "string",
47934793
"isFunction": false,
47944794
"isFunctionDeclaration": false,
@@ -9463,7 +9463,6 @@
94639463
"kind": "let",
94649464
"description": "Specify a name attribute for the radio button input",
94659465
"type": "string",
9466-
"value": "\"\"",
94679466
"isFunction": false,
94689467
"isFunctionDeclaration": false,
94699468
"isRequired": false,
@@ -9523,6 +9522,28 @@
95239522
"constant": false,
95249523
"reactive": false
95259524
},
9525+
{
9526+
"name": "required",
9527+
"kind": "let",
9528+
"description": "Set to `true` to require the selection of a radio button",
9529+
"type": "boolean",
9530+
"isFunction": false,
9531+
"isFunctionDeclaration": false,
9532+
"isRequired": false,
9533+
"constant": false,
9534+
"reactive": false
9535+
},
9536+
{
9537+
"name": "name",
9538+
"kind": "let",
9539+
"description": "Specify a name attribute for the radio button inputs",
9540+
"type": "string",
9541+
"isFunction": false,
9542+
"isFunctionDeclaration": false,
9543+
"isRequired": false,
9544+
"constant": false,
9545+
"reactive": false
9546+
},
95269547
{
95279548
"name": "legendText",
95289549
"kind": "let",

‎src/ComboBox/ComboBox.svelte

+3-3
Original file line numberDiff line numberDiff line change
@@ -224,9 +224,9 @@
224224
class:bx--label="{true}"
225225
class:bx--label--disabled="{disabled}"
226226
>
227-
<slot name="titleText">
228-
{titleText}
229-
</slot>
227+
<slot name="titleText">
228+
{titleText}
229+
</slot>
230230
</label>
231231
{/if}
232232
<ListBox

‎src/MultiSelect/MultiSelect.svelte

+3-3
Original file line numberDiff line numberDiff line change
@@ -300,9 +300,9 @@
300300
class:bx--label--disabled="{disabled}"
301301
class:bx--visually-hidden="{hideLabel}"
302302
>
303-
<slot name="titleText">
304-
{titleText}
305-
</slot>
303+
<slot name="titleText">
304+
{titleText}
305+
</slot>
306306
</label>
307307
{/if}
308308
<ListBox

‎src/RadioButton/RadioButton.svelte

+19-13
Original file line numberDiff line numberDiff line change
@@ -26,22 +26,28 @@
2626
/** Set an id for the input element */
2727
export let id = "ccs-" + Math.random().toString(36);
2828
29-
/** Specify a name attribute for the radio button input */
30-
export let name = "";
29+
/**
30+
* Specify a name attribute for the radio button input
31+
* @type {string}
32+
*/
33+
export let name = undefined;
3134
3235
/** Obtain a reference to the input HTML element */
3336
export let ref = null;
3437
3538
import { getContext } from "svelte";
36-
import { writable } from "svelte/store";
39+
import { readable } from "svelte/store";
3740
38-
const ctx = getContext("RadioButtonGroup");
39-
const selectedValue = ctx
40-
? ctx.selectedValue
41-
: writable(checked ? value : undefined);
41+
const { add, update, selectedValue, groupName, groupRequired } = getContext(
42+
"RadioButtonGroup"
43+
) ?? {
44+
groupName: readable(undefined),
45+
groupRequired: readable(undefined),
46+
selectedValue: readable(checked ? value : undefined),
47+
};
4248
43-
if (ctx) {
44-
ctx.add({ id, checked, disabled, value });
49+
if (add) {
50+
add({ id, checked, disabled, value });
4551
}
4652
4753
$: checked = $selectedValue === value;
@@ -56,16 +62,16 @@
5662
bind:this="{ref}"
5763
type="radio"
5864
id="{id}"
59-
name="{name}"
65+
name="{$groupName ?? name}"
6066
checked="{checked}"
6167
disabled="{disabled}"
62-
required="{required}"
68+
required="{$groupRequired ?? required}"
6369
value="{value}"
6470
class:bx--radio-button="{true}"
6571
on:change
6672
on:change="{() => {
67-
if (ctx) {
68-
ctx.update(value);
73+
if (update) {
74+
update(value);
6975
}
7076
}}"
7177
/>

‎src/RadioButtonGroup/RadioButtonGroup.svelte

+20-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,18 @@
88
/** Set to `true` to disable the radio buttons */
99
export let disabled = false;
1010
11+
/**
12+
* Set to `true` to require the selection of a radio button
13+
* @type {boolean}
14+
*/
15+
export let required = undefined;
16+
17+
/**
18+
* Specify a name attribute for the radio button inputs
19+
* @type {string}
20+
*/
21+
export let name = undefined;
22+
1123
/** Specify the legend text */
1224
export let legendText = "";
1325
@@ -38,13 +50,17 @@
3850
onMount,
3951
setContext,
4052
} from "svelte";
41-
import { writable } from "svelte/store";
53+
import { readonly, writable } from "svelte/store";
4254
4355
const dispatch = createEventDispatcher();
4456
const selectedValue = writable(selected);
57+
const groupName = writable(name);
58+
const groupRequired = writable(required);
4559
4660
setContext("RadioButtonGroup", {
4761
selectedValue,
62+
groupName: readonly(groupName),
63+
groupRequired: readonly(groupRequired),
4864
add: ({ checked, value }) => {
4965
if (checked) {
5066
selectedValue.set(value);
@@ -67,6 +83,9 @@
6783
selected = value;
6884
dispatch("change", value);
6985
});
86+
87+
$: $groupName = name;
88+
$: $groupRequired = required;
7089
</script>
7190

7291
<!-- svelte-ignore a11y-mouse-events-have-key-events -->

‎src/UIShell/Header.svelte

+3-2
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,9 @@
1717
*/
1818
export let href = undefined;
1919
20-
/**
21-
* Specify the company name.
20+
/**
21+
* Specify the company name.
22+
*
2223
* Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`)
2324
* @type {string}
2425
*/

‎types/RadioButton/RadioButton.svelte.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export interface RadioButtonProps extends RestProps {
5454

5555
/**
5656
* Specify a name attribute for the radio button input
57-
* @default ""
57+
* @default undefined
5858
*/
5959
name?: string;
6060

‎types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts

+12
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,18 @@ export interface RadioButtonGroupProps extends RestProps {
1616
*/
1717
disabled?: boolean;
1818

19+
/**
20+
* Set to `true` to require the selection of a radio button
21+
* @default undefined
22+
*/
23+
required?: boolean;
24+
25+
/**
26+
* Specify a name attribute for the radio button inputs
27+
* @default undefined
28+
*/
29+
name?: string;
30+
1931
/**
2032
* Specify the legend text
2133
* @default ""

‎types/UIShell/Header.svelte.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export interface HeaderProps extends RestProps {
3030

3131
/**
3232
* Specify the company name.
33+
*
3334
* Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`)
3435
* @default undefined
3536
*/

0 commit comments

Comments
 (0)