chore: remove shape button option and recreate with Sass demos

Author: hperrin

packages/button/Button.svelte

@@ -8,7 +8,6 @@
       {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' : ''}
@@ -34,7 +33,6 @@
       {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' : ''}
@@ -67,7 +65,6 @@
   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';
@@ -78,7 +75,7 @@
 
   $: dialogExcludes = (context === 'dialog:action') ? ['action', 'default'] : [];
 
-  $: props = exclude($$props, ['use', 'class', 'ripple', 'color', 'variant', 'shape', 'dense', 'href', ...dialogExcludes]);
+  $: props = exclude($$props, ['use', 'class', 'ripple', 'color', 'variant', '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,7 +47,6 @@ 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,13 +4,6 @@
 @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.scss

@@ -0,0 +1,23 @@
+@import "@material/button/mixins";
+@import "@material/shape/variables";
+
+.button-shaped-round {
+  @include mdc-button-shape-radius(999px);
+}
+
+.button-shaped-notch {
+  --notchSize: #{$mdc-shape-small-component-radius * 2};
+
+  // source: https://css-tricks.com/notched-boxes/
+  clip-path:
+    polygon(
+      0% var(--notchSize),
+      var(--notchSize) 0%,
+      calc(100% - var(--notchSize)) 0%,
+      100% var(--notchSize),
+      100% calc(100% - var(--notchSize)),
+      calc(100% - var(--notchSize)) 100%,
+      var(--notchSize) 100%,
+      0% calc(100% - var(--notchSize))
+    );
+}

site/src/routes/demo/button.svelte

@@ -38,14 +38,6 @@
     <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>
@@ -114,10 +106,28 @@
     </Group>
   </div>
 
+  <div>
+    Creating rounded buttons with Sass mixins: <br />
+    <Button on:click={() => clicked++} variant="raised" class="button-shaped-round"><Label>Raised</Label></Button>
+    <Button on:click={() => clicked++} variant="unelevated" class="button-shaped-round"><Label>Unelevated</Label></Button>
+    <Button on:click={() => clicked++} variant="outlined" class="button-shaped-round"><Label>Outlined</Label></Button>
+    <Button on:click={() => clicked++} variant="unelevated" class="button-shaped-round"><Icon class="material-icons">favorite</Icon><Label>Icon</Label></Button>
+    <Button on:click={() => clicked++} variant="outlined" class="button-shaped-round"><Label>Trailing Icon</Label><Icon class="material-icons">favorite</Icon></Button>
+  </div>
+
+  <div>
+    Creating notched buttons with vanilla Sass: <br />
+    <Button on:click={() => clicked++} variant="raised" class="button-shaped-notch"><Label>Raised</Label></Button>
+    <Button on:click={() => clicked++} variant="unelevated" class="button-shaped-notch"><Label>Unelevated</Label></Button>
+    <Button on:click={() => clicked++} variant="unelevated" class="button-shaped-notch"><Icon class="material-icons">favorite</Icon><Label>Icon</Label></Button>
+    <Button on:click={() => clicked++} variant="unelevated" class="button-shaped-notch"><Label>Trailing Icon</Label><Icon class="material-icons">favorite</Icon></Button>
+  </div>
+
   <pre class="status">Clicked: {clicked}</pre>
 </section>
 
 <script>
+  import './button.scss';
   import Button, {Group, GroupItem, Label, Icon} from '@smui/button';
   import Menu from '@smui/menu';
   import List, {Item, Separator, Text} from '@smui/list';