WIP: SelectableTileGroup

carbon-design-system · Nov 30, 2020 · fe5c571 · fe5c571
1 parent 626fd99
commit fe5c571
Show file tree

Hide file tree

Showing 17 changed files with 33,037 additions and 65 deletions.
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             |
+| light           | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to enable the light variant                |
+| checked         | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to check the tile                          |
+| 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,29 @@ 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   |
+| 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 | --     |
+
 ## `Row`
 
 ### Props
@@ -2904,8 +2931,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                                          |
@@ -2929,6 +2956,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",
@@ -8534,7 +8534,7 @@
           "value": "false",
           "isFunction": false,
           "constant": false,
-          "reactive": false
+          "reactive": true
         },
         {
           "name": "title",
@@ -8640,7 +8640,7 @@
           "value": "false",
           "isFunction": false,
           "constant": false,
-          "reactive": false
+          "reactive": true
         },
         {
           "name": "value",
@@ -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,105 @@
       "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": "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": "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,29 +1,35 @@
 ---
-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">
+<RadioTileGroup light legend="Service pricing tiers">
   <RadioTile value="0" checked>
     Lite plan
   </RadioTile>

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" light>
+  <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 light legend="Select the options you require" light>
+  <SelectableTile title="Option 1" selected>
+    Option 1
+  </SelectableTile>
+  <SelectableTile title="Option 2" selected>
+    Option 2
   </SelectableTile>
-  <SelectableTile light selected>
-    Multi-select Tile
+  <SelectableTile title="Option 3£>
+    Option 3
   </SelectableTile>
-  <SelectableTile light>
-    Multi-select Tile
+    <SelectableTile title="Option 4£>
+    Option 4
   </SelectableTile>
-</div>
+</div>