Unify components

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

@@ -2,7 +2,6 @@
   import { getContext } from "svelte"
   import { ActionButton, Popover, Toggle, Icon } from "@budibase/bbui"
   import { getColumnIcon } from "../lib/utils"
-  import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
 
   const { columns, datasource, stickyColumn, dispatch } = getContext("grid")
 
@@ -32,6 +31,12 @@
     HIDDEN: "hidden",
   }
 
+  const options = [
+    { icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE },
+    { icon: "Visibility", value: PERMISSION_OPTIONS.READONLY },
+    { icon: "VisibilityOff", value: PERMISSION_OPTIONS.HIDDEN },
+  ]
+
   function columnToPermissionOptions(column) {
     if (!column.visible) {
       return PERMISSION_OPTIONS.HIDDEN
@@ -73,15 +78,17 @@
           <Icon size="S" name={getColumnIcon(column)} />
           {column.label}
         </div>
-        <ToggleActionButtonGroup
-          on:change={e => toggleColumn(column, e.detail)}
-          value={columnToPermissionOptions(column)}
-          options={[
-            { icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE },
-            { icon: "Visibility", value: PERMISSION_OPTIONS.READONLY },
-            { icon: "VisibilityOff", value: PERMISSION_OPTIONS.HIDDEN },
-          ]}
-        />
+        <div>
+          {#each options as option}
+            <ActionButton
+              on:click={() => toggleColumn(column, option.value)}
+              size="S"
+              icon={option.icon}
+              quiet
+              selected={option.value === columnToPermissionOptions(column)}
+            />
+          {/each}
+        </div>
       {/each}
     </div>
   </div>

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

@@ -1,25 +0,0 @@
-<script>
-  import { createEventDispatcher } from "svelte"
-
-  import { ActionButton } from "@budibase/bbui"
-
-  export let value
-  export let options
-
-  let dispatch = createEventDispatcher()
-  const onClick = value => {
-    dispatch("change", value)
-  }
-</script>
-
-<div>
-  {#each options as option}
-    <ActionButton
-      on:click={() => onClick(option.value)}
-      size="S"
-      icon={option.icon}
-      quiet
-      selected={option.value === value}
-    />
-  {/each}
-</div>