Updating fancy form components and building out first version of fancy checkbox group.

packages/bbui/src/FancyForm/FancyCheckbox.svelte

@@ -8,8 +8,8 @@
   export let disabled = false
   export let error = null
   export let validate = null
-  export let compact = false
+  export let compress = false
-  export let noMaxWidth
+  export let lighter = false
 
   const dispatch = createEventDispatcher()
 
@@ -28,8 +28,8 @@
   {value}
   {validate}
   {disabled}
-  {compact}
+  {compress}
-  {noMaxWidth}
+  {lighter}
   clickable
   on:click={onChange}
 >

packages/bbui/src/FancyForm/FancyCheckboxGroup.svelte

@@ -0,0 +1,53 @@
+<script>
+  import FancyCheckbox from "./FancyCheckbox.svelte"
+  import FancyForm from "./FancyForm.svelte"
+
+  export let options = []
+  export let selected = []
+  export let showSelectAll = true
+  export let selectAllText = "Select all"
+
+  let allSelected = false
+  $: {
+    if (selected.length === options.length) {
+      allSelected = true
+    } else if (selected.length === 0) {
+      allSelected = false
+    } else {
+      allSelected = "partial"
+    }
+  }
+
+  function toggleSelectAll() {
+    if (allSelected === true) {
+      selected = []
+    } else {
+      selected = [...options]
+    }
+  }
+</script>
+
+{#if options && Array.isArray(options)}
+  <FancyForm compact noMaxWidth on:change>
+    {#if showSelectAll}
+      <div class="checkbox-item">
+        <FancyCheckbox
+          bind:value={allSelected}
+          on:change={toggleSelectAll}
+          text={selectAllText}
+          compress
+          lighter
+        />
+      </div>
+    {/if}
+    {#each options as option, i}
+      <FancyCheckbox bind:value={selected[i]} text={option} compress />
+    {/each}
+  </FancyForm>
+{/if}
+
+<style>
+  .checkbox-item:hover {
+    background-color: rgba(255, 255, 255, 0.01);
+  }
+</style>

packages/bbui/src/FancyForm/FancyField.svelte

@@ -11,6 +11,8 @@
   export let value
   export let ref
   export let autoHeight
+  export let compress
+  export let lighter
 
   const formContext = getContext("fancy-form")
   const id = Math.random()
@@ -38,10 +40,12 @@
 <div
   bind:this={ref}
   class="fancy-field"
+  class:compress
   class:error
   class:disabled
   class:focused
   class:clickable
+  class:lighter
   class:auto-height={autoHeight}
 >
   <div class="content" on:click>
@@ -70,6 +74,12 @@
       background 130ms ease-out;
     color: var(--spectrum-global-color-gray-800);
   }
+  .lighter {
+    background: var(--spectrum-global-color-gray-100) !important;
+  }
+  .compress {
+    margin-bottom: -1px;
+  }
   .fancy-field:hover {
     border-color: var(--spectrum-global-color-gray-400);
   }
@@ -92,7 +102,7 @@
   .content {
     position: relative;
     height: var(--fancy-field-height);
-    padding: 0 16px;
+    padding: 0 var(--fancy-field-padding);
   }
   .fancy-field.auto-height .content {
     height: auto;
@@ -103,7 +113,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    gap: 16px;
+    gap: var(--fancy-field-padding);
   }
   .field {
     flex: 1 1 auto;

packages/bbui/src/FancyForm/FancyForm.svelte

@@ -29,7 +29,8 @@
   const styles = () => {
     let styleString = ""
     styleString += `--fancy-field-max-width: ${noMaxWidth ? "auto" : "400px"}`
-    styleString += `; --fancy-field-height: ${compact ? "40px" : "64px"}`
+    styleString += `; --fancy-field-height: ${compact ? "36px" : "64px"}`
+    styleString += `; --fancy-field-padding: ${compact ? "8px" : "16px"}`
     return styleString
   }
 </script>

packages/bbui/src/FancyForm/index.js

@@ -4,4 +4,5 @@ export { default as FancySelect } from "./FancySelect.svelte"
 export { default as FancyButton } from "./FancyButton.svelte"
 export { default as FancyForm } from "./FancyForm.svelte"
 export { default as FancyButtonRadio } from "./FancyButtonRadio.svelte"
+export { default as FancyCheckboxGroup } from "./FancyCheckboxGroup.svelte"
 export { default as ErrorMessage } from "./ErrorMessage.svelte"

packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte

@@ -5,8 +5,7 @@
     notifications,
     Body,
     Layout,
-    FancyForm,
+    FancyCheckboxGroup,
-    FancyCheckbox,
   } from "@budibase/bbui"
   import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
   import { IntegrationNames } from "constants/backend"
@@ -111,13 +110,7 @@
     />
   {:else}
     <div class="table-checkboxes">
-      <FancyForm compact noMaxWidth>
+      <FancyCheckboxGroup options={["table a", "table b", "table c"]} />
-        <FancyCheckbox value="table a" text="table a" />
-        <FancyCheckbox value="table a" text="table a" />
-        <FancyCheckbox value="table a" text="table a" />
-        <FancyCheckbox value="table a" text="table a" />
-        <FancyCheckbox value="table a" text="table a" />
-      </FancyForm>
     </div>
   {/if}
 </ModalContent>