Allow user styles to override placeholder styles

packages/client/src/components/Component.svelte

@@ -7,6 +7,7 @@
   import { builderStore } from "../store"
   import { hashString } from "../utils/hash"
   import Manifest from "@budibase/standard-components/manifest.json"
+  import { Placeholder } from "@budibase/standard-components"
 
   export let instance = {}
 
@@ -127,7 +128,7 @@
             <svelte:self instance={child} />
           {/each}
         {:else if empty}
-          <div class="placeholder">{name}</div>
+          <Placeholder />
         {/if}
       </svelte:component>
     {/if}
@@ -138,8 +139,4 @@
   .component {
     display: contents;
   }
-  .placeholder {
-    color: #888;
-    padding: 20px;
-  }
 </style>

packages/client/src/utils/styleable.js

@@ -25,9 +25,17 @@ export const styleable = (node, styles = {}) => {
 
   // Creates event listeners and applies initial styles
   const setupStyles = (newStyles = {}) => {
+    // Use empty state styles as base styles if required, but let them, get
+    // overridden by any user specified styles
+    let baseStyles = {}
+    if (newStyles.empty) {
+      baseStyles.border = "2px dashed var(--grey-5)"
+      baseStyles.padding = "var(--spacing-l)"
+    }
+
     const componentId = newStyles.id
     const customStyles = newStyles.custom || ""
-    const normalStyles = newStyles.normal || {}
+    const normalStyles = { ...baseStyles, ...newStyles.normal }
     const hoverStyles = {
       ...normalStyles,
       ...(newStyles.hover || {}),
@@ -35,11 +43,6 @@ export const styleable = (node, styles = {}) => {
 
     // Applies a style string to a DOM node
     const applyStyles = styleString => {
-      // Apply empty border if required
-      if (newStyles.empty) {
-        styleString += "border: 2px dashed var(--grey-5);"
-      }
-
       node.style = styleString
       node.dataset.componentId = componentId
     }

packages/standard-components/src/Placeholder.svelte

@@ -17,6 +17,5 @@
   div {
     color: var(--grey-6);
     font-size: var(--font-size-s);
-    padding: var(--spacing-l);
   }
 </style>