Builder focus behaviour added to guide users when adding form elements. Refactored the component tests
This commit is contained in:
parent
8862eef4d5
commit
4c25248de8
|
@ -13,6 +13,7 @@
|
||||||
export let options = []
|
export let options = []
|
||||||
export let getOptionLabel = option => extractProperty(option, "label")
|
export let getOptionLabel = option => extractProperty(option, "label")
|
||||||
export let getOptionValue = option => extractProperty(option, "value")
|
export let getOptionValue = option => extractProperty(option, "value")
|
||||||
|
export let autofocus = false
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
const onChange = e => {
|
const onChange = e => {
|
||||||
|
@ -35,6 +36,7 @@
|
||||||
{options}
|
{options}
|
||||||
{placeholder}
|
{placeholder}
|
||||||
{readonly}
|
{readonly}
|
||||||
|
{autofocus}
|
||||||
{getOptionLabel}
|
{getOptionLabel}
|
||||||
{getOptionValue}
|
{getOptionValue}
|
||||||
on:change={onChange}
|
on:change={onChange}
|
||||||
|
|
|
@ -3,13 +3,14 @@
|
||||||
import "@spectrum-css/popover/dist/index-vars.css"
|
import "@spectrum-css/popover/dist/index-vars.css"
|
||||||
import "@spectrum-css/menu/dist/index-vars.css"
|
import "@spectrum-css/menu/dist/index-vars.css"
|
||||||
import { fly } from "svelte/transition"
|
import { fly } from "svelte/transition"
|
||||||
import { createEventDispatcher } from "svelte"
|
import { createEventDispatcher, getContext } from "svelte"
|
||||||
|
|
||||||
export let value = null
|
export let value = null
|
||||||
export let id = null
|
export let id = null
|
||||||
export let placeholder = "Choose an option or type"
|
export let placeholder = "Choose an option or type"
|
||||||
export let disabled = false
|
export let disabled = false
|
||||||
export let readonly = false
|
export let readonly = false
|
||||||
|
export let autofocus = false
|
||||||
export let error = null
|
export let error = null
|
||||||
export let options = []
|
export let options = []
|
||||||
export let getOptionLabel = option => option
|
export let getOptionLabel = option => option
|
||||||
|
@ -18,22 +19,12 @@
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
let open = false
|
let open = false
|
||||||
let focus = false
|
let focus = false
|
||||||
$: fieldText = getFieldText(value, options, placeholder)
|
let comboInput
|
||||||
|
|
||||||
const getFieldText = (value, options, placeholder) => {
|
let builderFocus = getContext("field_focus")
|
||||||
// Always use placeholder if no value
|
|
||||||
if (value == null || value === "") {
|
|
||||||
return placeholder || "Choose an option or type"
|
|
||||||
}
|
|
||||||
|
|
||||||
// Wait for options to load if there is a value but no options
|
$: if (autofocus && comboInput) {
|
||||||
if (!options?.length) {
|
comboInput.focus()
|
||||||
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
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const selectOption = value => {
|
const selectOption = value => {
|
||||||
|
@ -66,10 +57,16 @@
|
||||||
class:is-focused={open || focus}
|
class:is-focused={open || focus}
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
|
bind:this={comboInput}
|
||||||
{id}
|
{id}
|
||||||
type="text"
|
type="text"
|
||||||
on:focus={() => (focus = true)}
|
on:focus={() => (focus = true)}
|
||||||
on:blur={() => (focus = false)}
|
on:blur={() => {
|
||||||
|
if (builderFocus) {
|
||||||
|
builderFocus.clear()
|
||||||
|
}
|
||||||
|
focus = false
|
||||||
|
}}
|
||||||
on:change={onType}
|
on:change={onType}
|
||||||
value={value || ""}
|
value={value || ""}
|
||||||
placeholder={placeholder || ""}
|
placeholder={placeholder || ""}
|
||||||
|
|
|
@ -1,9 +1,7 @@
|
||||||
// TODO for now components are skipped, might not be good to keep doing this
|
|
||||||
|
|
||||||
import filterTests from "../support/filterTests"
|
import filterTests from "../support/filterTests"
|
||||||
|
|
||||||
filterTests(['all'], () => {
|
filterTests(['all'], () => {
|
||||||
xcontext("Create Components", () => {
|
context("Create Components", () => {
|
||||||
let headlineId
|
let headlineId
|
||||||
|
|
||||||
before(() => {
|
before(() => {
|
||||||
|
@ -12,12 +10,13 @@ filterTests(['all'], () => {
|
||||||
cy.createTable("dog")
|
cy.createTable("dog")
|
||||||
cy.addColumn("dog", "name", "Text")
|
cy.addColumn("dog", "name", "Text")
|
||||||
cy.addColumn("dog", "age", "Number")
|
cy.addColumn("dog", "age", "Number")
|
||||||
cy.addColumn("dog", "type", "Options")
|
cy.addColumn("dog", "breed", "Options")
|
||||||
cy.navigateToFrontend()
|
cy.navigateToFrontend()
|
||||||
|
cy.wait(1000) //allow the iframe some wiggle room
|
||||||
})
|
})
|
||||||
|
|
||||||
it("should add a container", () => {
|
it("should add a container", () => {
|
||||||
cy.addComponent(null, "Container").then(componentId => {
|
cy.addComponent("Layout", "Container").then(componentId => {
|
||||||
cy.getComponent(componentId).should("exist")
|
cy.getComponent(componentId).should("exist")
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
@ -31,7 +30,6 @@ filterTests(['all'], () => {
|
||||||
|
|
||||||
it("should change the text of the headline", () => {
|
it("should change the text of the headline", () => {
|
||||||
const text = "Lorem ipsum dolor sit amet."
|
const text = "Lorem ipsum dolor sit amet."
|
||||||
cy.get("[data-cy=Settings]").click()
|
|
||||||
cy.get("[data-cy=setting-text] input")
|
cy.get("[data-cy=setting-text] input")
|
||||||
.type(text)
|
.type(text)
|
||||||
.blur()
|
.blur()
|
||||||
|
@ -39,32 +37,34 @@ filterTests(['all'], () => {
|
||||||
})
|
})
|
||||||
|
|
||||||
it("should change the size of the headline", () => {
|
it("should change the size of the headline", () => {
|
||||||
cy.get("[data-cy=Design]").click()
|
cy.get("[data-cy=setting-size]").scrollIntoView().click()
|
||||||
cy.contains("Typography").click()
|
cy.get("[data-cy=setting-size]").within(() => {
|
||||||
cy.get("[data-cy=font-size-prop-control]").click()
|
cy.get(".spectrum-Form-item li.spectrum-Menu-item").contains("3XL").click()
|
||||||
cy.contains("60px").click()
|
})
|
||||||
cy.getComponent(headlineId).should("have.css", "font-size", "60px")
|
|
||||||
|
cy.getComponent(headlineId).within(() => {
|
||||||
|
cy.get(".spectrum-Heading").should("have.css", "font-size", "60px")
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
it("should create a form and reset to match schema", () => {
|
it("should create a form and reset to match schema", () => {
|
||||||
cy.addComponent("Form", "Form").then(() => {
|
cy.addComponent("Form", "Form").then(() => {
|
||||||
cy.get("[data-cy=Settings]").click()
|
|
||||||
cy.get("[data-cy=setting-dataSource]")
|
cy.get("[data-cy=setting-dataSource]")
|
||||||
.contains("Choose option")
|
.contains("Custom")
|
||||||
.click()
|
.click()
|
||||||
cy.get(".dropdown")
|
cy.get(".dropdown")
|
||||||
.contains("dog")
|
.contains("dog")
|
||||||
.click()
|
.click()
|
||||||
cy.addComponent("Form", "Field Group").then(fieldGroupId => {
|
cy.addComponent("Form", "Field Group").then(fieldGroupId => {
|
||||||
cy.get("[data-cy=Settings]").click()
|
cy.contains("Update form fields").click()
|
||||||
cy.contains("Update Form Fields").click()
|
cy.get(".spectrum-Modal")
|
||||||
cy.get(".modal")
|
.get(".confirm-wrap .spectrum-Button")
|
||||||
.get("button.primary")
|
|
||||||
.click()
|
.click()
|
||||||
|
cy.wait(500)
|
||||||
cy.getComponent(fieldGroupId).within(() => {
|
cy.getComponent(fieldGroupId).within(() => {
|
||||||
cy.contains("name").should("exist")
|
cy.contains("name").should("exist")
|
||||||
cy.contains("age").should("exist")
|
cy.contains("age").should("exist")
|
||||||
cy.contains("type").should("exist")
|
cy.contains("breed").should("exist")
|
||||||
})
|
})
|
||||||
cy.getComponent(fieldGroupId)
|
cy.getComponent(fieldGroupId)
|
||||||
.find("input")
|
.find("input")
|
||||||
|
@ -81,17 +81,78 @@ filterTests(['all'], () => {
|
||||||
cy.get("[data-cy=setting-_instanceName] input")
|
cy.get("[data-cy=setting-_instanceName] input")
|
||||||
.type(componentId)
|
.type(componentId)
|
||||||
.blur()
|
.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,
|
force: true,
|
||||||
})
|
})
|
||||||
cy.get(".dropdown-container")
|
cy.get(".spectrum-Popover.is-open li")
|
||||||
.contains("Delete")
|
.contains("Delete")
|
||||||
.click()
|
.click()
|
||||||
cy.get(".modal")
|
cy.get(".spectrum-Modal button")
|
||||||
.contains("Delete Component")
|
.contains("Delete Component")
|
||||||
.click()
|
.click({
|
||||||
|
force: true,
|
||||||
|
})
|
||||||
cy.getComponent(componentId).should("not.exist")
|
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 )
|
||||||
|
|
||||||
|
})
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
|
@ -334,9 +334,9 @@ Cypress.Commands.add("getComponent", componentId => {
|
||||||
.its("0.contentDocument")
|
.its("0.contentDocument")
|
||||||
.should("exist")
|
.should("exist")
|
||||||
.its("body")
|
.its("body")
|
||||||
.should("not.be.null")
|
.should("not.be.undefined")
|
||||||
.then(cy.wrap)
|
.then(cy.wrap)
|
||||||
.find(`[data-id=${componentId}]`)
|
.find(`[data-id='${componentId}']`)
|
||||||
})
|
})
|
||||||
|
|
||||||
Cypress.Commands.add("navigateToFrontend", () => {
|
Cypress.Commands.add("navigateToFrontend", () => {
|
||||||
|
|
|
@ -380,6 +380,21 @@ export const getFrontendStore = () => {
|
||||||
const selected = get(selectedComponent)
|
const selected = get(selectedComponent)
|
||||||
const asset = get(currentAsset)
|
const asset = get(currentAsset)
|
||||||
|
|
||||||
|
const formComponents = [
|
||||||
|
"stringfield",
|
||||||
|
"optionsfield",
|
||||||
|
"numberfield",
|
||||||
|
"datetimefield",
|
||||||
|
"booleanfield",
|
||||||
|
"passwordfield",
|
||||||
|
"longformfield",
|
||||||
|
"attachmentfield",
|
||||||
|
"jsonfield",
|
||||||
|
"relationshipfield",
|
||||||
|
"multifieldselect",
|
||||||
|
"s3upload",
|
||||||
|
]
|
||||||
|
|
||||||
// Create new component
|
// Create new component
|
||||||
const componentInstance = store.actions.components.createInstance(
|
const componentInstance = store.actions.components.createInstance(
|
||||||
componentName,
|
componentName,
|
||||||
|
@ -417,11 +432,31 @@ export const getFrontendStore = () => {
|
||||||
}
|
}
|
||||||
parentComponent._children.push(componentInstance)
|
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
|
// Save components and update UI
|
||||||
await store.actions.preview.saveSelected()
|
await store.actions.preview.saveSelected()
|
||||||
store.update(state => {
|
store.update(state => {
|
||||||
state.currentView = "component"
|
state.currentView = "component"
|
||||||
state.selectedComponentId = componentInstance._id
|
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
|
return state
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
@ -157,6 +157,14 @@
|
||||||
try {
|
try {
|
||||||
if (type === "select-component" && data.id) {
|
if (type === "select-component" && data.id) {
|
||||||
store.actions.components.select({ _id: 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") {
|
} else if (type === "update-prop") {
|
||||||
await store.actions.components.updateProp(data.prop, data.value)
|
await store.actions.components.updateProp(data.prop, data.value)
|
||||||
} else if (type === "delete-component" && data.id) {
|
} else if (type === "delete-component" && data.id) {
|
||||||
|
@ -190,6 +198,12 @@
|
||||||
store.actions.components.copy(source, true)
|
store.actions.components.copy(source, true)
|
||||||
await store.actions.components.paste(destination, data.mode)
|
await store.actions.components.paste(destination, data.mode)
|
||||||
}
|
}
|
||||||
|
} else if(type == "builder-focus") {
|
||||||
|
store.update(state => ({
|
||||||
|
...state,
|
||||||
|
builderFocus :
|
||||||
|
{ ...data }
|
||||||
|
}))
|
||||||
} else {
|
} else {
|
||||||
console.warn(`Client sent unknown event type: ${type}`)
|
console.warn(`Client sent unknown event type: ${type}`)
|
||||||
}
|
}
|
||||||
|
|
|
@ -86,6 +86,14 @@
|
||||||
|
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const isFocused = setting => {
|
||||||
|
return (
|
||||||
|
componentInstance._id === $store.builderFocus?.target &&
|
||||||
|
setting.key === $store.builderFocus?.key &&
|
||||||
|
"component_settings" === $store.builderFocus?.location
|
||||||
|
)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#each sections as section, idx (section.name)}
|
{#each sections as section, idx (section.name)}
|
||||||
|
@ -120,6 +128,7 @@
|
||||||
{componentBindings}
|
{componentBindings}
|
||||||
{componentInstance}
|
{componentInstance}
|
||||||
{componentDefinition}
|
{componentDefinition}
|
||||||
|
autofocus={isFocused(setting)}
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
|
|
|
@ -4,12 +4,24 @@
|
||||||
getDatasourceForProvider,
|
getDatasourceForProvider,
|
||||||
getSchemaForDatasource,
|
getSchemaForDatasource,
|
||||||
} from "builderStore/dataBinding"
|
} from "builderStore/dataBinding"
|
||||||
import { currentAsset } from "builderStore"
|
import { currentAsset, store } from "builderStore"
|
||||||
import { findClosestMatchingComponent } from "builderStore/componentUtils"
|
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 componentInstance
|
||||||
export let value
|
export let value
|
||||||
export let type
|
export let type
|
||||||
|
export let autofocus = false
|
||||||
|
|
||||||
$: form = findClosestMatchingComponent(
|
$: form = findClosestMatchingComponent(
|
||||||
$currentAsset?.props,
|
$currentAsset?.props,
|
||||||
|
@ -40,4 +52,4 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Combobox on:change {value} {options} />
|
<Combobox on:change {value} {options} {autofocus} />
|
||||||
|
|
|
@ -16,6 +16,7 @@
|
||||||
export let bindings = []
|
export let bindings = []
|
||||||
export let componentBindings = []
|
export let componentBindings = []
|
||||||
export let nested = false
|
export let nested = false
|
||||||
|
export let autofocus = false
|
||||||
|
|
||||||
$: allBindings = getAllBindings(bindings, componentBindings, nested)
|
$: allBindings = getAllBindings(bindings, componentBindings, nested)
|
||||||
$: safeValue = getSafeValue(value, props.defaultValue, allBindings)
|
$: safeValue = getSafeValue(value, props.defaultValue, allBindings)
|
||||||
|
@ -82,6 +83,7 @@
|
||||||
{key}
|
{key}
|
||||||
{type}
|
{type}
|
||||||
{...props}
|
{...props}
|
||||||
|
{autofocus}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -9,7 +9,10 @@
|
||||||
|
|
||||||
{#if $builderStore.inBuilder}
|
{#if $builderStore.inBuilder}
|
||||||
<div>
|
<div>
|
||||||
{text || $component.name || "Placeholder"}
|
{#if !$$slots.content}
|
||||||
|
{text || $component.name || "Placeholder"}
|
||||||
|
{/if}
|
||||||
|
<slot name="content" />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|
|
@ -3,6 +3,10 @@
|
||||||
import FieldGroupFallback from "./FieldGroupFallback.svelte"
|
import FieldGroupFallback from "./FieldGroupFallback.svelte"
|
||||||
import { getContext, onDestroy } from "svelte"
|
import { getContext, onDestroy } from "svelte"
|
||||||
|
|
||||||
|
const dispatchEvent = (type, data = {}) => {
|
||||||
|
window.parent.postMessage({ type, data })
|
||||||
|
}
|
||||||
|
|
||||||
export let label
|
export let label
|
||||||
export let field
|
export let field
|
||||||
export let fieldState
|
export let fieldState
|
||||||
|
@ -76,9 +80,28 @@
|
||||||
{#if !formContext}
|
{#if !formContext}
|
||||||
<Placeholder text="Form components need to be wrapped in a form" />
|
<Placeholder text="Form components need to be wrapped in a form" />
|
||||||
{:else if !fieldState}
|
{:else if !fieldState}
|
||||||
<Placeholder
|
{#if $builderStore.inBuilder}
|
||||||
text="Add the Field setting to start using your component"
|
<div class="placeholder_wrap">
|
||||||
/>
|
<Placeholder>
|
||||||
|
<div slot="content">
|
||||||
|
Add the <mark>Field</mark> setting to start using your
|
||||||
|
component
|
||||||
|
<span
|
||||||
|
class="showMe"
|
||||||
|
on:click={() => {
|
||||||
|
dispatchEvent("builder-focus", {
|
||||||
|
location: "component_settings",
|
||||||
|
key: "field",
|
||||||
|
target: $component.id,
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Show me
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</Placeholder>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
{:else if schemaType && schemaType !== type && type !== "options"}
|
{:else if schemaType && schemaType !== type && type !== "options"}
|
||||||
<Placeholder
|
<Placeholder
|
||||||
text="This Field setting is the wrong data type for this component"
|
text="This Field setting is the wrong data type for this component"
|
||||||
|
@ -94,6 +117,18 @@
|
||||||
</FieldGroupFallback>
|
</FieldGroupFallback>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.placeholder_wrap mark {
|
||||||
|
background-color: var(--spectrum-global-color-gray-400);
|
||||||
|
padding: 0px 2px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
div.spectrum-Form-item .placeholder_wrap .showMe {
|
||||||
|
color: black;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.showMe:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
label {
|
label {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue