CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-03 19:43:32 +13:00
Code Issues Projects Releases Wiki Activity

Merge pull request #81 from Conor-Mack/feature/md-button-ripple-icon-classbuilder

Browse source 
Functional MD Button and Icon with Ripple Effect and ClassBuilder Helper
This commit is contained in:
Martin McKeaveney 2020-02-04 17:42:04 +00:00 committed by GitHub
commit 3fd14da711
13 changed files with 230 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/materialdesign-components/.gitignore vendored
View file

@ -3,4 +3,4 @@ node_modules
yarn.lock
package-lock.json
dist/index.js
public/*
public/build

18
packages/materialdesign-components/public/index.html Normal file
View file

@ -0,0 +1,18 @@
<!doctype html>
<html>
<head>
<meta charset='utf8'>
<meta name='viewport' content='width=device-width'>
<title>Svelte app</title>
<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'>
</head>
<body>
<script src='/build/bundle.js'></script>
</body>
</html>

4
packages/materialdesign-components/rollup.testconfig.js
View file

@ -91,7 +91,7 @@ export default {
sourcemap: true,
format: "iife",
name: "app",
file: "public/bundle.js",
file: "public/build/bundle.js",
globals: {
crypto: "crypto",
},
@ -104,7 +104,7 @@ export default {
// we'll extract any component CSS out into
// a separate file — better for performance
css: css => {
css.write("public/bundle.css")
css.write("public/build/bundle.css");
},
hydratable: true,

60
packages/materialdesign-components/src/Button/Button.svelte Normal file
View file

@ -0,0 +1,60 @@
<script>
import { setContext, getContext } from "svelte"
import Icon from "../Icon.svelte"
import ripple from "../Ripple.js"
import ClassBuilder from "../ClassBuilder.js"
const cb = new ClassBuilder("button", ["primary", "medium"])
export let variant = "raised"
export let colour = "primary"
export let size = "medium"
export let href = ""
export let icon = ""
export let trailingIcon = false
export let fullBleed = false
export let text = ""
export let disabled = false
$: if (icon) {
setContext("BBMD:icon:context", "button")
}
$: renderLeadingIcon = !!icon && !trailingIcon
$: renderTrailingIcon = !!icon && trailingIcon
let blockClasses = cb.blocks({
modifiers: !href ? [variant] : null,
customs: { size, colour },
})
</script>
<!-- TODO: Activated colour on primary elevated buttons seems to be rendering weird -->
{#if href}
<a class={blockClasses} {href} on:click>
<span class={cb.elements('label')}>{text}</span>
</a>
{:else}
<button
use:ripple={{ colour }}
class={blockClasses}
class:fullBleed
{disabled}
on:click>
{#if renderLeadingIcon}
<Icon {icon} />
{/if}
<span class={cb.elements('label')}>{text}</span>
{#if renderTrailingIcon}
<Icon {icon} />
{/if}
</button>
{/if}
<style>
.fullBleed {
width: 100%;
}
</style>

5
packages/materialdesign-components/src/Button/_index.scss Normal file
View file

@ -0,0 +1,5 @@
@import "@material/button/mdc-button.scss";
@import "@material/ripple/mdc-ripple.scss";
@import "./mixins.scss";
@include bbmd-button-styles();

39
packages/materialdesign-components/src/Button/_mixins.scss Normal file
View file

@ -0,0 +1,39 @@
@import "@material/feature-targeting/functions";
@import "@material/feature-targeting/mixins";
@mixin bbmd-button-styles($query: mdc-feature-all()) {
$feat-structure: mdc-feature-create-target($query, structure);
.bbmd-mdc-button--size-large {
@include button-sizing($feat-structure, 21px, 40px, 15px);
}
.bbmd-mdc-button--size-small {
@include button-sizing($feat-structure, 9px, 32px, 13px);
}
.bbmd-mdc-button--colour-secondary {
//no feature target as relying on theme variable custom property
@include mdc-button-ink-color(secondary);
&.mdc-button--raised,
&.mdc-button--unelevated {
@include mdc-button-container-fill-color(secondary);
@include mdc-button-ink-color(on-secondary);
}
&.mdc-button--outlined {
@include mdc-button-outline-color(secondary);
}
}
}
@mixin button-sizing($feat, $padding, $height, $fontSize) {
@include mdc-feature-targets($feat) {
padding: 0px $padding;
height: $height;
}
> .mdc-button__label {
font-size: $fontSize;
}
}

2
packages/materialdesign-components/src/Button/index.js Normal file
View file

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

38
packages/materialdesign-components/src/ClassBuilder.js Normal file
View file

@ -0,0 +1,38 @@
export default class ClassBuilder {
constructor(block, customDefaults) {
this.block = `mdc-${block}`;
this.customDefaults = customDefaults; //will be ignored when building custom classes
}
// classParams: {modifiers:[] (mdc), custom:[] (bbmd), extra:[] (any)}
blocks(classParams) {
let base = this.block;
if (classParams == undefined) return base;
return this.buildClass(base, classParams);
}
//elementName: string, classParams: {}
elements(elementName, classParams) {
let base = `${this.block}__${elementName}`;
if (classParams == undefined) return base;
return this.buildClass(base, classParams);
}
buildClass(base, classParams) {
let cls = base;
const { modifiers, customs, extras } = classParams;
if (!!modifiers) cls += modifiers.map(m => ` ${base}--${m}`).join(" ");
if (!!customs)
cls += Object.entries(customs)
.map(([property, value]) => {
//disregard falsy and values set by customDefaults constructor param
if (!!value && !this.customDefaults.includes(value)) {
//custom scss name convention = bbmd-[block | element]--[property]-[value]
return ` bbmd-${base}--${property}-${value}`;
}
})
.join("");
if (!!extras) cls += ` ${extras.join(" ")}`;
return cls.trim();
}
}

13
packages/materialdesign-components/src/Icon.svelte Normal file
View file

@ -0,0 +1,13 @@
<script>
import { getContext } from "svelte";
export let icon = "";
let iconContext = getContext("BBMD:icon:context");
let cls =
iconContext == "button"
? "material-icons mdc-button__icon"
: "material-icons";
</script>
<i class={cls}>{icon}</i>

28
packages/materialdesign-components/src/Ripple.js Normal file
View file

@ -0,0 +1,28 @@
import { MDCRipple } from "@material/ripple";
export default function ripple(
node,
props = { colour: "primary", unbounded: false }
) {
node.classList.add("mdc-ripple-surface");
const component = new MDCRipple(node);
component.unbounded = props.unbounded;
if (props.colour === "secondary") {
node.classList.remove("mdc-ripple-surface--primary");
node.classList.add("mdc-ripple-surface--accent");
} else {
node.classList.add("mdc-ripple-surface--primary");
node.classList.remove("mdc-ripple-surface--accent");
}
return {
destroy() {
component.destroy();
node.classList.remove("mdc-ripple-surface");
node.classList.remove("mdc-ripple-surface--primary");
node.classList.remove("mdc-ripple-surface--accent");
component = null;
}
};
}

18
packages/materialdesign-components/src/Test/props.js
View file

@ -7,6 +7,20 @@ export const props = {
button: {
_component: "@budibase/materialdesign-components/button",
_children: [],
raised: true,
variant: "raised",
colour: "secondary",
size: "large",
href: "",
icon: "alarm_on",
trailingIcon: true,
fullBleed: false,
text: "I am button",
disabled: false
},
}
icon: {
_component: "@budibase/materialdesign-components/icon",
_children: [],
icon: ""
}
};

7
packages/materialdesign-components/src/Test/testComponents.js
View file

@ -1,4 +1,5 @@
import h1 from "../H1.svelte"
import { button } from "@BBMD"
import h1 from "../H1.svelte";
import { button, icon } from "@BBMD";
export default { h1, button, icon };
export default { h1, button }

6
packages/materialdesign-components/src/index.js
View file

@ -1,2 +1,4 @@
export { default as h1 } from "./H1.svelte"
export { default as button } from "./Button.svelte"
export { default as h1 } from "./H1.svelte";
export { default as icon } from "./Icon.svelte";
export { button } from "./Button";