Datepicker and icon bug fixes

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/Icon.svelte

@@ -1,31 +1,10 @@
 <script>
   import { getContext } from "svelte"
-  import ripple from "../Ripple.js"
 
-  export let onClick = null
   export let icon = ""
   export let context = ""
 
   let cls = !!context ? `material-icons mdc-${context}__icon` : "material-icons"
-
-  $: useRipple = onClick !== null
 </script>
 
 <i class={cls}>{icon}</i>
-{#if useRipple}
-  <div use:ripple>
-    <i on:click={onClick} class={cls}>{icon}</i>
-  </div>
-{:else}
-  <i class={cls}>{icon}</i>
-{/if}
-
-<style>
-  div {
-    border-radius: 50%;
-    padding-top: 2px;
-    width: fit-content;
-    height: fit-content;
-    cursor: pointer;
-  }
-</style>

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

@@ -1,5 +1,5 @@
 <script>
-  import { onMount } from "svelte";
+  import { onMount } from "svelte"
   import {
     startOfMonth,
     endOfMonth,
@@ -8,121 +8,73 @@
     getYear,
     addMonths,
     subMonths,
-    format
+    format,
-  } from "date-fns";
+  } from "date-fns"
-  import { MDCMenu } from "@material/menu";
+  import { MDCMenu } from "@material/menu"
-  import { Textfield } from "../Textfield";
+  import { Textfield } from "../Textfield"
-  import Icon from "../Common/Icon.svelte";
+  import Icon from "../Common/Icon.svelte"
-  import ripple from "../Ripple.js";
+  import ripple from "../Common/Ripple.js"
-  import { Body1, Body2, Caption } from "../Typography";
+  import { Body1, Body2, Caption } from "../Typography"
-
+  import { IconButton } from "../IconButton"
-  let textFieldHeight = null;
+
-  let menu;
+  let textFieldHeight = null
-  let instance;
+  let menu
-
+  let instance
-  let daysArr = [];
+
-  let navDate = new Date();
+  let daysArr = []
-  const weekdayMap = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+  let navDate = new Date()
-
+  const weekdayMap = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
-  export let date = new Date();
+
-  export let open = true;
+  export let date = new Date()
+  export let open = true
 
   onMount(() => {
     if (!!menu) {
-      instance = new MDCMenu(menu);
+      instance = new MDCMenu(menu)
-      instance.open = true;
+      instance.open = true
-      instance.setFixedPostion = true;
+      instance.setFixedPostion = true
     }
-  });
+  })
 
   function selectDate(dayOfMonth) {
-    let month = getMonth(navDate);
+    let month = getMonth(navDate)
-    let year = getYear(navDate);
+    let year = getYear(navDate)
-    date = new Date(year, month, dayOfMonth);
+    date = new Date(year, month, dayOfMonth)
   }
 
   function addMonth() {
-    navDate = addMonths(navDate, 1);
+    navDate = addMonths(navDate, 1)
   }
 
   function subtractMonth() {
-    navDate = subMonths(navDate, 1);
+    navDate = subMonths(navDate, 1)
   }
 
   function openCalendar() {
-    instance.open = true;
+    instance.open = true
   }
 
-  $: dateMonthEnds = endOfMonth(navDate).getDate();
+  $: dateMonthEnds = endOfMonth(navDate).getDate()
-  $: dateMonthBegins = startOfMonth(navDate).getDay();
+  $: dateMonthBegins = startOfMonth(navDate).getDay()
-  $: dayStart = dateMonthBegins + 1; //1 = sunday
+  $: dayStart = dateMonthBegins + 1 //1 = sunday
-  $: monthAndYear = format(navDate, "MMMM y");
+  $: monthAndYear = format(navDate, "MMMM y")
-  $: selectedDate = format(date, "dd/MM/yyyy");
+  $: selectedDate = format(date, "dd/MM/yyyy")
-  $: dayOfSelectedDate = getDate(date);
+  $: dayOfSelectedDate = getDate(date)
   $: for (let d = 1; d <= dateMonthEnds; d++) {
     if (d === 1) {
-      daysArr = [d];
+      daysArr = [d]
     } else {
-      daysArr = [...daysArr, d];
+      daysArr = [...daysArr, d]
     }
   }
   $: rowRepeater =
-    dateMonthBegins > 5 && daysArr[daysArr.length - 1] > 30 ? 6 : 5;
+    dateMonthBegins > 5 && daysArr[daysArr.length - 1] > 30 ? 6 : 5
   $: sameMonthAndYear =
-    getMonth(date) === getMonth(navDate) && getYear(date) === getYear(navDate);
+    getMonth(date) === getMonth(navDate) && getYear(date) === getYear(navDate)
-  debugger;
+  $: console.log(textFieldHeight)
 </script>
 
-<style>
-  .bbmd-menu {
-    width: 310px;
-    height: auto;
-    padding: 5px;
-  }
-
-  .month-picker {
-    display: grid;
-    grid-template-columns: 20px 1fr 20px;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .month-picker > span {
-    text-align: center;
-  }
-
-  .calendar-container {
-    display: grid;
-    height: 100%;
-    grid-template-rows: repeat(3, auto);
-    grid-gap: 5px;
-  }
-
-  .calendar-container > div {
-    /* border: 1px solid red; */
-  }
-
-  .week-days {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-  }
-
-  .day-picker {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-  }
-
-  .centreText {
-    text-align: center;
-  }
-
-  span {
-    margin: auto;
-  }
-</style>
-
 <!-- 
-  TODO: Add trailing icon button on textfield that is clickable
   TODO: Add transition effects to toggling of calendar
   TODO: Bug - August 2020 has too many rows. find out why
   TODO: Bug - make out transition of date bg colour instantaneous
@@ -140,18 +92,18 @@
   <div
     bind:this={menu}
     class="mdc-menu mdc-menu-surface bbmd-menu"
-    style={`margin-top: ${textFieldHeight + 15}px`}>
+    style={`margin-top: 70px`}>
     <div class="calendar-container">
       <div class="month-picker">
-        <span>
+        <div>
-          <Icon icon="chevron_left" onClick={subtractMonth} />
+          <IconButton icon="chevron_left" onClick={subtractMonth} />
-        </span>
+        </div>
         <div class="centreText">
           <Body1 text={monthAndYear} />
         </div>
-        <span>
+        <div>
-          <Icon icon="chevron_right" onClick={addMonth} />
+          <IconButton icon="chevron_right" onClick={addMonth} />
-        </span>
+        </div>
       </div>
       <div class="week-days">
         {#each weekdayMap as day, i}
@@ -183,3 +135,47 @@
     <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;
+  }
+
+  .calendar-container > div {
+    /* border: 1px solid red; */
+  }
+
+  .week-days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .day-picker {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .centreText {
+    text-align: center;
+  }
+
+  span {
+    margin: auto;
+  }
+</style>

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

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

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

@@ -1,13 +1,19 @@
 @import "@material/icon-button/mdc-icon-button";
 
-.bbmd-mdc-icon-button--size-large {
+.mdc-icon-button {
-  @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 {
+  &.bbmd-mdc-icon-button--size-large {
-  @include mdc-icon-button-icon-size(16px);
+    @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/Test/TestApp.svelte

@@ -29,13 +29,13 @@
         props: {
           _component: "testcomponents/rootComponent",
           _children: [
-            DatePicker,
             Button,
             BodyBoundToStore,
             Textfield,
             Select,
             Radiobutton,
             Radiobuttongroup,
+            DatePicker,
           ],
         },
       }

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

@@ -207,7 +207,8 @@ export const props = {
     ],
   },
   DatePicker: {
-    _component: "@budibase/materialdesign-components/ListItem",
+    _component: "@budibase/materialdesign-components/DatePicker",
     _children: [],
+    open: true,
   },
 }

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

@@ -9,11 +9,13 @@
   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
+  $: console.log("TF", tfHeight)
   let tfInstance = null
 
   onMount(() => {
@@ -41,6 +43,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
@@ -124,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}
@@ -140,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" />