Update icon usage in pickerdropdown
This commit is contained in:
parent
66ec56e631
commit
e09c3c13cd
|
@ -9,6 +9,7 @@
|
||||||
import StatusLight from "../../StatusLight/StatusLight.svelte"
|
import StatusLight from "../../StatusLight/StatusLight.svelte"
|
||||||
import Detail from "../../Typography/Detail.svelte"
|
import Detail from "../../Typography/Detail.svelte"
|
||||||
import Search from "./Search.svelte"
|
import Search from "./Search.svelte"
|
||||||
|
import IconAvatar from "../../Icon/IconAvatar.svelte"
|
||||||
|
|
||||||
export let primaryLabel = ""
|
export let primaryLabel = ""
|
||||||
export let primaryValue = null
|
export let primaryValue = null
|
||||||
|
@ -204,19 +205,11 @@
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
{#if primaryOptions[title].getIcon(option)}
|
{#if primaryOptions[title].getIcon(option)}
|
||||||
<div
|
<IconAvatar
|
||||||
style="background: {primaryOptions[title].getColour(
|
|
||||||
option
|
|
||||||
)};"
|
|
||||||
class="circle"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<Icon
|
|
||||||
size="S"
|
size="S"
|
||||||
name={primaryOptions[title].getIcon(option)}
|
icon={primaryOptions[title].getIcon(option)}
|
||||||
|
background={primaryOptions[title].getColour(option)}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{:else if getPrimaryOptionColour(option, idx)}
|
{:else if getPrimaryOptionColour(option, idx)}
|
||||||
<span class="option-left">
|
<span class="option-left">
|
||||||
<StatusLight
|
<StatusLight
|
||||||
|
@ -226,12 +219,13 @@
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
<span class="spectrum-Menu-itemLabel">
|
<span class="spectrum-Menu-itemLabel">
|
||||||
<span
|
<div
|
||||||
|
class="primary-text"
|
||||||
class:spacing-group={primaryOptions[title].getIcon(option)}
|
class:spacing-group={primaryOptions[title].getIcon(option)}
|
||||||
>
|
>
|
||||||
{primaryOptions[title].getLabel(option)}
|
{primaryOptions[title].getLabel(option)}
|
||||||
<span />
|
<span />
|
||||||
</span>
|
</div>
|
||||||
<svg
|
<svg
|
||||||
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
||||||
focusable="false"
|
focusable="false"
|
||||||
|
@ -335,6 +329,11 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.primary-text {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
.spacing-group {
|
.spacing-group {
|
||||||
margin-left: var(--spacing-m);
|
margin-left: var(--spacing-m);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue