From 2fc2767acde2673afab89c58223e29f68e0ecf27 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 19 Feb 2021 15:47:28 -0800
Subject: [PATCH] feat(combo-box): add direction prop

---
 COMPONENT_INDEX.md                     |  1 +
 docs/src/COMPONENT_API.json            | 10 ++++++++++
 docs/src/pages/components/ComboBox.svx | 11 +++++++++++
 src/ComboBox/ComboBox.svelte           | 14 ++++++++++----
 tests/ComboBox.test.svelte             |  1 +
 types/ComboBox/ComboBox.d.ts           |  6 ++++++
 6 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 355627b0..35895bcb 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -611,6 +611,7 @@ export interface ComboBoxItem {
 | selectedIndex    | <code>let</code> | Yes      | <code>number</code>                                         | <code>-1</code>                                       | Set the selected item by value index                                     |
 | items            | <code>let</code> | No       | <code>ComboBoxItem[]</code>                                 | <code>[]</code>                                       | Set the combobox items                                                   |
 | itemToString     | <code>let</code> | No       | <code>(item: ComboBoxItem) => string</code>                 | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a combobox item                                  |
+| direction        | <code>let</code> | No       | <code>"bottom" &#124; "top"</code>                          | <code>"bottom"</code>                                 | Specify the direction of the combobox dropdown menu                      |
 | size             | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>                               | --                                                    | Set the size of the combobox                                             |
 | disabled         | <code>let</code> | No       | <code>boolean</code>                                        | <code>false</code>                                    | Set to `true` to disable the combobox                                    |
 | titleText        | <code>let</code> | No       | <code>string</code>                                         | <code>""</code>                                       | Specify the title text of the combobox                                   |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 2bbc6bc8..923ae719 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -1189,6 +1189,16 @@
           "constant": false,
           "reactive": true
         },
+        {
+          "name": "direction",
+          "kind": "let",
+          "description": "Specify the direction of the combobox dropdown menu",
+          "type": "\"bottom\" | \"top\"",
+          "value": "\"bottom\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "size",
           "kind": "let",
diff --git a/docs/src/pages/components/ComboBox.svx b/docs/src/pages/components/ComboBox.svx
index b94fdde3..014769f0 100644
--- a/docs/src/pages/components/ComboBox.svx
+++ b/docs/src/pages/components/ComboBox.svx
@@ -30,6 +30,17 @@ items={[
 
 <FileSource src="/framed/ComboBox/FilterableComboBox" />
 
+### Top direction
+
+Set `direction` to `"top"` for the combobox dropdown menu to appear above the input.
+
+<ComboBox direction="top" titleText="Contact" placeholder="Select contact method"
+items={[
+  {id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}
+  ]}  />
+
 ### Light variant
 
 <ComboBox light titleText="Contact" placeholder="Select contact method"
diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index a8ea88d5..7947952a 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@@ -22,6 +22,12 @@
   /** Specify the selected combobox value */
   export let value = "";
 
+  /**
+   * Specify the direction of the combobox dropdown menu
+   * @type {"bottom" | "top"}
+   */
+  export let direction = "bottom";
+
   /**
    * Set the size of the combobox
    * @type {"sm" | "xl"}
@@ -89,7 +95,6 @@
   export let listRef = null;
 
   import { createEventDispatcher, afterUpdate, tick } from "svelte";
-  import Checkmark16 from "carbon-icons-svelte/lib/Checkmark16/Checkmark16.svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
   import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
   import ListBox from "../ListBox/ListBox.svelte";
@@ -105,8 +110,8 @@
   let inputValue = "";
   let highlightedIndex = -1;
 
-  function change(direction) {
-    let index = highlightedIndex + direction;
+  function change(dir) {
+    let index = highlightedIndex + dir;
 
     if (index < 0) {
       index = items.length - 1;
@@ -166,7 +171,8 @@
     </label>
   {/if}
   <ListBox
-    class="bx--combo-box {!invalid && warn && 'bx--combo-box--warning'}"
+    class="bx--combo-box {direction === 'top' &&
+      'bx--list-box--up'} {!invalid && warn && 'bx--combo-box--warning'}"
     id="{comboId}"
     aria-label="{ariaLabel}"
     disabled="{disabled}"
diff --git a/tests/ComboBox.test.svelte b/tests/ComboBox.test.svelte
index 43d26446..d38b0344 100644
--- a/tests/ComboBox.test.svelte
+++ b/tests/ComboBox.test.svelte
@@ -10,6 +10,7 @@
 </script>
 
 <ComboBox
+  direction="top"
   titleText="Contact"
   placeholder="Select contact method"
   items="{items}"
diff --git a/types/ComboBox/ComboBox.d.ts b/types/ComboBox/ComboBox.d.ts
index c2d12315..af7529b7 100644
--- a/types/ComboBox/ComboBox.d.ts
+++ b/types/ComboBox/ComboBox.d.ts
@@ -32,6 +32,12 @@ export interface ComboBoxProps
    */
   value?: string;
 
+  /**
+   * Specify the direction of the combobox dropdown menu
+   * @default "bottom"
+   */
+  direction?: "bottom" | "top";
+
   /**
    * Set the size of the combobox
    */