rework Icons to use new API

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-27 16:30:13 +02:00
parent c1542dc49e
commit 0b37d6f89a
13 changed files with 15 additions and 23 deletions

View File

@ -20,7 +20,7 @@
<div class="property-group-name" on:click={onHeaderClick}>
<div class:thin class="name">{name}</div>
<div class="icon">
<Icon s name={show ? 'Remove' : 'Add'} />
<Icon size="S" name={show ? "Remove" : "Add"} />
</div>
</div>
<div class="property-panel" class:show>

View File

@ -6,26 +6,18 @@
export let direction = "n"
export let name = "Add"
export let hidden = false
export let s = false
export let m = false
export let l = false
export let xl = false
export let size = "M"
export let hoverable = false
export let disabled = false
$: rotation = directions.indexOf(direction) * 45
$: useDefault = ![s, m, l, xl].includes(true)
</script>
<svg
on:click
class:hoverable
class:disabled
class:spectrum-Icon--sizeS={s}
class:spectrum-Icon--sizeM={m || useDefault}
class:spectrum-Icon--sizeL={l}
class:spectrum-Icon--sizeXL={xl}
class="spectrum-Icon"
class="spectrum-Icon spectrum-Icon--size{size}"
focusable="false"
aria-hidden={hidden}
aria-label={name}

View File

@ -30,7 +30,7 @@
<div>
<Input readonly value={fullWebhookURL(value)} />
<div class="icon" on:click={() => copyToClipboard()}>
<Icon s name="Copy" />
<Icon size="S" name="Copy" />
</div>
</div>

View File

@ -22,7 +22,7 @@
<ActionMenu>
<div slot="control" class="icon">
<Icon s hoverable name="MoreSmallList" />
<Icon size="S" hoverable name="MoreSmallList" />
</div>
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
</ActionMenu>

View File

@ -15,7 +15,7 @@
<ActionMenu>
<div slot="control" class="icon">
<Icon s hoverable name="MoreSmallList" />
<Icon size="S" hoverable name="MoreSmallList" />
</div>
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
</ActionMenu>

View File

@ -36,7 +36,7 @@
on:change={event => onChange(event.detail)}
{placeholder} />
<div class="icon" on:click={bindingDrawer.show}>
<Icon s name="FlashOn" />
<Icon size="S" name="FlashOn" />
</div>
</div>
<Drawer bind:this={bindingDrawer} {title}>

View File

@ -29,13 +29,13 @@
<div class="content">
{#if withArrow}
<div class:opened class="icon arrow">
<Icon s name="ChevronRight" />
<Icon size="S" name="ChevronRight" />
</div>
{/if}
<slot name="icon" />
{#if icon}
<div class="icon"><Icon s name={icon} /></div>
<div class="icon"><Icon size="S" name={icon} /></div>
{/if}
<div class="text">{text}</div>
{#if withActions}

View File

@ -68,7 +68,7 @@
<ActionMenu>
<div slot="control" class="icon">
<Icon s hoverable name="MoreSmallList" />
<Icon size="S" hoverable name="MoreSmallList" />
</div>
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
<MenuItem noClose icon="ChevronUp" on:click={moveUpComponent}

View File

@ -41,7 +41,7 @@
<ActionMenu>
<div slot="control" class="icon">
<Icon s hoverable name="MoreSmallList" />
<Icon size="S" hoverable name="MoreSmallList" />
</div>
<MenuItem icon="Edit" on:click={editLayoutNameModal.show}>Edit</MenuItem>
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>

View File

@ -25,7 +25,7 @@
<ActionMenu>
<div slot="control" class="icon">
<Icon s hoverable name="MoreSmallList" />
<Icon size="S" hoverable name="MoreSmallList" />
</div>
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
</ActionMenu>

View File

@ -120,7 +120,7 @@
on:click={() => deleteAction(index)}
style="margin-left: auto;"
>
<Icon s hoverable name="Close" />
<Icon size="S" hoverable name="Close" />
</div>
</div>
{/each}

View File

@ -87,7 +87,7 @@
class="icon"
data-cy={`${key}-binding-button`}
on:click={bindingDrawer.show}>
<Icon s name="FlashOn" />
<Icon size="S" name="FlashOn" />
</div>
<Drawer bind:this={bindingDrawer} title={capitalise(key)}>
<svelte:fragment slot="description">

View File

@ -20,7 +20,7 @@
<div class="root">
<Heading m>Your Apps</Heading>
<Divider m />
<Divider size="M" />
{#await promise}
<div class="spinner-container">
<Spinner size="30" />