Small refactor to move CSS variables inside fields rather fancy forms

packages/bbui/src/FancyForm/FancyCheckbox.svelte

@@ -8,9 +8,8 @@
   export let disabled = false
   export let error = null
   export let validate = null
-  export let compress = false
-  export let lighter = false
   export let indeterminate = false
+  export let compact = false
 
   const dispatch = createEventDispatcher()
 
@@ -29,15 +28,14 @@
   {value}
   {validate}
   {disabled}
-  {compress}
-  {lighter}
+  {compact}
   clickable
   on:click={onChange}
 >
   <span>
     <Checkbox {disabled} {value} {indeterminate} />
   </span>
-  <div class="text">
+  <div class="text" class:compact>
     {#if text}
       {text}
     {/if}
@@ -51,6 +49,7 @@
   }
   .text {
     font-size: 15px;
+    line-height: 17px;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
@@ -58,6 +57,10 @@
     line-clamp: 2;
     -webkit-box-orient: vertical;
   }
+  .text.compact {
+    font-size: 13px;
+    line-height: 15px;
+  }
   .text > :global(*) {
     font-size: inherit !important;
   }

packages/bbui/src/FancyForm/FancyCheckboxGroup.svelte

@@ -40,27 +40,29 @@
 </script>
 
 {#if options && Array.isArray(options)}
-  <FancyForm compact noMaxWidth on:change>
-    {#if showSelectAll}
-      <div class="checkbox-item">
+  <div class="checkbox-group" class:has-select-all={showSelectAll}>
+    <FancyForm on:change>
+      {#if showSelectAll}
         <FancyCheckbox
           bind:value={allSelected}
           on:change={toggleSelectAll}
           text={selectAllText}
-          compress
-          lighter
           indeterminate={!allSelected && !noneSelected}
+          compact
         />
-      </div>
-    {/if}
-    {#each options as option, i}
-      <FancyCheckbox bind:value={selectedBooleans[i]} text={option} compress />
-    {/each}
-  </FancyForm>
+      {/if}
+      {#each options as option, i}
+        <FancyCheckbox bind:value={selectedBooleans[i]} text={option} compact />
+      {/each}
+    </FancyForm>
+  </div>
 {/if}
 
 <style>
-  .checkbox-item:hover {
-    background-color: rgba(255, 255, 255, 0.01);
+  .checkbox-group.has-select-all :global(.fancy-field:first-of-type) {
+    background: var(--spectrum-global-color-gray-100);
+  }
+  .checkbox-group.has-select-all :global(.fancy-field:first-of-type:hover) {
+    background: var(--spectrum-global-color-gray-200);
   }
 </style>

packages/bbui/src/FancyForm/FancyField.svelte

@@ -11,8 +11,7 @@
   export let value
   export let ref
   export let autoHeight
-  export let compress
-  export let lighter
+  export let compact = false
 
   const formContext = getContext("fancy-form")
   const id = Math.random()
@@ -40,12 +39,11 @@
 <div
   bind:this={ref}
   class="fancy-field"
-  class:compress
   class:error
   class:disabled
   class:focused
   class:clickable
-  class:lighter
+  class:compact
   class:auto-height={autoHeight}
 >
   <div class="content" on:click>
@@ -65,7 +63,6 @@
 
 <style>
   .fancy-field {
-    max-width: var(--fancy-field-max-width);
     background: var(--spectrum-global-color-gray-75);
     border: 1px solid var(--spectrum-global-color-gray-300);
     border-radius: 4px;
@@ -73,12 +70,12 @@
     transition: border-color 130ms ease-out, background 130ms ease-out,
       background 130ms ease-out;
     color: var(--spectrum-global-color-gray-800);
+    --padding: 16px;
+    --height: 64px;
   }
-  .lighter {
-    background: var(--spectrum-global-color-gray-100) !important;
-  }
-  .compress {
-    margin-bottom: -1px;
+  .fancy-field.compact {
+    --padding: 8px;
+    --height: 36px;
   }
   .fancy-field:hover {
     border-color: var(--spectrum-global-color-gray-400);
@@ -101,8 +98,8 @@
   }
   .content {
     position: relative;
-    height: var(--fancy-field-height);
-    padding: 0 var(--fancy-field-padding);
+    height: var(--height);
+    padding: 0 var(--padding);
   }
   .fancy-field.auto-height .content {
     height: auto;
@@ -113,7 +110,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    gap: var(--fancy-field-padding);
+    gap: var(--padding);
   }
   .field {
     flex: 1 1 auto;

packages/bbui/src/FancyForm/FancyForm.svelte

@@ -1,9 +1,6 @@
 <script>
   import { setContext } from "svelte"
 
-  export let noMaxWidth
-  export let compact
-
   let fields = {}
 
   setContext("fancy-form", {
@@ -25,15 +22,9 @@
     })
     return valid
   }
-
-  const styles = [
-    `--fancy-field-max-width: ${noMaxWidth ? "auto" : "400px"}`,
-    `--fancy-field-height: ${compact ? "36px" : "64px"}`,
-    `--fancy-field-padding: ${compact ? "8px" : "16px"}`,
-  ].join("; ")
 </script>
 
-<div class="fancy-form" style={styles}>
+<div class="fancy-form">
   <slot />
 </div>
 

packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte

@@ -170,7 +170,6 @@
     <Button
       secondary
       on:click={async () => {
-        console.log(datasource)
         const info = await getDatasourceInfo(datasource)
         tableList = info.tableNames
         confirmDialog.show()