feat: add shape props for button to create rounded buttons

Author: catchspider2002

packages/button/Button.svelte

@@ -6,6 +6,7 @@
     class:mdc-button--raised={variant === 'raised'}
     class:mdc-button--unelevated={variant === 'unelevated'}
     class:mdc-button--outlined={variant === 'outlined'}
+    class:smui-button-rounded={shape === 'rounded'}
     class:mdc-button--dense={dense}
     class:smui-button--color-secondary={color === 'secondary'}
     class:mdc-card__action={context === 'card:action'}
@@ -28,6 +29,7 @@
     class:mdc-button--raised={variant === 'raised'}
     class:mdc-button--unelevated={variant === 'unelevated'}
     class:mdc-button--outlined={variant === 'outlined'}
+    class:smui-button-rounded={shape === 'rounded'}
     class:mdc-button--dense={dense}
     class:smui-button--color-secondary={color === 'secondary'}
     class:mdc-card__action={context === 'card:action'}
@@ -59,6 +61,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';
@@ -69,7 +72,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()) {
@@ -25,6 +32,7 @@
 @mixin smui-button-ripple($query: mdc-feature-all()) {
   .smui-button--color-secondary {
     @include mdc-states(secondary, false, $query);
+    // @include mdc-button-shape-radius(999px);
 
     &.mdc-button--raised,
     &.mdc-button--unelevated {