fix erroneous class usage

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-09 14:57:31 +02:00
parent 428ee85e13
commit d0a655f75f
3 changed files with 20 additions and 21 deletions

View File

@ -3,19 +3,14 @@
import { createEventDispatcher } from "svelte"
const dispatch = createEventDispatcher()
export let disabled = false
/** @type {('S', 'M', 'L', 'XL')} Size of button */
export let size = "M";
/** @type {('cta','primary','secondary','warning', 'overBackground')} Type of button */
export let type = "primary"
export let quiet = false;
export let selected = false;
export let emphasized = false;
export let selected = false
export let longPressable = false;
export let disabled = false
export let icon = '';
function longPress(element) {
@ -42,7 +37,10 @@
<button
use:longPress
class="spectrum-ActionButton spectrum-ActionButton--size{size.toUpperCase()} spectrum-ActionButton--{type} {quiet && 'spectrum-ActionButton--quiet'}"
class:spectrum-ActionButton--quiet={quiet}
class:spectrum-ActionButton--emphasized={emphasized}
class:is-selected={selected}
class="spectrum-ActionButton spectrum-ActionButton--size{size.toUpperCase()}"
{disabled}
on:longPress
on:click|preventDefault>

View File

@ -14,10 +14,11 @@
}
</script>
<div use:group class="spectrum-ActionGroup
{vertical && 'spectrum-ActionGroup--vertical'}
{justified && 'spectrum-ActionGroup--justified'}
{quiet && 'spectrum-ActionGroup--quiet'}
{compact && 'spectrum-ActionGroup--compact'}">
<div use:group
class:spectrum-ActionGroup--vertical={vertical}
class:spectrum-ActionGroup--justified={justified}
class:spectrum-ActionGroup--quiet={quiet}
class:spectrum-ActionGroup--compact={compact}
class="spectrum-ActionGroup">
<slot />
</div>

View File

@ -9,9 +9,9 @@
export let overBackground = false
</script>
<a {href} class="spectrum-Link
spectrum-Link--size{size}
{primary && 'spectrum-Link--primary'}
{secondary && 'spectrum-Link--secondary'}
{overBackground && 'spectrum-Link--overBackground'}
{quiet && 'spectrum-Link--quiet'}"><slot /></a>
<a {href}
class:spectrum-Link--primary={primary}
class:spectrum-Link--secondary={secondary}
class:spectrum-Link--overBackground={overBackground}
class:spectrum-Link--quiet={quiet}
class="spectrum-Link spectrum-Link--size{size}"><slot /></a>