refactor(search): remove dispatch, rename placeHolderText

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}>