From 717729cd020aac4b6927c338e3d2ebe7f8ccab77 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 23 Feb 2024 11:22:02 +0000
Subject: [PATCH] Highlight setting feedback

---
 .../settings/controls/PropertyControl.svelte  | 19 +++++++++++--------
 .../Component/ComponentSettingsSection.svelte |  3 ---
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index 4cbf29e3ae..0f0276823a 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@@ -20,16 +20,23 @@
   export let bindings = []
   export let componentBindings = []
   export let nested = false
-  export let highlighted
   export let propertyFocus = false
   export let info = null
   export let disableBindings = false
   export let wide
 
+  let highlightType
+
+  $: highlightedProp = $builderStore.highlightedSetting
   $: allBindings = getAllBindings(bindings, componentBindings, nested)
   $: safeValue = getSafeValue(value, defaultValue, allBindings)
   $: replaceBindings = val => readableToRuntimeBinding(allBindings, val)
 
+  $: if (!Array.isArray(value)) {
+    highlightType =
+      highlightedProp?.key === key ? `highlighted-${highlightedProp?.type}` : ""
+  }
+
   const getAllBindings = (bindings, componentBindings, nested) => {
     if (!nested) {
       return bindings
@@ -70,21 +77,17 @@
   }
 
   onDestroy(() => {
-    if (highlighted) {
+    if (highlightedProp) {
       builderStore.highlightSetting(null)
     }
   })
-  let highlight
-  $: if (!Array.isArray(value)) {
-    highlight = highlighted?.type ? `highlighted-${highlighted?.type}` : ""
-  }
 </script>
 
 <div
   id={`${key}-prop-control-wrap`}
-  class={`property-control ${highlight}`}
+  class={`property-control ${highlightType}`}
   class:wide={!label || labelHidden || wide === true}
-  class:highlighted={highlighted && !Array.isArray(value)}
+  class:highlighted={highlightType}
   class:property-focus={propertyFocus}
 >
   {#if label && !labelHidden}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
index b55be0728a..c7f8094084 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
@@ -177,9 +177,6 @@
               defaultValue={setting.defaultValue}
               nested={setting.nested}
               onChange={val => updateSetting(setting, val)}
-              highlighted={$builderStore.highlightedSetting?.key === setting.key
-                ? $builderStore.highlightedSetting
-                : null}
               propertyFocus={$builderStore.propertyFocus === setting.key}
               info={setting.info}
               disableBindings={setting.disableBindings}