From adfec3b85d04430469ebc4b53ec65353898a2dfd Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Mon, 2 Mar 2020 11:17:04 +0000
Subject: [PATCH 1/5] Starting menu refactor

---
 .../src/List/List.svelte                      | 10 +++++++
 .../src/Menu/Menu.svelte                      | 26 ++++++++++++++++---
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/packages/materialdesign-components/src/List/List.svelte b/packages/materialdesign-components/src/List/List.svelte
index ac375da4f3..3ba864e355 100644
--- a/packages/materialdesign-components/src/List/List.svelte
+++ b/packages/materialdesign-components/src/List/List.svelte
@@ -17,11 +17,21 @@
   //items: [{text: string | {primary: string, secondary: string}, value: any, selected: bool}...n]
   export let items = []
   export let singleSelection = false
+
   export let inputElement = null
 
   let role = "listbox"
 
   onMount(() => {
+    createOrAcceptItemStore()
+
+    if (!_bb.getContext("BBMD:list:props")) {
+      _bb.setContext("BBMD:list:props", {
+        inputElement,
+        variant,
+        singleSelection,
+      })
+    }
     if (!!list) {
       instance = new MDCList(list)
       instance.singleSelection = singleSelection
diff --git a/packages/materialdesign-components/src/Menu/Menu.svelte b/packages/materialdesign-components/src/Menu/Menu.svelte
index 89c2404f4c..4121f41340 100644
--- a/packages/materialdesign-components/src/Menu/Menu.svelte
+++ b/packages/materialdesign-components/src/Menu/Menu.svelte
@@ -2,7 +2,10 @@
   import { List } from "../List"
   import { MDCMenu } from "@material/menu"
   import { onMount, setContext } from "svelte"
-  export let items = []
+  import createItemsStore from "../Common/ItemStore.js"
+
+  export let onSelect = selectedItems => {}
+
   export let singleSelection = true
   export let width = "400px"
   export let open = true
@@ -11,10 +14,25 @@
   //{x: number, y: number}
   export let absolutePositionCoords = null
 
+  export let _bb
+
   let menu = null
   let instance = null
+  let selectedItemsStore
+
+  function createOrAcceptItemStore() {
+    let store = _bb.getContext("BBMD:list:selectItemStore")
+    if (!!store) {
+      selectedItemsStore = store
+    } else {
+      selectedItemsStore = createItemsStore(() => onSelect($selectedItemsStore))
+      _bb.setContext("BBMD:list:selectItemStore", selectedItemsStore)
+    }
+  }
 
   onMount(() => {
+    createOrAcceptItemStore()
+
     if (!!menu) {
       instance = new MDCMenu(menu)
       instance.open = open
@@ -27,6 +45,8 @@
     }
     setContext("BBMD:list:context", "menu")
   })
+
+  $: menu && _bb.attachChildren(menu)
 </script>
 
 {#if useFixedPosition || useAbsolutePosition}
@@ -34,7 +54,7 @@
     bind:this={menu}
     class="mdc-menu mdc-menu-surface"
     style={`width: ${width}`}>
-    <List {items} {singleSelection} />
+    <List {singleSelection} {_bb} />
   </div>
 {:else}
   <div class="mdc-menu-surface--anchor">
@@ -44,7 +64,7 @@
       bind:this={menu}
       class="mdc-menu mdc-menu-surface"
       style={`width: ${width}`}>
-      <List {items} {singleSelection} />
+      <List {singleSelection} {_bb} />
     </div>
   </div>
 {/if}

From cb72266c81c1eb0590d9afb1d25e40ba3b00fcff Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Mon, 2 Mar 2020 11:40:16 +0000
Subject: [PATCH 2/5] Commit before pull

---
 .../src/Menu/Menu.svelte                      |  2 --
 .../src/Test/TestApp.svelte                   |  2 ++
 .../src/Test/props.js                         | 23 +++++++++++++++++++
 .../materialdesign-components/src/index.js    |  1 +
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/materialdesign-components/src/Menu/Menu.svelte b/packages/materialdesign-components/src/Menu/Menu.svelte
index 4121f41340..b601d38f3e 100644
--- a/packages/materialdesign-components/src/Menu/Menu.svelte
+++ b/packages/materialdesign-components/src/Menu/Menu.svelte
@@ -45,8 +45,6 @@
     }
     setContext("BBMD:list:context", "menu")
   })
-
-  $: menu && _bb.attachChildren(menu)
 </script>
 
 {#if useFixedPosition || useAbsolutePosition}
diff --git a/packages/materialdesign-components/src/Test/TestApp.svelte b/packages/materialdesign-components/src/Test/TestApp.svelte
index b6c40fa895..63fec32977 100644
--- a/packages/materialdesign-components/src/Test/TestApp.svelte
+++ b/packages/materialdesign-components/src/Test/TestApp.svelte
@@ -16,6 +16,7 @@
     CustomersIndexTable,
     List,
     Icon,
+    Menu,
   } = props
 
   let currentComponent
@@ -40,6 +41,7 @@
             Datatable,
             CustomersIndexTable,
             List,
+            Menu,
           ],
         },
       }
diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js
index c10cce0161..3503631a86 100644
--- a/packages/materialdesign-components/src/Test/props.js
+++ b/packages/materialdesign-components/src/Test/props.js
@@ -152,4 +152,27 @@ export const props = {
     singleSelection: true,
     onSelect: selected => console.log(selected),
   },
+  Menu: {
+    _component: "@budibase/materialdesign-components/Menu",
+    _children: [
+      {
+        _component: "@budibase/materialdesign-components/ListItem",
+        _children: [],
+        text: "Settings",
+        value: 0,
+      },
+      {
+        _component: "@budibase/materialdesign-components/ListItem",
+        _children: [],
+        text: "Account",
+        value: 1,
+      },
+      {
+        _component: "@budibase/materialdesign-components/ListItem",
+        _children: [],
+        text: "Profile",
+        value: 2,
+      },
+    ],
+  }
 }
diff --git a/packages/materialdesign-components/src/index.js b/packages/materialdesign-components/src/index.js
index 5dac37d7b6..3517b2ed7e 100644
--- a/packages/materialdesign-components/src/index.js
+++ b/packages/materialdesign-components/src/index.js
@@ -17,3 +17,4 @@ export {
 export { default as indexDatatable } from "./Templates/indexDatatable"
 export { default as recordForm } from "./Templates/recordForm"
 export { List, ListItem } from "./List"
+export {Menu} from "./Menu"

From eb9e7c02fc30b1b396c2dc07a34f700f8a4b4039 Mon Sep 17 00:00:00 2001
From: Conor Mack <cmckeown101@gmail.com>
Date: Mon, 2 Mar 2020 14:43:06 +0000
Subject: [PATCH 3/5] Completed menu component

---
 .../src/List/List.svelte                      | 29 +++++++------------
 .../src/List/ListItem.svelte                  |  6 ++--
 .../src/Menu/Menu.svelte                      | 27 +++++++----------
 .../src/Menu/_styles.scss                     |  1 +
 .../src/Test/TestApp.svelte                   |  4 +--
 .../src/Test/props.js                         |  5 ++--
 6 files changed, 31 insertions(+), 41 deletions(-)

diff --git a/packages/materialdesign-components/src/List/List.svelte b/packages/materialdesign-components/src/List/List.svelte
index f1686c43ee..eae7018d1b 100644
--- a/packages/materialdesign-components/src/List/List.svelte
+++ b/packages/materialdesign-components/src/List/List.svelte
@@ -17,33 +17,24 @@
   export let onSelect = selectedItems => {}
 
   export let singleSelection = false
-  export let variant = "two-line"
+  export let variant = "one-line"
   export let inputElement = null
 
   let selectedItemsStore
 
   let role = "listbox"
 
-  function createOrAcceptItemStore() {
-    let store = _bb.getContext("BBMD:list:selectItemStore")
-    if (!!store) {
-      selectedItemsStore = store
-    } else {
-      selectedItemsStore = createItemsStore(() => onSelect($selectedItemsStore))
-      _bb.setContext("BBMD:list:selectItemStore", selectedItemsStore)
-    }
-  }
-
   onMount(() => {
-    createOrAcceptItemStore()
+    let ctx = getContext("BBMD:list:context")
 
-    if (!_bb.getContext("BBMD:list:props")) {
-      _bb.setContext("BBMD:list:props", {
-        inputElement,
-        variant,
-        singleSelection,
-      })
-    }
+    selectedItemsStore = createItemsStore(() => onSelect($selectedItemsStore))
+    _bb.setContext("BBMD:list:selectItemStore", selectedItemsStore)
+
+    _bb.setContext("BBMD:list:props", {
+      inputElement,
+      variant,
+      singleSelection,
+    })
 
     if (!!list) {
       if (!inputElement) {
diff --git a/packages/materialdesign-components/src/List/ListItem.svelte b/packages/materialdesign-components/src/List/ListItem.svelte
index 775d73d2e2..979ea3e8b3 100644
--- a/packages/materialdesign-components/src/List/ListItem.svelte
+++ b/packages/materialdesign-components/src/List/ListItem.svelte
@@ -7,8 +7,6 @@
 
   const cb = new ClassBuilder("list-item")
 
-  export let onClick = item => {}
-
   let _id
   let listProps = null
 
@@ -24,6 +22,7 @@
   export let trailingIcon = ""
   export let selected = false
   export let disabled = false
+  export let dividerAfter = false
 
   let role = "option"
 
@@ -110,3 +109,6 @@
     </span>
   {/if}
 </li>
+{#if dividerAfter}
+  <li class="mdc-list-divider" role="separator" />
+{/if}
diff --git a/packages/materialdesign-components/src/Menu/Menu.svelte b/packages/materialdesign-components/src/Menu/Menu.svelte
index b601d38f3e..5782652376 100644
--- a/packages/materialdesign-components/src/Menu/Menu.svelte
+++ b/packages/materialdesign-components/src/Menu/Menu.svelte
@@ -6,7 +6,6 @@
 
   export let onSelect = selectedItems => {}
 
-  export let singleSelection = true
   export let width = "400px"
   export let open = true
   export let useFixedPosition = false
@@ -17,21 +16,16 @@
   export let _bb
 
   let menu = null
+  let menuList = null
   let instance = null
   let selectedItemsStore
 
-  function createOrAcceptItemStore() {
-    let store = _bb.getContext("BBMD:list:selectItemStore")
-    if (!!store) {
-      selectedItemsStore = store
-    } else {
-      selectedItemsStore = createItemsStore(() => onSelect($selectedItemsStore))
-      _bb.setContext("BBMD:list:selectItemStore", selectedItemsStore)
-    }
-  }
-
   onMount(() => {
-    createOrAcceptItemStore()
+    _bb.setContext("BBMD:list:context", "menu")
+    _bb.setContext("BBMD:list:props", { singleSelection: true })
+
+    selectedItemsStore = createItemsStore(() => onSelect($selectedItemsStore))
+    _bb.setContext("BBMD:list:selectItemStore", selectedItemsStore)
 
     if (!!menu) {
       instance = new MDCMenu(menu)
@@ -43,8 +37,9 @@
         instance.setAbsolutePosition(x | 0, y | 0)
       }
     }
-    setContext("BBMD:list:context", "menu")
   })
+
+  $: menuList && _bb.attachChildren(menuList)
 </script>
 
 {#if useFixedPosition || useAbsolutePosition}
@@ -52,17 +47,17 @@
     bind:this={menu}
     class="mdc-menu mdc-menu-surface"
     style={`width: ${width}`}>
-    <List {singleSelection} {_bb} />
+    <ul bind:this={menuList} class="mdc-list" role="menu" />
   </div>
 {:else}
   <div class="mdc-menu-surface--anchor">
-    <!-- Will automatically anchor to slotted element -->
+    <!--TODO: Will automatically anchor to slotted element. Not sure how this would be achieved with Budibase though -->
     <slot />
     <div
       bind:this={menu}
       class="mdc-menu mdc-menu-surface"
       style={`width: ${width}`}>
-      <List {singleSelection} {_bb} />
+      <ul bind:this={menuList} class="mdc-list" role="menu" />
     </div>
   </div>
 {/if}
diff --git a/packages/materialdesign-components/src/Menu/_styles.scss b/packages/materialdesign-components/src/Menu/_styles.scss
index 13bd3f1d98..596b6a96da 100644
--- a/packages/materialdesign-components/src/Menu/_styles.scss
+++ b/packages/materialdesign-components/src/Menu/_styles.scss
@@ -1,2 +1,3 @@
+@import "@material/list/mdc-list.scss";
 @import "@material/menu-surface/mdc-menu-surface.scss";
 @import "@material/menu/mdc-menu.scss";
diff --git a/packages/materialdesign-components/src/Test/TestApp.svelte b/packages/materialdesign-components/src/Test/TestApp.svelte
index d7bb53662c..e4320e94e9 100644
--- a/packages/materialdesign-components/src/Test/TestApp.svelte
+++ b/packages/materialdesign-components/src/Test/TestApp.svelte
@@ -14,9 +14,9 @@
     Radiobuttongroup,
     Datatable,
     CustomersIndexTable,
-    List,
     Icon,
     Menu,
+    List,
   } = props
 
   let currentComponent
@@ -36,8 +36,8 @@
             Icon,
             Datatable,
             CustomersIndexTable,
-            List,
             Menu,
+            List,
           ],
         },
       }
diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js
index f83bb846d3..039f056365 100644
--- a/packages/materialdesign-components/src/Test/props.js
+++ b/packages/materialdesign-components/src/Test/props.js
@@ -119,7 +119,7 @@ export const props = {
     _component: "@budibase/materialdesign-components/List",
     variant: "two-line",
     singleSelection: false,
-    onSelect: selected => console.log(selected),
+    onSelect: selected => console.log("LIST SELECT", selected),
     _children: [
       {
         _component: "@budibase/materialdesign-components/ListItem",
@@ -148,6 +148,7 @@ export const props = {
   },
   Menu: {
     _component: "@budibase/materialdesign-components/Menu",
+    onSelect: items => console.log("MENU SELECT", items),
     _children: [
       {
         _component: "@budibase/materialdesign-components/ListItem",
@@ -168,5 +169,5 @@ export const props = {
         value: 2,
       },
     ],
-  }
+  },
 }

From 6785198c62de538d7f860039470e411c2440a4f1 Mon Sep 17 00:00:00 2001
From: Conor Mack <cmckeown101@gmail.com>
Date: Tue, 3 Mar 2020 15:23:03 +0000
Subject: [PATCH 4/5] Completed MD Select

---
 .../materialdesign-components/package.json    |  5 +-
 .../src/Button/Button.svelte                  |  8 +-
 .../src/Common/Icon.svelte                    |  6 +-
 .../src/List/ListItem.svelte                  | 16 ++--
 .../src/Select/HelperText.svelte              | 31 +++++++
 .../src/Select/Select.svelte                  | 87 +++++++++++++++++++
 .../src/Select/_style.scss                    |  4 +
 .../src/Select/index.js                       |  2 +
 .../src/Test/TestApp.svelte                   |  4 +-
 .../src/Test/props.js                         | 18 ++--
 .../src/Textfield/Textfield.svelte            |  5 +-
 .../materialdesign-components/src/index.js    |  3 +-
 12 files changed, 158 insertions(+), 31 deletions(-)
 create mode 100644 packages/materialdesign-components/src/Select/HelperText.svelte
 create mode 100644 packages/materialdesign-components/src/Select/Select.svelte
 create mode 100644 packages/materialdesign-components/src/Select/_style.scss
 create mode 100644 packages/materialdesign-components/src/Select/index.js

diff --git a/packages/materialdesign-components/package.json b/packages/materialdesign-components/package.json
index ba2e4dc891..1629b78963 100644
--- a/packages/materialdesign-components/package.json
+++ b/packages/materialdesign-components/package.json
@@ -46,5 +46,8 @@
   ],
   "version": "0.0.24",
   "license": "MIT",
-  "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
+  "gitHead": "115189f72a850bfb52b65ec61d932531bf327072",
+  "dependencies": {
+    "@material/select": "4.0.0"
+  }
 }
diff --git a/packages/materialdesign-components/src/Button/Button.svelte b/packages/materialdesign-components/src/Button/Button.svelte
index 84e3395987..7c8821547a 100644
--- a/packages/materialdesign-components/src/Button/Button.svelte
+++ b/packages/materialdesign-components/src/Button/Button.svelte
@@ -34,10 +34,6 @@
 
   const clicked = () => _bb.call(onClick)
 
-  $: if (icon) {
-    setContext("BBMD:icon:context", "button")
-  }
-
   $: renderLeadingIcon = !!icon && !trailingIcon
   $: renderTrailingIcon = !!icon && trailingIcon
 </script>
@@ -54,11 +50,11 @@
     {disabled}
     on:click={clicked}>
     {#if renderLeadingIcon}
-      <Icon {icon} />
+      <Icon context="button" {icon} />
     {/if}
     <span class={labelClass}>{text}</span>
     {#if renderTrailingIcon}
-      <Icon {icon} />
+      <Icon context="button" {icon} />
     {/if}
   </button>
 {/if}
diff --git a/packages/materialdesign-components/src/Common/Icon.svelte b/packages/materialdesign-components/src/Common/Icon.svelte
index e2c309f73e..d4820fcf6c 100644
--- a/packages/materialdesign-components/src/Common/Icon.svelte
+++ b/packages/materialdesign-components/src/Common/Icon.svelte
@@ -2,11 +2,9 @@
   import { getContext } from "svelte"
 
   export let icon = ""
+  export let context = ""
 
-  let iconContext = getContext("BBMD:icon:context")
-  let cls = iconContext
-    ? `material-icons mdc-${iconContext}__icon`
-    : "material-icons"
+  let cls = !!context ? `material-icons mdc-${context}__icon` : "material-icons"
 </script>
 
 <i class={cls}>{icon}</i>
diff --git a/packages/materialdesign-components/src/List/ListItem.svelte b/packages/materialdesign-components/src/List/ListItem.svelte
index 979ea3e8b3..f60396ae4d 100644
--- a/packages/materialdesign-components/src/List/ListItem.svelte
+++ b/packages/materialdesign-components/src/List/ListItem.svelte
@@ -2,6 +2,7 @@
   import { onMount, getContext } from "svelte"
   import { Radiobutton } from "../Radiobutton"
   import { Checkbox } from "../Checkbox"
+  import Icon from "../Common/Icon.svelte"
   import ClassBuilder from "../ClassBuilder.js"
   import { generate } from "shortid"
 
@@ -14,7 +15,7 @@
 
   export let _bb
 
-  export let value = null
+  export let value = ""
   export let text = ""
   export let secondaryText = ""
 
@@ -83,7 +84,13 @@
     listProps && listProps.variant === "two-line" && !!secondaryText
 </script>
 
-<li class={listItemClass} role="option" tabindex="0" on:click={handleClick}>
+<li
+  class={listItemClass}
+  role="option"
+  tabindex="0"
+  on:click={handleClick}
+  data-value={value}
+  aria-selected={isSelected}>
   {#if leadingIcon}
     <span class="mdc-list-item__graphic material-icons" aria-hidden="true">
       {leadingIcon}
@@ -103,10 +110,7 @@
       <Checkbox checked={isSelected} {disabled} {_bb} />
     {/if}
   {:else if trailingIcon}
-    <!-- TODO: Adapt label to accept class prop to handle this. Context is insufficient -->
-    <span class="mdc-list-item__meta material-icons" aria-hidden="true">
-      {trailingIcon}
-    </span>
+    <Icon context="list-item__meta" icon={trailingIcon} />
   {/if}
 </li>
 {#if dividerAfter}
diff --git a/packages/materialdesign-components/src/Select/HelperText.svelte b/packages/materialdesign-components/src/Select/HelperText.svelte
new file mode 100644
index 0000000000..0e0016f3df
--- /dev/null
+++ b/packages/materialdesign-components/src/Select/HelperText.svelte
@@ -0,0 +1,31 @@
+<script>
+  import "@material/select/helper-text/mdc-select-helper-text"
+  import { onMount } from "svelte"
+  import { MDCSelectHelperText } from "@material/select/helper-text"
+  import ClassBuilder from "../ClassBuilder.js"
+
+  const cb = new ClassBuilder("select-helper-text")
+
+  let helperText
+  let instance
+
+  export let id = ""
+  export let text = ""
+  export let persistent = false
+
+  onMount(() => {
+    if (!!helperText) {
+      instance = new MDCSelectHelperText(helperText)
+      return () => {
+        instance && instance.destroy()
+        instance = null
+      }
+    }
+  })
+
+  $: modifiers = { persistent }
+  $: props = { modifiers }
+  $: helperClass = cb.build({ props })
+</script>
+
+<p bind:this={helperText} {id} class={helperClass}>{text}</p>
diff --git a/packages/materialdesign-components/src/Select/Select.svelte b/packages/materialdesign-components/src/Select/Select.svelte
new file mode 100644
index 0000000000..d146f4b001
--- /dev/null
+++ b/packages/materialdesign-components/src/Select/Select.svelte
@@ -0,0 +1,87 @@
+<script>
+  import { onMount } from "svelte"
+  import { MDCSelect } from "@material/select"
+  import { generate } from "shortid"
+
+  import HelperText from "./HelperText.svelte"
+  import NotchedOutline from "../Common/NotchedOutline.svelte"
+  import FloatingLabel from "../Common/FloatingLabel.svelte"
+  import createItemsStore from "../Common/ItemStore.js"
+  import ClassBuilder from "../ClassBuilder.js"
+
+  const cb = new ClassBuilder("select", ["filled"])
+
+  let selectedItemsStore
+
+  let select
+  let selectList
+  let instance
+
+  let _helperId = ""
+
+  export let _bb
+  export let onSelect = items => {}
+  export let width = "400px"
+  export let variant = "filled"
+  export let disabled = false
+  export let required = false
+  export let label = ""
+  export let helperText = ""
+
+  onMount(() => {
+    _bb.setContext("BBMD:list:props", { singleSelection: true })
+
+    selectedItemsStore = createItemsStore(() => onSelect($selectedItemsStore))
+    _bb.setContext("BBMD:list:selectItemStore", selectedItemsStore)
+
+    _helperId = generate()
+
+    if (!!select) {
+      instance = new MDCSelect(select)
+      debugger
+      return () => {
+        instance && instance.destroy()
+        instance = null
+      }
+    }
+  })
+
+  $: useNotchedOutline = variant === "outlined"
+  $: selectList && _bb.attachChildren(selectList)
+
+  $: modifiers = { variant, disabled, required, noLabel: !label }
+  $: props = { modifiers }
+  $: selectClass = cb.build({ props })
+</script>
+
+<div bind:this={select} id={_helperId} class={selectClass}>
+  <div class="mdc-select__anchor" style={`width: ${width}`}>
+    <i class="mdc-select__dropdown-icon" />
+    <div
+      id={_helperId}
+      class="mdc-select__selected-text"
+      aria-required={required}
+      aria-controls={_helperId}
+      aria-describedby={_helperId} />
+
+    {#if useNotchedOutline}
+      <NotchedOutline>
+        <FloatingLabel text={label} />
+      </NotchedOutline>
+    {:else}
+      <FloatingLabel text={label} />
+      <div class="mdc-line-ripple" />
+    {/if}
+
+  </div>
+
+  <div
+    class="mdc-select__menu mdc-menu mdc-menu-surface"
+    role="listbox"
+    style={`width: ${width}`}>
+
+    <ul bind:this={selectList} class="mdc-list" />
+
+  </div>
+</div>
+<HelperText id={_helperId} text={helperText} />
diff --git a/packages/materialdesign-components/src/Select/_style.scss b/packages/materialdesign-components/src/Select/_style.scss
new file mode 100644
index 0000000000..e58101303e
--- /dev/null
+++ b/packages/materialdesign-components/src/Select/_style.scss
@@ -0,0 +1,4 @@
+@use "@material/list/mdc-list";
+@use "@material/menu-surface/mdc-menu-surface";
+@use "@material/menu/mdc-menu";
+@use "@material/select/mdc-select";
\ No newline at end of file
diff --git a/packages/materialdesign-components/src/Select/index.js b/packages/materialdesign-components/src/Select/index.js
new file mode 100644
index 0000000000..fbfce001c1
--- /dev/null
+++ b/packages/materialdesign-components/src/Select/index.js
@@ -0,0 +1,2 @@
+import "./_style.scss"
+export { default as Select } from "./Select.svelte";
\ No newline at end of file
diff --git a/packages/materialdesign-components/src/Test/TestApp.svelte b/packages/materialdesign-components/src/Test/TestApp.svelte
index e4320e94e9..bdea8413ed 100644
--- a/packages/materialdesign-components/src/Test/TestApp.svelte
+++ b/packages/materialdesign-components/src/Test/TestApp.svelte
@@ -15,8 +15,8 @@
     Datatable,
     CustomersIndexTable,
     Icon,
-    Menu,
     List,
+    Select,
   } = props
 
   let currentComponent
@@ -36,8 +36,8 @@
             Icon,
             Datatable,
             CustomersIndexTable,
-            Menu,
             List,
+            Select,
           ],
         },
       }
diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js
index 039f056365..4e69766e12 100644
--- a/packages/materialdesign-components/src/Test/props.js
+++ b/packages/materialdesign-components/src/Test/props.js
@@ -144,29 +144,31 @@ export const props = {
         secondaryText: "Salmon or Cod",
         value: 2,
       },
-    ]
+    ],
   },
-  Menu: {
-    _component: "@budibase/materialdesign-components/Menu",
-    onSelect: items => console.log("MENU SELECT", items),
+  Select: {
+    _component: "@budibase/materialdesign-components/Select",
+    label: "Choose a Milkshake",
+    helperText: "Choose a flavour",
+    onSelect: selectedItem => console.log("SELECT ITEM", selectedItem),
     _children: [
       {
         _component: "@budibase/materialdesign-components/ListItem",
         _children: [],
-        text: "Settings",
+        text: "Orange",
         value: 0,
       },
       {
         _component: "@budibase/materialdesign-components/ListItem",
         _children: [],
-        text: "Account",
+        text: "Apple",
         value: 1,
       },
       {
         _component: "@budibase/materialdesign-components/ListItem",
         _children: [],
-        text: "Profile",
-        value: 2,
+        text: "Berry",
+        value: 0,
       },
     ],
   },
diff --git a/packages/materialdesign-components/src/Textfield/Textfield.svelte b/packages/materialdesign-components/src/Textfield/Textfield.svelte
index a5d5517df0..7de3141e54 100644
--- a/packages/materialdesign-components/src/Textfield/Textfield.svelte
+++ b/packages/materialdesign-components/src/Textfield/Textfield.svelte
@@ -71,7 +71,6 @@
   let useIcon = !!icon && !textarea && !fullwidth
 
   if (useIcon) {
-    setContext("BBMD:icon:context", "text-field")
     let iconClass = trailingIcon ? "with-trailing-icon" : "with-leading-icon"
     modifiers = { ...modifiers, iconClass }
   }
@@ -124,7 +123,7 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
         on:change={changed} />
     {:else}
       {#if renderLeadingIcon}
-        <Icon {icon} />
+        <Icon context="text-field" {icon} />
       {/if}
       <input
         {id}
@@ -140,7 +139,7 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
         on:focus={focus}
         on:input={changed} />
       {#if renderTrailingIcon}
-        <Icon {icon} />
+        <Icon context="text-field" {icon} />
       {/if}
       {#if variant !== 'outlined'}
         <div class="mdc-line-ripple" />
diff --git a/packages/materialdesign-components/src/index.js b/packages/materialdesign-components/src/index.js
index 3517b2ed7e..5e1df0081e 100644
--- a/packages/materialdesign-components/src/index.js
+++ b/packages/materialdesign-components/src/index.js
@@ -17,4 +17,5 @@ export {
 export { default as indexDatatable } from "./Templates/indexDatatable"
 export { default as recordForm } from "./Templates/recordForm"
 export { List, ListItem } from "./List"
-export {Menu} from "./Menu"
+export { Menu } from "./Menu"
+export { Select } from "./Select"

From cc2c6764ee06c8d836ef690583f7599838e13e0a Mon Sep 17 00:00:00 2001
From: Conor Mack <cmckeown101@gmail.com>
Date: Wed, 4 Mar 2020 11:02:17 +0000
Subject: [PATCH 5/5] Completed MD Select

---
 .../materialdesign-components/src/Select/HelperText.svelte     | 2 +-
 packages/materialdesign-components/src/Select/Select.svelte    | 3 ++-
 packages/materialdesign-components/src/Select/index.js         | 1 +
 packages/materialdesign-components/src/Test/props.js           | 1 +
 4 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/materialdesign-components/src/Select/HelperText.svelte b/packages/materialdesign-components/src/Select/HelperText.svelte
index 0e0016f3df..888f6e5267 100644
--- a/packages/materialdesign-components/src/Select/HelperText.svelte
+++ b/packages/materialdesign-components/src/Select/HelperText.svelte
@@ -28,4 +28,4 @@
   $: helperClass = cb.build({ props })
 </script>
 
-<p bind:this={helperText} {id} class={helperClass}>{text}</p>
+<p bind:this={helperText} {id} class={helperClass} aria-hidden="true">{text}</p>
diff --git a/packages/materialdesign-components/src/Select/Select.svelte b/packages/materialdesign-components/src/Select/Select.svelte
index d146f4b001..28cf58697f 100644
--- a/packages/materialdesign-components/src/Select/Select.svelte
+++ b/packages/materialdesign-components/src/Select/Select.svelte
@@ -27,6 +27,7 @@
   export let required = false
   export let label = ""
   export let helperText = ""
+  export let persistent = false
 
   onMount(() => {
     _bb.setContext("BBMD:list:props", { singleSelection: true })
@@ -84,4 +85,4 @@
 
   </div>
 </div>
-<HelperText id={_helperId} text={helperText} />
+<HelperText id={_helperId} text={helperText} {persistent} />
diff --git a/packages/materialdesign-components/src/Select/index.js b/packages/materialdesign-components/src/Select/index.js
index fbfce001c1..ee0c361c69 100644
--- a/packages/materialdesign-components/src/Select/index.js
+++ b/packages/materialdesign-components/src/Select/index.js
@@ -1,2 +1,3 @@
 import "./_style.scss"
+export { default as HelperText } from "./HelperText.svelte"
 export { default as Select } from "./Select.svelte";
\ No newline at end of file
diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js
index 4e69766e12..942b031117 100644
--- a/packages/materialdesign-components/src/Test/props.js
+++ b/packages/materialdesign-components/src/Test/props.js
@@ -150,6 +150,7 @@ export const props = {
     _component: "@budibase/materialdesign-components/Select",
     label: "Choose a Milkshake",
     helperText: "Choose a flavour",
+    persistent: true,
     onSelect: selectedItem => console.log("SELECT ITEM", selectedItem),
     _children: [
       {