From c12a7ab19eb1be3db3a9bbb838a21b84cc274c65 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 22 Aug 2024 18:56:17 +0100
Subject: [PATCH] Remove deprecated unused props from action buttons

---
 .../bbui/src/ActionButton/ActionButton.svelte | 119 ++++++------------
 .../bbui/src/Notification/Notification.svelte |   6 +-
 2 files changed, 42 insertions(+), 83 deletions(-)

diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index 8b2d11232c..b8030b8031 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -1,16 +1,11 @@
 <script>
   import "@spectrum-css/actionbutton/dist/index-vars.css"
-  import { createEventDispatcher } from "svelte"
   import Tooltip from "../Tooltip/Tooltip.svelte"
   import { fade } from "svelte/transition"
   import { hexToRGBA } from "../helpers"
 
-  const dispatch = createEventDispatcher()
-
   export let quiet = false
-  export let emphasized = false
   export let selected = false
-  export let longPressable = false
   export let disabled = false
   export let icon = ""
   export let size = "M"
@@ -33,82 +28,50 @@
     style += `--accent-border-color:${hexToRGBA(color, 0.35)};`
     return style
   }
-
-  function longPress(element) {
-    if (!longPressable) return
-    let timer
-
-    const listener = () => {
-      timer = setTimeout(() => {
-        dispatch("longpress")
-      }, 700)
-    }
-
-    element.addEventListener("pointerdown", listener)
-
-    return {
-      destroy() {
-        clearTimeout(timer)
-        element.removeEventListener("pointerdown", longPress)
-      },
-    }
-  }
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<span
-  class="btn-wrap"
+<button
+  class="spectrum-ActionButton spectrum-ActionButton--size{size}"
+  class:spectrum-ActionButton--quiet={quiet}
+  class:is-selected={selected}
+  class:noPadding
+  class:fullWidth
+  class:active
+  class:disabled
+  class:accent={accentColor != null}
+  on:click|preventDefault
   on:mouseover={() => (showTooltip = true)}
   on:mouseleave={() => (showTooltip = false)}
   on:focus={() => (showTooltip = true)}
+  {disabled}
   style={accentStyle}
 >
-  <button
-    use:longPress
-    class:spectrum-ActionButton--quiet={quiet}
-    class:spectrum-ActionButton--emphasized={emphasized}
-    class:is-selected={selected}
-    class:noPadding
-    class:fullWidth
-    class="spectrum-ActionButton spectrum-ActionButton--size{size}"
-    class:active
-    class:disabled
-    class:accent={accentColor != null}
-    {disabled}
-    on:longPress
-    on:click|preventDefault
-  >
-    {#if longPressable}
-      <svg
-        class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold"
-        focusable="false"
-        aria-hidden="true"
-      >
-        <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
-      </svg>
-    {/if}
-    {#if icon}
-      <svg
-        class="spectrum-Icon spectrum-Icon--sizeS"
-        focusable="false"
-        aria-hidden="true"
-        aria-label={icon}
-      >
-        <use xlink:href="#spectrum-icon-18-{icon}" />
-      </svg>
-    {/if}
-    {#if $$slots}
-      <span class="spectrum-ActionButton-label"><slot /></span>
-    {/if}
-    {#if tooltip && showTooltip}
-      <div class="tooltip" in:fade={{ duration: 130, delay: 250 }}>
-        <Tooltip textWrapping direction="bottom" text={tooltip} />
-      </div>
-    {/if}
-  </button>
-</span>
+  {#if icon}
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeS"
+      focusable="false"
+      aria-hidden="true"
+      aria-label={icon}
+    >
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
+  {/if}
+  {#if $$slots}
+    <span class="spectrum-ActionButton-label"><slot /></span>
+  {/if}
+  {#if tooltip && showTooltip}
+    <div class="tooltip" in:fade={{ duration: 130, delay: 250 }}>
+      <Tooltip textWrapping direction="bottom" text={tooltip} />
+    </div>
+  {/if}
+</button>
 
 <style>
+  button {
+    transition: filter 130ms ease-out, background 130ms ease-out,
+      border 130ms ease-out, color 130ms ease-out;
+  }
   .fullWidth {
     width: 100%;
   }
@@ -120,9 +83,7 @@
     margin-left: 0;
     transition: color ease-out 130ms;
   }
-  .is-selected:not(.spectrum-ActionButton--emphasized):not(
-      .spectrum-ActionButton--quiet
-    ) {
+  .is-selected:not(.spectrum-ActionButton--quiet) {
     background: var(--spectrum-global-color-gray-300);
     border-color: var(--spectrum-global-color-gray-500);
   }
@@ -137,7 +98,7 @@
     padding: 0;
     min-width: 0;
   }
-  .is-selected:not(.emphasized) .spectrum-Icon {
+  .is-selected .spectrum-Icon {
     color: var(--spectrum-global-color-gray-900);
   }
   .is-selected.disabled .spectrum-Icon {
@@ -154,10 +115,12 @@
     text-align: center;
     z-index: 1;
   }
-
-  button.accent.is-selected,
-  button:active.accent {
+  .accent.is-selected,
+  .accent:active {
     border: 1px solid var(--accent-border-color);
     background: var(--accent-bg-color);
   }
+  .accent:hover {
+    filter: brightness(1.2);
+  }
 </style>
diff --git a/packages/bbui/src/Notification/Notification.svelte b/packages/bbui/src/Notification/Notification.svelte
index 26e60ed366..fbc7197e36 100644
--- a/packages/bbui/src/Notification/Notification.svelte
+++ b/packages/bbui/src/Notification/Notification.svelte
@@ -27,11 +27,7 @@
   <div class="spectrum-Toast-body" class:actionBody={!!action}>
     <div class="wrap spectrum-Toast-content">{message || ""}</div>
     {#if action}
-      <ActionButton
-        quiet
-        emphasized
-        on:click={() => action(() => dispatch("dismiss"))}
-      >
+      <ActionButton quiet on:click={() => action(() => dispatch("dismiss"))}>
         <div style="color: white; font-weight: 600;">{actionMessage}</div>
       </ActionButton>
     {/if}