Merge branch 'master' of github.com:Budibase/budibase

package.json

@@ -24,5 +24,8 @@
     "lint:fix": "eslint --fix packages",
     "format": "prettier --write \"{,!(node_modules)/**/}*.{js,jsx,svelte}\""
   },
-  "dependencies": {}
+  "dependencies": {
+    "@material/icon-button": "4.0.0",
+    "date-fns": "^2.10.0"
+  }
 }

packages/builder/src/budibase.css

@@ -1,7 +1,8 @@
 /* Budibase Component Styles */
 .header {
     font-size: 0.75rem;
-    color: #999;
+    color: #000333;
+    opacity: 0.4;
     text-transform: uppercase;
     margin-top: 1rem;
     font-weight: 500;
@@ -58,7 +59,7 @@
     cursor: pointer;
     padding: 0 7px 0 3px;
     height: 35px;
-    margin: 5px 0;
+    margin: 5px 20px 5px 0px;
     border-radius: 0 5px 5px 0;
     display: flex;
     align-items: center;
@@ -68,7 +69,7 @@
 
 .budibase__nav-item.selected {
     color: var(--button-text);
-    background: var(--background-button) !important;
+    background: #fafafa !important;
 }
 
 .budibase__nav-item:hover {
@@ -82,7 +83,7 @@
     border: 1px solid #DBDBDB;
     text-align: left;
     letter-spacing: 0.7px;
-    color: #163057;
+    color: #000333;
     font-size: 16px;
     padding-left: 5px;
 }

packages/builder/src/common/ActionButton.svelte

@@ -2,6 +2,7 @@
   export let disabled = false
   export let hidden = false
   export let primary = true
+  export let cancel = false
   export let alert = false
   export let warning = false
 </script>
@@ -12,6 +13,7 @@
   class:hidden
   class:primary
   class:alert
+  class:cancel
   class:warning
   {disabled}>
   <slot />
@@ -19,8 +21,8 @@
 
 <style>
   .primary {
-    color: #0055ff;
+    color: #ffffff;
-    background: rgb(54, 133, 249, 0.1);
+    background: #0055ff;
   }
 
   .alert {
@@ -28,17 +30,23 @@
     background: rgba(255, 0, 31, 0.1);
   }
 
+  .cancel {
+    color: var(--secondary40);
+    background: none;
+  }
+
   .button {
     font-size: 14px;
-    font-weight: bold;
+    font-weight: 600;
     border-radius: 5px;
     border: none;
-    min-width: 120px;
+    padding: 10px 20px;
     height: 45px;
   }
 
   .button:hover {
     cursor: pointer;
+    font-weight: 700;
   }
 
   .button:disabled {

packages/builder/src/common/ButtonGroup.svelte

@@ -8,9 +8,8 @@
 
 <style>
   .root {
-    display: grid;
+    display: flex;
-    grid-auto-flow: column;
+    flex-direction: row;
-    grid-gap: 5px;
+    justify-content: space-between;
-    width: 50%;
   }
 </style>

packages/builder/src/common/ConfirmDialog.svelte

@@ -41,13 +41,26 @@
       <h4 class="budibase__title--4">{title}</h4>
     </div>
     <div class="uk-modal-body">
-      <slot>{body}</slot>
+      <slot class="rows">{body}</slot>
     </div>
     <div class="uk-modal-footer">
       <ButtonGroup>
+        <ActionButton cancel on:click={cancel}>{cancelText}</ActionButton>
         <ActionButton primary on:click={ok}>{okText}</ActionButton>
-        <ActionButton alert on:click={cancel}>{cancelText}</ActionButton>
       </ButtonGroup>
     </div>
   </div>
 </div>
+
+<style>
+
+.uk-modal-footer {
+  background: var(--lightslate);
+}
+
+.uk-modal-dialog {
+  width: 400px;
+  border-radius: 5px;
+}
+
+</style>

packages/builder/src/common/PlusButton.svelte

@@ -8,8 +8,6 @@
     outline: none;
     border: none;
     border-radius: 5px;
-    background: rgba(249, 249, 249, 1);
-
     min-width: 1.8rem;
     min-height: 1.8rem;
     padding-bottom: 10px;
@@ -20,6 +18,6 @@
 
     font-size: 1.2rem;
     font-weight: 700;
-    color: rgba(22, 48, 87, 1);
+    color: var(--secondary100);
   }
 </style>

packages/builder/src/common/Select.svelte

@@ -23,11 +23,11 @@
   }
 
   select {
-    height: 35px;
+    height: 40px;
     display: block;
     font-family: sans-serif;
-    font-weight: 500;
+    font-weight: 400;
-    color: #163057;
+    color: #000333;
     padding: 0 2.6em 0em 1.4em;
     width: 100%;
     max-width: 100%;
@@ -36,8 +36,7 @@
     -moz-appearance: none;
     -webkit-appearance: none;
     appearance: none;
-    background: #fff;
+    background: var(--lightslate);
-    border: 1px solid #ccc;
   }
 
   .arrow {

packages/builder/src/global.css

@@ -1,21 +1,23 @@
 @import "./budibase.css";
 
 :root {
-    --primary100: #173157FF;
+    --primary100: #0055ff;
-    --primary75: #454CA0BF;
+    --primary80: rgba(0, 85, 255, 0.8);
-    --primary50: #454CA080;
+    --primary60: #rgba(0, 85, 255, 0.6);
-    --primary25: #454CA040;
+    --primary40: #rgba(0, 85, 255, 0.4);
-    --primary10: #454CA01A;
+    --primary20: #rgba(0, 85, 255, 0.2);
-    --primary5: #454ca00c;
+    --primary10: #rgba(0, 85, 255, 0.1);
-    --primarydark: #3F448A;
+    --primary5: #rgba(0, 85, 255, 0.05);
+    --primarydark: #0044cc;
 
-    --secondary100:#828fa5;
+    --secondary100:#000333;
-    --secondary75: #162B4DBF;
+    --secondary80: rgba(0, 3, 51, 0.8);
-    --secondary50: #162B4D80;
+    --secondary60: rgba(0, 3, 51, 0.6);
-    --secondary25: #162B4D40;
+    --secondary40: rgba(0, 3, 51, 0.4);
-    --secondary10: #162B4D1A;
+    --secondary20: rgba(0, 3, 51, 0.2);
-    --secondary5:#fff;
+    --secondary10: rgba(0, 3, 51, 0.1);
-    --secondarydark: #3F448A;
+    --secondary5: rgba(0, 3, 51, 0.05);
+    --secondarydark: #00021a;
 
     --tertiary: #F2F5F7;
 
@@ -35,8 +37,8 @@
 
     --white: #FFFFFF;
     --darkslate: #1a202c;
-    --slate: #a0aec0;
+    --slate: #d8d8d8;
-    --lightslate: #f7fafc;
+    --lightslate: #f9f9f9;
 
     --borderradius: 2px;
     --borderradiusall: 2px 2px 2px 2px;
@@ -55,13 +57,13 @@
     --quotation: var(--fontnormal) "italics" var(--darkslate) 16pt;
     --smallheavybodytext: var(--fontbold) "regular" var(--secondary100) 14pt;
 
-    --background-button: #e6eeff;
+    --background-button: #f9f9f9;
     --button-text: #0055ff;
 }
 
 html, body {
     font-family: var(--fontnormal);
-    color: var(--secondary100);
+    color: var(--secondary80);
     padding: 0;
     margin: 0;
     height:100%;
@@ -83,7 +85,7 @@ h2 {
 h3 {
     font-family: var(--fontbold);
     font-size: 24pt;
-    color: var(--darkslate);
+    color: var(--secondary60);
 }
 
 h4 {

packages/builder/src/nav/BackendNav.svelte

@@ -99,7 +99,7 @@
     flex-direction: column;
     max-height: 100%;
     height: 100%;
-    background-color: var(--secondary5);
+    background-color: var(--white);
   }
 
   .nav-group-header {

packages/builder/src/userInterface/ComponentPropertiesPanel.svelte

@@ -162,38 +162,49 @@
   .component-props-container {
     margin-top: 10px;
     flex: 1 1 auto;
-    overflow-y: auto;
   }
 
   ul {
     list-style: none;
     display: flex;
+    justify-content: space-between;
     padding: 0;
   }
 
   li {
-    margin-right: 20px;
     background: none;
-    border-radius: 5px;
+    border-radius: 3px;
     width: 48px;
     height: 48px;
   }
 
+
+
   li button {
-    width: 100%;
+    width: 48px;
-    height: 100%;
+    height: 48px;
     background: none;
     border: none;
-    border-radius: 5px;
+    border-radius: 3px;
-    padding: 12px;
+    padding: 7px;
     outline: none;
     cursor: pointer;
     position: relative;
   }
 
+  li:nth-last-child(1) {
+    margin-right: 0px;
+    background: none;
+    border-radius: 3px;
+    width: 48px;
+    height: 48px;
+  }
+
   .selected {
     color: var(--button-text);
-    background: var(--background-button) !important;
+    background: #f9f9f9 !important;
+    width: 48px;
+    height: 48px;
   }
 
   .button-indicator {

packages/builder/src/userInterface/ComponentSelectionList.svelte

@@ -239,12 +239,12 @@
     position: relative;
     padding: 0 15px;
     cursor: pointer;
-    border: 1px solid #ebebeb;
+    border: 1px solid #d8d8d8;
     border-radius: 2px;
     margin: 5px 0;
     height: 40px;
     box-sizing: border-box;
-    color: #163057;
+    color: #000333;
     display: flex;
     align-items: center;
     flex: 1;
@@ -256,11 +256,10 @@
   }
 
   .component > .name {
-    color: #163057;
+    color: #000333;
     display: inline-block;
     font-size: 12px;
-    font-weight: bold;
+    opacity: 0.8;
-    opacity: 0.6;
   }
 
   ul {
@@ -279,12 +278,11 @@
     background: #fafafa;
     padding: 10px;
     border-radius: 2px;
-    color: rgba(22, 48, 87, 0.6);
+    color:var(--secondary80);
   }
 
   .preset-menu > span {
     font-size: 12px;
-    font-weight: bold;
     text-transform: uppercase;
     margin-top: 5px;
   }

packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte

@@ -94,7 +94,7 @@
     border-radius: 3px;
     height: 35px;
     align-items: center;
-    font-weight: normal;
+    font-weight: 400;
   }
 
   .item button {

packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte

@@ -46,7 +46,7 @@
 
     </div>
   {/if}
-
+ 
 </div>
 
 <style>
@@ -54,14 +54,15 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    padding: 2rem 0;
+    padding: 20px 0;
   }
 
   .switcher {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 25px;
+    margin-bottom: 20px;
-    padding: 0 1.5rem;
+    padding: 0 20px 20px;
+    border-bottom: 1px solid #d8d8d8;
   }
 
   .switcher > button {
@@ -70,21 +71,21 @@
     margin: 0;
     padding: 0;
     cursor: pointer;
-    font-weight: 600;
+    font-size: 14px;
-    font-size: 0.85rem;
+    font-weight: 400;
     text-transform: uppercase;
-    color: #999;
+    color: var(--secondary60);
-    background-color: rgba(0, 0, 0, 0);
   }
 
   .switcher > .selected {
-    color: #333;
+    color: var(--secondary100);
+    font-weight: 500;
   }
 
   .panel {
     flex: 1 1 auto;
     height: 0px;
     overflow-y: auto;
-    padding: 0 1.5rem 1.5rem 1.5rem;
+    padding: 0 20px 40px 20px;
   }
 </style>

packages/builder/src/userInterface/LayoutEditor.svelte

@@ -136,7 +136,8 @@
     text-transform: uppercase;
     font-size: 12px;
     font-weight: 700;
-    color: #8997ab;
+    color: #000333;
+    opacity: 0.6;
     margin-bottom: 10px;
   }
 
@@ -144,16 +145,16 @@
     text-transform: uppercase;
     font-size: 10px;
     font-weight: 700;
-    color: #163057;
+    color: #000333;
-    opacity: 0.3;
+    opacity: 0.4;
     margin-bottom: 15px;
   }
 
   h5 {
     font-size: 12px;
-    font-weight: 700;
+    font-weight: 400;
-    color: #163057;
+    color: #000333;
-    opacity: 0.6;
+    opacity: 0.8;
     padding-top: 12px;
     margin-bottom: 0;
   }

packages/builder/src/userInterface/LayoutTemplateControls.svelte

@@ -51,26 +51,26 @@
 <style>
   .selected {
     color: var(--button-text);
-    background: var(--background-button);
+    background: #f9f9f9;
+    opacity: 1;
   }
 
   button {
     cursor: pointer;
     outline: none;
     border: none;
-    border-radius: 5px;
+    border-radius: 3px;
-    background: rgba(249, 249, 249, 1);
 
     min-width: 1.6rem;
     min-height: 1.6rem;
 
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
 
     font-size: 1.2rem;
     font-weight: 500;
-    color: rgba(22, 48, 87, 1);
+    color: #000333;
   }
 
   .inputs {

packages/builder/src/userInterface/NewScreen.svelte

@@ -126,3 +126,36 @@
 
 </ConfirmDialog>
 
+<style>
+
+.uk-margin {
+  display: flex;
+  flex-direction: column;
+}
+
+.uk-form-controls {
+  margin-left: 0 !important;
+}
+
+.uk-form-label {
+  padding-bottom: 10px;
+  font-weight: 500;
+  font-size: 16px;
+  color: var(--secondary80);
+}
+
+.uk-input {
+  height: 40px !important;
+  border-radius: 3px;
+}
+
+.uk-select {
+  height: 40px !important;
+  font-weight: 500px;
+  color: var(--secondary60);
+  border: 1px solid var(--slate);
+  border-radius: 3px;
+}
+
+</style>
+

packages/builder/src/userInterface/PagesList.svelte

@@ -46,7 +46,7 @@
   .root {
     padding-bottom: 10px;
     font-size: 0.9rem;
-    color: var(--secondary50);
+    color: #000333;
     font-weight: bold;
     position: relative;
     padding-left: 1.8rem;
@@ -79,6 +79,6 @@
   .icon {
     display: inline-block;
     width: 14px;
-    color: #333;
+    color: #000333;
   }
 </style>

packages/builder/src/userInterface/PropControl.svelte

@@ -34,14 +34,15 @@
     grid-template-rows: 1fr;
     grid-template-columns: 70px 1fr;
     grid-gap: 10px;
+    align-items: baseline;
   }
 
   h5 {
     word-wrap: break-word;
     font-size: 12px;
-    font-weight: 700;
+    font-weight: 400;
-    color: #163057;
+    color: #000333;
-    opacity: 0.6;
+    opacity: 0.8;
     padding-top: 12px;
     margin-bottom: 0;
   }

packages/builder/src/userInterface/PropertyCascader/PropertyCascader.svelte

@@ -91,9 +91,7 @@
     cursor: pointer;
     outline: none;
     border: none;
-    border-radius: 5px;
+    border-radius: 3px;
-    background: rgba(249, 249, 249, 1);
-
     font-size: 1.6rem;
     font-weight: 700;
     color: rgba(22, 48, 87, 1);

packages/builder/src/userInterface/UserInterfaceRoot.svelte

@@ -43,7 +43,9 @@
     <div class="pages-list-container">
       <div class="nav-header">
         <span class="navigator-title">Navigator</span>
-        <span class="components-nav-header">Pages</span>
+          <div class="border-line" />
+
+        <span class="components-nav-page">Pages</span>
       </div>
 
       <div class="nav-items-container">
@@ -108,17 +110,28 @@
     padding: 0;
   }
 
+
+.root {
+  display: grid;
+  grid-template-columns: 275px 1fr 275px;
+  height: 100%;
+  width: 100%;
+  background: #fafafa;
+}
+
+@media only screen and (min-width: 1800px) {
   .root {
     display: grid;
-    grid-template-columns: 290px 1fr 350px;
+    grid-template-columns: 300px 1fr 300px;
     height: 100%;
     width: 100%;
     background: #fafafa;
   }
+}
 
   .ui-nav {
     grid-column: 1;
-    background-color: var(--secondary5);
+    background-color: var(--white);
     height: calc(100vh - 49px);
     padding: 0;
     overflow: hidden;
@@ -136,29 +149,34 @@
 
   .components-pane {
     grid-column: 3;
-    background-color: var(--secondary5);
+    background-color: var(--white);
     min-height: 0px;
     overflow-y: hidden;
   }
 
-  .components-nav-header {
+  .components-nav-page {
-    font-size: 0.75rem;
+    font-size: 12px;
-    color: #999;
+    color: #000333;
     text-transform: uppercase;
-    margin-top: 1rem;
+    padding-left: 20px;
-    font-weight: 500;
+    margin-top: 20px;
+    font-weight: 700;
+    opacity: 0.6;
   }
 
-  .nav-group-header {
+  .components-nav-header {
-    font-size: 0.9rem;
+    font-size: 12px;
-    padding-left: 1rem;
+    color: #000333;
+    text-transform: uppercase;
+    margin-top: 20px;
+    font-weight: 700;
+    opacity: 0.6;
   }
 
   .nav-header {
     display: flex;
     flex-direction: column;
-    margin-top: 1.5rem;
+    margin-top: 20px;
-    padding: 0 1.8rem;
   }
 
   .nav-items-container {
@@ -167,7 +185,7 @@
 
   .nav-group-header {
     display: flex;
-    padding: 1.5rem 0 0 1.8rem;
+    padding: 0px 20px 0px 20px;
     font-size: 0.9rem;
     font-weight: bold;
     justify-content: space-between;
@@ -200,20 +218,20 @@
   }
 
   .navigator-title {
+    font-size: 14px;
+    color: var(--secondary100);
+    font-weight: 500;
     text-transform: uppercase;
-    font-weight: 400;
+    padding: 0 20px 20px 20px;
-    color: #999;
+    line-height: 1rem !important;
-    font-size: 0.9rem;
   }
 
   .border-line {
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid #d8d8d8;
-    margin-top: 1.5rem;
-    width: calc(100% + 1.5rem);
   }
 
   .components-list-container {
     overflow: auto;
-    padding: 0 30px 0 0;
+    padding: 20px 0px 0 0;
   }
 </style>

packages/materialdesign-components/components.json

@@ -169,6 +169,16 @@
     "description": "Material Design <tr>.",
     "props": {}
   },
+  "DatePicker": {
+    "name": "DatePicker",
+    "description": "Material Design DatePicker",
+    "props": {
+      "date": "string",
+      "label": "string",
+      "onSelect": "event"
+    },
+    "tags": []
+  },
   "H1": {
     "name": "H1",
     "description": "Sets the font properties as Roboto Headline1",
@@ -217,6 +227,18 @@
     },
     "tags": []
   },
+  "IconButton": {
+    "onClick": "event",
+    "disabled": "bool",
+    "href": "string",
+    "icon": "string",
+    "size": {
+      "type":"options",
+      "options": ["small", "medium", "large"],
+      "default": "medium"
+    },
+    "tags": []
+  },
   "Label": {
     "name": "Label",
     "description": "A simple label component that displays its text in the standard Roboto Material Design font",

packages/materialdesign-components/package.json

@@ -18,6 +18,7 @@
     "@material/checkbox": "^4.0.0",
     "@material/data-table": "4.0.0",
     "@material/form-field": "^4.0.0",
+    "@material/icon-button": "4.0.0",
     "@material/list": "4.0.0",
     "@material/menu": "4.0.0",
     "@material/radio": "^4.0.0",
@@ -25,6 +26,7 @@
     "@material/textfield": "^4.0.0",
     "@nx-js/compiler-util": "^2.0.0",
     "bcryptjs": "^2.4.3",
+    "date-fns": "^2.10.0",
     "fs-extra": "^8.1.0",
     "lodash": "^4.17.15",
     "npm-run-all": "^4.1.5",

packages/materialdesign-components/src/Common/Ripple.js

@@ -2,7 +2,7 @@ import { MDCRipple } from "@material/ripple"
 
 export default function ripple(
   node,
-  props = { colour: "primary", unbounded: false }
+  props = { colour: "primary", unbounded: true }
 ) {
   node.classList.add("mdc-ripple-surface")
   let component = new MDCRipple(node)

packages/materialdesign-components/src/DatePicker/DatePicker.svelte

@@ -0,0 +1,178 @@
+<script>
+  import { onMount } from "svelte"
+  import {
+    startOfMonth,
+    endOfMonth,
+    getDate,
+    getMonth,
+    getYear,
+    addMonths,
+    subMonths,
+    format,
+  } from "date-fns"
+  import { MDCMenu } from "@material/menu"
+  import { Textfield } from "../Textfield"
+  import Icon from "../Common/Icon.svelte"
+  import ripple from "../Common/Ripple.js"
+  import { Body1, Body2, Caption } from "../Typography"
+  import { IconButton } from "../IconButton"
+
+  let menu
+  let instance
+  let textfieldValue = ""
+
+  let daysArr = []
+  let navDate = new Date()
+  const weekdayMap = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
+
+  export let date = new Date()
+  export let label = ""
+  export let onSelect = selectedDate => {}
+
+  onMount(() => {
+    if (!!menu) {
+      instance = new MDCMenu(menu)
+      instance.open = false
+      instance.setFixedPostion = true
+    }
+  })
+
+  function selectDate(dayOfMonth) {
+    let month = getMonth(navDate)
+    let year = getYear(navDate)
+    date = new Date(year, month, dayOfMonth)
+    onSelect(date)
+  }
+
+  function addMonth() {
+    navDate = addMonths(navDate, 1)
+  }
+
+  function subtractMonth() {
+    navDate = subMonths(navDate, 1)
+  }
+
+  function openCalendar(isOpen) {
+    instance.open = isOpen === undefined ? !instance.open : isOpen
+  }
+
+  function textFieldChange(value) {
+    const isDate = /^\d{1,2}\/\d{1,2}\/\d{4}$/
+    if (isDate.test(value)) {
+      const [year, month, day] = value.split("/").reverse()
+      if (month > 0 && month <= 12 && (day > 0 && day <= 31)) {
+        date = new Date(year, month - 1, day)
+        navDate = date
+        openCalendar(true)
+        onSelect(date)
+      }
+    }
+  }
+
+  $: dateMonthEnds = endOfMonth(navDate).getDate()
+  $: dateMonthBegins = startOfMonth(navDate).getDay()
+  $: dayStart = dateMonthBegins + 1 //1 = sunday
+  $: monthAndYear = format(navDate, "MMMM y")
+  $: selectedDate = format(date, "dd/MM/yyyy")
+  $: dayOfSelectedDate = getDate(date)
+  $: for (let d = 1; d <= dateMonthEnds; d++) {
+    if (d === 1) {
+      daysArr = [d]
+    } else {
+      daysArr = [...daysArr, d]
+    }
+  }
+  $: rowRepeater =
+    dateMonthBegins > 5 && daysArr[daysArr.length - 1] > 30 ? 6 : 5
+  $: sameMonthAndYear =
+    getMonth(date) === getMonth(navDate) && getYear(date) === getYear(navDate)
+</script>
+
+<div class="mdc-menu-surface--anchor">
+  <Textfield
+    {label}
+    onChange={textFieldChange}
+    value={selectedDate}
+    trailingIcon={true}
+    useIconButton={true}
+    iconButtonClick={openCalendar}
+    icon="calendar_today" />
+
+  <div
+    bind:this={menu}
+    class="mdc-menu mdc-menu-surface bbmd-menu"
+    style={`margin-top: 70px`}>
+    <div class="calendar-container">
+      <div class="month-picker">
+        <div>
+          <IconButton icon="chevron_left" onClick={subtractMonth} />
+        </div>
+        <div class="centreText">
+          <Body1 text={monthAndYear} />
+        </div>
+        <div>
+          <IconButton icon="chevron_right" onClick={addMonth} />
+        </div>
+      </div>
+      <div class="week-days">
+        {#each weekdayMap as day, i}
+          <div class="centreText">
+            <Caption text={day} />
+          </div>
+        {/each}
+      </div>
+      <div
+        class="day-picker"
+        style={`grid-template-rows: repeat(${rowRepeater}, 40px)`}>
+        {#each daysArr as day, i}
+          <div
+            use:ripple
+            style={i === 0 ? `grid-column-start: ${dayStart}` : ``}
+            on:click={() => selectDate(day)}
+            class={`bbmd-day ${dayOfSelectedDate === day && sameMonthAndYear ? 'selected' : ''}`}>
+            <Body2 text={day} />
+          </div>
+        {/each}
+      </div>
+    </div>
+
+    <!-- Superfluous but necessary to keep the menu instance sweet -->
+    <ul class="mdc-list" role="menu" />
+  </div>
+</div>
+
+<style>
+  .bbmd-menu {
+    width: 330px;
+    height: auto;
+    padding: 5px;
+  }
+
+  .month-picker {
+    display: grid;
+    grid-template-columns: 40px 1fr 40px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .calendar-container {
+    display: grid;
+    height: 100%;
+    grid-template-rows: repeat(3, auto);
+    grid-gap: 5px;
+  }
+
+  .week-days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .day-picker {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .centreText {
+    text-align: center;
+  }
+</style>

packages/materialdesign-components/src/DatePicker/_style.scss

@@ -0,0 +1,15 @@
+@import "@material/ripple/mdc-ripple.scss";
+@import "@material/theme/mixins";
+
+.bbmd-day {
+  transition: background-color .25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  display: flex;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.selected {
+  @include mdc-theme-prop(background-color, primary);
+  @include mdc-theme-prop(color, on-primary);
+}

packages/materialdesign-components/src/DatePicker/index.js

@@ -0,0 +1,2 @@
+import "./_style.scss";
+export { default as DatePicker } from "./DatePicker.svelte";

packages/materialdesign-components/src/IconButton/IconButton.svelte

@@ -0,0 +1,66 @@
+<script>
+  import ripple from "../Common/Ripple.js"
+  import ClassBuilder from "../ClassBuilder.js"
+
+  const cb = new ClassBuilder("icon-button")
+
+  let on = false
+
+  export let _bb
+  export let context = ""
+  export let onClick = () => {}
+  export let disabled = false
+  export let href = ""
+  export let icon = ""
+  export let onIcon = "" //on state icon for toggle button
+  export let size = "medium"
+
+  function onButtonClick() {
+    open = !open
+    onClick()
+  }
+
+  $: isToggleButton = !!icon && !!onIcon
+  $: useLinkButton = !!href
+
+  $: customs = { size }
+  $: props = { customs, extras: ["material-icons", context] }
+  $: iconBtnClass = cb.build({ props })
+</script>
+
+{#if useLinkButton}
+  <a
+    on:click={onButtonClick}
+    class={iconBtnClass}
+    {href}
+    {disabled}
+    role="button"
+    tabindex="0">
+    {#if isToggleButton}
+      <i
+        use:ripple
+        class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">
+        {onIcon}
+      </i>
+      <i use:ripple class="material-icons mdc-icon-button__icon">{icon}</i>
+    {:else}{icon}{/if}
+  </a>
+{:else}
+  <button
+    on:click={onButtonClick}
+    class={iconBtnClass}
+    {disabled}
+    role="button"
+    aria-label="Add to favorites"
+    aria-pressed="false"
+    tabindex="0">
+    {#if isToggleButton}
+      <i use:ripple class="material-icons mdc-icon-button__icon">{icon}</i>
+      <i
+        use:ripple
+        class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">
+        {onIcon}
+      </i>
+    {:else}{icon}{/if}
+  </button>
+{/if}

packages/materialdesign-components/src/IconButton/_style.scss

@@ -0,0 +1,18 @@
+@import "@material/icon-button/mdc-icon-button";
+
+.mdc-icon-button {
+
+  &.bbmd-mdc-icon-button--size-large {
+    @include mdc-icon-button-icon-size(24px);
+  }
+  
+  &.bbmd-mdc-icon-button--size-medium {
+    @include mdc-icon-button-icon-size(20px);
+  }
+  
+  &.bbmd-mdc-icon-button--size-small {
+    @include mdc-icon-button-icon-size(16px);
+  }
+}
+
+

packages/materialdesign-components/src/IconButton/index.js

@@ -0,0 +1,2 @@
+import "./_style.scss";
+export { default as IconButton } from "./IconButton.svelte";

packages/materialdesign-components/src/Test/TestApp.svelte

@@ -17,6 +17,8 @@
     Icon,
     List,
     Select,
+    DatePicker,
+    IconButton,
   } = props
 
   let currentComponent
@@ -34,6 +36,8 @@
             Select,
             Radiobutton,
             Radiobuttongroup,
+            DatePicker,
+            IconButton,
           ],
         },
       }

packages/materialdesign-components/src/Test/props.js

@@ -205,5 +205,16 @@ export const props = {
         value: "2",
       },
     ],
-  }
+  },
+  DatePicker: {
+    _component: "@budibase/materialdesign-components/DatePicker",
+    _children: [],
+    label: "Date of Admission",
+    onSelect: date => console.log("SELECTED DATE", date)
+  },
+  IconButton: {
+    _component: "@budibase/materialdesign-components/IconButton",
+    _children: [],
+    icon: "calendar_today",
+  },
 }

packages/materialdesign-components/src/Textfield/Textfield.svelte

@@ -9,10 +9,12 @@
   import HelperText from "./HelperText.svelte"
   import CharacterCounter from "./CharacterCounter.svelte"
   import Icon from "../Common/Icon.svelte"
+  import { IconButton } from "../IconButton"
 
   const cb = new ClassBuilder("text-field", ["primary", "medium"])
 
   let tf = null
+  export let tfHeight = null
   let tfInstance = null
 
   onMount(() => {
@@ -40,6 +42,8 @@
   export let placeholder = ""
   export let icon = ""
   export let trailingIcon = false
+  export let useIconButton = false
+  export let iconButtonClick = () => {}
   export let textarea = false
   export let rows = 4
   export let cols = 40
@@ -93,10 +97,11 @@
   function changed(e) {
     const val = e.target.value
     value = val
-    if (_bb.isBound(_bb.props.value)) {
+    onChange(value)
-      _bb.setStateFromBinding(_bb.props.value, val)
+    // if (_bb.isBound(_bb.props.value)) {
-    }
+    //   _bb.setStateFromBinding(_bb.props.value, val)
-    _bb.call(onChange, val)
+    // }
+    // _bb.call(onChange, val)
   }
 </script>
 
@@ -105,7 +110,7 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
  -->
 
 <div class="textfield-container" class:fullwidth>
-  <div bind:this={tf} class={blockClasses}>
+  <div bind:this={tf} bind:clientHeight={tfHeight} class={blockClasses}>
     {#if textarea}
       <CharacterCounter />
       <textarea
@@ -123,7 +128,14 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
         on:change={changed} />
     {:else}
       {#if renderLeadingIcon}
-        <Icon context="text-field" {icon} />
+        {#if useIconButton}
+          <IconButton
+            {icon}
+            context="mdc-text-field__icon mdc-text-field__icon--leading"
+            onClick={iconButtonClick} />
+        {:else}
+          <Icon context="text-field" {icon} />
+        {/if}
       {/if}
       <input
         {id}
@@ -139,7 +151,14 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
         on:focus={focus}
         on:input={changed} />
       {#if renderTrailingIcon}
-        <Icon context="text-field" {icon} />
+        {#if useIconButton}
+          <IconButton
+            {icon}
+            context="mdc-text-field__icon mdc-text-field__icon--trailing"
+            onClick={iconButtonClick} />
+        {:else}
+          <Icon context="text-field" {icon} />
+        {/if}
       {/if}
       {#if variant !== 'outlined'}
         <div class="mdc-line-ripple" />

packages/materialdesign-components/src/Typography/Caption.svelte

@@ -2,4 +2,4 @@
   export let text = ""
 </script>
 
-<div class="mdc-typography--caption">{text}</div>
+<span class="mdc-typography--caption">{text}</span>

packages/materialdesign-components/src/index.js

@@ -19,3 +19,5 @@ export { default as recordForm } from "./Templates/recordForm"
 export { List, ListItem } from "./List"
 export { Menu } from "./Menu"
 export { Select } from "./Select"
+export { DatePicker } from "./DatePicker"
+export { IconButton } from "./IconButton"

packages/standard-components/src/Button.svelte

@@ -78,13 +78,12 @@
     box-sizing: border-box;
     border: 1px solid #ccc;
     border-radius: 2px;
-    color: #333;
+    color: #000333;
-    background-color: #f4f4f4;
     outline: none;
   }
 
   .default:active {
-    background-color: #ddd;
+    background-color: #f9f9f9;
   }
 
   .default:focus {

packages/standard-components/src/Login.svelte

@@ -155,16 +155,15 @@
     box-sizing: border-box;
     border: 1px solid #ccc;
     border-radius: 2px;
-    color: #333;
+    color: #000333;
-    background-color: #f4f4f4;
     outline: none;
   }
 
   .default-button:active {
-    background-color: #ddd;
+    background-color: #f9f9f9;
   }
 
   .default-button:focus {
-    border-color: #666;
+    border-color: #f9f9f9;
   }
 </style>

yarn.lock

@@ -756,6 +756,62 @@
     npmlog "^4.1.2"
     write-file-atomic "^2.3.0"
 
+"@material/animation@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@material/animation/-/animation-4.0.0.tgz#19eaf377809f20978f8452a4237d27867d3ffd1d"
+  integrity sha512-IfzXzstWdtKQcsNWu+s2Hpz5dBwkTHtgtzoesr+FC7TqENH+SJdsF1ntnZI1XVi2C9ZlBf7f4BSmXpWHD0MIlw==
+  dependencies:
+    tslib "^1.9.3"
+
+"@material/base@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@material/base/-/base-4.0.0.tgz#535574d0b63c18892cfb70e88b27bc8f8090677a"
+  integrity sha512-vHm7fkqXzjdfxifXvlmaZColoIfKuWmO+1rvdzDORTWP+A8Dq70cgKd2I1SBqxzDGjOasMzHbQI6f9MISQf2vQ==
+  dependencies:
+    tslib "^1.9.3"
+
+"@material/dom@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@material/dom/-/dom-4.0.0.tgz#f0e68c4429e555040304c958bb3e11614276fdfa"
+  integrity sha512-GRCJT9+PGWqygZwGf1XLTrbmzP35YWG7+T0hpfhoIJO8VDiMTeyfvhJXFuA2wh9pD0noEjte0lmbdBlykrbWZw==
+  dependencies:
+    tslib "^1.9.3"
+
+"@material/feature-targeting@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@material/feature-targeting/-/feature-targeting-4.0.0.tgz#8d9d1470801a1fd166773731613d9fa89e0fd85e"
+  integrity sha512-0gk+f151vqmEdWkrQ9ocPlQRU9aUtSGsVBhletqIbsthLUsZIz9qk25FHjV1wHd/bGHknd9NH+T8ENprv3KLFg==
+
+"@material/icon-button@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@material/icon-button/-/icon-button-4.0.0.tgz#f7293462f1b4967712f9b8755b87c2228dcccc3d"
+  integrity sha512-b1SyWtr2cwlKgIVo+irxRgW0lpIzauADLAxQEJ8/RTO9qVFviohJUnS+5QQCkC5zex5Q52OmQ+aNl0KRjkUdvQ==
+  dependencies:
+    "@material/base" "^4.0.0"
+    "@material/feature-targeting" "^4.0.0"
+    "@material/ripple" "^4.0.0"
+    "@material/theme" "^4.0.0"
+    tslib "^1.9.3"
+
+"@material/ripple@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@material/ripple/-/ripple-4.0.0.tgz#906ba421a3e6c68651d829d44c50a95060aa1e75"
+  integrity sha512-9BLIOvyCP5sM+fQpLlcJZWyrHguusJq8E5A1pxg0wQwputOyaPBM7recHhYkJmVjzRpTcPgf1PkvkpN6DKGcNg==
+  dependencies:
+    "@material/animation" "^4.0.0"
+    "@material/base" "^4.0.0"
+    "@material/dom" "^4.0.0"
+    "@material/feature-targeting" "^4.0.0"
+    "@material/theme" "^4.0.0"
+    tslib "^1.9.3"
+
+"@material/theme@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@material/theme/-/theme-4.0.0.tgz#8de388fcdbae20fd09b02a3bdef3049bf2f623a8"
+  integrity sha512-vS4G4rusJTatTH50kSYO1U3UGN8EY9kGRvPaFsEFKikJBOqcR6KWK9H9/wCLqqd6nDNifEj9H2sdWw1AV4NA6Q==
+  dependencies:
+    "@material/feature-targeting" "^4.0.0"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -1630,6 +1686,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+date-fns@^2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.10.0.tgz#abd10604d8bafb0bcbd2ba2e9b0563b922ae4b6b"
+  integrity sha512-EhfEKevYGWhWlZbNeplfhIU/+N+x0iCIx7VzKlXma2EdQyznVlZhCptXUY+BegNpPW2kjdx15Rvq503YcXXrcA==
+
 dateformat@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"