From c2e542786055d4cda85f507186eb85bf4c1d4a91 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 12 Jun 2023 15:54:08 +0100
Subject: [PATCH] Small refactor to move CSS variables inside fields rather
 fancy forms

---
 .../bbui/src/FancyForm/FancyCheckbox.svelte   | 13 +++++----
 .../src/FancyForm/FancyCheckboxGroup.svelte   | 28 ++++++++++---------
 packages/bbui/src/FancyForm/FancyField.svelte | 23 +++++++--------
 packages/bbui/src/FancyForm/FancyForm.svelte  | 11 +-------
 .../PlusConfigForm.svelte                     |  1 -
 5 files changed, 34 insertions(+), 42 deletions(-)

diff --git a/packages/bbui/src/FancyForm/FancyCheckbox.svelte b/packages/bbui/src/FancyForm/FancyCheckbox.svelte
index 56290606f6..0a2e5ac159 100644
--- a/packages/bbui/src/FancyForm/FancyCheckbox.svelte
+++ b/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;
   }
diff --git a/packages/bbui/src/FancyForm/FancyCheckboxGroup.svelte b/packages/bbui/src/FancyForm/FancyCheckboxGroup.svelte
index c92c57388f..aaea388c36 100644
--- a/packages/bbui/src/FancyForm/FancyCheckboxGroup.svelte
+++ b/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>
diff --git a/packages/bbui/src/FancyForm/FancyField.svelte b/packages/bbui/src/FancyForm/FancyField.svelte
index a4d453bb77..455f4b38fb 100644
--- a/packages/bbui/src/FancyForm/FancyField.svelte
+++ b/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;
diff --git a/packages/bbui/src/FancyForm/FancyForm.svelte b/packages/bbui/src/FancyForm/FancyForm.svelte
index a055acfc8d..f874238572 100644
--- a/packages/bbui/src/FancyForm/FancyForm.svelte
+++ b/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>
 
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte
index 332101550d..576366173a 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte
+++ b/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()