Add ability to enter custom component CSS

packages/builder/src/builderStore/store/frontend.js

@@ -366,20 +366,20 @@ export const getFrontendStore = () => {
         await Promise.all(promises)
       },
       updateStyle: async (type, name, value) => {
-        let promises = []
         const selected = get(selectedComponent)
-
+        if (!selected._styles) {
-        store.update(state => {
+          selected._styles = {}
-          if (!selected._styles) {
+        }
-            selected._styles = {}
+        selected._styles[type][name] = value
-          }
+        await store.actions.preview.saveSelected()
-          selected._styles[type][name] = value
+      },
-
+      updateCustomStyle: async style => {
-          // save without messing with the store
+        const selected = get(selectedComponent)
-          promises.push(store.actions.preview.saveSelected())
+        if (!selected._styles) {
-          return state
+          selected._styles = {}
-        })
+        }
-        await Promise.all(promises)
+        selected._styles.custom = style
+        await store.actions.preview.saveSelected()
       },
       updateProp: (name, value) => {
         store.update(state => {

packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte

@@ -31,6 +31,7 @@
     componentPropDefinition.properties[selectedCategory.value]
 
   const onStyleChanged = store.actions.components.updateStyle
+  const onCustomStyleChanged = store.actions.components.updateCustomStyle
 
   $: isComponentOrScreen =
     $store.currentView === "component" ||
@@ -93,7 +94,11 @@
 
 <div class="component-props-container">
   {#if selectedCategory.value === 'design'}
-    <DesignView {panelDefinition} {componentInstance} {onStyleChanged} />
+    <DesignView
+      {panelDefinition}
+      {componentInstance}
+      {onStyleChanged}
+      {onCustomStyleChanged} />
   {:else if selectedCategory.value === 'settings'}
     <SettingsView
       {componentInstance}

packages/builder/src/components/userInterface/DesignView.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { onMount } from "svelte"
+  import { TextArea, DetailSummary } from "@budibase/bbui"
   import PropertyGroup from "./PropertyGroup.svelte"
   import FlatButtonGroup from "./FlatButtonGroup.svelte"
 
@@ -7,6 +7,7 @@
   export let componentInstance = {}
   export let componentDefinition = {}
   export let onStyleChanged = () => {}
+  export let onCustomStyleChanged = () => {}
 
   let selectedCategory = "normal"
   let propGroup = null
@@ -44,6 +45,17 @@
             open={currentGroup === groupName}
             on:open={() => (currentGroup = groupName)} />
         {/each}
+        <DetailSummary
+          name="Custom Styles"
+          on:open={() => (currentGroup = 'custom')}
+          show={currentGroup === 'custom'}
+          thin>
+          <div class="custom-styles">
+            <TextArea
+              value={componentInstance._styles.custom}
+              on:change={event => onCustomStyleChanged(event.target.value)} />
+          </div>
+        </DetailSummary>
       {:else}
         <div class="no-design">
           This component doesn't have any design properties.
@@ -85,4 +97,10 @@
     font-size: var(--font-size-xs);
     color: var(--grey-5);
   }
+
+  .custom-styles :global(textarea) {
+    font-family: monospace;
+    min-height: 120px;
+    font-size: var(--font-size-xs);
+  }
 </style>

packages/client/src/utils/styleable.js

@@ -1,16 +1,17 @@
 /**
  * Helper to build a CSS string from a style object
  */
-const buildStyleString = (styles, selected) => {
+const buildStyleString = (styleObject, customStyles, selected) => {
   let str = ""
-  if (selected) {
+  Object.entries(styleObject).forEach(([style, value]) => {
-    styles.border = "2px solid #0055ff !important"
-  }
-  Object.entries(styles).forEach(([style, value]) => {
     if (style && value != null) {
       str += `${style}: ${value}; `
     }
   })
+  str += customStyles || ""
+  if (selected) {
+    str += ";border: 2px solid #0055ff !important;"
+  }
   return str
 }
 
@@ -24,6 +25,7 @@ export const styleable = (node, styles = {}) => {
   // Creates event listeners and applies initial styles
   const setupStyles = newStyles => {
     const selected = newStyles.selected
+    const customStyles = newStyles.custom
     const normalStyles = newStyles.normal || {}
     const hoverStyles = {
       ...normalStyles,
@@ -31,11 +33,11 @@ export const styleable = (node, styles = {}) => {
     }
 
     applyNormalStyles = () => {
-      node.style = buildStyleString(normalStyles, selected)
+      node.style = buildStyleString(normalStyles, customStyles, selected)
     }
 
     applyHoverStyles = () => {
-      node.style = buildStyleString(hoverStyles, selected)
+      node.style = buildStyleString(hoverStyles, customStyles, selected)
     }
 
     // Add listeners to toggle hover styles