From 359f99f682e95480de47fb8d23fdeab537605540 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Tue, 31 Dec 2019 15:33:04 -0800
Subject: [PATCH] refactor(selectable-tile): dispatch select, unselect events

Remove on:change event forwarding
---
 src/components/Tile/SelectableTile.svelte | 17 +++++++----------
 src/components/Tile/Tile.Story.svelte     | 16 +++++++++++++++-
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/Tile/SelectableTile.svelte b/src/components/Tile/SelectableTile.svelte
index 55488c60..123d754c 100644
--- a/src/components/Tile/SelectableTile.svelte
+++ b/src/components/Tile/SelectableTile.svelte
@@ -1,15 +1,15 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let selected = false;
-  export let id = Math.random();
-  export let value = 'value';
-  export let title = 'title';
-  export let name = '';
   export let iconDescription = 'Tile checkmark';
-  export let tabindex = '0';
+  export let id = Math.random();
   export let light = false;
+  export let name = '';
+  export let selected = false;
   export let style = undefined;
+  export let tabindex = '0';
+  export let title = 'title';
+  export let value = 'value';
 
   import { createEventDispatcher } from 'svelte';
   import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';
@@ -17,16 +17,13 @@
 
   const dispatch = createEventDispatcher();
 
-  $: if (selected) {
-    dispatch('select', id);
-  }
+  $: dispatch(selected ? 'select' : 'deselect', id);
 </script>
 
 <input
   type="checkbox"
   tabindex="-1"
   class={cx('--tile-input')}
-  on:change
   checked={selected}
   {id}
   {value}
diff --git a/src/components/Tile/Tile.Story.svelte b/src/components/Tile/Tile.Story.svelte
index df08a77e..e581580f 100644
--- a/src/components/Tile/Tile.Story.svelte
+++ b/src/components/Tile/Tile.Story.svelte
@@ -18,6 +18,8 @@
   ];
 
   let selected = radioTiles[1].value;
+
+  let selectedTile1 = false;
 </script>
 
 <Layout>
@@ -28,7 +30,19 @@
       <ClickableTile {...$$props}>Clickable Tile</ClickableTile>
     {:else if story === 'multi-select'}
       <div role="group" aria-label="selectable tiles">
-        <SelectableTile {...$$props} id="tile-1" name="tiles">Multi-select Tile</SelectableTile>
+        <SelectableTile
+          {...$$props}
+          id="tile-1"
+          name="tiles"
+          bind:selected={selectedTile1}
+          on:select={({ detail }) => {
+            console.log('on:select', detail);
+          }}
+          on:deselect={({ detail }) => {
+            console.log('on:deselect', detail);
+          }}>
+          Multi-select Tile
+        </SelectableTile>
         <SelectableTile {...$$props} id="tile-2" name="tiles">Multi-select Tile</SelectableTile>
         <SelectableTile {...$$props} id="tile-3" name="tiles">Multi-select Tile</SelectableTile>
       </div>