Component settings section tabs (#9895)

* Added tabs to the component settings section in the builder

* Review updates

* Update setting tab buttons to be size M and use a lighter font color when selected

---------

Co-authored-by: Andrew Kingston <andrew@kingston.dev>

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -113,6 +113,9 @@
   .spectrum-ActionButton--quiet {
     padding: 0 8px;
   }
+  .spectrum-ActionButton--quiet.is-selected {
+    color: var(--spectrum-global-color-gray-900);
+  }
   .is-selected:not(.emphasized) .spectrum-Icon {
     color: var(--spectrum-global-color-gray-900);
   }

packages/builder/src/components/design/Panel.svelte

@@ -14,10 +14,11 @@
   export let borderRight = false
 
   let wide = false
+  $: customHeaderContent = $$slots["panel-header-content"]
 </script>
 
 <div class="panel" class:wide class:borderLeft class:borderRight>
-  <div class="header">
+  <div class="header" class:custom={customHeaderContent}>
     {#if showBackButton}
       <Icon name="ArrowLeft" hoverable on:click={onClickBackButton} />
     {/if}
@@ -43,6 +44,13 @@
       <Icon name="Close" hoverable on:click={onClickCloseButton} />
     {/if}
   </div>
+
+  {#if customHeaderContent}
+    <span class="custom-content-wrap">
+      <slot name="panel-header-content" />
+    </span>
+  {/if}
+
   <div class="body">
     <slot />
   </div>
@@ -116,4 +124,10 @@
     justify-content: flex-start;
     align-items: stretch;
   }
+  .header.custom {
+    border: none;
+  }
+  .custom-content-wrap {
+    border-bottom: var(--border-light);
+  }
 </style>

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

@@ -10,6 +10,8 @@
     getBindableProperties,
     getComponentBindableProperties,
   } from "builderStore/dataBinding"
+  import { ActionButton } from "@budibase/bbui"
+  import { capitalise } from "helpers"
 
   $: componentInstance = $selectedComponent
   $: componentDefinition = store.actions.components.getDefinition(
@@ -25,11 +27,34 @@
   )
   $: isScreen = $selectedComponent?._id === $selectedScreen?.props._id
   $: title = isScreen ? "Screen" : $selectedComponent?._instanceName
+
+  let section = "settings"
+  const tabs = ["settings", "styles", "conditions"]
+
+  $: id = $selectedComponent?._id
+  $: id, (section = tabs[0])
 </script>
 
 {#if $selectedComponent}
   {#key $selectedComponent._id}
     <Panel {title} icon={componentDefinition?.icon} borderLeft>
+      <span slot="panel-header-content">
+        <div class="settings-tabs">
+          {#each tabs as tab}
+            <ActionButton
+              size="M"
+              quiet
+              selected={section === tab}
+              on:click={() => {
+                section = tab
+              }}
+            >
+              {capitalise(tab)}
+            </ActionButton>
+          {/each}
+        </div>
+      </span>
+      {#if section == "settings"}
         {#if componentDefinition?.info}
           <ComponentInfoSection {componentDefinition} />
         {/if}
@@ -40,17 +65,31 @@
           {componentBindings}
           {isScreen}
         />
+      {/if}
+      {#if section == "styles"}
         <DesignSection {componentInstance} {componentDefinition} {bindings} />
         <CustomStylesSection
           {componentInstance}
           {componentDefinition}
           {bindings}
         />
+      {/if}
+      {#if section == "conditions"}
         <ConditionalUISection
           {componentInstance}
           {componentDefinition}
           {bindings}
         />
+      {/if}
     </Panel>
   {/key}
 {/if}
+
+<style>
+  .settings-tabs {
+    display: flex;
+    gap: var(--spacing-s);
+    padding: 0 var(--spacing-l);
+    padding-bottom: var(--spacing-l);
+  }
+</style>