fix erroneous class usage

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

View File

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

View File

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

View File

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