Merge pull request #50 from metonym/fix-text-input

fix(password-input): mark passwordIsVisible as reactive

src/components/TextInput/PasswordInput.svelte

@@ -16,17 +16,14 @@
   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 passwordIsVisible = type === 'text';
   const _labelClass = cx(
     '--label',
     hideLabel && '--visually-hidden',
@@ -48,13 +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 => {
+      on:click
-        if (!disabled) {
+      on:change
-          dispatch('click', event);
+      on:input
-        }
-      }}
-      on:change={event => {
-        if (!disabled) {
-          dispatch('change', event);
-        }
-      }}
       on:input={event => {
         value = event.target.value;
-        if (!disabled) {
-          dispatch('input', event);
-        }
       }}
       data-invalid={invalid || undefined}
       aria-invalid={invalid || undefined}

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}

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>

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 => {
+      on:click
-        if (!disabled) {
+      on:change
-          dispatch('click', event);
-        }
-      }}
-      on:change={event => {
-        if (!disabled) {
-          dispatch('change', event);
-        }
-      }}
       on:input={event => {
         value = event.target.value;
-        if (!disabled) {
-          dispatch('input', event);
-        }
       }}
       data-invalid={invalid || undefined}
       aria-invalid={invalid || undefined}