Remove deprecated unused props from action buttons
This commit is contained in:
parent
1adddba3c3
commit
c12a7ab19e
|
@ -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(
|
||||
.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>
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in New Issue