Merge pull request #87 from metonym/refactor

refactor(components): remove unnecessary dispatch, forward events

src/components/FileUploader/FileUploader.Skeleton.svelte

@@ -3,9 +3,9 @@
   export { className as class };
   export let style = undefined;
 
+  import { cx } from '../../lib';
   import SkeletonText from '../SkeletonText';
   import { ButtonSkeleton } from '../Button';
-  import { cx } from '../../lib';
 </script>
 
 <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>

src/components/FileUploader/FileUploaderButton.svelte

@@ -16,20 +16,12 @@
   import { cx } from '../../lib';
 
   let inputRef = undefined;
-
-  $: _class = cx(
-    '--btn',
-    '--btn--sm',
-    kind && `--btn--${kind}`,
-    disabled && '--btn--disabled',
-    className
-  );
 </script>
 
 <label
   tabindex={disabled ? '-1' : tabindex}
   aria-disabled={disabled}
-  class={_class}
+  class={cx('--btn', '--btn--sm', kind && `--btn--${kind}`, disabled && '--btn--disabled', className)}
   for={id}
   on:keydown
   on:keydown={({ key }) => {
@@ -54,8 +46,8 @@
     }
   }}
   on:click
-  on:click={event => {
-    event.target.value = null;
+  on:click={({ target }) => {
+    target.value = null;
   }}
   {id}
   {disabled}

src/components/FileUploader/FileUploaderItem.svelte

@@ -26,9 +26,6 @@
   <p class={cx('--file-filename')}>{name}</p>
   <span class={cx('--file__state-container')}>
     <Filename
-      {iconDescription}
-      {status}
-      {invalid}
       on:keydown={({ key }) => {
         if (key === ' ' || key === 'Enter') {
           dispatch('delete', id);
@@ -36,7 +33,10 @@
       }}
       on:click={() => {
         dispatch('delete', id);
-      }} />
+      }}
+      {iconDescription}
+      {status}
+      {invalid} />
   </span>
   {#if invalid && errorSubject}
     <div class={cx('--form-requirement')}>

src/components/FileUploader/Filename.svelte

@@ -15,7 +15,7 @@
 </script>
 
 {#if status === 'uploading'}
-  <Loading description={iconDescription} withOverlay={false} small class={className} {style} />
+  <Loading small description={iconDescription} withOverlay={false} class={className} {style} />
 {/if}
 
 {#if status === 'edit'}

src/components/Form/Form.svelte

@@ -4,10 +4,8 @@
   export let style = undefined;
 
   import { cx } from '../../lib';
-
-  $: _class = cx('--form', className);
 </script>
 
-<form on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
+<form on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form', className)} {style}>
   <slot />
 </form>

src/components/FormGroup/FormGroup.svelte

@@ -8,20 +8,17 @@
   export let style = undefined;
 
   import { cx } from '../../lib';
-
-  $: _class = cx('--fieldset', className);
-  $: _legendClass = cx('--label', className);
 </script>
 
 <fieldset
-  data-invalid={invalid ? '' : undefined}
+  data-invalid={invalid || undefined}
+  class={cx('--fieldset', className)}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
-  class={_class}
   {style}>
-  <legend class={_legendClass}>{legendText}</legend>
+  <legend class={cx('--label', className)}>{legendText}</legend>
   <slot />
   {#if message}
     <div class={cx('--form__requirements')}>{messageText}</div>

src/components/Search/Search.Story.svelte

@@ -6,6 +6,14 @@
   import SearchSkeleton from './Search.Skeleton.svelte';
 
   let value = '';
+
+  $: {
+    if (!value.length) {
+      console.log('cleared');
+    } else {
+      console.log('value', value);
+    }
+  }
 </script>
 
 <Layout>

src/components/Search/Search.stories.js

@@ -20,7 +20,7 @@ export const Default = () => ({
       'The label text for the close button (closeButtonLabelText)',
       'Clear search input'
     ),
-    placeHolderText: text('Placeholder text (placeHolderText)', 'Search')
+    placeholder: text('Placeholder text (placeholder)', 'Search')
   }
 });
 

src/components/Search/Search.svelte

@@ -5,7 +5,7 @@
   export let autofocus = false;
   export let type = 'text';
   export let small = false;
-  export let placeHolderText = '';
+  export let placeholder = '';
   export let labelText = '';
   export let closeButtonLabelText = 'Clear search input';
   export let size = small ? 'sm' : 'xl';
@@ -13,14 +13,11 @@
   export let id = Math.random();
   export let style = undefined;
 
-  import { createEventDispatcher } from 'svelte';
   import Search16 from 'carbon-icons-svelte/lib/Search16';
   import Close16 from 'carbon-icons-svelte/lib/Close16';
   import Close20 from 'carbon-icons-svelte/lib/Close20';
   import { cx } from '../../lib';
 
-  const dispatch = createEventDispatcher();
-
   let inputRef = undefined;
 </script>
 
@@ -34,7 +31,6 @@
     bind:this={inputRef}
     role="searchbox"
     class={cx('--search-input')}
-    placeholder={placeHolderText}
     on:change
     on:input
     on:input={({ target }) => {
@@ -43,14 +39,14 @@
     {autofocus}
     {type}
     {id}
-    {value} />
+    {value}
+    {placeholder} />
   <button
     type="button"
     class={cx('--search-close', value === '' && '--search-close--hidden')}
     on:click
     on:click={() => {
       value = '';
-      dispatch('change', value);
       inputRef.focus();
     }}
     aria-label={closeButtonLabelText}>

src/components/SkeletonText/SkeletonText.stories.js

@@ -8,7 +8,7 @@ export const Default = () => ({
   props: {
     heading: boolean('Skeleton text at a larger size (heading)'),
     paragraph: boolean('Use multiple lines of text (paragraph)'),
-    lineCount: number('The number of lines in a paragraph (lineCount)', 3),
+    lines: number('The number of lines in a paragraph (lines)', 3),
     width: select(
       'Width (in px or %) of single line of text or max-width of paragraph lines (width)',
       { '100%': '100%', '250px': '250px' },

src/components/SkeletonText/SkeletonText.svelte

@@ -2,7 +2,7 @@
   let className = undefined;
   export { className as class };
   export let paragraph = false;
-  export let lineCount = 3;
+  export let lines = 3;
   export let width = '100%';
   export let heading = false;
   export let style = undefined;
@@ -10,26 +10,27 @@
   import { cx } from '../../lib';
 
   const randoms = [0.973051493507435, 0.15334737213558558, 0.5671034553053769];
-  let lines = [];
+
+  let rows = [];
 
   $: widthNum = parseInt(width, 10);
   $: widthPx = width.includes('px');
   $: widthPercent = width.includes('%');
   $: if (paragraph) {
-    for (let i = 0; i < lineCount; i++) {
+    for (let i = 0; i < lines; i++) {
       const min = widthPx ? widthNum - 75 : 0;
       const max = widthPx ? widthNum : 75;
       const randomWidth = Math.floor(randoms[i % 3] * (max - min + 1)) + min + 'px';
-      lines = [...lines, { width: widthPx ? randomWidth : `calc(${width} - ${randomWidth})` }];
+      rows = [...rows, { width: widthPx ? randomWidth : `calc(${width} - ${randomWidth})` }];
     }
   }
 </script>
 
 {#if paragraph}
-  <div on:click on:mouseover on:mouseenter on:mouseleave {style}>
-    {#each lines as { width }}
+  <div on:click on:mouseover on:mouseenter on:mouseleave class={className} {style}>
+    {#each rows as { width }, i (width)}
       <p
-        class={cx('--skeleton__text', heading && '--skeleton__heading', className)}
+        class={cx('--skeleton__text', heading && '--skeleton__heading')}
         style={`width: ${width};`} />
     {/each}
   </div>

src/components/TextArea/TextArea.svelte

@@ -1,12 +1,12 @@
 <script>
   let className = undefined;
   export { className as class };
+  export let rows = 4;
   export let cols = 50;
   export let disabled = false;
   export let id = Math.random();
   export let labelText = '';
   export let placeholder = '';
-  export let rows = 4;
   export let value = '';
   export let invalid = false;
   export let invalidText = '';
@@ -15,20 +15,17 @@
   export let light = false;
   export let style = undefined;
 
-  import { createEventDispatcher } from 'svelte';
   import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
   import { cx } from '../../lib';
 
-  const dispatch = createEventDispatcher();
-
   $: errorId = `error-${id}`;
 </script>
 
-<div on:mouseover on:mouseenter on:mouseleave class={cx('--form-item')} {style}>
+<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item')} {style}>
   {#if labelText && !hideLabel}
     <label
-      for={id}
-      class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}>
+      class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}
+      for={id}>
       {labelText}
     </label>
   {/if}
@@ -42,32 +39,22 @@
       <WarningFilled16 class={cx('--text-area__invalid-icon')} />
     {/if}
     <textarea
-      on:click={event => {
-        if (!disabled) {
-          dispatch('click', event);
-        }
-      }}
-      on:change={event => {
-        if (!disabled) {
-          dispatch('change', event);
-        }
-      }}
-      on:input={event => {
-        value = event.target.value;
-        if (!disabled) {
-          dispatch('input', event);
-        }
-      }}
-      class={cx('--text-area', light && '--text-area--light', invalid && '--text-area--invalid', className)}
       aria-invalid={invalid || undefined}
       aria-describedby={invalid ? errorId : undefined}
+      class={cx('--text-area', light && '--text-area--light', invalid && '--text-area--invalid', className)}
+      on:change
+      on:input
+      on:input={({ target }) => {
+        value = target.value;
+      }}
+      on:focus
+      on:blur
       {disabled}
       {id}
       {cols}
       {rows}
       {value}
-      {placeholder}
-      {value} />
+      {placeholder} />
   </div>
   {#if invalid}
     <div class={cx('--form-requirement')} id={errorId}>{invalidText}</div>

src/components/TextInput/PasswordInput.svelte

@@ -26,11 +26,17 @@
   $: errorId = `error-${id}`;
 </script>
 
-<div class={cx('--form-item', '--text-input-wrapper', '--password-input-wrapper')} {style}>
+<div
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  class={cx('--form-item', '--text-input-wrapper', '--password-input-wrapper', className)}
+  {style}>
   {#if labelText}
     <label
-      for={id}
-      class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}>
+      class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}
+      for={id}>
       {labelText}
     </label>
   {/if}
@@ -44,16 +50,17 @@
       <WarningFilled16 class={cx('--text-input__invalid-icon')} />
     {/if}
     <input
-      class={cx('--text-input', '--password-input', light && '--text-input--light', invalid && '--text-input--invalid', className)}
-      on:click
-      on:change
-      on:input
-      on:input={event => {
-        value = event.target.value;
-      }}
       data-invalid={invalid || undefined}
       aria-invalid={invalid || undefined}
       aria-describedby={invalid ? errorId : undefined}
+      class={cx('--text-input', '--password-input', light && '--text-input--light', invalid && '--text-input--invalid')}
+      on:change
+      on:input
+      on:input={({ target }) => {
+        value = target.value;
+      }}
+      on:focus
+      on:blur
       {id}
       {placeholder}
       {type}

src/components/TextInput/TextInput.svelte

@@ -20,7 +20,13 @@
   $: errorId = `error-${id}`;
 </script>
 
-<div class={cx('--form-item', '--text-input-wrapper')} {style}>
+<div
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  class={cx('--form-item', '--text-input-wrapper', className)}
+  {style}>
   {#if labelText}
     <label
       for={id}
@@ -38,16 +44,17 @@
       <WarningFilled16 class={cx('--text-input__invalid-icon')} />
     {/if}
     <input
-      class={cx('--text-input', light && '--text-input--light', invalid && '--text-input--invalid', className)}
-      on:click
-      on:change
-      on:input
-      on:input={event => {
-        value = event.target.value;
-      }}
       data-invalid={invalid || undefined}
       aria-invalid={invalid || undefined}
       aria-describedby={invalid ? errorId : undefined}
+      class={cx('--text-input', light && '--text-input--light', invalid && '--text-input--invalid')}
+      on:change
+      on:input
+      on:input={({ target }) => {
+        value = target.value;
+      }}
+      on:focus
+      on:blur
       {id}
       {placeholder}
       {type}

src/components/TimePicker/TimePicker.Story.svelte

@@ -1,12 +1,16 @@
 <script>
   import Layout from '../../internal/ui/Layout.svelte';
+  import { SelectItem } from '../Select';
   import TimePicker from './TimePicker.svelte';
   import TimePickerSelect from './TimePickerSelect.svelte';
-  import { SelectItem } from '../Select';
 
   let value = '';
   let select1 = 'PM';
   let select2 = 'Time zone 1';
+
+  $: {
+    console.log(value, select1, select2);
+  }
 </script>
 
 <Layout>

src/components/TimePicker/TimePicker.svelte

@@ -23,18 +23,21 @@
     <div class={cx('--time-picker__input')}>
       {#if labelText}
         <label
-          for={id}
-          class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}>
+          class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}
+          for={id}>
           {labelText}
         </label>
       {/if}
       <input
         data-invalid={invalid || undefined}
         class={cx('--time-picker__input-field', '--text-input', light && '--text-input--light', invalid && '--text-input--invalid')}
+        on:change
         on:input
         on:input={({ target }) => {
           value = target.value;
         }}
+        on:focus
+        on:blur
         {pattern}
         {placeholder}
         {maxlength}
@@ -42,7 +45,6 @@
         {type}
         {value}
         {disabled} />
-
     </div>
     <slot />
   </div>

src/components/TimePicker/TimePickerSelect.svelte

@@ -9,21 +9,16 @@
   export let disabled = false;
   export let style = undefined;
 
-  import { createEventDispatcher, setContext } from 'svelte';
+  import { setContext } from 'svelte';
   import { writable } from 'svelte/store';
   import ChevronDownGlyph from 'carbon-icons-svelte/lib/ChevronDownGlyph';
   import { cx } from '../../lib';
 
-  const dispatch = createEventDispatcher();
-
   let selected = writable(value);
 
   setContext('TimePickerSelect', { selected });
 
-  $: {
-    selected.set(value);
-    dispatch('change', $selected);
-  }
+  $: selected.set(value);
   $: value = $selected;
 </script>
 
@@ -39,12 +34,12 @@
   {/if}
   <select
     class={cx('--select-input')}
-    {id}
-    {disabled}
-    {value}
     on:change={({ target }) => {
       selected.set(target.value);
-    }}>
+    }}
+    {id}
+    {disabled}
+    {value}>
     <slot />
   </select>
   <ChevronDownGlyph

src/components/Toggle/Toggle.Skeleton.svelte

@@ -11,7 +11,7 @@
 <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
   <input type="checkbox" class={cx('--toggle --skeleton')} {id} />
   <label
-    aria-label={labelText ? null : $$props['aria-label'] || 'Toggle is loading'}
+    aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle is loading'}
     class={cx('--toggle__label', '--skeleton')}
     for={id}>
     {#if labelText}

src/components/Toggle/Toggle.Story.svelte

@@ -4,11 +4,17 @@
   import Layout from '../../internal/ui/Layout.svelte';
   import Toggle from './Toggle.svelte';
   import ToggleSkeleton from './Toggle.Skeleton.svelte';
+
+  let toggled = true;
+
+  $: {
+    console.log('toggled', toggled);
+  }
 </script>
 
 <Layout>
   {#if story === 'toggled'}
-    <Toggle {...$$props} id="toggle-1" toggled />
+    <Toggle {...$$props} id="toggle-1" bind:toggled />
   {:else if story === 'skeleton'}
     <ToggleSkeleton />
   {:else}

src/components/Toggle/Toggle.svelte

@@ -9,22 +9,11 @@
   export let labelB = 'On';
   export let style = undefined;
 
-  import { createEventDispatcher, afterUpdate } from 'svelte';
   import { cx } from '../../lib';
-
-  const dispatch = createEventDispatcher();
-
-  let inputRef = undefined;
-
-  afterUpdate(() => {
-    inputRef.checked = toggled;
-    dispatch('toggle', { id, toggled });
-  });
 </script>
 
 <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
   <input
-    bind:this={inputRef}
     type="checkbox"
     class={cx('--toggle-input')}
     checked={toggled}
@@ -39,6 +28,8 @@
         toggled = !toggled;
       }
     }}
+    on:focus
+    on:blur
     {disabled}
     {id} />
   <label

src/components/ToggleSmall/ToggleSmall.Story.svelte

@@ -4,11 +4,17 @@
   import Layout from '../../internal/ui/Layout.svelte';
   import ToggleSmall from './ToggleSmall.svelte';
   import ToggleSmallSkeleton from './ToggleSmall.Skeleton.svelte';
+
+  let toggled = true;
+
+  $: {
+    console.log('toggled', toggled);
+  }
 </script>
 
 <Layout>
   {#if story === 'toggled'}
-    <ToggleSmall {...$$props} id="toggle-1" toggled />
+    <ToggleSmall {...$$props} id="toggle-1" bind:toggled />
   {:else if story === 'skeleton'}
     <ToggleSmallSkeleton />
   {:else}

src/components/ToggleSmall/ToggleSmall.svelte

@@ -9,22 +9,11 @@
   export let labelB = 'On';
   export let style = undefined;
 
-  import { createEventDispatcher, afterUpdate } from 'svelte';
   import { cx } from '../../lib';
-
-  const dispatch = createEventDispatcher();
-
-  let inputRef = undefined;
-
-  afterUpdate(() => {
-    inputRef.checked = toggled;
-    dispatch('toggle', { id, toggled });
-  });
 </script>
 
 <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
   <input
-    bind:this={inputRef}
     type="checkbox"
     class={cx('--toggle-input', '--toggle-input--small')}
     checked={toggled}
@@ -39,9 +28,10 @@
         toggled = !toggled;
       }
     }}
+    on:focus
+    on:blur
     {disabled}
     {id} />
-
   <label
     aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle'}
     class={cx('--toggle-input__label')}