Update icon usage in pickerdropdown

This commit is contained in:
Andrew Kingston 2022-08-05 11:01:30 +01:00
parent 66ec56e631
commit e09c3c13cd
1 changed files with 14 additions and 15 deletions

View File

@ -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);
} }