From 4c25248de8fa15e03debf18c43e568b38981eaf2 Mon Sep 17 00:00:00 2001 From: Dean Date: Tue, 17 May 2022 15:09:13 +0100 Subject: [PATCH 1/9] Builder focus behaviour added to guide users when adding form elements. Refactored the component tests --- packages/bbui/src/Form/Combobox.svelte | 2 + packages/bbui/src/Form/Core/Combobox.svelte | 29 +++-- .../integration/createComponents.spec.js | 105 ++++++++++++++---- packages/builder/cypress/support/commands.js | 4 +- .../src/builderStore/store/frontend.js | 35 ++++++ .../AppPreview/CurrentItemPreview.svelte | 14 +++ .../ComponentSettingsSection.svelte | 9 ++ .../PropertyControls/FormFieldSelect.svelte | 16 ++- .../PropertyControls/PropertyControl.svelte | 2 + .../src/components/app/Placeholder.svelte | 5 +- .../src/components/app/forms/Field.svelte | 41 ++++++- 11 files changed, 216 insertions(+), 46 deletions(-) diff --git a/packages/bbui/src/Form/Combobox.svelte b/packages/bbui/src/Form/Combobox.svelte index 83927b05db..9b7cab1a08 100644 --- a/packages/bbui/src/Form/Combobox.svelte +++ b/packages/bbui/src/Form/Combobox.svelte @@ -13,6 +13,7 @@ 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 => { @@ -35,6 +36,7 @@ {options} {placeholder} {readonly} + {autofocus} {getOptionLabel} {getOptionValue} on:change={onChange} diff --git a/packages/bbui/src/Form/Core/Combobox.svelte b/packages/bbui/src/Form/Core/Combobox.svelte index 6a6423cccf..1c590ea395 100644 --- a/packages/bbui/src/Form/Core/Combobox.svelte +++ b/packages/bbui/src/Form/Core/Combobox.svelte @@ -3,13 +3,14 @@ import "@spectrum-css/popover/dist/index-vars.css" import "@spectrum-css/menu/dist/index-vars.css" import { fly } from "svelte/transition" - import { createEventDispatcher } from "svelte" + import { createEventDispatcher, getContext } 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 @@ -18,22 +19,12 @@ const dispatch = createEventDispatcher() let open = false let focus = false - $: fieldText = getFieldText(value, options, placeholder) + let comboInput - const getFieldText = (value, options, placeholder) => { - // Always use placeholder if no value - if (value == null || value === "") { - return placeholder || "Choose an option or type" - } + let builderFocus = getContext("field_focus") - // Wait for options to load if there is a value but no options - if (!options?.length) { - return "" - } - - // Render the label if the selected option is found, otherwise raw value - const selected = options.find(option => getOptionValue(option) === value) - return selected ? getOptionLabel(selected) : value + $: if (autofocus && comboInput) { + comboInput.focus() } const selectOption = value => { @@ -66,10 +57,16 @@ class:is-focused={open || focus} > (focus = true)} - on:blur={() => (focus = false)} + on:blur={() => { + if (builderFocus) { + builderFocus.clear() + } + focus = false + }} on:change={onType} value={value || ""} placeholder={placeholder || ""} diff --git a/packages/builder/cypress/integration/createComponents.spec.js b/packages/builder/cypress/integration/createComponents.spec.js index e13439d9c6..3525e66fb4 100644 --- a/packages/builder/cypress/integration/createComponents.spec.js +++ b/packages/builder/cypress/integration/createComponents.spec.js @@ -1,9 +1,7 @@ -// TODO for now components are skipped, might not be good to keep doing this - import filterTests from "../support/filterTests" filterTests(['all'], () => { - xcontext("Create Components", () => { + context("Create Components", () => { let headlineId before(() => { @@ -12,12 +10,13 @@ filterTests(['all'], () => { cy.createTable("dog") cy.addColumn("dog", "name", "Text") cy.addColumn("dog", "age", "Number") - cy.addColumn("dog", "type", "Options") + cy.addColumn("dog", "breed", "Options") cy.navigateToFrontend() + cy.wait(1000) //allow the iframe some wiggle room }) it("should add a container", () => { - cy.addComponent(null, "Container").then(componentId => { + cy.addComponent("Layout", "Container").then(componentId => { cy.getComponent(componentId).should("exist") }) }) @@ -31,7 +30,6 @@ filterTests(['all'], () => { it("should change the text of the headline", () => { const text = "Lorem ipsum dolor sit amet." - cy.get("[data-cy=Settings]").click() cy.get("[data-cy=setting-text] input") .type(text) .blur() @@ -39,32 +37,34 @@ filterTests(['all'], () => { }) it("should change the size of the headline", () => { - cy.get("[data-cy=Design]").click() - cy.contains("Typography").click() - cy.get("[data-cy=font-size-prop-control]").click() - cy.contains("60px").click() - cy.getComponent(headlineId).should("have.css", "font-size", "60px") + cy.get("[data-cy=setting-size]").scrollIntoView().click() + cy.get("[data-cy=setting-size]").within(() => { + cy.get(".spectrum-Form-item li.spectrum-Menu-item").contains("3XL").click() + }) + + cy.getComponent(headlineId).within(() => { + cy.get(".spectrum-Heading").should("have.css", "font-size", "60px") + }) }) it("should create a form and reset to match schema", () => { cy.addComponent("Form", "Form").then(() => { - cy.get("[data-cy=Settings]").click() cy.get("[data-cy=setting-dataSource]") - .contains("Choose option") + .contains("Custom") .click() cy.get(".dropdown") .contains("dog") .click() cy.addComponent("Form", "Field Group").then(fieldGroupId => { - cy.get("[data-cy=Settings]").click() - cy.contains("Update Form Fields").click() - cy.get(".modal") - .get("button.primary") + cy.contains("Update form fields").click() + cy.get(".spectrum-Modal") + .get(".confirm-wrap .spectrum-Button") .click() + cy.wait(500) cy.getComponent(fieldGroupId).within(() => { cy.contains("name").should("exist") cy.contains("age").should("exist") - cy.contains("type").should("exist") + cy.contains("breed").should("exist") }) cy.getComponent(fieldGroupId) .find("input") @@ -81,17 +81,78 @@ filterTests(['all'], () => { cy.get("[data-cy=setting-_instanceName] input") .type(componentId) .blur() - cy.get(".ui-nav ul .nav-item.selected .ri-more-line").click({ + cy.get(".nav-items-container .nav-item.selected .actions > div > .icon").click({ force: true, }) - cy.get(".dropdown-container") + cy.get(".spectrum-Popover.is-open li") .contains("Delete") .click() - cy.get(".modal") + cy.get(".spectrum-Modal button") .contains("Delete Component") - .click() + .click({ + force: true, + }) cy.getComponent(componentId).should("not.exist") }) }) + + it("should set focus to the field setting when fields are added to a form", () => { + cy.addComponent("Form", "Form").then(() => { + cy.get("[data-cy=setting-dataSource]") + .contains("Custom") + .click() + cy.get(".dropdown") + .contains("dog") + .click() + + const componentTypeLabels = ["Text Field", "Number Field", "Password Field", + "Options Picker", "Checkbox", "Long Form Field", "Date Picker", "Attachment", + "JSON Field", "Multi-select Picker", "Relationship Picker"] + + const refocusTest = (componentId) => { + let inputClasses + + cy.getComponent(componentId) + .find(".showMe").should("exist").click({ force: true }) + + 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.addComponent("Form", componentLabel).then((componentId) => { + + refocusTest(componentId) + + 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 ) + + }) + }) }) }) diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js index fe355441b9..3baa148ae8 100644 --- a/packages/builder/cypress/support/commands.js +++ b/packages/builder/cypress/support/commands.js @@ -334,9 +334,9 @@ Cypress.Commands.add("getComponent", componentId => { .its("0.contentDocument") .should("exist") .its("body") - .should("not.be.null") + .should("not.be.undefined") .then(cy.wrap) - .find(`[data-id=${componentId}]`) + .find(`[data-id='${componentId}']`) }) Cypress.Commands.add("navigateToFrontend", () => { diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 3ffc890c7d..48e5982eae 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -380,6 +380,21 @@ export const getFrontendStore = () => { const selected = get(selectedComponent) const asset = get(currentAsset) + const formComponents = [ + "stringfield", + "optionsfield", + "numberfield", + "datetimefield", + "booleanfield", + "passwordfield", + "longformfield", + "attachmentfield", + "jsonfield", + "relationshipfield", + "multifieldselect", + "s3upload", + ] + // Create new component const componentInstance = store.actions.components.createInstance( componentName, @@ -417,11 +432,31 @@ export const getFrontendStore = () => { } parentComponent._children.push(componentInstance) + let isFormComponent = false + let componentPrefix = "@budibase/standard-components/" + if (parentComponent._component === componentPrefix + "form") { + const mappedComponentTypes = formComponents.map(cmp => { + return componentPrefix + cmp + }) + if (mappedComponentTypes.indexOf(componentInstance._component) > -1) { + isFormComponent = true + } + } + // Save components and update UI await store.actions.preview.saveSelected() store.update(state => { state.currentView = "component" state.selectedComponentId = componentInstance._id + + if (isFormComponent) { + //A field component added to a form. + state.builderFocus = { + key: "field", + target: state.selectedComponentId, + location: "component_settings", + } + } return state }) diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte index 28bc50d15a..9bab224807 100644 --- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte +++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte @@ -157,6 +157,14 @@ try { if (type === "select-component" && data.id) { store.actions.components.select({ _id: data.id }) + //Clear focus + if(data.id !== $store.builderFocus?.target){ + store.update(state => { + delete state.builderFocus + return state + }) + } + //check if the builder-focus matches? } else if (type === "update-prop") { await store.actions.components.updateProp(data.prop, data.value) } else if (type === "delete-component" && data.id) { @@ -190,6 +198,12 @@ store.actions.components.copy(source, true) await store.actions.components.paste(destination, data.mode) } + } else if(type == "builder-focus") { + store.update(state => ({ + ...state, + builderFocus : + { ...data } + })) } else { console.warn(`Client sent unknown event type: ${type}`) } diff --git a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte index a043cca619..a36ce52379 100644 --- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte @@ -86,6 +86,14 @@ return true } + + const isFocused = setting => { + return ( + componentInstance._id === $store.builderFocus?.target && + setting.key === $store.builderFocus?.key && + "component_settings" === $store.builderFocus?.location + ) + } {#each sections as section, idx (section.name)} @@ -120,6 +128,7 @@ {componentBindings} {componentInstance} {componentDefinition} + autofocus={isFocused(setting)} /> {/if} {/each} diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte index 1f08c56ff5..6fd904bb56 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte @@ -4,12 +4,24 @@ getDatasourceForProvider, getSchemaForDatasource, } from "builderStore/dataBinding" - import { currentAsset } from "builderStore" + import { currentAsset, store } from "builderStore" import { findClosestMatchingComponent } from "builderStore/componentUtils" + import { setContext } from "svelte" + + setContext("field_focus", { + clear: () => { + store.update(state => { + delete state.builderFocus + return state + }) + }, + test: $store.builderFocus?.target, + }) export let componentInstance export let value export let type + export let autofocus = false $: form = findClosestMatchingComponent( $currentAsset?.props, @@ -40,4 +52,4 @@ } - + diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte index 617b1c83ab..026150f957 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte @@ -16,6 +16,7 @@ export let bindings = [] export let componentBindings = [] export let nested = false + export let autofocus = false $: allBindings = getAllBindings(bindings, componentBindings, nested) $: safeValue = getSafeValue(value, props.defaultValue, allBindings) @@ -82,6 +83,7 @@ {key} {type} {...props} + {autofocus} /> diff --git a/packages/client/src/components/app/Placeholder.svelte b/packages/client/src/components/app/Placeholder.svelte index 203071e0b1..31a7819cae 100644 --- a/packages/client/src/components/app/Placeholder.svelte +++ b/packages/client/src/components/app/Placeholder.svelte @@ -9,7 +9,10 @@ {#if $builderStore.inBuilder}
- {text || $component.name || "Placeholder"} + {#if !$$slots.content} + {text || $component.name || "Placeholder"} + {/if} +
{/if} diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte index b267f6caff..aaa2ec11b2 100644 --- a/packages/client/src/components/app/forms/Field.svelte +++ b/packages/client/src/components/app/forms/Field.svelte @@ -3,6 +3,10 @@ import FieldGroupFallback from "./FieldGroupFallback.svelte" import { getContext, onDestroy } from "svelte" + const dispatchEvent = (type, data = {}) => { + window.parent.postMessage({ type, data }) + } + export let label export let field export let fieldState @@ -76,9 +80,28 @@ {#if !formContext} {:else if !fieldState} - + {#if $builderStore.inBuilder} +
+ +
+ Add the Field setting to start using your + component  + { + dispatchEvent("builder-focus", { + location: "component_settings", + key: "field", + target: $component.id, + }) + }} + > + Show me + +
+ +
+ {/if} {:else if schemaType && schemaType !== type && type !== "options"} diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte index 329fb1ce75..7063de8e6c 100644 --- a/packages/client/src/components/app/charts/ApexChart.svelte +++ b/packages/client/src/components/app/charts/ApexChart.svelte @@ -13,7 +13,24 @@
{:else if $builderStore.inBuilder}
- + +
+ Use the settings panel to select a Provider and start + building your chart  + { + builderStore.actions.setFocus({ + location: "component_settings", + key: "dataProvider", + target: $component.id, + }) + }} + > + Show me + +
+
{/if} diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte index af1bb478fe..f1e02d8af6 100644 --- a/packages/client/src/components/app/charts/BarChart.svelte +++ b/packages/client/src/components/app/charts/BarChart.svelte @@ -53,7 +53,6 @@ palette, horizontal ) => { - console.log("new chart") const allCols = [labelColumn, ...(valueColumns || [null])] if ( !dataProvider || diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte index aaa2ec11b2..c9adba3b70 100644 --- a/packages/client/src/components/app/forms/Field.svelte +++ b/packages/client/src/components/app/forms/Field.svelte @@ -3,10 +3,6 @@ import FieldGroupFallback from "./FieldGroupFallback.svelte" import { getContext, onDestroy } from "svelte" - const dispatchEvent = (type, data = {}) => { - window.parent.postMessage({ type, data }) - } - export let label export let field export let fieldState @@ -81,26 +77,24 @@ {:else if !fieldState} {#if $builderStore.inBuilder} -
- -
- Add the Field setting to start using your - component  - { - dispatchEvent("builder-focus", { - location: "component_settings", - key: "field", - target: $component.id, - }) - }} - > - Show me - -
- -
+ +
+ Add the Field setting to start using your + component  + { + builderStore.actions.setFocus({ + location: "component_settings", + key: "field", + target: $component.id, + }) + }} + > + Show me + +
+ {/if} {:else if schemaType && schemaType !== type && type !== "options"} diff --git a/packages/bbui/src/Form/Core/Combobox.svelte b/packages/bbui/src/Form/Core/Combobox.svelte index 183e7486ff..c3f907e64a 100644 --- a/packages/bbui/src/Form/Core/Combobox.svelte +++ b/packages/bbui/src/Form/Core/Combobox.svelte @@ -56,8 +56,12 @@ bind:this={comboInput} {id} type="text" - on:focus={() => (focus = true)} - on:blur={() => (focus = false)} + on:focus={() => { + focus = true + }} + on:blur={() => { + focus = false + }} on:change={onType} value={value || ""} placeholder={placeholder || ""} diff --git a/packages/builder/cypress/integration/createComponents.spec.js b/packages/builder/cypress/integration/createComponents.spec.js index 3525e66fb4..c78d728e7f 100644 --- a/packages/builder/cypress/integration/createComponents.spec.js +++ b/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 ) diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 3b94a2713e..3e7ceb2efc 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/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 mappedSettings = focusSetting.map((setting) => { + const focusSetting = definition.settings.filter(setting => { + return setting.required + }) + const mappedSettings = focusSetting.map(setting => { return { key: setting.key, target: state.selectedComponentId, @@ -434,7 +436,7 @@ export const getFrontendStore = () => { } }) - if(focusSetting.length){ + if (focusSetting.length) { state.builderFocus = mappedSettings } return state diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte index 47ca57bc38..f58b3444ac 100644 --- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte +++ b/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}`) diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte index 5f70a81c2b..7c4818beff 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte +++ b/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 @@
- {displayValue} + + {displayValue} +
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte index dc2fa7ad89..581f0e7fd2 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte +++ b/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} /> diff --git a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte index 8195c20ab7..5aa66305f4 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte +++ b/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" }) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index a41b497630..e33116eba8 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -1034,7 +1034,8 @@ { "type": "icon", "label": "Icon", - "key": "icon" + "key": "icon", + "required": true }, { "type": "select", diff --git a/packages/client/src/components/app/BackgroundImage.svelte b/packages/client/src/components/app/BackgroundImage.svelte index fe6a9834ad..43eede632e 100644 --- a/packages/client/src/components/app/BackgroundImage.svelte +++ b/packages/client/src/components/app/BackgroundImage.svelte @@ -34,11 +34,13 @@ { - builderStore.actions.setFocus({ - location: "component_settings", - key: "url", - target: $component.id, - }) + builderStore.actions.setFocus([ + { + location: "component_settings", + key: "url", + target: $component.id, + }, + ]) }} > Show me diff --git a/packages/client/src/components/app/Icon.svelte b/packages/client/src/components/app/Icon.svelte index 829cc60227..da59fe71f2 100644 --- a/packages/client/src/components/app/Icon.svelte +++ b/packages/client/src/components/app/Icon.svelte @@ -28,14 +28,29 @@ /> {:else if $builderStore.inBuilder}
- + +
+ Add the Icon in the settings menu  + { + builderStore.actions.setFocus([ + { + location: "component_settings", + key: "icon", + target: $component.id, + }, + ]) + }} + > + Show me + +
+
{/if}