MD Button, Icon and Font Changes

packages/builder/src/App.svelte

@@ -6,7 +6,9 @@
   import { onMount } from "svelte"
   import IconButton from "./common/IconButton.svelte"
   import Spinner from "./common/Spinner.svelte"
-  import AppNotification, { showAppNotification } from "./common/AppNotification.svelte"
+  import AppNotification, {
+    showAppNotification,
+  } from "./common/AppNotification.svelte"
 
   let init = initialise()
 

packages/builder/src/index.html

@@ -7,6 +7,7 @@
 	<title>Budibase Builder</title>
 
 	<link href="https://cdn.jsdelivr.net/npm/remixicon@2.3.0/fonts/remixicon.css" rel="stylesheet">
+
 	<link rel='icon' type='image/png' href='/_builder/favicon.png'>
 	<link rel='stylesheet' href='/_builder/global.css'>
 	<link rel='stylesheet' href='/_builder/codemirror.css'>

packages/materialdesign-components/components.json

@@ -14,7 +14,9 @@
     "name": "Body1",
     "description": "Sets the font properties as Roboto Body 1",
     "props": {
-      "text": "string"
+      "text": "string",
+      "verticalMargin": "number",
+      "horizontalMargin": "number"
     }, 
     "tags": []
   },

packages/materialdesign-components/public/index.html

@@ -5,9 +5,6 @@
 	<meta name='viewport' content='width=device-width'>
 
 	<title>Budibase-Material Design</title>
-	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
-	<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-      rel="stylesheet">
 	<link rel='icon' type='image/png' href='/favicon.png'>
 	<link rel='stylesheet' href='/build/bundle.css'>
 

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

@@ -65,6 +65,9 @@
 {/if}
 
 <style>
+  .mdc-button:not(.fullwidth) {
+    width: fit-content;
+  }
   .fullwidth {
     width: 100%;
   }

packages/materialdesign-components/src/ClassBuilder.js

@@ -4,6 +4,7 @@ export default class ClassBuilder {
     this.defaultIgnoreList = defaultIgnoreList //will be ignored when building custom classes    
   }
 
+
   /* 
   handles both blocks and elementss (BEM MD Notation) 
   params = {elementName: string, props: {modifiers{}, customs:{}, extras: []}}

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

@@ -34,6 +34,7 @@
         props: {
           _component: "testcomponents/rootComponent",
           _children: [
+            Button,
             Textfield,
             Checkboxgroup,
             Radiobutton,

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

@@ -35,7 +35,7 @@ export const props = {
   Button: {
     _component: "@budibase/materialdesign-components/Button",
     _children: [],
-    variant: "raised",
+    variant: "text",
     colour: "secondary",
     size: "large",
     href: "",
@@ -64,7 +64,8 @@ export const props = {
     _children: [],
     label: "First",
     colour: "secondary",
-    fullwidth: true,
+    icon: "alarm_on",
+    trailingIcon: true,
     maxLength: 500,
     helperText: "Add Surname",
     value: "store.surname",

packages/materialdesign-components/src/_material-fonts.scss

@@ -0,0 +1,2 @@
+@import "https://fonts.googleapis.com/css?family=Roboto:300,400,500";
+@import "https://fonts.googleapis.com/icon?family=Material+Icons";

packages/materialdesign-components/src/index.js

@@ -1,4 +1,5 @@
 import "@material/theme/mdc-theme.scss"
+import "./_material-fonts.scss"
 
 export { Button } from "./Button"
 export { default as Icon } from "./Common/Icon.svelte"

yarn.lock

@@ -1363,7 +1363,7 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
-chalk@^2.0.0, chalk@^2.1.0, chalk@^2.3.1, chalk@^2.4.2:
+chalk@^2.0.0, chalk@^2.1.0, chalk@^2.3.1, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -3394,6 +3394,11 @@ mem@^4.0.0:
     mimic-fn "^2.0.0"
     p-is-promise "^2.0.0"
 
+memorystream@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
+  integrity sha1-htcJCzDORV1j+64S3aUaR93K+bI=
+
 meow@^3.3.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
@@ -3773,6 +3778,21 @@ npm-registry-fetch@^4.0.0:
     npm-package-arg "^6.1.0"
     safe-buffer "^5.2.0"
 
+npm-run-all@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/npm-run-all/-/npm-run-all-4.1.5.tgz#04476202a15ee0e2e214080861bff12a51d98fba"
+  integrity sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    chalk "^2.4.1"
+    cross-spawn "^6.0.5"
+    memorystream "^0.3.1"
+    minimatch "^3.0.4"
+    pidtree "^0.3.0"
+    read-pkg "^3.0.0"
+    shell-quote "^1.6.1"
+    string.prototype.padend "^3.0.0"
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -4174,6 +4194,11 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
+pidtree@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.3.1.tgz#ef09ac2cc0533df1f3250ccf2c4d366b0d12114a"
+  integrity sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==
+
 pify@^2.0.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -4688,6 +4713,11 @@ shebang-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
   integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
 
+shell-quote@^1.6.1:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
+  integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@@ -4931,6 +4961,14 @@ string-width@^4.1.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
+string.prototype.padend@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.padend/-/string.prototype.padend-3.1.0.tgz#dc08f57a8010dc5c153550318f67e13adbb72ac3"
+  integrity sha512-3aIv8Ffdp8EZj8iLwREGpQaUZiPyrWrpzMBHvkiSW/bK/EGve9np07Vwy7IJ5waydpGXzQZu/F8Oze2/IWkBaA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+
 string.prototype.trimleft@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.1.tgz#9bdb8ac6abd6d602b17a4ed321870d2f8dcefc74"