carbon-design-system · ispyinternet · Nov 27, 2020 · Nov 27, 2020 · Nov 27, 2020 · Nov 27, 2020
diff --git a/COMPONENT_INDEX.md b/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>string</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,29 @@ None.
 | mouseleave | forwarded | --     |
 | keydown    | forwarded | --     |
 
+## `SelectableTileGroup`
+
+### Props
+
+| Prop name      | Kind             | Reactive | Type                 | Default value      | Description                               |
+| :------------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
+| selectedValues | <code>let</code> | Yes      | <code>string</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   |
+| light          | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
+| 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

diff --git a/docs/src/COMPONENT_API.json b/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,95 @@
       "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": "string",
+          "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": "string",
+          "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": "light",
+          "kind": "let",
+          "description": "Set to `true` to enable the light variant",
+          "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",

diff --git a/docs/src/pages/components/RadioTile.svx b/docs/src/pages/components/RadioTile.svx
@@ -1,36 +1,42 @@
 ---
-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>
 
+<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>
+
 ### Default
 
-<TileGroup legend="Service pricing tiers">
+<RadioTileGroup legend="Service pricing tiers">
   <RadioTile value="0" checked>
     Lite plan
   </RadioTile>
   <RadioTile value="1">
     Standard plan
   </RadioTile>
-  <RadioTile value="2">
-    Plus plan
+  <RadioTile light value="2">
+    Plus plan (light variant)
   </RadioTile>
 </TileGroup>
 
 ### Light variant
 
-<TileGroup legend="Service pricing tiers">
-  <RadioTile value="0" checked>
+<RadioTileGroup legend="Service pricing tiers">
+  <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>
diff --git a/docs/src/pages/components/SelectableTile.svx b/docs/src/pages/components/SelectableTile.svx
@@ -1,36 +1,42 @@
 ---
-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" selected>
+    Option 1
   </SelectableTile>
-  <SelectableTile selected>
-    Multi-select Tile
+  <SelectableTile title="Option 2" selected>
+    Option 2
   </SelectableTile>
-  <SelectableTile>
-    Multi-select Tile
+  <SelectableTile title="Option 3">
+    Option 3
+  </SelectableTile>
+    <SelectableTile light title="Option 4">
+    Option 4 (light variant)
   </SelectableTile>
 </div>
 
-### Light variant
+### Multi-selectable tiles with light variant
 
-<div role="group" aria-label="selectable tiles">
-  <SelectableTile light selected>
-    Multi-select Tile
+<SelectableTileGroup  legend="Select the options you require">
+  <SelectableTile light title="Option 1" selected>
+    Option 1
+  </SelectableTile>
+  <SelectableTile light title="Option 2" selected>
+    Option 2
   </SelectableTile>
-  <SelectableTile light selected>
-    Multi-select Tile
+  <SelectableTile light title="Option 3">
+    Option 3
   </SelectableTile>
-  <SelectableTile light>
-    Multi-select Tile
+    <SelectableTile light title="Option 4">
+    Option 4
   </SelectableTile>
-</div>
+</div>
diff --git a/src/DataTableSkeleton/DataTableSkeleton.svelte b/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>