feat(tile): support disabled state for SelectableTile, RadioTile

Closes #539

Author: metonym

COMPONENT_INDEX.md

@@ -2946,6 +2946,7 @@ None.
 | :-------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | -------------------------------------------------------- |
 | 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                |
+| disabled        | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to disable the tile                        |
 | 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 |
@@ -3159,6 +3160,7 @@ None.
 | ref             | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element                  |
 | 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                     |
+| disabled        | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to disable the tile                             |
 | 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                                          |

docs/src/COMPONENT_API.json

@@ -7523,6 +7523,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "disabled",
+          "kind": "let",
+          "description": "Set to `true` to disable the tile",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "value",
           "kind": "let",
@@ -8176,6 +8186,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "disabled",
+          "kind": "let",
+          "description": "Set to `true` to disable the tile",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "title",
           "kind": "let",

docs/src/pages/components/RadioTile.svx

@@ -33,4 +33,18 @@ components: ["TileGroup", "RadioTile"]
   <RadioTile light value="2">
     Plus plan
   </RadioTile>
+</TileGroup>
+
+### Disabled state
+
+<TileGroup legend="Service pricing tiers">
+  <RadioTile value="0" checked>
+    Lite plan
+  </RadioTile>
+  <RadioTile value="1" disabled>
+    Standard plan
+  </RadioTile>
+  <RadioTile value="2" disabled>
+    Plus plan
+  </RadioTile>
 </TileGroup>

docs/src/pages/components/SelectableTile.svx

@@ -33,4 +33,18 @@ components: ["SelectableTile"]
   <SelectableTile light>
     Multi-select Tile
   </SelectableTile>
+</div>
+
+### Disabled state
+
+<div role="group" aria-label="selectable tiles">
+  <SelectableTile selected>
+    Multi-select Tile
+  </SelectableTile>
+  <SelectableTile disabled>
+    Multi-select Tile
+  </SelectableTile>
+  <SelectableTile disabled>
+    Multi-select Tile
+  </SelectableTile>
 </div>

src/Tile/RadioTile.svelte

@@ -5,6 +5,9 @@
   /** Set to `true` to enable the light variant */
   export let light = false;
 
+  /** Set to `true` to disable the tile */
+  export let disabled = false;
+
   /** Specify the value of the radio input */
   export let value = "";
 
@@ -21,7 +24,7 @@
   export let name = "";
 
   import { getContext } from "svelte";
-  import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
+  import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16/CheckmarkFilled16.svelte";
 
   const { add, update, selectedValue } = getContext("TileGroup");
 
@@ -36,14 +39,17 @@
   name="{name}"
   value="{value}"
   checked="{checked}"
-  tabindex="{tabindex}"
+  tabindex="{disabled ? undefined : tabindex}"
+  disabled="{disabled}"
   class:bx--tile-input="{true}"
   on:change
   on:change="{() => {
+    if (disabled) return;
     update(value);
   }}"
   on:keydown
   on:keydown="{(e) => {
+    if (disabled) return;
     if (e.key === ' ' || e.key === 'Enter') {
       e.preventDefault();
       update(value);
@@ -56,6 +62,7 @@
   class:bx--tile--selectable="{true}"
   class:bx--tile--is-selected="{checked}"
   class:bx--tile--light="{light}"
+  class:bx--tile--disabled="{disabled}"
   {...$$restProps}
   on:click
   on:mouseover

src/Tile/SelectableTile.svelte

@@ -5,6 +5,9 @@
   /** Set to `true` to enable the light variant */
   export let light = false;
 
+  /** Set to `true` to disable the tile */
+  export let disabled = false;
+
   /** Specify the title of the selectable tile */
   export let title = "title";
 
@@ -30,11 +33,11 @@
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";
-  import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
+  import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16/CheckmarkFilled16.svelte";
 
   const dispatch = createEventDispatcher();
 
-  $: dispatch(selected ? "select" : "deselect", id);
+  $: if (!disabled) dispatch(selected ? "select" : "deselect", id);
 </script>
 
 <input
@@ -47,24 +50,28 @@
   value="{value}"
   name="{name}"
   title="{title}"
+  disabled="{disabled}"
 />
 <label
   for="{id}"
-  tabindex="{tabindex}"
+  tabindex="{disabled ? undefined : tabindex}"
   class:bx--tile="{true}"
   class:bx--tile--selectable="{true}"
   class:bx--tile--is-selected="{selected}"
   class:bx--tile--light="{light}"
+  class:bx--tile--disabled="{disabled}"
   {...$$restProps}
   on:click
   on:click|preventDefault="{() => {
+    if (disabled) return;
     selected = !selected;
   }}"
   on:mouseover
   on:mouseenter
   on:mouseleave
   on:keydown
   on:keydown="{(e) => {
+    if (disabled) return;
     if (e.key === ' ' || e.key === 'Enter') {
       e.preventDefault();
       selected = !selected;

types/Tile/RadioTile.d.ts

@@ -15,6 +15,12 @@ export interface RadioTileProps
    */
   light?: boolean;
 
+  /**
+   * Set to `true` to disable the tile
+   * @default false
+   */
+  disabled?: boolean;
+
   /**
    * Specify the value of the radio input
    * @default ""

types/Tile/SelectableTile.d.ts

@@ -15,6 +15,12 @@ export interface SelectableTileProps
    */
   light?: boolean;
 
+  /**
+   * Set to `true` to disable the tile
+   * @default false
+   */
+  disabled?: boolean;
+
   /**
    * Specify the title of the selectable tile
    * @default "title"