Merge pull request #113 from IBM/refactor

fix(select): use afterUpdate, correct subscription behavior

palimpsest/src/components/ButtonTile.svelte

@@ -36,7 +36,7 @@
   .icon {
     position: absolute;
     bottom: 1rem;
-    fill: var(--cds-ui-05);
+    fill: var(--cds-icon-01);
   }
 
   .icon--left {

palimpsest/src/components/Component/Component.svelte

@@ -60,7 +60,7 @@
 <style>
   main {
     margin-top: 5rem;
-    padding-left: 12rem;
+    padding-left: 16rem;
     padding-bottom: 2.5rem;
   }
 

palimpsest/src/components/Home.svelte

@@ -4,14 +4,14 @@
   import ButtonTile from './ButtonTile.svelte';
 
   $: {
-    document.title = `Carbon Components Svelte`;
+    document.title = 'Carbon Components Svelte';
   }
 </script>
 
 <style>
   main {
-    margin-top: 5rem;
-    padding-left: 12rem;
+    margin-top: 2.5rem;
+    padding-left: 16rem;
     padding-bottom: 2.5rem;
   }
 
@@ -21,6 +21,11 @@
     }
   }
 
+  .banner {
+    background: var(--cds-ui-01);
+    padding: 2.5rem 0 1.5rem;
+  }
+
   .bx--grid {
     max-width: 66rem;
   }
@@ -41,13 +46,14 @@
   }
 
   h3 {
-    margin-top: 4rem;
+    margin-top: 2.5rem;
     margin-bottom: 1.5rem;
     font-size: 1.5rem;
   }
 </style>
 
 <main>
+  <div class="banner">
     <div class="bx--grid">
       <div class="bx--row">
         <div class="bx--col">
@@ -63,9 +69,12 @@
               <strong>Svelte</strong>
             </span>
           </h1>
-        <p>The Carbon Design System implemented in Svelte</p>
+          <h3>The Carbon Design System implemented in Svelte.</h3>
         </div>
       </div>
+    </div>
+  </div>
+  <div class="bx--grid">
     <div class="bx--row">
       <div class="bx--col">
         <h3>Packages</h3>

palimpsest/src/components/SideNav.svelte

@@ -30,7 +30,7 @@
     z-index: 9999;
     top: 2.5rem;
     left: 0;
-    width: 12rem;
+    width: 16rem;
     height: calc(100% - 2.5rem);
     background-color: var(--cds-ui-01);
     overflow-y: scroll;
@@ -110,7 +110,12 @@
   }} />
 
 <nav class:toggled={$sideNavToggled}>
-  <Search small id="search-components" labelText="Components" bind:value />
+  <Search
+    small
+    id="search-components"
+    labelText="Components"
+    placeholder="Search components..."
+    bind:value />
   <ul>
     {#each results as { name }, i (name)}
       <li>

palimpsest/src/components/ThemePicker.svelte

@@ -1,21 +1,29 @@
 <script>
   export let inline = false;
 
+  import { onMount, afterUpdate } from 'svelte';
   import { Select, SelectItem } from 'carbon-components-svelte';
   import { theme } from '../store';
 
-  $: {
-    document.documentElement.setAttribute('carbon-theme', $theme);
+  onMount(() => {
+    let currentTheme = localStorage.getItem('theme');
+
+    if (currentTheme) {
+      theme.set(currentTheme);
+    } else {
+      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        theme.set('g90');
       }
+    }
+  });
+
+  afterUpdate(() => {
+    localStorage.setItem('theme', $theme);
+    document.documentElement.setAttribute('carbon-theme', $theme);
+  });
 </script>
 
-<Select
-  {inline}
-  labelText="Theme"
-  selected={$theme}
-  on:change={({ detail }) => {
-    theme.set(detail);
-  }}>
+<Select {inline} labelText="Theme" bind:selected={$theme}>
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
   <SelectItem value="g90" text="Gray 90" />

src/components/Select/Select.svelte

@@ -14,7 +14,7 @@
   export let selected = undefined;
   export let style = undefined;
 
-  import { createEventDispatcher, setContext } from 'svelte';
+  import { createEventDispatcher, setContext, afterUpdate } from 'svelte';
   import { writable } from 'svelte/store';
   import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
   import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
@@ -26,12 +26,13 @@
 
   setContext('Select', { selectedValue });
 
+  afterUpdate(() => {
+    selected = $selectedValue;
+    dispatch('change', $selectedValue);
+  });
+
   $: errorId = `error-${id}`;
   $: selectedValue.set(selected);
-  $: selected = $selectedValue;
-  $: {
-    dispatch('change', $selectedValue);
-  }
 </script>
 
 <div class={cx('--form-item')} {style}>
@@ -85,7 +86,6 @@
           aria-describedby={invalid ? errorId : undefined}
           disabled={disabled || undefined}
           aria-invalid={invalid || undefined}
-          on:change
           on:change={({ target }) => {
             selectedValue.set(target.value);
           }}

src/components/Select/SelectItem.svelte

@@ -15,9 +15,7 @@
   let selected = false;
 
   ctx.selectedValue.subscribe(currentValue => {
-    if (currentValue === value) {
-      selected = true;
-    }
+    selected = currentValue === value;
   });
 </script>