Merge branch 'button-changes' of https://github.com/catchspider2002/svelte-material-ui into catchspider2002-button-changes

Conflicts:
	packages/button/Button.svelte
	site/package-lock.json

Author: hperrin

packages/button/Button.svelte

@@ -8,6 +8,7 @@
       {variant === 'raised' ? 'mdc-button--raised' : ''}
       {variant === 'unelevated' ? 'mdc-button--unelevated' : ''}
       {variant === 'outlined' ? 'mdc-button--outlined' : ''}
+      {shape === 'rounded' ? 'smui-button-rounded' : ''}
       {dense ? 'mdc-button--dense' : ''}
       {color === 'secondary' ? 'smui-button--color-secondary' : ''}
       {context === 'card:action' ? 'mdc-card__action' : ''}
@@ -33,6 +34,7 @@
       {variant === 'raised' ? 'mdc-button--raised' : ''}
       {variant === 'unelevated' ? 'mdc-button--unelevated' : ''}
       {variant === 'outlined' ? 'mdc-button--outlined' : ''}
+      {shape === 'rounded' ? 'smui-button-rounded' : ''}
       {dense ? 'mdc-button--dense' : ''}
       {color === 'secondary' ? 'smui-button--color-secondary' : ''}
       {context === 'card:action' ? 'mdc-card__action' : ''}
@@ -65,6 +67,7 @@
   export let ripple = true;
   export let color = 'primary';
   export let variant = 'text';
+  export let shape;
   export let dense = false;
   export let href = null;
   export let action = 'close';
@@ -75,7 +78,7 @@
 
   $: dialogExcludes = (context === 'dialog:action') ? ['action', 'default'] : [];
 
-  $: props = exclude($$props, ['use', 'class', 'ripple', 'color', 'variant', 'dense', 'href', ...dialogExcludes]);
+  $: props = exclude($$props, ['use', 'class', 'ripple', 'color', 'variant', 'shape', 'dense', 'href', ...dialogExcludes]);
 
   $: actionProp = (context === 'dialog:action' && action !== null) ? {'data-mdc-dialog-action': action} : {};
   $: defaultProp = (context === 'dialog:action' && defaultAction) ? {'data-mdc-dialog-button-default': ''} : {};

packages/button/README.md

@@ -47,6 +47,7 @@ A button.
 * `ripple`: `true` - Whether to implement a ripple for when the component is interacted with.
 * `color`: `'primary'` - The button's color. ('primary' or 'secondary')
 * `variant`: `'text'` - The button's style variant. ('text', 'raised', 'unelevated', or 'outlined')
+* `shape`: `''` - The button's shape. If the shape property is set to rounded, it creates a rounded button instead of a regular button. ('rounded')
 * `dense`: `false` - Whether to style the button as dense.
 * `href`: `null` - If the `href` property is set, the button will use an anchor element, instead of a button element.
 * `action`: `'close'` - Used in the context of a dialog. This sets the button's action.

packages/button/_mixins.scss

@@ -4,6 +4,13 @@
 @mixin smui-button-core-styles($query: mdc-feature-all()) {
   @include smui-button-without-ripple($query);
   @include smui-button-ripple($query);
+  @include smui-button-rounded($query);
+}
+
+@mixin smui-button-rounded($query: mdc-feature-all()) {
+  .smui-button-rounded {
+    @include mdc-button-shape-radius(999px);
+  }
 }
 
 @mixin smui-button-without-ripple($query: mdc-feature-all()) {

site/src/routes/demo/button.svelte

@@ -38,6 +38,14 @@
     <Button color="secondary" on:click={() => clicked++}><Label>Trailing Icon</Label><Icon class="material-icons">favorite</Icon></Button>
   </div>
 
+  <div>  
+    Shaped button: <br />
+    <Button on:click={() => clicked++} variant="unelevated" shape="rounded"><Label>Unelevated</Label></Button>
+    <Button on:click={() => clicked++} variant="outlined" shape="rounded"><Label>Outlined</Label></Button>
+    <Button on:click={() => clicked++} variant="unelevated" shape="rounded"><Icon class="material-icons">favorite</Icon><Label>Icon</Label></Button>
+    <Button on:click={() => clicked++} variant="unelevated" shape="rounded"><Label>Trailing Icon</Label><Icon class="material-icons">favorite</Icon></Button>
+  </div>
+
   <div>
     Button groups: <br />
     <Group>