Skip to content

Commit 361d2df

Browse files
ispyinternetispyinternet
committed
WIP: SelectableTileGroup
1 parent 626fd99 commit 361d2df

File tree

14 files changed

+32878
-59
lines changed

14 files changed

+32878
-59
lines changed

‎COMPONENT_INDEX.md‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2692,15 +2692,17 @@ None.
26922692

26932693
### Props
26942694

2695-
| Prop name | Kind | Reactive | Type | Default value | Description |
2696-
| :-------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | -------------------------------------------------------- |
2697-
| checked | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to check the tile |
2698-
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
2699-
| value | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the value of the radio input |
2700-
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
2701-
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Tile checkmark"</code> | Specify the ARIA label for the radio tile checkmark icon |
2702-
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
2703-
| name | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the input |
2695+
| Prop name | Kind | Reactive | Type | Default value | Description |
2696+
| :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------------------- |
2697+
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
2698+
| light | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
2699+
| checked | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to check the tile |
2700+
| value | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the value of the radio input |
2701+
| title | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the selectable tile |
2702+
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
2703+
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Tile checkmark"</code> | Specify the ARIA label for the radio tile checkmark icon |
2704+
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
2705+
| name | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the input |
27042706

27052707
### Slots
27062708

@@ -2904,8 +2906,8 @@ None.
29042906
| Prop name | Kind | Reactive | Type | Default value | Description |
29052907
| :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
29062908
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
2909+
| light | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
29072910
| selected | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to select the tile |
2908-
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
29092911
| title | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the selectable tile |
29102912
| value | <code>let</code> | No | <code>string</code> | <code>"value"</code> | Specify the value of the selectable tile |
29112913
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |

‎docs/src/COMPONENT_API.json‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8534,7 +8534,7 @@
85348534
"value": "false",
85358535
"isFunction": false,
85368536
"constant": false,
8537-
"reactive": false
8537+
"reactive": true
85388538
},
85398539
{
85408540
"name": "title",
@@ -8640,7 +8640,7 @@
86408640
"value": "false",
86418641
"isFunction": false,
86428642
"constant": false,
8643-
"reactive": false
8643+
"reactive": true
86448644
},
86458645
{
86468646
"name": "value",
@@ -8652,6 +8652,16 @@
86528652
"constant": false,
86538653
"reactive": false
86548654
},
8655+
{
8656+
"name": "title",
8657+
"kind": "let",
8658+
"description": "Specify the title of the selectable tile",
8659+
"type": "string",
8660+
"value": "\"title\"",
8661+
"isFunction": false,
8662+
"constant": false,
8663+
"reactive": false
8664+
},
86558665
{
86568666
"name": "tabindex",
86578667
"kind": "let",
@@ -8691,6 +8701,16 @@
86918701
"isFunction": false,
86928702
"constant": false,
86938703
"reactive": false
8704+
},
8705+
{
8706+
"name": "ref",
8707+
"kind": "let",
8708+
"description": "Obtain a reference to the input HTML element",
8709+
"type": "null | HTMLInputElement",
8710+
"value": "null",
8711+
"isFunction": false,
8712+
"constant": false,
8713+
"reactive": true
86948714
}
86958715
],
86968716
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],

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

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,35 @@
11
---
2-
components: ["TileGroup", "RadioTile"]
2+
components: ["RadioTileGroup", "RadioTile"]
33
---
44

55
<script>
6-
import { TileGroup, RadioTile } from "carbon-components-svelte";
6+
import { RadioTileGroup, RadioTile } from "carbon-components-svelte";
77
import Preview from "../../components/Preview.svelte";
88
</script>
99

10+
<InlineNotification svx-ignore title="Deprecation warning:" kind="warning" hideCloseButton>
11+
<div>
12+
The TileGroup component will be removed in favour of the RadioTileGroup component in the next major release.
13+
</div>
14+
</InlineNotification>
15+
1016
### Default
1117

12-
<TileGroup legend="Service pricing tiers">
18+
<RadioTileGroup legend="Service pricing tiers">
1319
<RadioTile value="0" checked>
1420
Lite plan
1521
</RadioTile>
1622
<RadioTile value="1">
1723
Standard plan
1824
</RadioTile>
19-
<RadioTile value="2">
20-
Plus plan
25+
<RadioTile light value="2">
26+
Plus plan (light variant)
2127
</RadioTile>
2228
</TileGroup>
2329

2430
### Light variant
2531

26-
<TileGroup legend="Service pricing tiers">
32+
<RadioTileGroup light legend="Service pricing tiers">
2733
<RadioTile value="0" checked>
2834
Lite plan
2935
</RadioTile>

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

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,42 @@
11
---
2-
components: ["SelectableTile"]
2+
components: ["SelectableTile", "SelectableTileGroup"]
33
---
44

55
<script>
6-
import { SelectableTile } from "carbon-components-svelte";
6+
import { SelectableTile, RadioTileGroup } from "carbon-components-svelte";
77
import Preview from "../../components/Preview.svelte";
88
</script>
99

1010
### Multi-selectable tiles
1111

12-
<div role="group" aria-label="selectable tiles">
13-
<SelectableTile selected>
14-
Multi-select Tile
12+
<SelectableTileGroup legend="Select the options you require" light>
13+
<SelectableTile title="Option 1" selected>
14+
Option 1
1515
</SelectableTile>
16-
<SelectableTile selected>
17-
Multi-select Tile
16+
<SelectableTile title="Option 2" selected>
17+
Option 2
1818
</SelectableTile>
19-
<SelectableTile>
20-
Multi-select Tile
19+
<SelectableTile title="Option 3£>
20+
Option 3
21+
</SelectableTile>
22+
<SelectableTile light title="Option 4£>
23+
Option 4 (light variant)
2124
</SelectableTile>
2225
</div>
2326

24-
### Light variant
27+
### Multi-selectable tiles with light variant
2528

26-
<div role="group" aria-label="selectable tiles">
27-
<SelectableTile light selected>
28-
Multi-select Tile
29+
<SelectableTileGroup light legend="Select the options you require" light>
30+
<SelectableTile title="Option 1" selected>
31+
Option 1
32+
</SelectableTile>
33+
<SelectableTile title="Option 2" selected>
34+
Option 2
2935
</SelectableTile>
30-
<SelectableTile light selected>
31-
Multi-select Tile
36+
<SelectableTile title="Option 3£>
37+
Option 3
3238
</SelectableTile>
33-
<SelectableTile light>
34-
Multi-select Tile
39+
<SelectableTile title="Option 4£>
40+
Option 4
3541
</SelectableTile>
36-
</div>
42+
</div>

0 commit comments

Comments
 (0)