Merge 7373aa30c5 into a9e63e0038

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 155 components exported from carbon-components-svelte@0.25.1.
+> 156 components exported from carbon-components-svelte@0.25.1.
 
 ## Components
 
@@ -105,6 +105,7 @@
 - [`SelectItemGroup`](#selectitemgroup)
 - [`SelectSkeleton`](#selectskeleton)
 - [`SelectableTile`](#selectabletile)
+- [`SelectableTileGroup`](#selectabletilegroup)
 - [`SideNav`](#sidenav)
 - [`SideNavItems`](#sidenavitems)
 - [`SideNavLink`](#sidenavlink)
@@ -2905,8 +2906,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                                          |
@@ -2924,11 +2925,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",
@@ -8563,7 +8563,7 @@
           "value": "false",
           "isFunction": false,
           "constant": false,
-          "reactive": false
+          "reactive": true
         },
         {
           "name": "title",
@@ -8638,11 +8638,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" }
@@ -8773,6 +8774,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>

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

@@ -74,6 +74,7 @@
     on:mouseover
     on:mouseenter
     on:mouseleave
+    {...$$restProps}
   >
     <thead>
       <tr>

src/Tile/SelectableTile.svelte

@@ -29,47 +29,53 @@
   /** Obtain a reference to the input HTML element */
   export let ref = null;
 
-  import { createEventDispatcher } from "svelte";
+  import { getContext, onDestroy } from "svelte";
   import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
 
-  const dispatch = createEventDispatcher();
+  const { update, selectedValues, _light } = getContext("SelectableTileGroup");
 
-  $: dispatch(selected ? "select" : "deselect", id);
+  $: update({ value, selected });
+
+  light = light || _light;
+
+  $: selected = $selectedValues.indexOf(value) > -1;
+
+  onDestroy(() => {
+    update({ value, selected: false });
+  });
 </script>
 
 <input
   bind:this="{ref}"
   type="checkbox"
-  tabindex="-1"
+  tabindex="{tabindex}"
   class:bx--tile-input="{true}"
   checked="{selected}"
   id="{id}"
   value="{value}"
   name="{name}"
   title="{title}"
+  on:change
+  on:change="{() => update({ value, selected: !selected })}"
+  on:keydown
+  on:keydown="{(e) => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      update({ value, selected: !selected });
+    }
+  }}"
 />
 <label
   for="{id}"
-  tabindex="{tabindex}"
   class:bx--tile="{true}"
   class:bx--tile--selectable="{true}"
   class:bx--tile--is-selected="{selected}"
   class:bx--tile--light="{light}"
   {...$$restProps}
   on:click
-  on:click|preventDefault="{() => {
-    selected = !selected;
-  }}"
   on:mouseover
   on:mouseenter
   on:mouseleave
-  on:keydown
-  on:keydown="{(e) => {
-    if (e.key === ' ' || e.key === 'Enter') {
-      e.preventDefault();
-      selected = !selected;
-    }
-  }}"
 >
   <span class:bx--tile__checkmark="{true}">
     <CheckmarkFilled16

src/Tile/SelectableTileGroup.svelte

@@ -0,0 +1,54 @@
+<script>
+  /**
+   * Specify the selected tile's
+   * @type {any[]}
+   */
+  export let selectedValues = [];
+
+  /** Set to `true` to disable the tile group */
+  export let disabled = false;
+
+  /** Specify the legend text */
+  export let legend = "";
+
+  /** Set to `true` to enable the light variant throughout the group */
+  export let light = false;
+
+  import { createEventDispatcher, setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  const dispatch = createEventDispatcher();
+  const _selectedValues = writable(selectedValues);
+
+  $: _selectedValues.set(selectedValues);
+
+  setContext("SelectableTileGroup", {
+    _light: light,
+    selectedValues: _selectedValues,
+    update: ({ selected, value }) =>
+      _selectedValues.update((values) => {
+        if (values.includes(value) && !selected) {
+          return values.filter((i) => i !== value);
+        } else if (selected && !values.includes(value)) {
+          return [...values, value];
+        }
+        return values;
+      }),
+  });
+
+  $: selectedValues = $_selectedValues;
+  $: dispatch("select", $_selectedValues);
+</script>
+
+<fieldset disabled="{disabled}" class:bx--tile-group="{true}" {...$$restProps}>
+  {#if legend}
+    <legend class:bx--label="{true}">{legend}</legend>
+  {/if}
+  <div
+    role="group"
+    aria-label="{$$props['aria-label'] || 'Selectable tiles'}"
+    data-selected="{selectedValues}"
+  >
+    <slot />
+  </div>
+</fieldset>

src/Tile/index.js

@@ -4,3 +4,4 @@ export { default as ExpandableTile } from "./ExpandableTile.svelte";
 export { default as SelectableTile } from "./SelectableTile.svelte";
 export { default as RadioTile } from "./RadioTile.svelte";
 export { default as TileGroup } from "./TileGroup.svelte";
+export { default as SelectableTileGroup } from "./SelectableTileGroup.svelte";

src/index.js

@@ -107,6 +107,7 @@ export {
   SelectableTile,
   RadioTile,
   TileGroup,
+  SelectableTileGroup,
 } from "./Tile";
 export { TimePicker, TimePickerSelect } from "./TimePicker";
 export { Toggle, ToggleSkeleton } from "./Toggle";

tests/RadioTile.test.svelte

@@ -7,9 +7,3 @@
   <RadioTile value="1">Standard plan</RadioTile>
   <RadioTile value="2">Plus plan</RadioTile>
 </TileGroup>
-
-<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>

tests/SelectableTile.test.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-  import { SelectableTile } from "../types";
+  import { SelectableTileGroup, SelectableTile } from "../types";
 </script>
 
-<SelectableTile selected>Multi-select Tile</SelectableTile>
+<SelectableTileGroup legend="Service pricing tiers">
+  <SelectableTile value="0" selected>Lite plan</SelectableTile>
+  <SelectableTile value="1">Standard plan</SelectableTile>
+  <SelectableTile light value="2">Plus plan</SelectableTile>
+</SelectableTileGroup>
 
-<SelectableTile selected>Multi-select Tile</SelectableTile>
-
-<SelectableTile>Multi-select Tile</SelectableTile>
-
-<SelectableTile light selected>Multi-select Tile</SelectableTile>
-
-<SelectableTile light selected>Multi-select Tile</SelectableTile>
-
-<SelectableTile light>Multi-select Tile</SelectableTile>
+<SelectableTileGroup light legend="Service pricing tiers">
+  <SelectableTile value="0" selected>Lite plan</SelectableTile>
+  <SelectableTile value="1">Standard plan</SelectableTile>
+  <SelectableTile value="2">Plus plan</SelectableTile>
+</SelectableTileGroup>

types/Tile/SelectableTile.d.ts

@@ -62,10 +62,11 @@ export default class SelectableTile {
     default: {};
   };
 
+  $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
+  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
   $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
   $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
   $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
-  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
   $on(eventname: string, cb: (event: Event) => void): () => void;
 }

types/Tile/SelectableTileGroup.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="svelte" />
+
+export interface SelectableTileGroupProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["fieldset"]> {
+  /**
+   * Specify the selected tile's
+   * @default []
+   */
+  selectedValues?: any[];
+
+  /**
+   * Set to `true` to disable the tile group
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the legend text
+   * @default ""
+   */
+  legend?: string;
+
+  /**
+   * Set to `true` to enable the light variant throughout the group
+   * @default false
+   */
+  light?: boolean;
+}
+
+export default class SelectableTileGroup {
+  $$prop_def: SelectableTileGroupProps;
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "select", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/index.d.ts

@@ -123,6 +123,7 @@ export { default as ExpandableTile } from "./Tile/ExpandableTile";
 export { default as SelectableTile } from "./Tile/SelectableTile";
 export { default as RadioTile } from "./Tile/RadioTile";
 export { default as TileGroup } from "./Tile/TileGroup";
+export { default as SelectableTileGroup } from "./Tile/SelectableTileGroup";
 export { default as TimePicker } from "./TimePicker/TimePicker";
 export { default as TimePickerSelect } from "./TimePicker/TimePickerSelect";
 export { default as Toggle } from "./Toggle/Toggle";