Break down component

packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte

@@ -1,7 +1,8 @@
 <script>
   import { getContext } from "svelte"
-  import { ActionButton, Popover, Toggle, Icon } from "@budibase/bbui"
+  import { ActionButton, Popover, Icon } from "@budibase/bbui"
   import { getColumnIcon } from "../lib/utils"
+  import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
 
   const { columns, datasource, stickyColumn, dispatch } = getContext("grid")
 
@@ -30,8 +31,12 @@
   }
 
   const options = [
-    { icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE },
-    { icon: "VisibilityOff", value: PERMISSION_OPTIONS.HIDDEN },
+    { icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE, tooltip: "Writable" },
+    {
+      icon: "VisibilityOff",
+      value: PERMISSION_OPTIONS.HIDDEN,
+      tooltip: "Hidden",
+    },
   ]
 
   function columnToPermissionOptions(column) {
@@ -65,38 +70,24 @@
           {$stickyColumn.label}
         </div>
 
-        <div class="permissionPicker">
-          {#each options as option}
-            <ActionButton
+        <ToggleActionButtonGroup
           disabled
-              size="S"
-              icon={option.icon}
-              quiet
-              selected={option.value === PERMISSION_OPTIONS.WRITABLE}
-              noPadding
+          value={PERMISSION_OPTIONS.WRITABLE}
+          {options}
         />
-          {/each}
-        </div>
       {/if}
       {#each $columns as column}
         <div class="column">
           <Icon size="S" name={getColumnIcon(column)} />
           {column.label}
         </div>
-        <div class="permissionPicker">
-          {#each options as option}
-            <ActionButton
-              on:click={() => toggleColumn(column, option.value)}
-              size="S"
-              icon={option.icon}
-              quiet
-              selected={option.value === columnToPermissionOptions(column)}
-              noPadding
+        <ToggleActionButtonGroup
+          on:click={e => toggleColumn(column, e.detail)}
+          value={columnToPermissionOptions(column)}
+          {options}
         />
       {/each}
     </div>
-      {/each}
-    </div>
   </div>
 </Popover>
 
@@ -120,16 +111,4 @@
     display: flex;
     gap: 8px;
   }
-  .permissionPicker {
-    display: flex;
-    gap: var(--spacing-xs);
-    padding-left: calc(var(--spacing-xl) * 2);
-  }
-
-  .permissionPicker :global(.spectrum-Icon) {
-    width: 14px;
-  }
-  .permissionPicker :global(.spectrum-ActionButton) {
-    width: 22px;
-  }
 </style>

packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte

@@ -0,0 +1,41 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+
+  let dispatch = createEventDispatcher()
+
+  import { ActionButton } from "@budibase/bbui"
+
+  export let value
+  export let options
+  export let disabled
+</script>
+
+<div class="permissionPicker">
+  {#each options as option}
+    <ActionButton
+      on:click={() => dispatch("click", option.value)}
+      {disabled}
+      size="S"
+      icon={option.icon}
+      quiet
+      selected={option.value === value}
+      noPadding
+      tooltip={option.tooltip}
+    />
+  {/each}
+</div>
+
+<style>
+  .permissionPicker {
+    display: flex;
+    gap: var(--spacing-xs);
+    padding-left: calc(var(--spacing-xl) * 2);
+  }
+
+  .permissionPicker :global(.spectrum-Icon) {
+    width: 14px;
+  }
+  .permissionPicker :global(.spectrum-ActionButton) {
+    width: 22px;
+  }
+</style>