Remove deprecated unused props from action buttons

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
+<button
-  class="btn-wrap"
+  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
+  {#if icon}
-    use:longPress
+    <svg
-    class:spectrum-ActionButton--quiet={quiet}
+      class="spectrum-Icon spectrum-Icon--sizeS"
-    class:spectrum-ActionButton--emphasized={emphasized}
+      focusable="false"
-    class:is-selected={selected}
+      aria-hidden="true"
-    class:noPadding
+      aria-label={icon}
-    class:fullWidth
+    >
-    class="spectrum-ActionButton spectrum-ActionButton--size{size}"
+      <use xlink:href="#spectrum-icon-18-{icon}" />
-    class:active
+    </svg>
-    class:disabled
+  {/if}
-    class:accent={accentColor != null}
+  {#if $$slots}
-    {disabled}
+    <span class="spectrum-ActionButton-label"><slot /></span>
-    on:longPress
+  {/if}
-    on:click|preventDefault
+  {#if tooltip && showTooltip}
-  >
+    <div class="tooltip" in:fade={{ duration: 130, delay: 250 }}>
-    {#if longPressable}
+      <Tooltip textWrapping direction="bottom" text={tooltip} />
-      <svg
+    </div>
-        class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold"
+  {/if}
-        focusable="false"
+</button>
-        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>
 
 <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(
+  .is-selected:not(.spectrum-ActionButton--quiet) {
-      .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;
   }
-
+  .accent.is-selected,
-  button.accent.is-selected,
+  .accent:active {
-  button:active.accent {
     border: 1px solid var(--accent-border-color);
     background: var(--accent-bg-color);
   }
+  .accent:hover {
+    filter: brightness(1.2);
+  }
 </style>

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
+      <ActionButton quiet on:click={() => action(() => dispatch("dismiss"))}>
-        quiet
-        emphasized
-        on:click={() => action(() => dispatch("dismiss"))}
-      >
         <div style="color: white; font-weight: 600;">{actionMessage}</div>
       </ActionButton>
     {/if}