WIP: SelectableTileGroup

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 155 components exported from [email protected].
+> 157 components exported from [email protected].
 
 ## Components
 
@@ -97,6 +97,7 @@
 - [`RadioButtonGroup`](#radiobuttongroup)
 - [`RadioButtonSkeleton`](#radiobuttonskeleton)
 - [`RadioTile`](#radiotile)
+- [`RadioTileGroup`](#radiotilegroup)
 - [`Row`](#row)
 - [`Search`](#search)
 - [`SearchSkeleton`](#searchskeleton)
@@ -105,6 +106,7 @@
 - [`SelectItemGroup`](#selectitemgroup)
 - [`SelectSkeleton`](#selectskeleton)
 - [`SelectableTile`](#selectabletile)
+- [`SelectableTileGroup`](#selectabletilegroup)
 - [`SideNav`](#sidenav)
 - [`SideNavItems`](#sidenavitems)
 - [`SideNavLink`](#sidenavlink)
@@ -2692,15 +2694,17 @@ None.
 
 ### Props
 
-| Prop name       | Kind             | Reactive | Type                 | Default value                                    | Description                                              |
-| :-------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | -------------------------------------------------------- |
-| checked         | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>                               | Set to `true` to check the tile                          |
-| light           | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to enable the light variant                |
-| value           | <code>let</code> | No       | <code>string</code>  | <code>""</code>                                  | Specify the value of the radio input                     |
-| tabindex        | <code>let</code> | No       | <code>string</code>  | <code>"0"</code>                                 | Specify the tabindex                                     |
-| iconDescription | <code>let</code> | No       | <code>string</code>  | <code>"Tile checkmark"</code>                    | Specify the ARIA label for the radio tile checkmark icon |
-| id              | <code>let</code> | No       | <code>string</code>  | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                          |
-| name            | <code>let</code> | No       | <code>string</code>  | <code>""</code>                                  | Specify a name attribute for the input                   |
+| 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             |
+| checked         | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to check the tile                          |
+| light           | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to enable the light variant                |
+| value           | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the value of the radio input                     |
+| title           | <code>let</code> | No       | <code>string</code>                       | <code>"title"</code>                             | Specify the title of the selectable tile                 |
+| tabindex        | <code>let</code> | No       | <code>string</code>                       | <code>"0"</code>                                 | Specify the tabindex                                     |
+| iconDescription | <code>let</code> | No       | <code>string</code>                       | <code>"Tile checkmark"</code>                    | Specify the ARIA label for the radio tile checkmark icon |
+| id              | <code>let</code> | No       | <code>string</code>                       | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                          |
+| name            | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify a name attribute for the input                   |
 
 ### Slots
 
@@ -2719,6 +2723,28 @@ None.
 | mouseenter | forwarded | --     |
 | mouseleave | forwarded | --     |
 
+## `RadioTileGroup`
+
+### Props
+
+| Prop name     | Kind             | Reactive | Type                 | Default value      | Description                             |
+| :------------ | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- |
+| selectedValue | <code>let</code> | Yes      | <code>any</code>     | --                 | Specify the selected tile value         |
+| 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                 |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+| Event name | Type       | Detail |
+| :--------- | :--------- | :----- |
+| select     | dispatched | --     |
+
 ## `Row`
 
 ### Props
@@ -2929,6 +2955,28 @@ None.
 | 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                 |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+| Event name | Type       | Detail |
+| :--------- | :--------- | :----- |
+| select     | dispatched | --     |
+
 ## `SideNav`
 
 ### Props

docs/src/COMPONENT_API.json

@@ -1,5 +1,5 @@
 {
-  "total": 155,
+  "total": 157,
   "components": [
     {
       "moduleName": "SkeletonText",
@@ -8652,6 +8652,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "title",
+          "kind": "let",
+          "description": "Specify the title of the selectable tile",
+          "type": "string",
+          "value": "\"title\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "tabindex",
           "kind": "let",
@@ -8691,6 +8701,16 @@
           "isFunction": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "ref",
+          "kind": "let",
+          "description": "Obtain a reference to the input HTML element",
+          "type": "null | HTMLInputElement",
+          "value": "null",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
         }
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
@@ -8744,6 +8764,85 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "fieldset" }
     },
+    {
+      "moduleName": "RadioTileGroup",
+      "filePath": "/src/Tile/RadioTileGroup.svelte",
+      "props": [
+        {
+          "name": "selectedValue",
+          "kind": "let",
+          "description": "Specify the selected tile value",
+          "type": "any",
+          "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
+        }
+      ],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [{ "type": "dispatched", "name": "select" }],
+      "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
+        }
+      ],
+      "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

@@ -1,29 +1,21 @@
 ---
-components: ["TileGroup", "RadioTile"]
+components: ["RadioTileGroup", "RadioTile"]
 ---
 
 <script>
-  import { TileGroup, RadioTile } from "carbon-components-svelte";
+  import { RadioTileGroup, RadioTile, InlineNotification } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
-
-<TileGroup legend="Service pricing tiers">
-  <RadioTile value="0" checked>
-    Lite plan
-  </RadioTile>
-  <RadioTile value="1">
-    Standard plan
-  </RadioTile>
-  <RadioTile value="2">
-    Plus plan
-  </RadioTile>
-</TileGroup>
+<InlineNotification svx-ignore title="Deprecation warning:" kind="warning" hideCloseButton>
+  <div>
+    The TileGroup component will be removed in favour of the RadioTileGroup component in the next major release.
+  </div>
+</InlineNotification>
 
-### Light variant
+### Default
 
-<TileGroup legend="Service pricing tiers">
+<RadioTileGroup legend="Service pricing tiers">
   <RadioTile value="0" checked>
     Lite plan
   </RadioTile>
@@ -33,4 +25,4 @@ components: ["TileGroup", "RadioTile"]
   <RadioTile value="2">
     Plus plan
   </RadioTile>
-</TileGroup>
+</RadioTileGroup>

docs/src/pages/components/SelectableTile.svx

@@ -1,36 +1,22 @@
 ---
-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
 
-<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 title="Option 3" value="3">
+    Option 3
   </SelectableTile>
-</div>
-
-### Light variant
-
-<div role="group" aria-label="selectable tiles">
-  <SelectableTile light selected>
-    Multi-select Tile
-  </SelectableTile>
-  <SelectableTile light selected>
-    Multi-select Tile
-  </SelectableTile>
-  <SelectableTile light>
-    Multi-select Tile
-  </SelectableTile>
-</div>
+</SelectableTileGroup>

src/DataTableSkeleton/DataTableSkeleton.svelte

@@ -60,17 +60,18 @@
     </section>
   {/if}
   <table
+    {...$$restProps}
     class:bx--skeleton="{true}"
     class:bx--data-table="{true}"
     class:bx--data-table--compact="{size === 'compact'}"
     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>

src/Tile/RadioTile.svelte

@@ -8,6 +8,9 @@
   /** Specify the value of the radio input */
   export let value = "";
 
+  /** Specify the title of the selectable tile */
+  export let title = "title";
+
   /** Specify the tabindex */
   export let tabindex = "0";
 
@@ -20,24 +23,29 @@
   /** Specify a name attribute for the input */
   export let name = "";
 
+  /** Obtain a reference to the input HTML element */
+  export let ref = null;
+
   import { getContext } from "svelte";
   import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
 
-  const { add, update, selectedValue } = getContext("TileGroup");
+  const { add, update, selectedValue } = getContext("RadioTileGroup");
 
   add({ value, checked });
 
   $: checked = value === $selectedValue;
 </script>
 
 <input
+  bind:this="{ref}"
   type="radio"
   id="{id}"
   name="{name}"
   value="{value}"
   checked="{checked}"
-  tabindex="{tabindex}"
+  tabindex="-1"
   class:bx--tile-input="{true}"
+  title="{title}"
   on:change
   on:change="{() => {
     update(value);
@@ -52,6 +60,7 @@
 />
 <label
   for="{id}"
+  tabindex="{tabindex}"
   class:bx--tile="{true}"
   class:bx--tile--selectable="{true}"
   class:bx--tile--is-selected="{checked}"