feat(combo-box): add direction prop

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                                   |

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",

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"

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) {
+  function change(dir) {
-    let index = highlightedIndex + direction;
+    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}"

tests/ComboBox.test.svelte

@@ -10,6 +10,7 @@
 </script>
 
 <ComboBox
+  direction="top"
   titleText="Contact"
   placeholder="Select contact method"
   items="{items}"

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
    */