From 3b78d4773b6d4b58b320266d2d481aa4b1b90240 Mon Sep 17 00:00:00 2001
From: Mel O'Hagan <mel@budibase.com>
Date: Mon, 22 Aug 2022 16:45:59 +0100
Subject: [PATCH 1/3] Update CSS conditional UI

---
 .../_components/settings/ConditionalUIDrawer.svelte         | 6 +++++-
 packages/client/src/components/Component.svelte             | 3 +++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte
index c386a52cb7..9f4dbbbde5 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte
@@ -56,7 +56,11 @@
   ]
 
   let dragDisabled = true
-  $: settings = getComponentSettings($selectedComponent?._component)
+  $: settings = getComponentSettings($selectedComponent?._component)?.concat({
+    label: "CSS",
+    key: "css",
+    type: "text",
+  })
   $: settingOptions = settings.map(setting => ({
     label: setting.label,
     value: setting.key,
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index a7f506a387..f72f989920 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -379,6 +379,9 @@
           // initial props are up to date. By setting it this way rather than
           // setting it on initialSettings directly, we avoid a double render.
           cachedSettings[key] = allSettings[key]
+          if (key === "css") {
+            instance._styles.custom = cachedSettings[key]
+          }
 
           if (ref?.$$set) {
             // Programmatically set the prop to avoid svelte reactive statements

From 178dc26c1686b5a4deed1429d30e72190ce2f0ab Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 5 Sep 2022 16:35:25 +0100
Subject: [PATCH 2/3] Allow custom CSS to be bindable and allow overriding via
 conditional UI

---
 .../settings/ConditionalUIDrawer.svelte       |  4 +-
 .../settings/CustomStylesSection.svelte       | 56 ++++++++++---------
 .../client/src/components/Component.svelte    | 25 +++++++--
 3 files changed, 51 insertions(+), 34 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte
index 9f4dbbbde5..74f0c930cd 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte
@@ -57,8 +57,8 @@
 
   let dragDisabled = true
   $: settings = getComponentSettings($selectedComponent?._component)?.concat({
-    label: "CSS",
-    key: "css",
+    label: "Custom CSS",
+    key: "_css",
     type: "text",
   })
   $: settingOptions = settings.map(setting => ({
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/CustomStylesSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/CustomStylesSection.svelte
index 187d9ff760..1c7eddc476 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/CustomStylesSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/CustomStylesSection.svelte
@@ -1,30 +1,41 @@
 <script>
   import {
-    TextArea,
     DetailSummary,
     ActionButton,
     Drawer,
-    DrawerContent,
-    Layout,
-    Body,
     Button,
     notifications,
   } from "@budibase/bbui"
-  import { store } from "builderStore"
+  import { selectedScreen, store } from "builderStore"
+  import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
+  import {
+    getBindableProperties,
+    readableToRuntimeBinding,
+    runtimeToReadableBinding,
+  } from "builderStore/dataBinding"
 
   export let componentInstance
 
   let tempValue
   let drawer
 
+  $: bindings = getBindableProperties(
+    $selectedScreen,
+    $store.selectedComponentId
+  )
+
   const openDrawer = () => {
-    tempValue = componentInstance?._styles?.custom
+    tempValue = runtimeToReadableBinding(
+      bindings,
+      componentInstance?._styles?.custom
+    )
     drawer.show()
   }
 
   const save = async () => {
     try {
-      await store.actions.components.updateCustomStyle(tempValue)
+      const value = readableToRuntimeBinding(bindings, tempValue)
+      await store.actions.components.updateCustomStyle(value)
     } catch (error) {
       notifications.error("Error updating custom style")
     }
@@ -42,26 +53,17 @@
 </DetailSummary>
 {#key componentInstance?._id}
   <Drawer bind:this={drawer} title="Custom CSS">
+    <svelte:fragment slot="description">
+      Custom CSS overrides all other component styles.
+    </svelte:fragment>
     <Button cta slot="buttons" on:click={save}>Save</Button>
-    <DrawerContent slot="body">
-      <div class="content">
-        <Layout gap="S" noPadding>
-          <Body size="S">Custom CSS overrides all other component styles.</Body>
-          <TextArea bind:value={tempValue} placeholder="Enter some CSS..." />
-        </Layout>
-      </div>
-    </DrawerContent>
+    <svelte:component
+      this={ClientBindingPanel}
+      slot="body"
+      value={tempValue}
+      on:change={event => (tempValue = event.detail)}
+      allowJS
+      {bindings}
+    />
   </Drawer>
 {/key}
-
-<style>
-  .content {
-    max-width: 800px;
-    margin: 0 auto;
-  }
-  .content :global(textarea) {
-    font-family: monospace;
-    min-height: 240px !important;
-    font-size: var(--font-size-s);
-  }
-</style>
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index f72f989920..69eb9231ab 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -142,6 +142,10 @@
   // Determine and apply settings to the component
   $: applySettings(staticSettings, enrichedSettings, conditionalSettings)
 
+  // Determine custom css.
+  // Broken out as a separate variable to minimize reactivity updates.
+  $: customCSS = cachedSettings?._css
+
   // Scroll the selected element into view
   $: selected && scrollIntoView()
 
@@ -151,6 +155,7 @@
     children: children.length,
     styles: {
       ...instance._styles,
+      custom: customCSS,
       id,
       empty: emptyState,
       interactive,
@@ -259,14 +264,18 @@
     // Get raw settings
     let settings = {}
     Object.entries(instance)
-      .filter(([name]) => name === "_conditions" || !name.startsWith("_"))
+      .filter(([name]) => !name.startsWith("_"))
       .forEach(([key, value]) => {
         settings[key] = value
       })
-
-    // Derive static, dynamic and nested settings if the instance changed
     let newStaticSettings = { ...settings }
     let newDynamicSettings = { ...settings }
+
+    // Attach some internal properties
+    newDynamicSettings["_conditions"] = instance._conditions
+    newDynamicSettings["_css"] = instance._styles?.custom
+
+    // Derive static, dynamic and nested settings if the instance changed
     settingsDefinition?.forEach(setting => {
       if (setting.nested) {
         delete newDynamicSettings[setting.key]
@@ -372,6 +381,10 @@
       initialSettings = cachedSettings
     } else {
       Object.keys(allSettings).forEach(key => {
+        if (key === "_css") {
+          console.log(enrichedSettings._css)
+        }
+
         const same = propsAreSame(allSettings[key], cachedSettings[key])
         if (!same) {
           // Updated cachedSettings (which is assigned by reference to
@@ -379,8 +392,10 @@
           // initial props are up to date. By setting it this way rather than
           // setting it on initialSettings directly, we avoid a double render.
           cachedSettings[key] = allSettings[key]
-          if (key === "css") {
-            instance._styles.custom = cachedSettings[key]
+
+          // Don't update components for internal properties
+          if (key.startsWith("_")) {
+            return
           }
 
           if (ref?.$$set) {

From 925861bed3cfba9768a86c1f0d524447f88b6540 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 6 Sep 2022 12:26:56 +0100
Subject: [PATCH 3/3] Remove log

---
 packages/client/src/components/Component.svelte | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 69eb9231ab..83fa570e74 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -381,10 +381,6 @@
       initialSettings = cachedSettings
     } else {
       Object.keys(allSettings).forEach(key => {
-        if (key === "_css") {
-          console.log(enrichedSettings._css)
-        }
-
         const same = propsAreSame(allSettings[key], cachedSettings[key])
         if (!same) {
           // Updated cachedSettings (which is assigned by reference to