From 95a4ead0e34f7236b42a8b4a9130b6d8e650a1ae Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 20 Dec 2019 17:28:33 -0800
Subject: [PATCH 1/2] fix(password-input): mark passwordIsVisible as reactive

---
 src/components/TextInput/PasswordInput.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TextInput/PasswordInput.svelte b/src/components/TextInput/PasswordInput.svelte
index d6b76eb3..2343a1ae 100644
--- a/src/components/TextInput/PasswordInput.svelte
+++ b/src/components/TextInput/PasswordInput.svelte
@@ -26,7 +26,6 @@
 
   const dispatch = createEventDispatcher();
   const errorId = `${id}-error`;
-  const passwordIsVisible = type === 'text';
   const _labelClass = cx(
     '--label',
     hideLabel && '--visually-hidden',
@@ -48,6 +47,7 @@
     tooltipPosition && `--tooltip--${tooltipPosition}`,
     tooltipAlignment && `--tooltip--align-${tooltipAlignment}`
   );
+  $: passwordIsVisible = type === 'text';
 </script>
 
 <div class={cx('--form-item', '--text-input-wrapper', '--password-input-wrapper')}>

From 865aeb07485ec72278e90aff2595f86763538536 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 20 Dec 2019 17:34:47 -0800
Subject: [PATCH 2/2] refactor(text-input): remove dispatch, forward events

Supports #7

- Forward events, inline functions
- Add style prop
- Remove exported props
- Bind value for TextInput
---
 src/components/TextInput/PasswordInput.svelte | 25 +++++--------------
 .../TextInput/TextInput.Skeleton.svelte       |  4 +--
 .../TextInput/TextInput.Story.svelte          |  7 +++++-
 src/components/TextInput/TextInput.svelte     | 22 +++-------------
 4 files changed, 18 insertions(+), 40 deletions(-)

diff --git a/src/components/TextInput/PasswordInput.svelte b/src/components/TextInput/PasswordInput.svelte
index 2343a1ae..ac98245b 100644
--- a/src/components/TextInput/PasswordInput.svelte
+++ b/src/components/TextInput/PasswordInput.svelte
@@ -16,15 +16,13 @@
   export let tooltipAlignment = 'center';
   export let hidePasswordLabel = 'Hide password';
   export let showPasswordLabel = 'Show password';
-  export let props = {};
+  export let style = undefined;
 
-  import { createEventDispatcher } from 'svelte';
   import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
   import View16 from 'carbon-icons-svelte/lib/View16';
   import ViewOff16 from 'carbon-icons-svelte/lib/ViewOff16';
   import { cx } from '../../lib';
 
-  const dispatch = createEventDispatcher();
   const errorId = `${id}-error`;
   const _labelClass = cx(
     '--label',
@@ -47,14 +45,14 @@
     tooltipPosition && `--tooltip--${tooltipPosition}`,
     tooltipAlignment && `--tooltip--align-${tooltipAlignment}`
   );
+
   $: passwordIsVisible = type === 'text';
 </script>
 
-<div class={cx('--form-item', '--text-input-wrapper', '--password-input-wrapper')}>
+<div class={cx('--form-item', '--text-input-wrapper', '--password-input-wrapper')} {style}>
   {#if labelText}
     <label for={id} class={_labelClass}>{labelText}</label>
   {/if}
-
   {#if helperText}
     <div class={_helperTextClass}>{helperText}</div>
   {/if}
@@ -63,23 +61,12 @@
       <WarningFilled16 class={cx('--text-input__invalid-icon')} />
     {/if}
     <input
-      {...props}
       class={_textInputClass}
-      on:click={event => {
-        if (!disabled) {
-          dispatch('click', event);
-        }
-      }}
-      on:change={event => {
-        if (!disabled) {
-          dispatch('change', event);
-        }
-      }}
+      on:click
+      on:change
+      on:input
       on:input={event => {
         value = event.target.value;
-        if (!disabled) {
-          dispatch('input', event);
-        }
       }}
       data-invalid={invalid || undefined}
       aria-invalid={invalid || undefined}
diff --git a/src/components/TextInput/TextInput.Skeleton.svelte b/src/components/TextInput/TextInput.Skeleton.svelte
index d1229907..8d1dd42d 100644
--- a/src/components/TextInput/TextInput.Skeleton.svelte
+++ b/src/components/TextInput/TextInput.Skeleton.svelte
@@ -2,14 +2,14 @@
   let className = undefined;
   export { className as class };
   export let hideLabel = false;
-  export let props = {};
+  export let style = undefined;
 
   import { cx } from '../../lib';
 
   const _class = cx('--form-item', className);
 </script>
 
-<div {...props} class={_class}>
+<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
   {#if !hideLabel}
     <span class={cx('--label', '--skeleton')} />
   {/if}
diff --git a/src/components/TextInput/TextInput.Story.svelte b/src/components/TextInput/TextInput.Story.svelte
index 451285a1..4feafc01 100644
--- a/src/components/TextInput/TextInput.Story.svelte
+++ b/src/components/TextInput/TextInput.Story.svelte
@@ -36,6 +36,11 @@
       </button>
     </div>
   {:else}
-    <TextInput {...$$props} bind:value />
+    <TextInput
+      {...$$props}
+      bind:value
+      on:change={() => {
+        console.log('change');
+      }} />
   {/if}
 </Layout>
diff --git a/src/components/TextInput/TextInput.svelte b/src/components/TextInput/TextInput.svelte
index b1db81e7..259519c7 100644
--- a/src/components/TextInput/TextInput.svelte
+++ b/src/components/TextInput/TextInput.svelte
@@ -12,13 +12,11 @@
   export let helperText = '';
   export let hideLabel = false;
   export let light = false;
-  export let props = {};
+  export let style = undefined;
 
-  import { createEventDispatcher } from 'svelte';
   import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
   import { cx } from '../../lib';
 
-  const dispatch = createEventDispatcher();
   const errorId = `${id}-error`;
   const _labelClass = cx(
     '--label',
@@ -34,7 +32,7 @@
   );
 </script>
 
-<div class={cx('--form-item', '--text-input-wrapper')}>
+<div class={cx('--form-item', '--text-input-wrapper')} {style}>
   {#if labelText}
     <label for={id} class={_labelClass}>{labelText}</label>
   {/if}
@@ -46,23 +44,11 @@
       <WarningFilled16 class={cx('--text-input__invalid-icon')} />
     {/if}
     <input
-      {...props}
       class={_textInputClass}
-      on:click={event => {
-        if (!disabled) {
-          dispatch('click', event);
-        }
-      }}
-      on:change={event => {
-        if (!disabled) {
-          dispatch('change', event);
-        }
-      }}
+      on:click
+      on:change
       on:input={event => {
         value = event.target.value;
-        if (!disabled) {
-          dispatch('input', event);
-        }
       }}
       data-invalid={invalid || undefined}
       aria-invalid={invalid || undefined}