feat: add component option to Button to allow other elements/components

Author: hperrin

packages/button/Button.svelte

@@ -1,60 +1,34 @@
-{#if href}
-  <a
-    use:useActions={use}
-    use:forwardEvents
-    class="
-      mdc-button
-      {className}
-      {variant === 'raised' ? 'mdc-button--raised' : ''}
-      {variant === 'unelevated' ? 'mdc-button--unelevated' : ''}
-      {variant === 'outlined' ? 'mdc-button--outlined' : ''}
-      {dense ? 'mdc-button--dense' : ''}
-      {color === 'secondary' ? 'smui-button--color-secondary' : ''}
-      {context === 'card:action' ? 'mdc-card__action' : ''}
-      {context === 'card:action' ? 'mdc-card__action--button' : ''}
-      {context === 'dialog:action' ? 'mdc-dialog__button' : ''}
-      {context === 'top-app-bar:navigation' ? 'mdc-top-app-bar__navigation-icon' : ''}
-      {context === 'top-app-bar:action' ? 'mdc-top-app-bar__action-item' : ''}
-      {context === 'snackbar' ? 'mdc-snackbar__action' : ''}
-    "
-    use:Ripple={[ripple, {unbounded: false}]}
-    {href}
-    {...actionProp}
-    {...defaultProp}
-    {...props}
-  ><slot></slot></a>
-{:else}
-  <button
-    use:useActions={use}
-    use:forwardEvents
-    class="
-      mdc-button
-      {className}
-      {variant === 'raised' ? 'mdc-button--raised' : ''}
-      {variant === 'unelevated' ? 'mdc-button--unelevated' : ''}
-      {variant === 'outlined' ? 'mdc-button--outlined' : ''}
-      {dense ? 'mdc-button--dense' : ''}
-      {color === 'secondary' ? 'smui-button--color-secondary' : ''}
-      {context === 'card:action' ? 'mdc-card__action' : ''}
-      {context === 'card:action' ? 'mdc-card__action--button' : ''}
-      {context === 'dialog:action' ? 'mdc-dialog__button' : ''}
-      {context === 'top-app-bar:navigation' ? 'mdc-top-app-bar__navigation-icon' : ''}
-      {context === 'top-app-bar:action' ? 'mdc-top-app-bar__action-item' : ''}
-      {context === 'snackbar' ? 'mdc-snackbar__action' : ''}
-    "
-    use:Ripple={[ripple, {unbounded: false}]}
-    {...actionProp}
-    {...defaultProp}
-    {...props}
-  ><slot></slot></button>
-{/if}
+<svelte:component
+  this={component}
+  use={[forwardEvents, [Ripple, [ripple, {unbounded: false}]], ...use]}
+  class="
+    mdc-button
+    {className}
+    {variant === 'raised' ? 'mdc-button--raised' : ''}
+    {variant === 'unelevated' ? 'mdc-button--unelevated' : ''}
+    {variant === 'outlined' ? 'mdc-button--outlined' : ''}
+    {dense ? 'mdc-button--dense' : ''}
+    {color === 'secondary' ? 'smui-button--color-secondary' : ''}
+    {context === 'card:action' ? 'mdc-card__action' : ''}
+    {context === 'card:action' ? 'mdc-card__action--button' : ''}
+    {context === 'dialog:action' ? 'mdc-dialog__button' : ''}
+    {context === 'top-app-bar:navigation' ? 'mdc-top-app-bar__navigation-icon' : ''}
+    {context === 'top-app-bar:action' ? 'mdc-top-app-bar__action-item' : ''}
+    {context === 'snackbar' ? 'mdc-snackbar__action' : ''}
+  "
+  {...actionProp}
+  {...defaultProp}
+  {...exclude($$props, ['use', 'class', 'ripple', 'color', 'variant', 'dense', ...dialogExcludes])}
+><slot></slot></svelte:component>
 
 <script>
   import {setContext, getContext} from 'svelte';
   import {current_component} from 'svelte/internal';
   import {forwardEventsBuilder} from '@smui/common/forwardEvents.js';
   import {exclude} from '@smui/common/exclude.js';
   import {useActions} from '@smui/common/useActions.js';
+  import A from '@smui/common/A.svelte';
+  import Button from '@smui/common/Button.svelte';
   import Ripple from '@smui/ripple/bare.js';
 
   const forwardEvents = forwardEventsBuilder(current_component);
@@ -66,17 +40,17 @@
   export let color = 'primary';
   export let variant = 'text';
   export let dense = false;
+  // Purposely left out of props exclude.
   export let href = null;
   export let action = 'close';
   let defaultAction = false;
   export {defaultAction as default};
+  export let component = href == null ? Button : A;
 
   let context = getContext('SMUI:button:context');
 
   $: dialogExcludes = (context === 'dialog:action') ? ['action', 'default'] : [];
 
-  $: 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

@@ -42,6 +42,7 @@ A button.
 
 ### Options / Defaults
 
+* `component`: `href == null ? Button : A` - A component to use as the root element.
 * `use`: `[]` - An array of actions and/or action/property arrays.
 * `class`: `''` - A CSS class string.
 * `ripple`: `true` - Whether to implement a ripple for when the component is interacted with.

packages/common/Button.svelte

@@ -0,0 +1,16 @@
+<button
+  use:useActions={use}
+  use:forwardEvents
+  {...exclude($$props, ['use'])}
+><slot></slot></button>
+
+<script>
+  import {current_component} from 'svelte/internal';
+  import {forwardEventsBuilder} from './forwardEvents.js';
+  import {exclude} from './exclude.js';
+  import {useActions} from './useActions.js';
+
+  const forwardEvents = forwardEventsBuilder(current_component);
+
+  export let use = [];
+</script>

site/src/routes/demo/button.svelte

@@ -14,6 +14,7 @@
     <Button on:click={() => clicked++} variant="outlined"><Label>Outlined</Label></Button>
     <Button on:click={() => clicked++} dense><Label>Dense</Label></Button>
     <Button on:click={() => clicked++} class="myClass"><Label>With a Class</Label></Button>
+    <Button on:click={() => clicked++} href="http://example.com" target="_blank"><Label>Link Button</Label></Button>
   </div>
 
   <div>
@@ -31,6 +32,7 @@
     <Button color="secondary" on:click={() => clicked++} variant="outlined"><Label>Outlined</Label></Button>
     <Button color="secondary" on:click={() => clicked++} dense><Label>Dense</Label></Button>
     <Button color="secondary" on:click={() => clicked++} class="myClass"><Label>With a Class</Label></Button>
+    <Button color="secondary" on:click={() => clicked++} href="http://example.com" target="_blank"><Label>Link Button</Label></Button>
   </div>
 
   <div>