Update select settings to match the settings bar style where possible

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -80,4 +80,7 @@
   .active svg {
     color: var(--spectrum-global-color-blue-600);
   }
+  :global([dir="ltr"] .spectrum-ActionButton .spectrum-Icon) {
+    margin-left: 0;
+  }
 </style>

packages/builder/src/components/design/settings/componentSettings.js

@@ -18,6 +18,7 @@ import FormFieldSelect from "./controls/FormFieldSelect.svelte"
 import ValidationEditor from "./controls/ValidationEditor/ValidationEditor.svelte"
 import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
 import ColumnEditor from "./controls/ColumnEditor/ColumnEditor.svelte"
+import BarButtonList from "./controls/BarButtonList.svelte"
 
 const componentMap = {
   text: DrawerBindableCombobox,
@@ -61,6 +62,16 @@ const componentMap = {
   "validation/link": ValidationEditor,
 }
 
-export const getComponentForSettingType = type => {
+export const getComponentForSetting = setting => {
+  const { type, showInBar, barStyle } = setting || {}
+  if (!type) {
+    return null
+  }
+
+  // We can show a clone of the bar settings for certain select settings
+  if (showInBar && type === "select" && barStyle === "buttons") {
+    return BarButtonList
+  }
+
   return componentMap[type]
 }

packages/builder/src/components/design/settings/controls/BarButtonList.svelte

@@ -0,0 +1,17 @@
+<script>
+  import { ActionButton, ActionGroup } from "@budibase/bbui"
+
+  export let value
+  export let onChange
+  export let options
+</script>
+
+<ActionGroup>
+  {#each options as option}
+    <ActionButton
+      icon={option.barIcon}
+      quiet={option.value !== value}
+      on:click={() => onChange(option.value)}
+    />
+  {/each}
+</ActionGroup>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte

@@ -6,7 +6,7 @@
   import LayoutSelect from "components/design/settings/controls/LayoutSelect.svelte"
   import RoleSelect from "components/design/settings/controls/RoleSelect.svelte"
   import ResetFieldsButton from "components/design/settings/controls/ResetFieldsButton.svelte"
-  import { getComponentForSettingType } from "components/design/settings/componentSettings"
+  import { getComponentForSetting } from "components/design/settings/componentSettings"
   import { Utils } from "@budibase/frontend-core"
 
   export let componentDefinition
@@ -51,7 +51,7 @@
   })
 
   const canRenderControl = setting => {
-    const control = getComponentForSettingType(setting?.type)
+    const control = getComponentForSetting(setting)
     if (!control) {
       return false
     }
@@ -104,7 +104,7 @@
       {#if canRenderControl(setting)}
         <PropertyControl
           type={setting.type}
-          control={getComponentForSettingType(setting.type)}
+          control={getComponentForSetting(setting)}
           label={setting.label}
           key={setting.key}
           value={componentInstance[setting.key] ??
@@ -112,8 +112,13 @@
           nested={setting.nested}
           onChange={val => updateProp(setting.key, val)}
           props={{
-            options: setting.options || [],
+            // Generic settings
             placeholder: setting.placeholder || null,
+
+            // Select settings
+            options: setting.options || [],
+
+            // Number fields
             min: setting.min || null,
             max: setting.max || null,
           }}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte

@@ -14,7 +14,7 @@
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { LuceneUtils, Constants } from "@budibase/frontend-core"
   import { selectedComponent } from "builderStore"
-  import { getComponentForSettingType } from "components/design/settings/componentSettings"
+  import { getComponentForSetting } from "components/design/settings/componentSettings"
   import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
   import { getComponentSettings } from "builderStore/componentUtils"
 
@@ -71,11 +71,6 @@
     return settings.find(setting => setting.key === key)
   }
 
-  const getComponentForSetting = key => {
-    const settingDefinition = getSettingDefinition(key)
-    return getComponentForSettingType(settingDefinition?.type || "text")
-  }
-
   const addCondition = () => {
     conditions = [
       ...conditions,
@@ -154,6 +149,7 @@
           on:consider={updateConditions}
         >
           {#each conditions as condition (condition.id)}
+            {@const definition = getSettingDefinition(condition.setting)}
             <div
               class="condition"
               class:update={condition.action === "update"}
@@ -178,18 +174,17 @@
                   bind:value={condition.setting}
                 />
                 <div>TO</div>
-                {#if getSettingDefinition(condition.setting)}
+                {#if definition}
                   <PropertyControl
-                    type={getSettingDefinition(condition.setting).type}
+                    type={definition.type}
-                    control={getComponentForSetting(condition.setting)}
+                    control={getComponentForSetting(definition)}
-                    key={getSettingDefinition(condition.setting).key}
+                    key={definition.key}
                     value={condition.settingValue}
                     componentInstance={$selectedComponent}
                     onChange={val => (condition.settingValue = val)}
                     props={{
-                      options: getSettingDefinition(condition.setting).options,
+                      options: definition.options,
-                      placeholder: getSettingDefinition(condition.setting)
+                      placeholder: definition.placeholder,
-                        .placeholder,
                     }}
                     {bindings}
                   />