Merge branch 'catchspider2002-button-changes'

Author: hperrin

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

@@ -106,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';