Allow status lights to be added to pickers

packages/bbui/src/Form/Core/Picker.svelte

@@ -7,12 +7,14 @@
   import clickOutside from "../../Actions/click_outside"
   import Search from "./Search.svelte"
   import Icon from "../../Icon/Icon.svelte"
+  import StatusLight from "../../StatusLight/StatusLight.svelte"
 
   export let id = null
   export let disabled = false
   export let error = null
   export let fieldText = ""
   export let fieldIcon = ""
+  export let fieldColour = ""
   export let isPlaceholder = false
   export let placeholderOption = null
   export let options = []
@@ -21,6 +23,7 @@
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
   export let getOptionIcon = () => null
+  export let getOptionColour = () => null
   export let open = false
   export let readonly = false
   export let quiet = false
@@ -83,11 +86,10 @@
   on:mousedown={onClick}
 >
   {#if fieldIcon}
-    <span class="icon-Placeholder-Padding">
+    <span class="option-icon">
       <Icon name={fieldIcon} />
     </span>
   {/if}
-
   <span
     class="spectrum-Picker-label"
     class:is-placeholder={isPlaceholder}
@@ -105,6 +107,11 @@
       <use xlink:href="#spectrum-icon-18-Alert" />
     </svg>
   {/if}
+  {#if fieldColour}
+    <span class="option-colour">
+      <StatusLight custom color={fieldColour} />
+    </span>
+  {/if}
   <svg
     class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
     focusable="false"
@@ -159,7 +166,7 @@
             on:click={() => onSelectOption(getOptionValue(option, idx))}
           >
             {#if getOptionIcon(option, idx)}
-              <span class="icon-Padding">
+              <span class="option-icon">
                 <Icon name={getOptionIcon(option, idx)} />
               </span>
             {/if}
@@ -173,6 +180,11 @@
             >
               <use xlink:href="#spectrum-css-icon-Checkmark100" />
             </svg>
+            {#if getOptionColour(option, idx)}
+              <span class="option-colour">
+                <StatusLight custom color={getOptionColour(option, idx)} />
+              </span>
+            {/if}
           </li>
         {/each}
       {/if}
@@ -208,12 +220,18 @@
     padding-right: 2px;
   }
 
-  .icon-Padding {
+  /* Icon and colour alignment */
-    padding-right: 10px;
+  .spectrum-Menu-checkmark {
+    align-self: center;
+    margin-top: 0;
   }
-  .icon-Placeholder-Padding {
+  .option-colour {
-    padding-right: 10px;
+    padding-left: 8px;
   }
+  .option-icon {
+    padding-right: 8px;
+  }
+
   .spectrum-Popover :global(.spectrum-Search) {
     margin-top: -1px;
     margin-left: -1px;

packages/bbui/src/Form/Core/Select.svelte

@@ -11,6 +11,7 @@
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
   export let getOptionIcon = () => null
+  export let getOptionColour = () => null
   export let readonly = false
   export let quiet = false
   export let autoWidth = false
@@ -20,7 +21,19 @@
   const dispatch = createEventDispatcher()
   let open = false
   $: fieldText = getFieldText(value, options, placeholder)
-  $: fieldIcon = getFieldIcon(value, options, placeholder)
+  $: fieldIcon = getFieldAttribute(getOptionIcon, value, options)
+  $: fieldColour = getFieldAttribute(getOptionColour, value, options)
+
+  const getFieldAttribute = (getAttribute, value, options) => {
+    // Wait for options to load if there is a value but no options
+    if (!options?.length) {
+      return ""
+    }
+    const index = options.findIndex(
+      (option, idx) => getOptionValue(option, idx) === value
+    )
+    return index !== -1 ? getAttribute(options[index], index) : null
+  }
 
   const getFieldText = (value, options, placeholder) => {
     // Always use placeholder if no value
@@ -28,27 +41,7 @@
       return placeholder || "Choose an option"
     }
 
-    // Wait for options to load if there is a value but no options
+    return getFieldAttribute(getOptionLabel, value, options)
-    if (!options?.length) {
-      return ""
-    }
-
-    // Render the label if the selected option is found, otherwise raw value
-    const index = options.findIndex(
-      (option, idx) => getOptionValue(option, idx) === value
-    )
-    return index !== -1 ? getOptionLabel(options[index], index) : value
-  }
-
-  const getFieldIcon = (value, options) => {
-    // Wait for options to load if there is a value but no options
-    if (!options?.length) {
-      return ""
-    }
-    const index = options.findIndex(
-      (option, idx) => getOptionValue(option, idx) === value
-    )
-    return index !== -1 ? getOptionIcon(options[index], index) : null
   }
 
   const selectOption = value => {
@@ -66,12 +59,14 @@
   {disabled}
   {readonly}
   {fieldText}
+  {fieldIcon}
+  {fieldColour}
   {options}
   {autoWidth}
   {getOptionLabel}
   {getOptionValue}
   {getOptionIcon}
-  {fieldIcon}
+  {getOptionColour}
   {autocomplete}
   {sort}
   isPlaceholder={value == null || value === ""}

packages/bbui/src/Form/Select.svelte

@@ -14,6 +14,7 @@
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
   export let getOptionIcon = option => option?.icon
+  export let getOptionColour = option => option?.colour
   export let quiet = false
   export let autoWidth = false
   export let sort = false
@@ -47,6 +48,7 @@
     {getOptionLabel}
     {getOptionValue}
     {getOptionIcon}
+    {getOptionColour}
     on:change={onChange}
     on:click
   />

packages/bbui/src/StatusLight/StatusLight.svelte

@@ -51,6 +51,9 @@
     justify-content: center;
     align-items: center;
     --spectrum-statuslight-info-text-gap: 4px;
+    min-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
   }
   .spectrum-StatusLight.withText::before {
     margin-right: 10px;