Skip to content

Commit fe5c571

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

17 files changed

+33037
-65
lines changed

‎COMPONENT_INDEX.md‎

Lines changed: 61 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Component Index
22

3-
> 155 components exported from [email protected].
3+
> 157 components exported from [email protected].
44
55
## Components
66

@@ -97,6 +97,7 @@
9797
- [`RadioButtonGroup`](#radiobuttongroup)
9898
- [`RadioButtonSkeleton`](#radiobuttonskeleton)
9999
- [`RadioTile`](#radiotile)
100+
- [`RadioTileGroup`](#radiotilegroup)
100101
- [`Row`](#row)
101102
- [`Search`](#search)
102103
- [`SearchSkeleton`](#searchskeleton)
@@ -105,6 +106,7 @@
105106
- [`SelectItemGroup`](#selectitemgroup)
106107
- [`SelectSkeleton`](#selectskeleton)
107108
- [`SelectableTile`](#selectabletile)
109+
- [`SelectableTileGroup`](#selectabletilegroup)
108110
- [`SideNav`](#sidenav)
109111
- [`SideNavItems`](#sidenavitems)
110112
- [`SideNavLink`](#sidenavlink)
@@ -2692,15 +2694,17 @@ None.
26922694

26932695
### Props
26942696

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

27052709
### Slots
27062710

@@ -2719,6 +2723,29 @@ None.
27192723
| mouseenter | forwarded | -- |
27202724
| mouseleave | forwarded | -- |
27212725

2726+
## `RadioTileGroup`
2727+
2728+
### Props
2729+
2730+
| Prop name | Kind | Reactive | Type | Default value | Description |
2731+
| :------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
2732+
| selectedValue | <code>let</code> | Yes | <code>string</code> | -- | Specify the selected tile value |
2733+
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile group |
2734+
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
2735+
| legend | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
2736+
2737+
### Slots
2738+
2739+
| Slot name | Default | Props | Fallback |
2740+
| :-------- | :------ | :---- | :------- |
2741+
| -- | Yes | -- | -- |
2742+
2743+
### Events
2744+
2745+
| Event name | Type | Detail |
2746+
| :--------- | :--------- | :----- |
2747+
| select | dispatched | -- |
2748+
27222749
## `Row`
27232750

27242751
### Props
@@ -2904,8 +2931,8 @@ None.
29042931
| Prop name | Kind | Reactive | Type | Default value | Description |
29052932
| :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
29062933
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
2934+
| light | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
29072935
| 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 |
29092936
| title | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the selectable tile |
29102937
| value | <code>let</code> | No | <code>string</code> | <code>"value"</code> | Specify the value of the selectable tile |
29112938
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
@@ -2929,6 +2956,29 @@ None.
29292956
| mouseleave | forwarded | -- |
29302957
| keydown | forwarded | -- |
29312958

2959+
## `SelectableTileGroup`
2960+
2961+
### Props
2962+
2963+
| Prop name | Kind | Reactive | Type | Default value | Description |
2964+
| :------------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
2965+
| selectedValues | <code>let</code> | Yes | <code>string</code> | <code>[]</code> | Specify the selected tile's |
2966+
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile group |
2967+
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
2968+
| legend | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
2969+
2970+
### Slots
2971+
2972+
| Slot name | Default | Props | Fallback |
2973+
| :-------- | :------ | :---- | :------- |
2974+
| -- | Yes | -- | -- |
2975+
2976+
### Events
2977+
2978+
| Event name | Type | Detail |
2979+
| :--------- | :--------- | :----- |
2980+
| select | dispatched | -- |
2981+
29322982
## `SideNav`
29332983

29342984
### Props

‎docs/src/COMPONENT_API.json‎

Lines changed: 122 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"total": 155,
2+
"total": 157,
33
"components": [
44
{
55
"moduleName": "SkeletonText",
@@ -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": "{}" }],
@@ -8744,6 +8764,105 @@
87448764
"typedefs": [],
87458765
"rest_props": { "type": "Element", "name": "fieldset" }
87468766
},
8767+
{
8768+
"moduleName": "RadioTileGroup",
8769+
"filePath": "/src/Tile/RadioTileGroup.svelte",
8770+
"props": [
8771+
{
8772+
"name": "selectedValue",
8773+
"kind": "let",
8774+
"description": "Specify the selected tile value",
8775+
"type": "string",
8776+
"isFunction": false,
8777+
"constant": false,
8778+
"reactive": true
8779+
},
8780+
{
8781+
"name": "disabled",
8782+
"kind": "let",
8783+
"description": "Set to `true` to disable the tile group",
8784+
"type": "boolean",
8785+
"value": "false",
8786+
"isFunction": false,
8787+
"constant": false,
8788+
"reactive": false
8789+
},
8790+
{
8791+
"name": "light",
8792+
"kind": "let",
8793+
"description": "Set to `true` to enable the light variant",
8794+
"type": "boolean",
8795+
"value": "false",
8796+
"isFunction": false,
8797+
"constant": false,
8798+
"reactive": false
8799+
},
8800+
{
8801+
"name": "legend",
8802+
"kind": "let",
8803+
"description": "Specify the legend text",
8804+
"type": "string",
8805+
"value": "\"\"",
8806+
"isFunction": false,
8807+
"constant": false,
8808+
"reactive": false
8809+
}
8810+
],
8811+
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
8812+
"events": [{ "type": "dispatched", "name": "select" }],
8813+
"typedefs": [],
8814+
"rest_props": { "type": "Element", "name": "fieldset" }
8815+
},
8816+
{
8817+
"moduleName": "SelectableTileGroup",
8818+
"filePath": "/src/Tile/SelectableTileGroup.svelte",
8819+
"props": [
8820+
{
8821+
"name": "selectedValues",
8822+
"kind": "let",
8823+
"description": "Specify the selected tile's",
8824+
"type": "string",
8825+
"value": "[]",
8826+
"isFunction": false,
8827+
"constant": false,
8828+
"reactive": true
8829+
},
8830+
{
8831+
"name": "disabled",
8832+
"kind": "let",
8833+
"description": "Set to `true` to disable the tile group",
8834+
"type": "boolean",
8835+
"value": "false",
8836+
"isFunction": false,
8837+
"constant": false,
8838+
"reactive": false
8839+
},
8840+
{
8841+
"name": "light",
8842+
"kind": "let",
8843+
"description": "Set to `true` to enable the light variant",
8844+
"type": "boolean",
8845+
"value": "false",
8846+
"isFunction": false,
8847+
"constant": false,
8848+
"reactive": false
8849+
},
8850+
{
8851+
"name": "legend",
8852+
"kind": "let",
8853+
"description": "Specify the legend text",
8854+
"type": "string",
8855+
"value": "\"\"",
8856+
"isFunction": false,
8857+
"constant": false,
8858+
"reactive": false
8859+
}
8860+
],
8861+
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
8862+
"events": [{ "type": "dispatched", "name": "select" }],
8863+
"typedefs": [],
8864+
"rest_props": { "type": "Element", "name": "fieldset" }
8865+
},
87478866
{
87488867
"moduleName": "TimePicker",
87498868
"filePath": "/src/TimePicker/TimePicker.svelte",

‎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, InlineNotification } 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, SelectableTileGroup } 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)