conversion of buttons in builder

packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte

@@ -1,7 +1,7 @@
 <script>
   import { sortBy } from "lodash/fp"
   import { automationStore } from "builderStore"
-  import { DropdownMenu, Modal } from "@budibase/bbui"
+  import { Button, DropdownMenu, Modal } from "@budibase/bbui"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
   import CreateWebhookModal from "../Shared/CreateWebhookModal.svelte"
 
@@ -10,19 +10,19 @@
     {
       label: "Trigger",
       value: "TRIGGER",
-      icon: "ri-organization-chart",
+      icon: "Algorithm",
       disabled: hasTrigger,
     },
     {
       label: "Action",
       value: "ACTION",
-      icon: "ri-flow-chart",
+      icon: "Actions",
       disabled: !hasTrigger,
     },
     {
       label: "Logic",
       value: "LOGIC",
-      icon: "ri-filter-line",
+      icon: "Filter",
       disabled: !hasTrigger,
     },
   ]
@@ -63,15 +63,15 @@
 
 <div class="tab-container">
   {#each tabs as tab, idx}
-    <div
+  <div bind:this={anchors[idx]}>
-      bind:this={anchors[idx]}
+    <Button
-      class="tab"
+      size="S"
-      class:disabled={tab.disabled}
+      quiet
-      on:click={tab.disabled ? null : () => onChangeTab(idx)}
+      icon={tab.icon}
-      class:active={idx === selectedIndex}>
+      disabled={tab.disabled}
-      {#if tab.icon}<i class={tab.icon} />{/if}
+      on:click={tab.disabled ? null : () => onChangeTab(idx)}>
-      <span>{tab.label}</span>
+        {tab.label}
-      <i class="ri-arrow-down-s-line arrow" />
+      </Button>
     </div>
   {/each}
 </div>
@@ -100,32 +100,6 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    gap: var(--spacing-l);
     min-height: 24px;
   }
-
-  .tab {
-    color: var(--grey-7);
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-xs);
-    font-size: var(--font-size-xs);
-  }
-  .tab span {
-    font-weight: 500;
-    user-select: none;
-  }
-  .tab.active,
-  .tab:not(.disabled):hover {
-    color: var(--ink);
-    cursor: pointer;
-  }
-  .tab.disabled {
-    color: var(--grey-5);
-  }
-  .tab i:not(:last-child) {
-    font-size: 16px;
-  }
 </style>

packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte

@@ -75,6 +75,7 @@
   </div>
   <Modal bind:this={modal}>
     <ModalContent
+      size="large"
       showCancelButton={false}
       showConfirmButton={false}
       title={`Edit Column: ${field.name}`}>

packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte

@@ -15,6 +15,7 @@
 </Button>
 <Modal bind:this={modal}>
   <ModalContent
+    size="large"
     showCancelButton={false}
     showConfirmButton={false}
     title={'Create Column'}>

packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Popover, TextButton, Icon } from "@budibase/bbui"
+  import { Popover, Button } from "@budibase/bbui"
   import GroupByPopover from "../popovers/GroupByPopover.svelte"
 
   export let view = {}
@@ -9,9 +9,9 @@
 </script>
 
 <div bind:this={anchor}>
-  <TextButton icon="Group" type="overBackground" size="S" quiet active={!!view.groupBy} on:click={dropdown.show}>
+  <Button icon="Group" type="overBackground" size="S" quiet active={!!view.groupBy} on:click={dropdown.show}>
     Group By
-  </TextButton>
+  </Button>
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
   <GroupByPopover {view} onClosed={dropdown.hide} />

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

@@ -3,7 +3,6 @@
     Input,
     Button,
     Label,
-    TextButton,
     Select,
     Toggle,
     Radio,
@@ -289,7 +288,7 @@
   {/if}
   <footer class="create-column-options">
     {#if !uneditable && originalName != null}
-      <TextButton text on:click={confirmDelete}>Delete Column</TextButton>
+      <Button type="warning" size="S" text on:click={confirmDelete}>Delete Column</Button>
     {/if}
     <Button on:click={onClosed}>Cancel</Button>
     <Button type="cta" on:click={saveColumn} bind:disabled={invalid}>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte

@@ -1,8 +1,7 @@
 <script>
-  import { Label, TextButton, Spacer, Select, Input } from "@budibase/bbui"
+  import { Label, Button, Spacer, Select, Input } from "@budibase/bbui"
   import { store, currentAsset } from "builderStore"
   import { getBindableProperties } from "builderStore/dataBinding"
-  import { CloseCircleIcon, AddIcon } from "components/common/Icons"
   import { createEventDispatcher } from "svelte"
   import DrawerBindableInput from "components/common/DrawerBindableInput.svelte"
 
@@ -77,20 +76,15 @@
       bindings={bindableProperties}
       on:change={event => updateFieldValue(idx, event.detail)} />
     <div class="remove-field-container">
-      <TextButton text small on:click={() => removeField(field[0])}>
+      <Button icon="Close" size="S" quiet on:click={() => removeField(field[0])} />
-        <CloseCircleIcon />
-      </TextButton>
     </div>
   {/each}
   <div>
     <Spacer small />
-    <TextButton text small blue on:click={addField}>
+    <Button icon="AddCircle" size="S" type="cta" on:click={addField}>
       Add
       {fieldLabel}
-      <div style="height: 20px; width: 20px;">
+    </Button>
-        <AddIcon />
-      </div>
-    </TextButton>
   </div>
 {/if}
 

packages/builder/src/components/integration/QueryParameterBuilder.svelte

@@ -33,7 +33,7 @@
   <div class="controls">
     <Heading small lh>Parameters</Heading>
     {#if !bindable}
-      <Button secondary on:click={newQueryParameter}>Add Param</Button>
+      <Button on:click={newQueryParameter}>Add Param</Button>
     {/if}
   </div>
   <Body small grey>