From be094b90968910de30d6e2826fedbb7fe477f14c Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Tue, 31 Dec 2019 16:18:43 -0800
Subject: [PATCH] fix(time-picker-select): change select to selectValue

---
 src/components/Search/Search.svelte           | 22 +++++++++----------
 src/components/TimePicker/TimePicker.svelte   | 18 +++++++--------
 .../TimePicker/TimePickerSelect.svelte        | 18 +++++++--------
 3 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/components/Search/Search.svelte b/src/components/Search/Search.svelte
index 657807f6..14b6a841 100644
--- a/src/components/Search/Search.svelte
+++ b/src/components/Search/Search.svelte
@@ -1,21 +1,21 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let value = '';
   export let autofocus = false;
-  export let type = 'text';
-  export let small = false;
-  export let placeholder = '';
-  export let labelText = '';
   export let closeButtonLabelText = 'Clear search input';
-  export let size = small ? 'sm' : 'xl';
-  export let light = false;
   export let id = Math.random();
+  export let labelText = '';
+  export let light = false;
+  export let placeholder = '';
+  export let size = small ? 'sm' : 'xl';
+  export let small = false;
   export let style = undefined;
+  export let type = 'text';
+  export let value = '';
 
-  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 Search16 from 'carbon-icons-svelte/lib/Search16';
   import { cx } from '../../lib';
 
   let inputRef = undefined;
@@ -25,7 +25,7 @@
   class={cx('--search', size && `--search--${size}`, light && '--search--light', className)}
   {style}>
   <Search16 class={cx('--search-magnifier')} />
-  <label for={id} class={cx('--label')}>{labelText}</label>
+  <label class={cx('--label')} for={id}>{labelText}</label>
   <!-- svelte-ignore a11y-autofocus -->
   <input
     bind:this={inputRef}
@@ -43,13 +43,13 @@
     {placeholder} />
   <button
     type="button"
+    aria-label={closeButtonLabelText}
     class={cx('--search-close', value === '' && '--search-close--hidden')}
     on:click
     on:click={() => {
       value = '';
       inputRef.focus();
-    }}
-    aria-label={closeButtonLabelText}>
+    }}>
     <svelte:component this={size === 'xl' ? Close20 : Close16} />
   </button>
 </div>
diff --git a/src/components/TimePicker/TimePicker.svelte b/src/components/TimePicker/TimePicker.svelte
index 85f90fbf..975f24f7 100644
--- a/src/components/TimePicker/TimePicker.svelte
+++ b/src/components/TimePicker/TimePicker.svelte
@@ -1,19 +1,19 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let id = Math.random();
-  export let value = '';
-  export let labelText = '';
+  export let disabled = false;
   export let hideLabel = false;
-  export let type = 'text';
+  export let id = Math.random();
+  export let invalid = false;
+  export let invalidText = 'Invalid time format.';
+  export let labelText = '';
+  export let light = false;
+  export let maxlength = 5;
   export let pattern = '(1[012]|[1-9]):[0-5][0-9](\\s)?';
   export let placeholder = 'hh=mm';
-  export let maxlength = 5;
-  export let invalidText = 'Invalid time format.';
-  export let invalid = false;
-  export let disabled = false;
-  export let light = false;
   export let style = undefined;
+  export let type = 'text';
+  export let value = '';
 
   import { cx } from '../../lib';
 </script>
diff --git a/src/components/TimePicker/TimePickerSelect.svelte b/src/components/TimePicker/TimePickerSelect.svelte
index 5a1927ea..8426f726 100644
--- a/src/components/TimePicker/TimePickerSelect.svelte
+++ b/src/components/TimePicker/TimePickerSelect.svelte
@@ -1,25 +1,25 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let id = Math.random();
-  export let value = '';
-  export let labelText = '';
+  export let disabled = false;
   export let hideLabel = true;
   export let iconDescription = 'Open list of options';
-  export let disabled = false;
+  export let id = Math.random();
+  export let labelText = '';
   export let style = undefined;
+  export let value = '';
 
   import { setContext } from 'svelte';
   import { writable } from 'svelte/store';
   import ChevronDownGlyph from 'carbon-icons-svelte/lib/ChevronDownGlyph';
   import { cx } from '../../lib';
 
-  let selected = writable(value);
+  let selectedValue = writable(value);
 
-  setContext('TimePickerSelect', { selected });
+  setContext('TimePickerSelect', { selectedValue });
 
-  $: selected.set(value);
-  $: value = $selected;
+  $: selectedValue.set(value);
+  $: value = $selectedValue;
 </script>
 
 <div
@@ -35,7 +35,7 @@
   <select
     class={cx('--select-input')}
     on:change={({ target }) => {
-      selected.set(target.value);
+      selectedValue.set(target.value);
     }}
     {id}
     {disabled}