From f6c2007636ccbdfe75746520d3f89cdc257dd6b7 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 19 Feb 2021 15:53:21 -0800
Subject: [PATCH] feat(dropdown): add direction prop

---
 COMPONENT_INDEX.md                     |  1 +
 docs/src/COMPONENT_API.json            | 10 ++++++++++
 docs/src/pages/components/Dropdown.svx |  8 ++++++++
 src/Dropdown/Dropdown.svelte           | 13 ++++++++++---
 tests/Dropdown.test.svelte             |  1 +
 types/Dropdown/Dropdown.d.ts           |  6 ++++++
 6 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 35895bcb..97627bb2 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -985,6 +985,7 @@ export interface DropdownItem {
 | items           | <code>let</code> | No       | <code>DropdownItem[]</code>                 | <code>[]</code>                                       | Set the dropdown items                        |
 | itemToString    | <code>let</code> | No       | <code>(item: DropdownItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a dropdown item       |
 | type            | <code>let</code> | No       | <code>"default" &#124; "inline"</code>      | <code>"default"</code>                                | Specify the type of dropdown                  |
+| direction       | <code>let</code> | No       | <code>"bottom" &#124; "top"</code>          | <code>"bottom"</code>                                 | Specify the direction of the dropdown menu    |
 | size            | <code>let</code> | No       | <code>"sm" &#124; "lg" &#124; "xl"</code>   | --                                                    | Specify the size of the dropdown field        |
 | light           | <code>let</code> | No       | <code>boolean</code>                        | <code>false</code>                                    | Set to `true` to enable the light variant     |
 | disabled        | <code>let</code> | No       | <code>boolean</code>                        | <code>false</code>                                    | Set to `true` to disable the dropdown         |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 923ae719..ea9ad857 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -2320,6 +2320,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "direction",
+          "kind": "let",
+          "description": "Specify the direction of the dropdown menu",
+          "type": "\"bottom\" | \"top\"",
+          "value": "\"bottom\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "size",
           "kind": "let",
diff --git a/docs/src/pages/components/Dropdown.svx b/docs/src/pages/components/Dropdown.svx
index 4db48c86..2cc508d1 100644
--- a/docs/src/pages/components/Dropdown.svx
+++ b/docs/src/pages/components/Dropdown.svx
@@ -33,6 +33,14 @@ Use the `itemToString` prop to format the display of individual items.
 
 <FileSource src="/framed/Dropdown/MultipleDropdown" />
 
+### Top direction
+
+Set `direction` to `"top"` for the dropdown menu to appear above the input.
+
+<Dropdown direction="top" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}]}" />
+
 ### Light variant
 
 <Dropdown light titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte
index f07eef63..3597b258 100644
--- a/src/Dropdown/Dropdown.svelte
+++ b/src/Dropdown/Dropdown.svelte
@@ -27,6 +27,12 @@
    */
   export let type = "default";
 
+  /**
+   * Specify the direction of the dropdown menu
+   * @type {"bottom" | "top"}
+   */
+  export let direction = "bottom";
+
   /**
    * Specify the size of the dropdown field
    * @type {"sm" | "lg" | "xl"}
@@ -105,8 +111,8 @@
   let selectedId = undefined;
   let highlightedIndex = -1;
 
-  function change(direction) {
-    let index = highlightedIndex + direction;
+  function change(dir) {
+    let index = highlightedIndex + dir;
 
     if (index < 0) {
       index = items.length - 1;
@@ -159,7 +165,8 @@
     id="{id}"
     name="{name}"
     aria-label="{$$props['aria-label']}"
-    class="bx--dropdown {invalid && 'bx--dropdown--invalid'} {!invalid &&
+    class="bx--dropdown {direction === 'top' && 'bx--list-box--up'} {invalid &&
+      'bx--dropdown--invalid'} {!invalid &&
       warn &&
       'bx--dropdown--warning'} {open && 'bx--dropdown--open'}
       {size ===
diff --git a/tests/Dropdown.test.svelte b/tests/Dropdown.test.svelte
index 58e57139..f9eb8b3f 100644
--- a/tests/Dropdown.test.svelte
+++ b/tests/Dropdown.test.svelte
@@ -3,6 +3,7 @@
 </script>
 
 <Dropdown
+  direction="top"
   titleText="Contact"
   selectedIndex="{0}"
   items="{[
diff --git a/types/Dropdown/Dropdown.d.ts b/types/Dropdown/Dropdown.d.ts
index 74f632e1..91afec2e 100644
--- a/types/Dropdown/Dropdown.d.ts
+++ b/types/Dropdown/Dropdown.d.ts
@@ -36,6 +36,12 @@ export interface DropdownProps
    */
   type?: "default" | "inline";
 
+  /**
+   * Specify the direction of the dropdown menu
+   * @default "bottom"
+   */
+  direction?: "bottom" | "top";
+
   /**
    * Specify the size of the dropdown field
    */