Merge pull request #6309 from Budibase/builder-focus-updates

Builder focus updates

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -1,8 +1,7 @@
 <script>
   import "@spectrum-css/actionbutton/dist/index-vars.css"
-  import { createEventDispatcher, getContext } from "svelte"
+  import { createEventDispatcher } from "svelte"
   const dispatch = createEventDispatcher()
-  const context = getContext("builderFocus")
 
   export let quiet = false
   export let emphasized = false
@@ -14,14 +13,6 @@
   export let size = "M"
   export let active = false
   export let fullWidth = false
-  export let autofocus = false
-
-  let focus = false
-  let actionButton
-  $: focus = autofocus && actionButton !== undefined
-  $: if (focus) {
-    actionButton.focus()
-  }
 
   function longPress(element) {
     if (!longPressable) return
@@ -46,7 +37,6 @@
 
 <button
   data-cy={dataCy}
-  bind:this={actionButton}
   use:longPress
   class:spectrum-ActionButton--quiet={quiet}
   class:spectrum-ActionButton--emphasized={emphasized}
@@ -54,17 +44,9 @@
   class:fullWidth
   class="spectrum-ActionButton spectrum-ActionButton--size{size}"
   class:active
-  class:is-focused={focus}
   {disabled}
   on:longPress
   on:click|preventDefault
-  on:focus={() => {
-    focus = true
-  }}
-  on:blur={() => {
-    focus = false
-    if (context) context.clear()
-  }}
 >
   {#if longPressable}
     <svg
@@ -98,10 +80,4 @@
   .active svg {
     color: var(--spectrum-global-color-blue-600);
   }
-  button.is-focused {
-    border-color: var(
-      --spectrum-textfield-m-border-color-down,
-      var(--spectrum-alias-border-color-mouse-focus)
-    );
-  }
 </style>

packages/bbui/src/Form/Combobox.svelte

@@ -13,7 +13,6 @@
   export let options = []
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
-  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -36,7 +35,6 @@
     {options}
     {placeholder}
     {readonly}
-    {autofocus}
     {getOptionLabel}
     {getOptionValue}
     on:change={onChange}

packages/bbui/src/Form/Core/Combobox.svelte

@@ -3,29 +3,21 @@
   import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
   import { fly } from "svelte/transition"
-  import { createEventDispatcher, getContext } from "svelte"
+  import { createEventDispatcher } from "svelte"
 
   export let value = null
   export let id = null
   export let placeholder = "Choose an option or type"
   export let disabled = false
   export let readonly = false
-  export let autofocus = false
   export let error = null
   export let options = []
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
 
-  const context = getContext("builderFocus")
   const dispatch = createEventDispatcher()
   let open = false
   let focus = false
-  let comboInput
-
-  $: focus = autofocus && comboInput !== undefined
-  $: if (focus) {
-    comboInput.focus()
-  }
 
   const selectOption = value => {
     dispatch("change", value)
@@ -57,16 +49,10 @@
     class:is-focused={open || focus}
   >
     <input
-      bind:this={comboInput}
       {id}
       type="text"
-      on:focus={() => {
+      on:focus={() => (focus = true)}
-        focus = true
+      on:blur={() => (focus = false)}
-      }}
-      on:blur={() => {
-        focus = false
-        context.clear()
-      }}
       on:change={onType}
       value={value || ""}
       placeholder={placeholder || ""}

packages/bbui/src/Form/Core/Multiselect.svelte

@@ -13,7 +13,6 @@
   export let readonly = false
   export let autocomplete = false
   export let sort = false
-  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   $: selectedLookupMap = getSelectedLookupMap(value)
@@ -86,5 +85,4 @@
   {getOptionValue}
   onSelectOption={toggleOption}
   {sort}
-  {autofocus}
 />

packages/bbui/src/Form/Core/Picker.svelte

@@ -3,7 +3,7 @@
   import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
   import { fly } from "svelte/transition"
-  import { createEventDispatcher, getContext } from "svelte"
+  import { createEventDispatcher } from "svelte"
   import clickOutside from "../../Actions/click_outside"
   import Search from "./Search.svelte"
 
@@ -26,18 +26,9 @@
   export let autoWidth = false
   export let autocomplete = false
   export let sort = false
-  export let autofocus = false
 
-  const context = getContext("builderFocus")
   const dispatch = createEventDispatcher()
   let searchTerm = null
-  let focus = false
-  let pickerButton
-
-  $: focus = autofocus && pickerButton !== undefined
-  $: if (focus) {
-    pickerButton.focus()
-  }
 
   $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
   $: filteredOptions = getFilteredOptions(
@@ -89,24 +80,7 @@
     class:is-invalid={!!error}
     class:is-open={open}
     aria-haspopup="listbox"
-    class:is-focused={focus}
-    bind:this={pickerButton}
     on:mousedown={onClick}
-    on:keydown={e => {
-      var keycode = e.key
-      if (focus) {
-        if (keycode === "Enter") {
-          onClick(e)
-        }
-      }
-    }}
-    on:focus={() => {
-      focus = true
-    }}
-    on:blur={() => {
-      focus = false
-      if (context) context.clear()
-    }}
   >
     {#if fieldIcon}
       <span class="icon-Placeholder-Padding">

packages/bbui/src/Form/Core/Select.svelte

@@ -16,7 +16,6 @@
   export let autoWidth = false
   export let autocomplete = false
   export let sort = false
-  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   let open = false
@@ -75,7 +74,6 @@
   {fieldIcon}
   {autocomplete}
   {sort}
-  {autofocus}
   isPlaceholder={value == null || value === ""}
   placeholderOption={placeholder}
   isOptionSelected={option => option === value}

packages/bbui/src/Form/Multiselect.svelte

@@ -14,7 +14,6 @@
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
   export let sort = false
-  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -36,6 +35,5 @@
     {getOptionValue}
     on:change={onChange}
     on:click
-    {autofocus}
   />
 </Field>

packages/bbui/src/Form/Select.svelte

@@ -18,7 +18,6 @@
   export let autoWidth = false
   export let sort = false
   export let tooltip = ""
-  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -45,7 +44,6 @@
     {placeholder}
     {autoWidth}
     {sort}
-    {autofocus}
     {getOptionLabel}
     {getOptionValue}
     {getOptionIcon}

packages/builder/src/builderStore/store/frontend.js

@@ -20,7 +20,6 @@ import analytics, { Events } from "analytics"
 import {
   findComponentType,
   findComponentParent,
-  findComponentPath,
   findClosestMatchingComponent,
   findAllMatchingComponents,
   findComponent,
@@ -61,6 +60,7 @@ const INITIAL_FRONTEND_STATE = {
   theme: "",
   customTheme: {},
   previewDevice: "desktop",
+  highlightedSettingKey: null,
 }
 
 export const getFrontendStore = () => {
@@ -423,21 +423,6 @@ export const getFrontendStore = () => {
         store.update(state => {
           state.currentView = "component"
           state.selectedComponentId = componentInstance._id
-
-          const focusSetting = resolveComponentFocus(
-            asset?.props,
-            componentInstance
-          )
-          if (focusSetting) {
-            state.builderFocus = [
-              {
-                key: focusSetting.key,
-                target: state.selectedComponentId,
-                location: "component_settings",
-              },
-            ]
-          }
-
           return state
         })
 
@@ -678,33 +663,14 @@ export const getFrontendStore = () => {
         },
       },
     },
-  }
+    settings: {
-
+      highlight: key => {
-  // Determine the initial focus for newly created components
+        store.update(state => ({
-  // Take into account the fact that data providers should be
+          ...state,
-  // skipped if they will be inherited from the path
+          highlightedSettingKey: key,
-  const resolveComponentFocus = (asset_props, componentInstance) => {
+        }))
-    const definition = store.actions.components.getDefinition(
+      },
-      componentInstance._component
+    },
-    )
-    let providerIdx = -1
-    let required = definition.settings.filter((s, idx) => {
-      if (s.type === "dataProvider") {
-        providerIdx = idx
-      }
-      return s.required
-    })
-
-    if (providerIdx > -1) {
-      const path = findComponentPath(asset_props, componentInstance._id)
-      const providers = path.filter(c =>
-        c._component?.endsWith("/dataprovider")
-      )
-      if (providers.length) {
-        required = required.splice(providerIdx, 1)
-      }
-    }
-    return required[0]
   }
 
   return store

packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte

@@ -18,7 +18,6 @@
   export let options
   export let allowJS = true
   export let appendBindingsAsOptions = true
-  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   let bindingDrawer
@@ -62,7 +61,6 @@
     on:pick={e => onChange(e.detail, true)}
     {placeholder}
     options={allOptions}
-    {autofocus}
   />
   {#if !disabled}
     <div

packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte

@@ -68,7 +68,7 @@
     customTheme: $store.customTheme,
     previewDevice: $store.previewDevice,
     messagePassing: $store.clientFeatures.messagePassing,
-    isBudibaseEvent: true
+    isBudibaseEvent: true,
   }
   $: json = JSON.stringify(previewData)
 
@@ -148,21 +148,6 @@
     }
   })
 
-  const resolveFocus = (data) => {
-    if($store.builderFocus){
-      const comp = $store.builderFocus.reduce((acc, item)=>{
-      acc = item.target
-        return acc
-      }, "")
-      if(data.id !== comp){
-          store.update(state => {
-          delete state.builderFocus
-          return state
-        })
-      }
-    }
-  }
-
   const handleBudibaseEvent = async event => {
     const { type, data } = event.data || event.detail
     if (!type) {
@@ -172,7 +157,6 @@
     try {
       if (type === "select-component" && data.id) {
         store.actions.components.select({ _id: data.id })
-        resolveFocus(data)
       } else if (type === "update-prop") {
         await store.actions.components.updateProp(data.prop, data.value)
       } else if (type === "delete-component" && data.id) {
@@ -206,12 +190,18 @@
           store.actions.components.copy(source, true)
           await store.actions.components.paste(destination, data.mode)
         }
-      } else if(type == "builder-focus")  {
+      } else if (type === "highlight-setting") {
-        store.update(state => ({
+        store.actions.settings.highlight(data.setting)
-          ...state,
+
-          builderFocus : 
+        // Also scroll setting into view
-          [...data]
+        const selector = `[data-cy="${data.setting}-prop-control"`
-        }))
+        const element = document.querySelector(selector)?.parentElement
+        if (element) {
+          element.scrollIntoView({
+            behavior: "smooth",
+            block: "center",
+          })
+        }
       } else {
         console.warn(`Client sent unknown event type: ${type}`)
       }

packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte

@@ -73,15 +73,6 @@
 
     return true
   }
-
-  const isFocused = setting => {
-    if (!$store.builderFocus) {
-      return false
-    }
-    return (
-      setting.required === true && $store.builderFocus[0].key === setting.key
-    )
-  }
 </script>
 
 {#each sections as section, idx (section.name)}
@@ -102,10 +93,11 @@
           control={getComponentForSettingType(setting.type)}
           label={setting.label}
           key={setting.key}
-          value={componentInstance[setting.key] ??
+          value={componentInstance[setting.key]}
-            componentInstance[setting.key]?.defaultValue}
+          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,
@@ -116,7 +108,6 @@
           {componentBindings}
           {componentInstance}
           {componentDefinition}
-          autofocus={isFocused(setting)}
         />
       {/if}
     {/each}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte

@@ -6,7 +6,6 @@
   import { createEventDispatcher, onMount } from "svelte"
 
   export let value
-  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   const getValue = component => `{{ literal ${makePropSafe(component._id)} }}`
@@ -25,7 +24,6 @@
 
 <Select
   {value}
-  {autofocus}
   placeholder={null}
   on:change
   options={providers}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte

@@ -25,7 +25,6 @@
   export let otherSources
   export let showAllQueries
   export let bindings = []
-  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   const arrayTypes = ["attachment", "array"]
@@ -159,7 +158,6 @@
     value={text}
     options={[text]}
     on:click={dropdownRight.show}
-    {autofocus}
   />
   {#if value?.type === "query"}
     <i class="ri-settings-5-line" on:click={openQueryParamsDrawer} />

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte

@@ -10,7 +10,6 @@
   export let componentInstance = {}
   export let value = ""
   export let placeholder
-  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
@@ -38,10 +37,4 @@
   }
 </script>
 
-<Select
+<Select {placeholder} value={boundValue} on:change={onChange} {options} />
-  {placeholder}
-  value={boundValue}
-  on:change={onChange}
-  {options}
-  {autofocus}
-/>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte

@@ -10,7 +10,6 @@
   export let componentInstance
   export let value
   export let type
-  export let autofocus = false
 
   $: form = findClosestMatchingComponent(
     $currentAsset?.props,
@@ -41,4 +40,4 @@
   }
 </script>
 
-<Combobox on:change {value} {options} {autofocus} />
+<Combobox on:change {value} {options} />

packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte

@@ -15,7 +15,6 @@
 
   export let value = ""
   export let maxIconsPerPage = 30
-  export let autofocus = false
 
   let searchTerm = ""
   let selectedLetter = "A"
@@ -118,7 +117,7 @@
 </script>
 
 <div bind:this={buttonAnchor}>
-  <ActionButton on:click={dropdown.show} {autofocus}>
+  <ActionButton on:click={dropdown.show}>
     {displayValue}
   </ActionButton>
 </div>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte

@@ -10,7 +10,6 @@
   export let componentInstance = {}
   export let value = ""
   export let placeholder
-  export let autofocus
 
   const dispatch = createEventDispatcher()
   $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
@@ -32,10 +31,4 @@
   }
 </script>
 
-<Multiselect
+<Multiselect {placeholder} value={boundValue} on:change={setValue} {options} />
-  {placeholder}
-  value={boundValue}
-  on:change={setValue}
-  {options}
-  {autofocus}
-/>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte

@@ -4,8 +4,8 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/dataBinding"
-  import { setContext } from "svelte"
   import { store } from "builderStore"
+  import { onDestroy } from "svelte"
 
   export let label = ""
   export let componentInstance = {}
@@ -13,15 +13,17 @@
   export let key = ""
   export let type = ""
   export let value = null
+  export let defaultValue = null
   export let props = {}
   export let onChange = () => {}
   export let bindings = []
   export let componentBindings = []
   export let nested = false
-  export let autofocus = 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)
 
@@ -64,30 +66,18 @@
       : enriched
   }
 
-  setContext("builderFocus", {
+  onDestroy(() => {
-    clear: () => {
+    if (highlighted) {
-      if (!$store?.builderFocus) {
+      store.actions.settings.highlight(null)
-        return
+    }
-      }
-      store.update(state => {
-        const updatedFocus = $store?.builderFocus?.filter(focus => {
-          return (
-            focus.location === "component_settings" &&
-            focus.target !== componentInstance._id
-          )
-        })
-        if (updatedFocus?.length > 0) {
-          state.builderFocus = updatedFocus
-        } else {
-          delete state.builderFocus
-        }
-        return state
-      })
-    },
   })
 </script>
 
-<div class="property-control" data-cy={`setting-${key}`}>
+<div
+  class="property-control"
+  class:highlighted={highlighted && nullishValue}
+  data-cy={`setting-${key}`}
+>
   {#if type !== "boolean" && label}
     <div class="label">
       <Label>{label}</Label>
@@ -107,7 +97,6 @@
       {key}
       {type}
       {...props}
-      {autofocus}
     />
   </div>
 </div>
@@ -119,6 +108,14 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
+    transition: background 130ms ease-out, border-color 130ms ease-out;
+    border-left: 4px solid transparent;
+    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);
+    border-color: var(--spectrum-global-color-blue-400);
   }
   .label {
     padding-bottom: var(--spectrum-global-dimension-size-65);

packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte

@@ -4,7 +4,6 @@
 
   export let value
   export let bindings
-  export let autofocus
 
   $: urlOptions = $store.screens
     .map(screen => screen.routing?.route)
@@ -17,5 +16,4 @@
   on:change
   options={urlOptions}
   appendBindingsAsOptions={false}
-  {autofocus}
 />

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}

packages/client/manifest.json

@@ -274,7 +274,8 @@
       {
         "type": "text",
         "label": "Text",
-        "key": "text"
+        "key": "text",
+        "defaultValue": "New Button"
       },
       {
         "type": "select",
@@ -1154,15 +1155,13 @@
       {
         "type": "text",
         "label": "Text",
-        "key": "text",
+        "key": "text"
-        "required": true
       },
       {
         "type": "url",
         "label": "URL",
         "key": "url",
-        "placeholder": "/screen",
+        "placeholder": "/screen"
-        "required": true
       },
       {
         "type": "boolean",

packages/client/src/components/Component.svelte

@@ -23,6 +23,7 @@
   import Manifest from "manifest.json"
   import { getActiveConditions, reduceConditionActions } from "utils/conditions"
   import Placeholder from "components/app/Placeholder.svelte"
+  import ComponentPlaceholder from "components/app/ComponentPlaceholder.svelte"
 
   export let instance = {}
   export let isLayout = false
@@ -81,6 +82,7 @@
   let definition
   let settingsDefinition
   let settingsDefinitionMap
+  let missingRequiredSettings = false
 
   // Set up initial state for each new component instance
   $: initialise(instance)
@@ -99,9 +101,10 @@
 
   // Derive definition properties which can all be optional, so need to be
   // coerced to booleans
-  $: editable = !!definition?.editable
   $: hasChildren = !!definition?.hasChildren
   $: showEmptyState = definition?.showEmptyState !== false
+  $: hasMissingRequiredSettings = missingRequiredSettings?.length > 0
+  $: editable = !!definition?.editable && !hasMissingRequiredSettings
 
   // Interactive components can be selected, dragged and highlighted inside
   // the builder preview
@@ -155,6 +158,7 @@
     name,
     editing,
     type: instance._component,
+    missingRequiredSettings,
   })
 
   const initialise = instance => {
@@ -201,6 +205,27 @@
     staticSettings = instanceSettings.staticSettings
     dynamicSettings = instanceSettings.dynamicSettings
 
+    // Check if we have any missing required settings
+    missingRequiredSettings = settingsDefinition.filter(setting => {
+      let empty = instance[setting.key] == null || instance[setting.key] === ""
+      let missing = setting.required && empty
+
+      // Check if this setting depends on another, as it may not be required
+      if (setting.dependsOn) {
+        const dependsOnKey = setting.dependsOn.setting || setting.dependsOn
+        const dependsOnValue = setting.dependsOn.value
+        const realDependentValue = instance[dependsOnKey]
+        if (dependsOnValue == null && realDependentValue == null) {
+          return false
+        }
+        if (dependsOnValue !== realDependentValue) {
+          return false
+        }
+      }
+
+      return missing
+    })
+
     // Force an initial enrichment of the new settings
     enrichComponentSettings(get(context), settingsDefinitionMap, {
       force: true,
@@ -414,17 +439,21 @@
     data-id={id}
     data-name={name}
   >
-    <svelte:component this={constructor} bind:this={ref} {...initialSettings}>
+    {#if hasMissingRequiredSettings}
-      {#if children.length}
+      <ComponentPlaceholder />
-        {#each children as child (child._id)}
+    {:else}
-          <svelte:self instance={child} />
+      <svelte:component this={constructor} bind:this={ref} {...initialSettings}>
-        {/each}
+        {#if children.length}
-      {:else if emptyState}
+          {#each children as child (child._id)}
-        <Placeholder />
+            <svelte:self instance={child} />
-      {:else if isBlock}
+          {/each}
-        <slot />
+        {:else if emptyState}
-      {/if}
+          <Placeholder />
-    </svelte:component>
+        {:else if isBlock}
+          <slot />
+        {/if}
+      </svelte:component>
+    {/if}
   </div>
 {/if}
 

packages/client/src/components/app/ComponentPlaceholder.svelte

@@ -0,0 +1,44 @@
+<script>
+  import { getContext } from "svelte"
+  import { builderStore } from "stores"
+
+  const { styleable } = getContext("sdk")
+  const component = getContext("component")
+
+  $: requiredSetting = $component.missingRequiredSettings?.[0]
+</script>
+
+{#if $builderStore.inBuilder && requiredSetting}
+  <div use:styleable={$component.styles}>
+    <div class="component-placeholder">
+      <span>
+        Add the <mark>{requiredSetting.label}</mark> setting to start using your
+        component -
+      </span>
+      <span
+        class="spectrum-Link"
+        on:click={() => {
+          builderStore.actions.highlightSetting(requiredSetting.key)
+        }}
+      >
+        Show me
+      </span>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .component-placeholder {
+    color: var(--spectrum-global-color-gray-600);
+    font-size: var(--font-size-s);
+    padding: var(--spacing-xs);
+  }
+  .component-placeholder mark {
+    background-color: var(--spectrum-global-color-gray-400);
+    padding: 0 2px;
+    border-radius: 2px;
+  }
+  .component-placeholder .spectrum-Link {
+    cursor: pointer;
+  }
+</style>

packages/client/src/components/app/Link.svelte

@@ -1,6 +1,5 @@
 <script>
   import { getContext } from "svelte"
-  import Placeholder from "./Placeholder.svelte"
 
   const { linkable, styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
@@ -80,11 +79,7 @@
     {componentText}
   </div>
 {:else if $builderStore.inBuilder || componentText}
-  {#if !url && !text}
+  {#if externalLink || openInNewTab}
-    <div use:styleable={{ ...$component.styles, empty: true }}>
-      <Placeholder />
-    </div>
-  {:else if externalLink || openInNewTab}
     <a
       {target}
       href={sanitizedUrl}

packages/client/src/components/app/Placeholder.svelte

@@ -1,67 +1,15 @@
 <script>
   import { getContext } from "svelte"
-  import Manifest from "manifest.json"
-  import { builderStore } from "stores"
 
-  const { componentStore } = getContext("sdk")
+  const { builderStore } = getContext("sdk")
   const component = getContext("component")
 
   export let text
-
-  $: componentInstance = componentStore.actions.getComponentById($component.id)
-
-  const getComponentKey = compId => {
-    if (!compId) {
-      return
-    }
-    const prefix = "@budibase/standard-components/"
-    let componentKey = compId.replace(prefix, "")
-    return componentKey
-  }
-
-  const emptyFields = (definition, options) => {
-    if (!options) {
-      return []
-    }
-    return definition?.settings
-      ? definition.settings.filter(setting => {
-          return (
-            setting.required &&
-            (!options[setting.key] || options[setting.key] == "")
-          )
-        })
-      : []
-  }
-  const definition = Manifest[getComponentKey($component.type)]
-  $: focus_setting = emptyFields(definition, componentInstance)[0]
 </script>
 
 {#if $builderStore.inBuilder}
-  <div class="placeholder_wrap">
+  <div>
-    {#if componentInstance && focus_setting}
+    {text || $component.name || "Placeholder"}
-      <div>
-        <span>
-          Add the <mark>{focus_setting?.label}</mark> setting to start using your
-          component &nbsp;
-        </span>
-        <span
-          class="showMe spectrum-Link"
-          on:click={() => {
-            builderStore.actions.setFocus([
-              {
-                location: "component_settings",
-                key: focus_setting.key,
-                target: $component.id,
-              },
-            ])
-          }}
-        >
-          Show me
-        </span>
-      </div>
-    {:else}
-      {text || $component.name || "Placeholder"}
-    {/if}
   </div>
 {/if}
 
@@ -69,18 +17,5 @@
   div {
     color: var(--spectrum-global-color-gray-600);
     font-size: var(--font-size-s);
-    padding: var(--spacing-xs);
-  }
-  :global(div.placeholder_wrap mark) {
-    background-color: var(--spectrum-global-color-gray-400);
-    padding: 0px 2px;
-    border-radius: 2px;
-  }
-  :global(div.placeholder_wrap .showMe) {
-    cursor: pointer;
-  }
-  :global(div.placeholder_wrap .showMe:hover) {
-    text-decoration: underline;
-    cursor: pointer;
   }
 </style>

packages/client/src/components/app/forms/Field.svelte

@@ -76,9 +76,7 @@
       {#if !formContext}
         <Placeholder text="Form components need to be wrapped in a form" />
       {:else if !fieldState}
-        {#if $builderStore.inBuilder}
+        <Placeholder />
-          <Placeholder />
-        {/if}
       {:else if schemaType && schemaType !== type && type !== "options"}
         <Placeholder
           text="This Field setting is the wrong data type for this component"

packages/client/src/stores/builder.js

@@ -68,8 +68,8 @@ const createBuilderStore = () => {
       }
       store.update(state => ({ ...state, editMode: enabled }))
     },
-    setFocus: data => {
+    highlightSetting: setting => {
-      window.parent.postMessage({ type: "builder-focus", data })
+      dispatchEvent("highlight-setting", { setting })
     },
   }
   return {