Expanding the focus behaviour to more component types in the builder. Minor fix for cypress test

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -13,6 +13,10 @@
   export let size = "M"
   export let active = false
   export let fullWidth = false
+  export let autofocus = false
+
+  let focus = false
+  $: focus = autofocus
 
   function longPress(element) {
     if (!longPressable) return
@@ -44,9 +48,16 @@
   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 longPressable}
     <svg
@@ -80,4 +91,10 @@
   .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/Core/Combobox.svelte

@@ -56,8 +56,12 @@
       bind:this={comboInput}
       {id}
       type="text"
-      on:focus={() => (focus = true)}
+      on:focus={() => {
-      on:blur={() => (focus = false)}
+        focus = true
+      }}
+      on:blur={() => {
+        focus = false
+      }}
       on:change={onType}
       value={value || ""}
       placeholder={placeholder || ""}

packages/builder/cypress/integration/createComponents.spec.js

@@ -118,20 +118,14 @@ filterTests(['all'], () => {
           cy.get("[data-cy=setting-field] .spectrum-InputGroup")
           .should("have.class", "is-focused").within(() => {
             cy.get("input").should(($input) => {
-              expect($input).to.have.length(1)
               inputClasses = Cypress.$($input).attr('class')
             })
           })
-
-          cy.focused().then(($focused) => {
-            const focusedClasses = Cypress.$($focused).attr('class')
-            expect(inputClasses).to.equal(focusedClasses)
-          })
         }
 
         const testFieldFocusOnCreate = (componentLabel) => {
           let inputClasses
-
+          cy.log("Adding: " + componentLabel)
           cy.addComponent("Form", componentLabel).then((componentId) => {
            
             refocusTest(componentId)
@@ -139,15 +133,10 @@ filterTests(['all'], () => {
             cy.get("[data-cy=setting-field] .spectrum-InputGroup")
             .should("have.class", "is-focused").within(() => {
               cy.get("input").should(($input) => {
-                expect($input).to.have.length(1)
                 inputClasses = Cypress.$($input).attr('class')
               })
             })
           })
-          cy.focused().then(($focused) => {
-            const focusedClasses = Cypress.$($focused).attr('class')
-            expect(inputClasses).to.equal(focusedClasses)
-          })
         }
 
         componentTypeLabels.forEach( testFieldFocusOnCreate )

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

@@ -425,8 +425,10 @@ export const getFrontendStore = () => {
           state.currentView = "component"
           state.selectedComponentId = componentInstance._id
 
-          const focusSetting = definition.settings.filter((setting) => { return setting.required })
+          const focusSetting = definition.settings.filter(setting => {
-          const mappedSettings = focusSetting.map((setting) => {
+            return setting.required
+          })
+          const mappedSettings = focusSetting.map(setting => {
             return {
               key: setting.key,
               target: state.selectedComponentId,

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

@@ -210,7 +210,7 @@
         store.update(state => ({
           ...state,
           builderFocus : 
-          [{...data}]
+          [...data]
         }))
       } else {
         console.warn(`Client sent unknown event type: ${type}`)

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

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

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

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

packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte

@@ -201,7 +201,6 @@
       class="components-pane"
       use:clickOutside={() => {
         if ($store?.builderFocus) {
-          console.log($store?.builderFocus)
           const otherSettings = $store?.builderFocus?.filter(field => {
             return field.location !== "component_settings"
           })

packages/client/manifest.json

@@ -1034,7 +1034,8 @@
       {
         "type": "icon",
         "label": "Icon",
-        "key": "icon"
+        "key": "icon",
+        "required": true
       },
       {
         "type": "select",

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

@@ -34,11 +34,13 @@
         <span
           class="showMe spectrum-Link"
           on:click={() => {
-            builderStore.actions.setFocus({
+            builderStore.actions.setFocus([
+              {
                 location: "component_settings",
                 key: "url",
                 target: $component.id,
-            })
+              },
+            ])
           }}
         >
           Show me

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

@@ -28,14 +28,29 @@
   />
 {:else if $builderStore.inBuilder}
   <div use:styleable={styles}>
-    <Placeholder />
+    <Placeholder>
+      <div slot="content">
+        Add the <mark>Icon</mark> in the settings menu&nbsp;
+        <span
+          class="showMe spectrum-Link"
+          on:click={() => {
+            builderStore.actions.setFocus([
+              {
+                location: "component_settings",
+                key: "icon",
+                target: $component.id,
+              },
+            ])
+          }}
+        >
+          Show me
+        </span>
+      </div>
+    </Placeholder>
   </div>
 {/if}
 
 <style>
-  div {
-    font-style: italic;
-  }
   @media (hover: hover) {
     .hoverable:hover {
       color: var(--spectrum-alias-icon-color-selected-hover) !important;

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

@@ -21,11 +21,13 @@
         <span
           class="showMe spectrum-Link"
           on:click={() => {
-            builderStore.actions.setFocus({
+            builderStore.actions.setFocus([
+              {
                 location: "component_settings",
                 key: "url",
                 target: $component.id,
-            })
+              },
+            ])
           }}
         >
           Show me

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

@@ -21,11 +21,13 @@
         <span
           class="showMe spectrum-Link"
           on:click={() => {
-            builderStore.actions.setFocus({
+            builderStore.actions.setFocus([
+              {
                 location: "component_settings",
                 key: "value",
                 target: $component.id,
-            })
+              },
+            ])
           }}
         >
           Show me

packages/client/src/components/app/charts/ApexChart.svelte

@@ -15,16 +15,27 @@
   <div use:styleable={$component.styles}>
     <Placeholder>
       <div slot="content">
-        Use the settings panel to select a <mark>Provider</mark> and start
+        Use the settings panel start building your chart&nbsp;
-        building your chart&nbsp;
         <span
           class="showMe spectrum-Link"
           on:click={() => {
-            builderStore.actions.setFocus({
+            builderStore.actions.setFocus([
+              {
                 location: "component_settings",
                 key: "dataProvider",
                 target: $component.id,
-            })
+              },
+              {
+                location: "component_settings",
+                key: "valueColumns",
+                target: $component.id,
+              },
+              {
+                location: "component_settings",
+                key: "dataColumns",
+                target: $component.id,
+              },
+            ])
           }}
         >
           Show me

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

@@ -84,11 +84,13 @@
               <span
                 class="showMe spectrum-Link"
                 on:click={() => {
-                  builderStore.actions.setFocus({
+                  builderStore.actions.setFocus([
+                    {
                       location: "component_settings",
                       key: "field",
                       target: $component.id,
-                  })
+                    },
+                  ])
                 }}
               >
                 Show me

packages/client/src/stores/builder.js

@@ -78,7 +78,7 @@ const createBuilderStore = () => {
     },
     setFocus: data => {
       window.parent.postMessage({ type: "builder-focus", data })
-    }
+    },
   }
   return {
     ...store,