Skip to content

Commit 836b360

Browse files
metonymmetonym
authored
fix(tile-group): add name and required props (#1818)
1 parent 5ef4dc1 commit 836b360

11 files changed

+127
-45
lines changed

‎COMPONENT_INDEX.md

+9-6
Original file line numberDiff line numberDiff line change
@@ -3019,11 +3019,12 @@ None.
30193019
| checked | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to check the tile |
30203020
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
30213021
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile |
3022+
| required | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to mark the field as required |
30223023
| value | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the value of the radio input |
30233024
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
30243025
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Tile checkmark"</code> | Specify the ARIA label for the radio tile checkmark icon |
30253026
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
3026-
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the input |
3027+
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the radio tile input |
30273028

30283029
### Slots
30293030

@@ -4234,11 +4235,13 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
42344235

42354236
### Props
42364237

4237-
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
4238-
| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | --------------------------------------- |
4239-
| selected | No | <code>let</code> | Yes | <code>string</code> | <code>undefined</code> | Specify the selected tile value |
4240-
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile group |
4241-
| legend | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
4238+
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
4239+
| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | -------------------------------------------------------- |
4240+
| selected | No | <code>let</code> | Yes | <code>string</code> | <code>undefined</code> | Specify the selected tile value |
4241+
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile group |
4242+
| required | No | <code>let</code> | No | <code>boolean</code> | <code>undefined</code> | Set to `true` to require the selection of a radio button |
4243+
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the radio button inputs |
4244+
| legend | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
42424245

42434246
### Slots
42444247

‎docs/src/COMPONENT_API.json

+35-2
Original file line numberDiff line numberDiff line change
@@ -9679,6 +9679,18 @@
96799679
"constant": false,
96809680
"reactive": false
96819681
},
9682+
{
9683+
"name": "required",
9684+
"kind": "let",
9685+
"description": "Set to `true` to mark the field as required",
9686+
"type": "boolean",
9687+
"value": "false",
9688+
"isFunction": false,
9689+
"isFunctionDeclaration": false,
9690+
"isRequired": false,
9691+
"constant": false,
9692+
"reactive": false
9693+
},
96829694
{
96839695
"name": "value",
96849696
"kind": "let",
@@ -9730,9 +9742,8 @@
97309742
{
97319743
"name": "name",
97329744
"kind": "let",
9733-
"description": "Specify a name attribute for the input",
9745+
"description": "Specify a name attribute for the radio tile input",
97349746
"type": "string",
9735-
"value": "\"\"",
97369747
"isFunction": false,
97379748
"isFunctionDeclaration": false,
97389749
"isRequired": false,
@@ -13110,6 +13121,28 @@
1311013121
"constant": false,
1311113122
"reactive": false
1311213123
},
13124+
{
13125+
"name": "required",
13126+
"kind": "let",
13127+
"description": "Set to `true` to require the selection of a radio button",
13128+
"type": "boolean",
13129+
"isFunction": false,
13130+
"isFunctionDeclaration": false,
13131+
"isRequired": false,
13132+
"constant": false,
13133+
"reactive": false
13134+
},
13135+
{
13136+
"name": "name",
13137+
"kind": "let",
13138+
"description": "Specify a name attribute for the radio button inputs",
13139+
"type": "string",
13140+
"isFunction": false,
13141+
"isFunctionDeclaration": false,
13142+
"isRequired": false,
13143+
"constant": false,
13144+
"reactive": false
13145+
},
1311313146
{
1311413147
"name": "legend",
1311513148
"kind": "let",

‎docs/src/pages/components/RadioButton.svx

+5-5
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ It's recommended that you provide a legend for accessibility.
2323

2424
Use `hideLegend` to visually hide the legend text.
2525

26-
<RadioButtonGroup hideLegend legendText="Storage tier (disk)" selected="standard">
26+
<RadioButtonGroup hideLegend legendText="Storage tier (disk)" name="plan-legend" selected="standard">
2727
<RadioButton labelText="Free (1 GB)" value="free" />
2828
<RadioButton labelText="Standard (10 GB)" value="standard" />
2929
<RadioButton labelText="Pro (128 GB)" value="pro" />
@@ -33,7 +33,7 @@ Use `hideLegend` to visually hide the legend text.
3333

3434
Use the named "legendText" slot to customize the legend text.
3535

36-
<RadioButtonGroup name="plan" selected="standard">
36+
<RadioButtonGroup name="plan-legend-slot" selected="standard">
3737
<div slot="legendText" style:display="flex">
3838
Storage tier (disk)
3939
<Tooltip>
@@ -55,23 +55,23 @@ Use the `selected` prop to bind and update the selected value.
5555

5656
## Left-aligned label text
5757

58-
<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" name="plan" selected="standard">
58+
<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" name="plan-left-aligned" selected="standard">
5959
<RadioButton labelText="Free (1 GB)" value="free" />
6060
<RadioButton labelText="Standard (10 GB)" value="standard" />
6161
<RadioButton labelText="Pro (128 GB)" value="pro" />
6262
</RadioButtonGroup>
6363

6464
## Disabled buttons
6565

66-
<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" name="plan" selected="standard">
66+
<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" name="plan-disabled" selected="standard">
6767
<RadioButton disabled labelText="Free (1 GB)" value="free" />
6868
<RadioButton labelText="Standard (10 GB)" value="standard" />
6969
<RadioButton disabled labelText="Pro (128 GB)" value="pro" />
7070
</RadioButtonGroup>
7171

7272
## Vertical orientation
7373

74-
<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" name="plan" selected="standard">
74+
<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" name="plan-vertical" selected="standard">
7575
<RadioButton labelText="Free (1 GB)" value="free" />
7676
<RadioButton labelText="Standard (10 GB)" value="standard" />
7777
<RadioButton labelText="Pro (128 GB)" value="pro" />

‎docs/src/pages/components/RadioTile.svx

+12-12
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ components: ["TileGroup", "RadioTile"]
99

1010
## Default
1111

12-
<TileGroup legend="Service pricing tiers">
13-
<RadioTile value="0" checked>
12+
<TileGroup legend="Service pricing tiers" name="plan" selected="standard">
13+
<RadioTile value="lite">
1414
Lite plan
1515
</RadioTile>
16-
<RadioTile value="1">
16+
<RadioTile value="standard">
1717
Standard plan
1818
</RadioTile>
19-
<RadioTile value="2">
19+
<RadioTile value="plus">
2020
Plus plan
2121
</RadioTile>
2222
</TileGroup>
@@ -33,28 +33,28 @@ Binding to the `selected` prop is a more concise approach to managing state.
3333

3434
## Light variant
3535

36-
<TileGroup legend="Service pricing tiers">
37-
<RadioTile light value="0" checked>
36+
<TileGroup legend="Service pricing tiers" name="plan-light" selected="standard">
37+
<RadioTile light value="lite">
3838
Lite plan
3939
</RadioTile>
40-
<RadioTile light value="1">
40+
<RadioTile light value="standard">
4141
Standard plan
4242
</RadioTile>
43-
<RadioTile light value="2">
43+
<RadioTile light value="plus">
4444
Plus plan
4545
</RadioTile>
4646
</TileGroup>
4747

4848
## Disabled state
4949

50-
<TileGroup legend="Service pricing tiers">
51-
<RadioTile value="0" checked>
50+
<TileGroup legend="Service pricing tiers" name="plan-disabled" selected="standard">
51+
<RadioTile value="lite" disabled>
5252
Lite plan
5353
</RadioTile>
54-
<RadioTile value="1" disabled>
54+
<RadioTile value="standard">
5555
Standard plan
5656
</RadioTile>
57-
<RadioTile value="2" disabled>
57+
<RadioTile value="plus" disabled>
5858
Plus plan
5959
</RadioTile>
6060
</TileGroup>

‎docs/src/pages/framed/RadioTile/RadioTileReactive.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
44
const values = ["Lite plan", "Standard plan", "Plus plan"];
55
6-
let selected = values[0];
6+
let selected = values[1];
77
</script>
88

9-
<TileGroup legend="Service pricing tiers" bind:selected>
9+
<TileGroup legend="Service pricing tiers" name="plan" bind:selected>
1010
{#each values as value}
1111
<RadioTile value="{value}">{value}</RadioTile>
1212
{/each}

‎docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte

+5-3
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,18 @@
33
44
const values = ["Lite plan", "Standard plan", "Plus plan"];
55
6-
let selected = values[0];
6+
let selected = values[1];
77
</script>
88

99
<TileGroup
1010
legend="Service pricing tiers"
11+
name="plan"
1112
on:select="{({ detail }) => (selected = detail)}"
1213
>
1314
{#each values as value}
14-
<RadioTile value="{value}" checked="{selected === value}">{value}</RadioTile
15-
>
15+
<RadioTile value="{value}" checked="{selected === value}">
16+
{value}
17+
</RadioTile>
1618
{/each}
1719
</TileGroup>
1820

‎src/Tile/RadioTile.svelte

+18-4
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@
88
/** Set to `true` to disable the tile */
99
export let disabled = false;
1010
11+
/** Set to `true` to mark the field as required */
12+
export let required = false;
13+
1114
/** Specify the value of the radio input */
1215
export let value = "";
1316
@@ -20,13 +23,23 @@
2023
/** Set an id for the input element */
2124
export let id = "ccs-" + Math.random().toString(36);
2225
23-
/** Specify a name attribute for the input */
24-
export let name = "";
26+
/**
27+
* Specify a name attribute for the radio tile input
28+
* @type {string}
29+
*/
30+
export let name = undefined;
2531
2632
import { getContext } from "svelte";
33+
import { readable } from "svelte/store";
2734
import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
2835
29-
const { add, update, selectedValue } = getContext("TileGroup");
36+
const { add, update, selectedValue, groupName, groupRequired } = getContext(
37+
"TileGroup"
38+
) ?? {
39+
groupName: readable(undefined),
40+
groupRequired: readable(undefined),
41+
selectedValue: readable(checked ? value : undefined),
42+
};
3043
3144
add({ value, checked });
3245
@@ -36,11 +49,12 @@
3649
<input
3750
type="radio"
3851
id="{id}"
39-
name="{name}"
52+
name="{$groupName ?? name}"
4053
value="{value}"
4154
checked="{checked}"
4255
tabindex="{disabled ? undefined : tabindex}"
4356
disabled="{disabled}"
57+
required="{$groupRequired ?? required}"
4458
class:bx--tile-input="{true}"
4559
on:change
4660
on:change="{() => {

‎src/Tile/TileGroup.svelte

+19-1
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,33 @@
88
/** Set to `true` to disable the tile group */
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 legend = "";
1325
1426
import { createEventDispatcher, setContext } from "svelte";
15-
import { writable } from "svelte/store";
27+
import { writable, readonly } from "svelte/store";
1628
1729
const dispatch = createEventDispatcher();
1830
const selectedValue = writable(selected);
31+
const groupName = writable(name);
32+
const groupRequired = writable(required);
1933
2034
setContext("TileGroup", {
2135
selectedValue,
36+
groupName: readonly(groupName),
37+
groupRequired: readonly(groupRequired),
2238
add: ({ checked, value }) => {
2339
if (checked) {
2440
selectedValue.set(value);
@@ -32,6 +48,8 @@
3248
3349
$: selected = $selectedValue;
3450
$: selectedValue.set(selected);
51+
$: $groupName = name;
52+
$: $groupRequired = required;
3553
</script>
3654

3755
<fieldset disabled="{disabled}" class:bx--tile-group="{true}" {...$$restProps}>

‎tests/RadioTile.test.svelte

+2-8
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,8 @@
22
import { TileGroup, RadioTile } from "../types";
33
</script>
44

5-
<TileGroup legend="Service pricing tiers">
6-
<RadioTile value="0" checked>Lite plan</RadioTile>
5+
<TileGroup name="plan" required legend="Service pricing tiers">
6+
<RadioTile light value="0" checked>Lite plan</RadioTile>
77
<RadioTile value="1">Standard plan</RadioTile>
88
<RadioTile value="2">Plus plan</RadioTile>
99
</TileGroup>
10-
11-
<TileGroup legend="Service pricing tiers">
12-
<RadioTile light value="0" checked>Lite plan</RadioTile>
13-
<RadioTile light value="1">Standard plan</RadioTile>
14-
<RadioTile light value="2">Plus plan</RadioTile>
15-
</TileGroup>

‎types/Tile/RadioTile.svelte.d.ts

+8-2
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,12 @@ export interface RadioTileProps extends RestProps {
2222
*/
2323
disabled?: boolean;
2424

25+
/**
26+
* Set to `true` to mark the field as required
27+
* @default false
28+
*/
29+
required?: boolean;
30+
2531
/**
2632
* Specify the value of the radio input
2733
* @default ""
@@ -47,8 +53,8 @@ export interface RadioTileProps extends RestProps {
4753
id?: string;
4854

4955
/**
50-
* Specify a name attribute for the input
51-
* @default ""
56+
* Specify a name attribute for the radio tile input
57+
* @default undefined
5258
*/
5359
name?: string;
5460

‎types/Tile/TileGroup.svelte.d.ts

+12
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,18 @@ export interface TileGroupProps 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 ""

0 commit comments

Comments
 (0)