WIP: SelectableTileGroup

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 155 components exported from [email protected].
+> 156 components exported from [email protected].
 
 ## Components
 
@@ -105,6 +105,7 @@
 - [`SelectItemGroup`](#selectitemgroup)
 - [`SelectSkeleton`](#selectskeleton)
 - [`SelectableTile`](#selectabletile)
+- [`SelectableTileGroup`](#selectabletilegroup)
 - [`SideNav`](#sidenav)
 - [`SideNavItems`](#sidenavitems)
 - [`SideNavLink`](#sidenavlink)
@@ -2904,8 +2905,8 @@ None.
 | Prop name       | Kind             | Reactive | Type                                      | Default value                                    | Description                                                   |
 | :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
 | ref             | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element                  |
+| light           | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to enable the light variant                     |
 | selected        | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to select the tile                              |
-| light           | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to enable the light variant                     |
 | title           | <code>let</code> | No       | <code>string</code>                       | <code>"title"</code>                             | Specify the title of the selectable tile                      |
 | value           | <code>let</code> | No       | <code>string</code>                       | <code>"value"</code>                             | Specify the value of the selectable tile                      |
 | tabindex        | <code>let</code> | No       | <code>string</code>                       | <code>"0"</code>                                 | Specify the tabindex                                          |
@@ -2923,11 +2924,35 @@ None.
 
 | Event name | Type      | Detail |
 | :--------- | :-------- | :----- |
+| change     | forwarded | --     |
+| keydown    | forwarded | --     |
 | click      | forwarded | --     |
 | mouseover  | forwarded | --     |
 | mouseenter | forwarded | --     |
 | mouseleave | forwarded | --     |
-| keydown    | forwarded | --     |
+
+## `SelectableTileGroup`
+
+### Props
+
+| Prop name      | Kind             | Reactive | Type                 | Default value      | Description                                                    |
+| :------------- | :--------------- | :------- | :------------------- | ------------------ | -------------------------------------------------------------- |
+| selectedValues | <code>let</code> | Yes      | <code>any[]</code>   | <code>[]</code>    | Specify the selected tile's                                    |
+| disabled       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile group                        |
+| legend         | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the legend text                                        |
+| light          | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant throughout the group |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+| Event name | Type       | Detail |
+| :--------- | :--------- | :----- |
+| select     | dispatched | --     |
 
 ## `SideNav`
 

docs/src/COMPONENT_API.json

@@ -1,5 +1,5 @@
 {
-  "total": 155,
+  "total": 156,
   "components": [
     {
       "moduleName": "SkeletonText",
@@ -8534,7 +8534,7 @@
           "value": "false",
           "isFunction": false,
           "constant": false,
-          "reactive": false
+          "reactive": true
         },
         {
           "name": "title",
@@ -8609,11 +8609,12 @@
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [
+        { "type": "forwarded", "name": "change", "element": "input" },
+        { "type": "forwarded", "name": "keydown", "element": "input" },
         { "type": "forwarded", "name": "click", "element": "label" },
         { "type": "forwarded", "name": "mouseover", "element": "label" },
         { "type": "forwarded", "name": "mouseenter", "element": "label" },
-        { "type": "forwarded", "name": "mouseleave", "element": "label" },
-        { "type": "forwarded", "name": "keydown", "element": "label" }
+        { "type": "forwarded", "name": "mouseleave", "element": "label" }
       ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "label" }
@@ -8744,6 +8745,56 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "fieldset" }
     },
+    {
+      "moduleName": "SelectableTileGroup",
+      "filePath": "/src/Tile/SelectableTileGroup.svelte",
+      "props": [
+        {
+          "name": "selectedValues",
+          "kind": "let",
+          "description": "Specify the selected tile's",
+          "type": "any[]",
+          "value": "[]",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "disabled",
+          "kind": "let",
+          "description": "Set to `true` to disable the tile group",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "legend",
+          "kind": "let",
+          "description": "Specify the legend text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "light",
+          "kind": "let",
+          "description": "Set to `true` to enable the light variant throughout the group",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [{ "type": "dispatched", "name": "select" }],
+      "typedefs": [],
+      "rest_props": { "type": "Element", "name": "fieldset" }
+    },
     {
       "moduleName": "TimePicker",
       "filePath": "/src/TimePicker/TimePicker.svelte",

docs/src/pages/components/RadioTile.svx

@@ -7,6 +7,7 @@ components: ["TileGroup", "RadioTile"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
+
 ### Default
 
 <TileGroup legend="Service pricing tiers">
@@ -24,13 +25,13 @@ components: ["TileGroup", "RadioTile"]
 ### Light variant
 
 <TileGroup legend="Service pricing tiers">
-  <RadioTile value="0" checked>
+  <RadioTile light value="0" checked>
     Lite plan
   </RadioTile>
-  <RadioTile value="1">
+  <RadioTile light value="1">
     Standard plan
   </RadioTile>
-  <RadioTile value="2">
+  <RadioTile light value="2">
     Plus plan
   </RadioTile>
-</TileGroup>
+</TileGroup>

docs/src/pages/components/SelectableTile.svx

@@ -1,36 +1,36 @@
 ---
-components: ["SelectableTile"]
+components: ["SelectableTile", "SelectableTileGroup"]
 ---
 
 <script>
-  import { SelectableTile } from "carbon-components-svelte";
+  import { SelectableTile, SelectableTileGroup } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Multi-selectable tiles
+### Default
 
-<div role="group" aria-label="selectable tiles">
-  <SelectableTile selected>
-    Multi-select Tile
+<SelectableTileGroup legend="Select the options you require">
+  <SelectableTile title="Option 1" value="option1" selected>
+    Option 1
   </SelectableTile>
-  <SelectableTile selected>
-    Multi-select Tile
+  <SelectableTile title="Option 2" value="2" selected>
+    Option 2
   </SelectableTile>
-  <SelectableTile>
-    Multi-select Tile
+  <SelectableTile light title="Option 3" value="3">
+    Option 3 (light variant)
   </SelectableTile>
-</div>
+</SelectableTileGroup>
 
 ### Light variant
 
-<div role="group" aria-label="selectable tiles">
-  <SelectableTile light selected>
-    Multi-select Tile
+<SelectableTileGroup light legend="Select the options you require">
+  <SelectableTile title="Option 1" value="1" selected>
+    Option 1
   </SelectableTile>
-  <SelectableTile light selected>
-    Multi-select Tile
+  <SelectableTile title="Option 2" value="2" selected>
+    Option 2
   </SelectableTile>
-  <SelectableTile light>
-    Multi-select Tile
+  <SelectableTile title="Option 3" value="3">
+    Option 3
   </SelectableTile>
-</div>
+</SelectableTileGroup>

docs/src/pages/framed/SelectableTile/SelectableTileReactive.svelte

@@ -0,0 +1,116 @@
+<script>
+  import {
+    SelectableTileGroup,
+    SelectableTile,
+    Button,
+  } from "carbon-components-svelte";
+
+  let selectedValues = ["1"];
+  let selectedValues2 = [];
+  let selectedValues3 = ["1", "3"];
+  let selectedValues3_control = [
+    { value: "1", selected: true },
+    { value: "2", selected: false },
+    { value: "3", selected: false },
+  ];
+</script>
+
+<SelectableTileGroup
+  bind:selectedValues
+  legend="Select the options you require"
+>
+  <SelectableTile title="Option 1" value="1">Option 1</SelectableTile>
+  <SelectableTile title="Option 2" value="2">Option 2</SelectableTile>
+  <SelectableTile title="Option 3" value="3">
+    Option 3 (light variant)
+  </SelectableTile>
+</SelectableTileGroup>
+
+<div>
+  {selectedValues.join(', ')}
+
+  <Button
+    on:click="{() => {
+      selectedValues = [];
+    }}"
+  >
+    Reset selectedValues
+  </Button>
+</div>
+
+<SelectableTileGroup
+  bind:selectedValues="{selectedValues2}"
+  legend="Select the options you require"
+>
+  <SelectableTile title="Option 1" value="1">Option 1</SelectableTile>
+  <SelectableTile title="Option 2" value="2" selected>Option 2</SelectableTile>
+  <SelectableTile title="Option 3" selected value="3">
+    Option 3 (light variant)
+  </SelectableTile>
+</SelectableTileGroup>
+
+<div>
+  {selectedValues2.join(', ')}
+
+  <Button
+    on:click="{() => {
+      selectedValues2 = [];
+    }}"
+  >
+    Reset selectedValues2
+  </Button>
+</div>
+
+<SelectableTileGroup
+  bind:selectedValues="{selectedValues3}"
+  legend="Select the options you require"
+>
+  {#each selectedValues3_control as item}
+    <SelectableTile value="{item.value}" selected="{item.selected}">
+      {item.value}
+    </SelectableTile>
+  {/each}
+</SelectableTileGroup>
+
+<div>
+  {selectedValues3.join(', ')}
+
+  <Button
+    on:click="{() => {
+      selectedValues3_control = selectedValues3_control.map((item) => {
+        return { ...item, selected: false };
+      });
+    }}"
+  >
+    Reset selectedValues3
+  </Button>
+</div>
+
+<h2>#key fix</h2>
+
+<SelectableTileGroup
+  bind:selectedValues="{selectedValues3}"
+  legend="Select the options you require"
+>
+  {#key selectedValues3_control}
+    {#each selectedValues3_control as item}
+      <SelectableTile value="{item.value}" selected="{item.selected}">
+        {item.value}
+      </SelectableTile>
+    {/each}
+  {/key}
+</SelectableTileGroup>
+
+<div>
+  {selectedValues3.join(', ')}
+
+  <Button
+    on:click="{() => {
+      selectedValues3_control = selectedValues3_control.map((item) => {
+        return { ...item, selected: false };
+      });
+    }}"
+  >
+    Reset selectedValues3
+  </Button>
+</div>

src/DataTableSkeleton/DataTableSkeleton.svelte

@@ -66,11 +66,11 @@
     class:bx--data-table--short="{size === 'short'}"
     class:bx--data-table--tall="{size === 'tall'}"
     class:bx--data-table--zebra="{zebra}"
-    {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
     on:mouseleave
+    {...$$restProps}
   >
     <thead>
       <tr>