Pull in picker changes from new design UI

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

@@ -6,12 +6,15 @@
   import { createEventDispatcher } from "svelte"
   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 = []
@@ -20,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
@@ -43,7 +47,7 @@
       return
     }
     searchTerm = null
-    open = !open
+    open = true
   }
 
   const getSortedOptions = (options, getLabel, sort) => {
@@ -71,7 +75,6 @@
   }
 </script>
 
-<div use:clickOutside={() => (open = false)}>
 <button
   {id}
   class="spectrum-Picker spectrum-Picker--sizeM"
@@ -83,11 +86,10 @@
   on:mousedown={onClick}
 >
   {#if fieldIcon}
-      <span class="icon-Placeholder-Padding">
+    <span class="option-icon">
-        <img src={fieldIcon} alt="icon" width="20" height="15" />
+      <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"
@@ -115,6 +122,7 @@
 </button>
 {#if open}
   <div
+    use:clickOutside={() => (open = false)}
     transition:fly|local={{ y: -20, duration: 200 }}
     class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
     class:auto-width={autoWidth}
@@ -158,13 +166,8 @@
             on:click={() => onSelectOption(getOptionValue(option, idx))}
           >
             {#if getOptionIcon(option, idx)}
-                <span class="icon-Padding">
+              <span class="option-icon">
-                  <img
+                <Icon name={getOptionIcon(option, idx)} />
-                    src={getOptionIcon(option, idx)}
-                    alt="icon"
-                    width="20"
-                    height="15"
-                  />
               </span>
             {/if}
             <span class="spectrum-Menu-itemLabel">
@@ -177,13 +180,17 @@
             >
               <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}
     </ul>
   </div>
 {/if}
-</div>
 
 <style>
   .spectrum-Popover {
@@ -213,13 +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-top: 5px;
+    padding-left: 8px;
-    padding-right: 10px;
   }
+  .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
   />