From d6897bbf77a56b716f4ae2d205daf306098ee506 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 25 Jul 2022 17:04:13 +0100
Subject: [PATCH] Update picker to put colour indicators on the left side

---
 packages/bbui/src/Form/Core/Picker.svelte | 35 ++++++++++++-----------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index fc9f801be2..cdaf00aded 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -87,10 +87,15 @@
     on:mousedown={onClick}
   >
     {#if fieldIcon}
-      <span class="option-icon">
+      <span class="option-extra">
         <Icon name={fieldIcon} />
       </span>
     {/if}
+    {#if fieldColour}
+      <span class="option-extra">
+        <StatusLight square color={fieldColour} />
+      </span>
+    {/if}
     <span
       class="spectrum-Picker-label"
       class:is-placeholder={isPlaceholder}
@@ -108,11 +113,6 @@
         <use xlink:href="#spectrum-icon-18-Alert" />
       </svg>
     {/if}
-    {#if fieldColour}
-      <span class="option-colour">
-        <StatusLight size="L" color={fieldColour} />
-      </span>
-    {/if}
     <svg
       class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
       focusable="false"
@@ -166,10 +166,15 @@
               on:click={() => onSelectOption(getOptionValue(option, idx))}
             >
               {#if getOptionIcon(option, idx)}
-                <span class="option-icon">
+                <span class="option-extra">
                   <Icon name={getOptionIcon(option, idx)} />
                 </span>
               {/if}
+              {#if getOptionColour(option, idx)}
+                <span class="option-extra">
+                  <StatusLight square color={getOptionColour(option, idx)} />
+                </span>
+              {/if}
               <span class="spectrum-Menu-itemLabel">
                 {getOptionLabel(option, idx)}
               </span>
@@ -180,11 +185,6 @@
               >
                 <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
-              {#if getOptionColour(option, idx)}
-                <span class="option-colour">
-                  <StatusLight size="L" color={getOptionColour(option, idx)} />
-                </span>
-              {/if}
             </li>
           {/each}
         {/if}
@@ -209,6 +209,9 @@
     width: 100%;
     box-shadow: none;
   }
+  .spectrum-Picker-label.auto-width {
+    margin-right: var(--spacing-xs);
+  }
   .spectrum-Picker-label:not(.auto-width) {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -221,16 +224,16 @@
   .spectrum-Picker-label.auto-width.is-placeholder {
     padding-right: 2px;
   }
+  .auto-width .spectrum-Menu-item {
+    padding-right: var(--spacing-xl);
+  }
 
   /* Icon and colour alignment */
   .spectrum-Menu-checkmark {
     align-self: center;
     margin-top: 0;
   }
-  .option-colour {
-    padding-left: 8px;
-  }
-  .option-icon {
+  .option-extra {
     padding-right: 8px;
   }