From ca88e2abe14ee0f75bfb597ae4726ca2d79c50a4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 11 Jun 2021 09:14:22 +0100
Subject: [PATCH] Allow user styles to override placeholder styles

---
 packages/client/src/components/Component.svelte   |  7 ++-----
 packages/client/src/utils/styleable.js            | 15 +++++++++------
 .../standard-components/src/Placeholder.svelte    |  1 -
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 96dd657f25..bb61a69c6b 100644
--- a/packages/client/src/components/Component.svelte
+++ b/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>
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 2ddc50214e..255ce33785 100644
--- a/packages/client/src/utils/styleable.js
+++ b/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
     }
diff --git a/packages/standard-components/src/Placeholder.svelte b/packages/standard-components/src/Placeholder.svelte
index 32b30bcf9c..421ecf17e4 100644
--- a/packages/standard-components/src/Placeholder.svelte
+++ b/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>