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,60 +28,25 @@
     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"
-  on:mouseover={() => (showTooltip = true)}
-  on:mouseleave={() => (showTooltip = false)}
-  on:focus={() => (showTooltip = true)}
-  style={accentStyle}
->
 <button
-    use:longPress
+  class="spectrum-ActionButton spectrum-ActionButton--size{size}"
   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
+  on:mouseover={() => (showTooltip = true)}
+  on:mouseleave={() => (showTooltip = false)}
+  on:focus={() => (showTooltip = true)}
+  {disabled}
+  style={accentStyle}
 >
-    {#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"
@@ -106,9 +66,12 @@
     </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}