diff --git a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte index 0c542fddd4..14e4f74bcb 100644 --- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte @@ -93,10 +93,11 @@ control={getComponentForSettingType(setting.type)} label={setting.label} key={setting.key} - value={componentInstance[setting.key] ?? - componentDefinition[setting.key]?.defaultValue} + value={componentInstance[setting.key]} + defaultValue={setting.defaultValue} nested={setting.nested} onChange={val => updateProp(setting.key, val)} + highlighted={$store.highlightedSettingKey === setting.key} props={{ options: setting.options || [], placeholder: setting.placeholder || null, @@ -107,9 +108,6 @@ {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 ef68af3fd9..3927e0b3a5 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte @@ -13,6 +13,7 @@ export let key = "" export let type = "" export let value = null + export let defaultValue = null export let props = {} export let onChange = () => {} export let bindings = [] @@ -20,8 +21,9 @@ export let nested = false export let highlighted = false + $: nullishValue = value == null || value === "" $: allBindings = getAllBindings(bindings, componentBindings, nested) - $: safeValue = getSafeValue(value, props.defaultValue, allBindings) + $: safeValue = getSafeValue(value, defaultValue, allBindings) $: tempValue = safeValue $: replaceBindings = val => readableToRuntimeBinding(allBindings, val) @@ -71,7 +73,11 @@ }) -
+
{#if type !== "boolean" && label}
@@ -104,12 +110,11 @@ align-items: stretch; transition: background 130ms ease-out, border-color 130ms ease-out; border-left: 4px solid transparent; - margin-left: -4px; + margin: -6px calc(-1 * var(--spacing-xl)); + padding: 6px var(--spacing-xl) 6px calc(var(--spacing-xl) - 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 { diff --git a/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte index df3ba7f3d3..e0b46d8ed7 100644 --- a/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte @@ -115,7 +115,6 @@ control={def.control} label={def.label} key={def.key} - error="asdasds" value={deepGet($currentAsset, def.key)} onChange={val => setAssetProps(def.key, val, def.parser, def.validate)} {bindings} diff --git a/packages/client/src/components/app/ComponentPlaceholder.svelte b/packages/client/src/components/app/ComponentPlaceholder.svelte index 486a72d443..13cc217ef0 100644 --- a/packages/client/src/components/app/ComponentPlaceholder.svelte +++ b/packages/client/src/components/app/ComponentPlaceholder.svelte @@ -13,7 +13,7 @@
Add the {requiredSetting.label} setting to start using your - component   + component -