From 207eaed27be2a4ba4d723343c164a48c875dee0f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 5 Jan 2021 11:59:19 +0000
Subject: [PATCH] Mark individual styles as changed if they have been changed

---
 .../userInterface/PropertyGroup.svelte        | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index 84422f1ee1..9481df4237 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -10,25 +10,27 @@
   export let onStyleChanged = () => {}
   export let open = false
 
+  const hasPropChanged = prop => {
+    if (prop.initialValue !== undefined) {
+      return style[prop.key] !== prop.initialValue
+    }
+    return style[prop.key] != null && style[prop.key] !== ""
+  }
+
   $: style = componentInstance["_styles"][styleCategory] || {}
-  $: changed = properties.some(
-    prop =>
-      style[prop.key] != null &&
-      style[prop.key] !== "" &&
-      style[prop.key] !== prop.initialValue
-  )
+  $: changed = properties.some(prop => hasPropChanged(prop))
 </script>
 
 <DetailSummary name={`${name}${changed ? ' *' : ''}`} on:open show={open} thin>
   <div>
-    {#each properties as props}
+    {#each properties as prop}
       <PropertyControl
-        label={props.label}
-        control={props.control}
-        key={props.key}
-        value={style[props.key]}
+        label={`${prop.label}${hasPropChanged(prop) ? ' *' : ''}`}
+        control={prop.control}
+        key={prop.key}
+        value={style[prop.key]}
         onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
-        props={{ ...excludeProps(props, ['control', 'label']) }} />
+        props={{ ...excludeProps(prop, ['control', 'label']) }} />
     {/each}
   </div>
 </DetailSummary>