Assign colours to new options by defaults and use consistent colour set across the board

packages/builder/src/components/backend/DataTable/modals/OptionsEditor.svelte

@@ -3,6 +3,7 @@
   import { dndzone } from "svelte-dnd-action"
   import { Icon, Popover } from "@budibase/bbui"
   import { onMount } from "svelte"
+  import { Constants } from "@budibase/frontend-core"
 
   export let constraints
   export let optionColors = {}
@@ -13,14 +14,6 @@
   let colorPopovers = []
   let anchors = []
 
-  let colorsArray = [
-    "hsla(0, 90%, 75%, 0.3)",
-    "hsla(50, 80%, 75%, 0.3)",
-    "hsla(120, 90%, 75%, 0.3)",
-    "hsla(200, 90%, 75%, 0.3)",
-    "hsla(240, 90%, 75%, 0.3)",
-    "hsla(320, 90%, 75%, 0.3)",
-  ]
   const removeInput = idx => {
     delete optionColors[options[idx].name]
     constraints.inclusion = constraints.inclusion.filter((e, i) => i !== idx)
@@ -30,15 +23,10 @@
   }
 
   const addNewInput = () => {
-    options = [
+    const newOption = `Option ${constraints.inclusion.length + 1}`
-      ...options,
+    options = [...options, { name: newOption, id: Math.random() }]
-      { name: `Option ${constraints.inclusion.length + 1}`, id: Math.random() },
+    constraints.inclusion = [...constraints.inclusion, newOption]
-    ]
+    optionColors[newOption] = Constants.OptionColours[(options.length - 1) % 9]
-    constraints.inclusion = [
-      ...constraints.inclusion,
-      `Option ${constraints.inclusion.length + 1}`,
-    ]
-
     colorPopovers.push(undefined)
     anchors.push(undefined)
   }
@@ -124,7 +112,7 @@
               animate={false}
             >
               <div class="colors" data-ignore-click-outside="true">
-                {#each colorsArray as color}
+                {#each Constants.OptionColours as color}
                   <div
                     on:click={() => handleColorChange(option.name, color, idx)}
                     style="--color:{color};"

packages/frontend-core/src/components/grid/cells/OptionsCell.svelte

@@ -1,8 +1,8 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import { getColor } from "../lib/utils"
   import { onMount } from "svelte"
   import GridPopover from "../overlays/GridPopover.svelte"
+  import { OptionColours } from "../../../constants"
 
   export let value
   export let schema
@@ -39,8 +39,11 @@
   }
 
   const getOptionColor = value => {
-    const index = value ? options.indexOf(value) : null
+    let idx = value ? options.indexOf(value) : null
-    return getColor(index)
+    if (idx == null || idx === -1) {
+      idx = 0
+    }
+    return OptionColours[idx % OptionColours.length]
   }
 
   const toggleOption = option => {

packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte

@@ -1,9 +1,9 @@
 <script>
-  import { getColor } from "../lib/utils"
   import { onMount, getContext } from "svelte"
   import { Icon, Input, ProgressCircle } from "@budibase/bbui"
   import { debounce } from "../../../utils/utils"
   import GridPopover from "../overlays/GridPopover.svelte"
+  import { OptionColours } from "../../../constants"
 
   const { API, cache } = getContext("grid")
 
@@ -19,7 +19,7 @@
   export let primaryDisplay
   export let hideCounter = false
 
-  const color = getColor(0)
+  const color = OptionColours[0]
 
   let isOpen = false
   let searchResults

packages/frontend-core/src/components/grid/lib/utils.js

@@ -18,13 +18,6 @@ export const getCellID = (rowId, fieldName) => {
   return `${rowId}${JOINING_CHARACTER}${fieldName}`
 }
 
-export const getColor = (idx, opacity = 0.3) => {
-  if (idx == null || idx === -1) {
-    idx = 0
-  }
-  return `hsla(${((idx + 1) * 222) % 360}, 90%, 75%, ${opacity})`
-}
-
 export const getColumnIcon = column => {
   if (column.schema.autocolumn) {
     return "MagicWand"

packages/frontend-core/src/constants.js

@@ -140,3 +140,7 @@ export const TypeIconMap = {
     [BBReferenceFieldSubType.USER]: "User",
   },
 }
+
+export const OptionColours = [...new Array(9).keys()].map(idx => {
+  return `hsla(${((idx + 1) * 222) % 360}, 90%, 75%, 0.3)`
+})