Save highlighted setting key in store and show as highlighted until unmounted or changed

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

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}`)
       }

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}

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;
+    transition: background 130ms ease-out, border-color 130ms ease-out;
-    margin: -6px -10px;
+    border-left: 4px solid transparent;
-    border: 2px solid transparent;
+    margin-left: -4px;
-    border-radius: 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 {