From e34a79e904a194d14bd9a4d386b35c17e8f30466 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 14 Jun 2022 14:05:28 +0100
Subject: [PATCH] Save highlighted setting key in store and show as highlighted
 until unmounted or changed

---
 .../src/builderStore/store/frontend.js        | 10 +++++++++
 .../AppPreview/CurrentItemPreview.svelte      |  2 +-
 .../ComponentSettingsSection.svelte           |  5 ++++-
 .../PropertyControls/PropertyControl.svelte   | 21 ++++++++++++++-----
 4 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 3ffc890c7d..b8fa3a84f6 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -60,6 +60,8 @@ const INITIAL_FRONTEND_STATE = {
   theme: "",
   customTheme: {},
   previewDevice: "desktop",
+  highlightedSettingComponentId: null,
+  highlightedSettingKey: null,
 }
 
 export const getFrontendStore = () => {
@@ -662,6 +664,14 @@ export const getFrontendStore = () => {
         },
       },
     },
+    settings: {
+      highlight: key => {
+        store.update(state => ({
+          ...state,
+          highlightedSettingKey: key,
+        }))
+      },
+    },
   }
 
   return store
diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
index f6aa78701a..7187d9f157 100644
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@@ -191,7 +191,7 @@
           await store.actions.components.paste(destination, data.mode)
         }
       } else if (type === "highlight-setting") {
-        console.log(data.setting)
+        store.actions.settings.highlight(data.setting)
       } else {
         console.warn(`Client sent unknown event type: ${type}`)
       }
diff --git a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
index 29b249fe03..0c542fddd4 100644
--- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
@@ -94,7 +94,7 @@
           label={setting.label}
           key={setting.key}
           value={componentInstance[setting.key] ??
-            componentInstance[setting.key]?.defaultValue}
+            componentDefinition[setting.key]?.defaultValue}
           nested={setting.nested}
           onChange={val => updateProp(setting.key, val)}
           props={{
@@ -107,6 +107,9 @@
           {componentBindings}
           {componentInstance}
           {componentDefinition}
+          highlighted={$store.highlightedSettingKey === setting.key &&
+            (componentInstance[setting.key] == null ||
+              componentInstance[setting.key] === "")}
         />
       {/if}
     {/each}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
index 5ca584d11b..ef68af3fd9 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@@ -4,6 +4,8 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/dataBinding"
+  import { store } from "builderStore"
+  import { onDestroy } from "svelte"
 
   export let label = ""
   export let componentInstance = {}
@@ -16,6 +18,7 @@
   export let bindings = []
   export let componentBindings = []
   export let nested = false
+  export let highlighted = false
 
   $: allBindings = getAllBindings(bindings, componentBindings, nested)
   $: safeValue = getSafeValue(value, props.defaultValue, allBindings)
@@ -60,9 +63,15 @@
       ? defaultValue
       : enriched
   }
+
+  onDestroy(() => {
+    if (highlighted) {
+      store.actions.settings.highlight(null)
+    }
+  })
 </script>
 
-<div class="property-control" data-cy={`setting-${key}`}>
+<div class="property-control" data-cy={`setting-${key}`} class:highlighted>
   {#if type !== "boolean" && label}
     <div class="label">
       <Label>{label}</Label>
@@ -93,12 +102,14 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    padding: 4px 8px;
-    margin: -6px -10px;
-    border: 2px solid transparent;
-    border-radius: 4px;
+    transition: background 130ms ease-out, border-color 130ms ease-out;
+    border-left: 4px solid transparent;
+    margin-left: -4px;
   }
   .property-control.highlighted {
+    background: var(--spectrum-global-color-gray-300);
+    margin: -6px calc(-1 * var(--spacing-xl));
+    padding: 6px var(--spacing-xl) 6px calc(var(--spacing-xl) - 4px);
     border-color: var(--spectrum-global-color-blue-400);
   }
   .label {