Merge pull request #208 from IBM/fix-combobox

fix(combo-box): close menu on Escape key

src/ComboBox/ComboBox.Story.svelte

@@ -30,7 +30,6 @@
   }
 </script>
 
-<p>Currently, this component does not support items as slots.</p>
 <p>
   <code>items</code>
   must be an array of objects; mandatory fields are `id` and `text`.
@@ -47,8 +46,9 @@
     size="small"
     on:click={() => {
       selectedIndex = 1;
-    }}>
-    Set item to 'Option 2'
+    }}
+    style="margin-top: 1rem;">
+    Set item to "Option 2"
   </Button>
 </div>
 <div style="width: 300px; margin-top: 2rem;">

src/ComboBox/ComboBox.svelte

@@ -137,6 +137,8 @@
             change(1);
           } else if (key === 'ArrowUp') {
             change(-1);
+          } else if (key === 'Escape') {
+            open = false;
           }
         }}
         on:focus

src/Dropdown/Dropdown.Story.svelte

@@ -21,7 +21,6 @@
     <DropdownSkeleton inline />
   </div>
 {:else}
-  <p>Currently, this component does not support items as slots.</p>
   <p>
     <code>items</code>
     must be an array of objects; mandatory fields are `id` and `text`.
@@ -35,7 +34,7 @@
       on:click={() => {
         selectedIndex = selectedIndex > -1 ? -1 : 1;
       }}>
-      {selectedIndex > -1 ? 'Clear selected item' : "Set item to 'Option 2'"}
+      {selectedIndex > -1 ? 'Clear selected item' : 'Set item to "Option 2"'}
     </Button>
   </div>
   <div style="width: 300px">

src/Dropdown/Dropdown.stories.js

@@ -26,10 +26,6 @@ export const Default = () => ({
     disabled: boolean("Disabled (disabled)", false),
     light: boolean("Light variant (light)", false),
     titleText: text("Title (titleText)", "This is not a dropdown title."),
-    helperText: text(
-      "Helper text (helperText)",
-      "This is not some helper text."
-    ),
     invalid: boolean("Show form validation UI (invalid)", false),
     invalidText: text(
       "Form validation UI content (invalidText)",