update ActionButton interface

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -3,8 +3,6 @@
   import { createEventDispatcher } from "svelte"
   const dispatch = createEventDispatcher()
 
-  /** @type {('S', 'M', 'L', 'XL')} Size of button */
-  export let size = "M"
   export let quiet = false
   export let emphasized = false
   export let selected = false
@@ -12,6 +10,12 @@
   export let disabled = false
   export let icon = ""
 
+  export let xl = false
+  export let l = false
+  export let m = false
+  export let s = false
+  $: useDefault = ![xl, l, m, s].includes(true)
+
   function longPress(element) {
     if (!longPressable) return
     let timer
@@ -38,7 +42,11 @@
   class:spectrum-ActionButton--quiet={quiet}
   class:spectrum-ActionButton--emphasized={emphasized}
   class:is-selected={selected}
-  class="spectrum-ActionButton spectrum-ActionButton--size{size.toUpperCase()}"
+  class:spectrum-ActionButton--sizeS={s}
+  class:spectrum-ActionButton--sizeM={m || useDefault}
+  class:spectrum-ActionButton--sizeL={l}
+  class:spectrum-ActionButton--sizeXL={xl}
+  class="spectrum-ActionButton"
   {disabled}
   on:longPress
   on:click|preventDefault
@@ -54,7 +62,11 @@
   {/if}
   {#if icon}
     <svg
-      class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
+      class:spectrum-Icon--sizeS={s}
+      class:spectrum-Icon--sizeM={m || useDefault}
+      class:spectrum-Icon--sizeL={l}
+      class:spectrum-Icon--sizeXL={xl}
+      class="spectrum-Icon"
       focusable="false"
       aria-hidden="true"
       aria-label={icon}

packages/bbui/src/Drawer/Drawer.svelte

@@ -42,7 +42,7 @@
         </div>
         <div class="buttons">
           <slot name="buttons" />
-          <ActionButton selected quiet icon="Close" on:click={hide} />
+          <ActionButton quiet icon="Close" on:click={hide} />
         </div>
       </header>
       <slot name="body" />

packages/bbui/src/Table/SelectEditRenderer.svelte

@@ -13,5 +13,5 @@
   <Checkbox value={selected} />
 {/if}
 {#if allowEditRows}
-  <ActionButton size="s" on:click={onEdit}>Edit</ActionButton>
+  <ActionButton s on:click={onEdit}>Edit</ActionButton>
 {/if}

packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte

@@ -65,8 +65,8 @@
   {#each tabs as tab, idx}
   <div bind:this={anchors[idx]}>
     <ActionButton
-      size="S"
       quiet
+      s
       icon={tab.icon}
       disabled={tab.disabled}
       on:click={tab.disabled ? null : () => onChangeTab(idx)}>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte

@@ -70,6 +70,7 @@
       bindings={bindableProperties}
       on:change={event => updateFieldValue(idx, event.detail)} />
     <ActionButton
+      s
       quiet
       icon="Delete"
       on:click={() => removeField(field[0])} />

packages/builder/src/components/start/AppCard.svelte

@@ -29,7 +29,7 @@
   <Heading s>{name}</Heading>
   <Spacer medium />
   <div class="card-footer" data-cy={`app-${name}`}>
-    <ActionButton text medium blue on:click={() => $goto(`/builder/${_id}`)}>
+    <ActionButton on:click={() => $goto(`/builder/${_id}`)}>
       Open
       {name}
       →