From 7e2ab46e6ab0a091582fecd650060a2e9d1c0191 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 26 Oct 2020 14:31:11 -0700
Subject: [PATCH] feat(dropdown): support "sm", "xl" sizes

---
 docs/src/pages/components/Dropdown.svx | 12 ++++++++++++
 src/Dropdown/Dropdown.svelte           |  2 ++
 src/ListBox/ListBox.svelte             |  3 ++-
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/docs/src/pages/components/Dropdown.svx b/docs/src/pages/components/Dropdown.svx
index c9547049..a027819b 100644
--- a/docs/src/pages/components/Dropdown.svx
+++ b/docs/src/pages/components/Dropdown.svx
@@ -25,6 +25,18 @@ components: ["Dropdown", "DropdownSkeleton"]
   {id: "1", text: "Email"},
   {id: "2", text: "Fax"}]}" />
 
+### Extra-large size
+
+<Dropdown size="xl" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}]}" />
+
+### Small size
+
+<Dropdown size="sm" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}]}" />
+
 ### Disabled state
 
 <Dropdown disabled titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte
index 465dc726..0f729017 100644
--- a/src/Dropdown/Dropdown.svelte
+++ b/src/Dropdown/Dropdown.svelte
@@ -182,6 +182,8 @@
     aria-label="{$$props['aria-label']}"
     class="bx--dropdown {invalid && 'bx--dropdown--invalid'}
       {open && 'bx--dropdown--open'}
+      {size === 'sm' && 'bx--dropdown--sm'}
+      {size === 'xl' && 'bx--dropdown--xl'}
       {inline && 'bx--dropdown--inline'}
       {disabled && 'bx--dropdown--disabled'}
       {light && 'bx--dropdown--light'}"
diff --git a/src/ListBox/ListBox.svelte b/src/ListBox/ListBox.svelte
index 34be7526..5e519d95 100644
--- a/src/ListBox/ListBox.svelte
+++ b/src/ListBox/ListBox.svelte
@@ -47,12 +47,13 @@
   tabindex="-1"
   data-invalid="{invalid || undefined}"
   class:bx--list-box="{true}"
+  class:bx--list-box--sm="{size === 'sm'}"
+  class:bx--list-box--xl="{size === 'xl'}"
   class:bx--list-box--inline="{type === 'inline'}"
   class:bx--list-box--disabled="{disabled}"
   class:bx--list-box--expanded="{open}"
   class:bx--list-box--light="{light}"
   {...$$restProps}
-  class="{size && `bx--list-box--${size}`} {$$restProps.class}"
   on:keydown
   on:keydown="{(e) => {
     if (e.key === 'Escape') {