diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index ec5e7f6c31..722b74a914 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -45,6 +45,7 @@
"@spectrum-css/fieldgroup": "^3.0.2",
"@spectrum-css/fieldlabel": "^3.0.1",
"@spectrum-css/icon": "^3.0.1",
+ "@spectrum-css/inputgroup": "^3.0.2",
"@spectrum-css/label": "^2.0.9",
"@spectrum-css/link": "^3.1.1",
"@spectrum-css/menu": "^3.0.1",
diff --git a/packages/bbui/src/Form/Combobox.svelte b/packages/bbui/src/Form/Combobox.svelte
new file mode 100644
index 0000000000..77953e52d0
--- /dev/null
+++ b/packages/bbui/src/Form/Combobox.svelte
@@ -0,0 +1,39 @@
+
+
+
+
+
diff --git a/packages/bbui/src/Form/Core/Combobox.svelte b/packages/bbui/src/Form/Core/Combobox.svelte
new file mode 100644
index 0000000000..4329467bb0
--- /dev/null
+++ b/packages/bbui/src/Form/Core/Combobox.svelte
@@ -0,0 +1,128 @@
+
+
+
+
+ (focus = true)}
+ on:blur={() => (focus = false)}
+ on:change={onChange}
+ {value}
+ {placeholder}
+ class="spectrum-Textfield-input spectrum-InputGroup-input" />
+
+
+ {#if open}
+
(open = false)} />
+
+
+
+ {/if}
+
+
+
diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index eea5289218..1e2d6645ac 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -105,6 +105,7 @@
max-height: 240px;
width: 100%;
z-index: 999;
+ top: 100%;
}
.spectrum-Picker {
width: 100%;
diff --git a/packages/bbui/src/Form/Core/TextField.svelte b/packages/bbui/src/Form/Core/TextField.svelte
index 63c852dfb3..ae1b8c3a1d 100644
--- a/packages/bbui/src/Form/Core/TextField.svelte
+++ b/packages/bbui/src/Form/Core/TextField.svelte
@@ -10,6 +10,7 @@
export let id = null
const dispatch = createEventDispatcher()
+ let focus = false
const updateValue = value => {
if (type === "number") {
@@ -20,6 +21,7 @@
}
const onBlur = event => {
+ focus = false
updateValue(event.target.value)
}
@@ -33,7 +35,8 @@
+ class:is-disabled={disabled}
+ class:is-focused={focus}>
{#if error}
diff --git a/packages/bbui/src/Form/Core/index.js b/packages/bbui/src/Form/Core/index.js
index 7e3bf39c2a..19a6581bbf 100644
--- a/packages/bbui/src/Form/Core/index.js
+++ b/packages/bbui/src/Form/Core/index.js
@@ -4,3 +4,5 @@ export { default as CoreMultiselect } from "./Multiselect.svelte"
export { default as CoreCheckbox } from "./Checkbox.svelte"
export { default as CoreRadioGroup } from "./RadioGroup.svelte"
export { default as CoreTextArea } from "./TextArea.svelte"
+export { default as CoreCombobox } from "./Combobox.svelte"
+export { default as CoreSwitch } from "./Switch.svelte"
diff --git a/packages/bbui/src/Form/DataList.svelte b/packages/bbui/src/Form/DataList.svelte
deleted file mode 100644
index 6f5855d86a..0000000000
--- a/packages/bbui/src/Form/DataList.svelte
+++ /dev/null
@@ -1,158 +0,0 @@
-
-
-{#if label}
-
-{/if}
-
-
-
-
{
- updateValue(e)
- handleBlur(e)
- }}
- value={value || ''}
- type="text" />
-
-
-
-
-
-
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 17837750cc..629ad79bdf 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -4,7 +4,7 @@ import "./bbui.css"
export { default as Input } from "./Form/Input.svelte"
export { default as TextArea } from "./Form/TextArea.svelte"
export { default as Select } from "./Form/Select.svelte"
-export { default as DataList } from "./Form/DataList.svelte"
+export { default as Combobox } from "./Form/Combobox.svelte"
export { default as Dropzone } from "./Dropzone/Dropzone.svelte"
export { default as Drawer } from "./Drawer/Drawer.svelte"
export { default as ActionButton } from "./ActionButton/ActionButton.svelte"
diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock
index a9b90d42d6..74dda17158 100644
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
@@ -116,6 +116,11 @@
resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.2.tgz#327dcb95ab86368a00eb5a6d898c2c02e4ae04b3"
integrity sha512-BdHoO2ttrbsj1+IfHmSCGNS0oEf8i2UW3agfOVtSlYOD+iGykupWwy8ANLB6p4GvjlR7YjPRGzDRGgmDwVqR0Q==
+"@spectrum-css/inputgroup@^3.0.2":
+ version "3.0.2"
+ resolved "https://registry.yarnpkg.com/@spectrum-css/inputgroup/-/inputgroup-3.0.2.tgz#f1b13603832cbd22394f3d898af13203961f8691"
+ integrity sha512-O0G3Lw9gxsh8gTLQWIAKkN1O8cWhjpEUl+oR1PguIKFni72uNr2ikU9piOwy/r0gJG2Q/TVs6hAshoAAkmsSzw==
+
"@spectrum-css/label@^2.0.9":
version "2.0.10"
resolved "https://registry.yarnpkg.com/@spectrum-css/label/-/label-2.0.10.tgz#2368651d7636a19385b5d300cdf6272db1916001"
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/AttachmentFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/AttachmentFieldSelect.svelte
index 9e6ab5529b..44557157ba 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/AttachmentFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/AttachmentFieldSelect.svelte
@@ -2,4 +2,4 @@
import FormFieldSelect from "./FormFieldSelect.svelte"
-
+
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte
index 51b459bf23..131a375b22 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte
@@ -2,4 +2,4 @@
import FormFieldSelect from "./FormFieldSelect.svelte"
-
+
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte
index 5c0ed8cb2f..c3b9b052c4 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte
@@ -2,4 +2,4 @@
import FormFieldSelect from "./FormFieldSelect.svelte"
-
+
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DetailScreenSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DetailScreenSelect.svelte
deleted file mode 100644
index c119985196..0000000000
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DetailScreenSelect.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-
-
-
-
-
-
-
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
index 5a903e0b10..1d7f5367df 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
@@ -1,5 +1,5 @@
-
-
-
-
-
+
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LongFormFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LongFormFieldSelect.svelte
index 05a83fe387..65dd54d53a 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LongFormFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LongFormFieldSelect.svelte
@@ -2,4 +2,4 @@
import FormFieldSelect from "./FormFieldSelect.svelte"
-
+
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NumberFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NumberFieldSelect.svelte
index ce2569cf91..2006aca0bb 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NumberFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NumberFieldSelect.svelte
@@ -2,4 +2,4 @@
import FormFieldSelect from "./FormFieldSelect.svelte"
-
+
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsFieldSelect.svelte
index 526372e3d8..a01b837797 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsFieldSelect.svelte
@@ -2,4 +2,4 @@
import FormFieldSelect from "./FormFieldSelect.svelte"
-
+
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
index 0f4d729790..45624ced59 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@@ -134,6 +134,7 @@
flex: 1;
display: inline-block;
padding-left: 2px;
+ width: 0;
}
.icon {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte
index 94e376dc27..5cdb25a112 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte
@@ -2,4 +2,4 @@
import FormFieldSelect from "./FormFieldSelect.svelte"
-
+
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/StringFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/StringFieldSelect.svelte
index 27815af91f..62765676e3 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/StringFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/StringFieldSelect.svelte
@@ -2,4 +2,4 @@
import FormFieldSelect from "./FormFieldSelect.svelte"
-
+
diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
index 62072d17f7..ff5a20a0ee 100644
--- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
@@ -17,7 +17,6 @@
import SchemaSelect from "./PropertyControls/SchemaSelect.svelte"
import EventsEditor from "./PropertyControls/EventsEditor"
import FilterEditor from "./PropertyControls/FilterEditor.svelte"
- import DetailScreenSelect from "./PropertyControls/DetailScreenSelect.svelte"
import { IconSelect } from "./PropertyControls/IconSelect"
import ColorPicker from "./PropertyControls/ColorPicker.svelte"
import StringFieldSelect from "./PropertyControls/StringFieldSelect.svelte"
@@ -61,7 +60,6 @@
select: Select,
dataSource: DataSourceSelect,
dataProvider: DataProviderSelect,
- detailScreen: DetailScreenSelect,
boolean: Checkbox,
number: Input,
event: EventsEditor,