feat(dropdown): add direction prop

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         |

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

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

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 ===

tests/Dropdown.test.svelte

@@ -3,6 +3,7 @@
 </script>
 
 <Dropdown
+  direction="top"
   titleText="Contact"
   selectedIndex="{0}"
   items="{[

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