From e7b8ec4223a376c140597c57dc0a63ae2f433907 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 23 Apr 2021 15:45:10 +0200
Subject: [PATCH] update ActionButton interface

---
 .../bbui/src/ActionButton/ActionButton.svelte | 20 +++++++++++++++----
 packages/bbui/src/Drawer/Drawer.svelte        |  2 +-
 .../bbui/src/Table/SelectEditRenderer.svelte  |  2 +-
 .../AutomationBuilder/BlockList.svelte        |  2 +-
 .../EventsEditor/actions/SaveFields.svelte    |  1 +
 .../src/components/start/AppCard.svelte       |  2 +-
 6 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index efa777ffdb..688d3bf7e4 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/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}
diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 27fe9470fb..b5af512475 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/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" />
diff --git a/packages/bbui/src/Table/SelectEditRenderer.svelte b/packages/bbui/src/Table/SelectEditRenderer.svelte
index 64d36ead54..1355666489 100644
--- a/packages/bbui/src/Table/SelectEditRenderer.svelte
+++ b/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}
diff --git a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
index c1ba0ce556..2c37e97956 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
+++ b/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)}>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
index 4274a92a7d..77c3bd2567 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
+++ b/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])} />
diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index 232f60811d..7d568ee4cc 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/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}
       →