diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index b9f87dfb91..84273d00ff 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -9,7 +9,9 @@
".": {
"import": "./dist/bbui.es.js"
},
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./spectrum-icons-rollup.js": "./src/spectrum-icons-rollup.js",
+ "./spectrum-icons-vite.js": "./src/spectrum-icons-vite.js"
},
"scripts": {
"build": "rollup -c"
@@ -35,6 +37,7 @@
"dist"
],
"dependencies": {
+ "@adobe/spectrum-css-workflow-icons": "^1.2.1",
"@spectrum-css/actionbutton": "^1.0.1",
"@spectrum-css/actiongroup": "^1.0.1",
"@spectrum-css/button": "^3.0.1",
@@ -65,7 +68,7 @@
"@spectrum-css/underlay": "^2.0.9",
"@spectrum-css/vars": "^3.0.1",
"dayjs": "^1.10.4",
- "svelte-flatpickr": "^2.4.0",
+ "svelte-flatpickr": "^3.1.0",
"svelte-portal": "^1.0.0"
}
}
diff --git a/packages/bbui/src/DatePicker/DatePicker.svelte b/packages/bbui/src/DatePicker/DatePicker.svelte
deleted file mode 100644
index d6f6a00753..0000000000
--- a/packages/bbui/src/DatePicker/DatePicker.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-
-
-
- {#if label}
-
- {/if}
-
-
-
-
diff --git a/packages/bbui/src/DatePicker/DatePicker.svench b/packages/bbui/src/DatePicker/DatePicker.svench
deleted file mode 100644
index ed0d480a6f..0000000000
--- a/packages/bbui/src/DatePicker/DatePicker.svench
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/packages/bbui/src/Form/Core/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker.svelte
new file mode 100644
index 0000000000..a3a2fefb38
--- /dev/null
+++ b/packages/bbui/src/Form/Core/DatePicker.svelte
@@ -0,0 +1,142 @@
+
+
+
+
+
+{#if open}
+
+{/if}
+
+
diff --git a/packages/bbui/src/Form/Core/index.js b/packages/bbui/src/Form/Core/index.js
index 5bf4179009..95588458b6 100644
--- a/packages/bbui/src/Form/Core/index.js
+++ b/packages/bbui/src/Form/Core/index.js
@@ -7,3 +7,4 @@ export { default as CoreTextArea } from "./TextArea.svelte"
export { default as CoreCombobox } from "./Combobox.svelte"
export { default as CoreSwitch } from "./Switch.svelte"
export { default as CoreSearch } from "./Search.svelte"
+export { default as CoreDatePicker } from "./DatePicker.svelte"
diff --git a/packages/bbui/src/Form/DatePicker.svelte b/packages/bbui/src/Form/DatePicker.svelte
new file mode 100644
index 0000000000..1ac3b2bef0
--- /dev/null
+++ b/packages/bbui/src/Form/DatePicker.svelte
@@ -0,0 +1,29 @@
+
+
+
+
+
diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte
index ad5faf5ae8..a23a33c876 100644
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/packages/bbui/src/Icon/Icon.svelte
@@ -1,19 +1,30 @@
-
\ No newline at end of file
+
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 7a8f64656f..f72463669a 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -1,5 +1,8 @@
import "./bbui.css"
+// Spectrum icons
+import "@spectrum-css/icon/dist/index-vars.css"
+
// Components
export { default as Input } from "./Form/Input.svelte"
export { default as TextArea } from "./Form/TextArea.svelte"
@@ -33,7 +36,7 @@ export { default as Modal } from "./Modal/Modal.svelte"
export { default as ModalContent } from "./Modal/ModalContent.svelte"
export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"
export { default as Spacer } from "./Spacer/Spacer.svelte"
-export { default as DatePicker } from "./DatePicker/DatePicker.svelte"
+export { default as DatePicker } from "./Form/DatePicker.svelte"
export { default as Multiselect } from "./Form/Multiselect.svelte"
export { default as Context } from "./context"
export { default as Table } from "./Table/Table.svelte"
diff --git a/packages/standard-components/src/spectrum-icons.js b/packages/bbui/src/spectrum-icons-rollup.js
similarity index 91%
rename from packages/standard-components/src/spectrum-icons.js
rename to packages/bbui/src/spectrum-icons-rollup.js
index 932838339b..adf5752848 100644
--- a/packages/standard-components/src/spectrum-icons.js
+++ b/packages/bbui/src/spectrum-icons-rollup.js
@@ -1,8 +1,7 @@
-import "@spectrum-css/icon/dist/index-vars.css"
import SpectrumUIIcons from "@spectrum-css/icon/dist/spectrum-css-icons.svg"
import SpectrumWorkflowIcons from "@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg"
-export const loadSpectrumIcons = () => {
+export default () => {
loadIconSet("Spectrum UI Icons", SpectrumUIIcons)
loadIconSet("Spectrum Workflow Icons", SpectrumWorkflowIcons)
}
diff --git a/packages/builder/src/spectrum-icons.js b/packages/bbui/src/spectrum-icons-vite.js
similarity index 91%
rename from packages/builder/src/spectrum-icons.js
rename to packages/bbui/src/spectrum-icons-vite.js
index bd23e88d4c..99a66d3115 100644
--- a/packages/builder/src/spectrum-icons.js
+++ b/packages/bbui/src/spectrum-icons-vite.js
@@ -1,8 +1,7 @@
-import "@spectrum-css/icon/dist/index-vars.css"
import SpectrumUIIcons from "@spectrum-css/icon/dist/spectrum-css-icons.svg?raw"
import SpectrumWorkflowIcons from "@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg?raw"
-export const loadSpectrumIcons = () => {
+export default () => {
loadIconSet("Spectrum UI Icons", SpectrumUIIcons)
loadIconSet("Spectrum Workflow Icons", SpectrumWorkflowIcons)
}
diff --git a/packages/bbui/src/utils/helpers.js b/packages/bbui/src/utils/helpers.js
new file mode 100644
index 0000000000..0dc9f9801e
--- /dev/null
+++ b/packages/bbui/src/utils/helpers.js
@@ -0,0 +1,8 @@
+export const generateID = () => {
+ const rand = Math.random()
+ .toString(32)
+ .substring(2)
+
+ // Starts with a letter so that its a valid DOM ID
+ return `A${rand}`
+}
diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock
index 8067dc6c23..6a1f988878 100644
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
@@ -2,6 +2,11 @@
# yarn lockfile v1
+"@adobe/spectrum-css-workflow-icons@^1.2.1":
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/@adobe/spectrum-css-workflow-icons/-/spectrum-css-workflow-icons-1.2.1.tgz#7e2cb3fcfb5c8b12d7275afafbb6ec44913551b4"
+ integrity sha512-uVgekyBXnOVkxp+CUssjN/gefARtudZC8duEn1vm0lBQFwGRZFlDEzU1QC+aIRWCrD1Z8OgRpmBYlSZ7QS003w==
+
"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4":
version "7.12.13"
resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.13.tgz#dcfc826beef65e75c50e21d3837d7d95798dd658"
@@ -2360,10 +2365,10 @@ supports-color@^7.0.0, supports-color@^7.1.0:
dependencies:
has-flag "^4.0.0"
-svelte-flatpickr@^2.4.0:
- version "2.4.0"
- resolved "https://registry.yarnpkg.com/svelte-flatpickr/-/svelte-flatpickr-2.4.0.tgz#190871fc3305956c8c8fd3601cd036b8ac71ef49"
- integrity sha512-UUC5Te+b0qi4POg7VDwfGh0m5W3Hf64OwkfOTj6FEe/dYZN4cBzpQ82EuuQl0CTbbBAsMkcjJcixV1d2V6EHCQ==
+svelte-flatpickr@^3.1.0:
+ version "3.1.0"
+ resolved "https://registry.yarnpkg.com/svelte-flatpickr/-/svelte-flatpickr-3.1.0.tgz#ad83588430dbd55196a1a258b8ba27e7f9c1ee37"
+ integrity sha512-zKyV+ukeVuJ8CW0Ing3T19VSekc4bPkou/5Riutt1yATrLvSsanNqcgqi7Q5IePvIoOF9GJ5OtHvn1qK9Wx9BQ==
dependencies:
flatpickr "^4.5.2"
diff --git a/packages/builder/package.json b/packages/builder/package.json
index ca8f6a615a..bc1ef0c14a 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -64,13 +64,11 @@
}
},
"dependencies": {
- "@adobe/spectrum-css-workflow-icons": "^1.2.0",
"@budibase/bbui": "^1.58.13",
"@budibase/client": "^0.8.9",
"@budibase/colorpicker": "1.1.2",
"@budibase/string-templates": "^0.8.9",
"@sentry/browser": "5.19.1",
- "@spectrum-css/icon": "^3.0.1",
"@spectrum-css/page": "^3.0.1",
"@spectrum-css/vars": "^3.0.1",
"codemirror": "^5.59.0",
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 2389671219..5e9b049f7e 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -10,7 +10,6 @@
import CreateEditRow from "./modals/CreateEditRow.svelte"
import CreateEditUser from "./modals/CreateEditUser.svelte"
import CreateEditColumn from "./modals/CreateEditColumn.svelte"
- import "@budibase/svelte-ag-grid/dist/index.css"
import { TableNames, UNEDITABLE_USER_FIELDS } from "constants"
import RoleCell from "./cells/RoleCell.svelte"
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 1d509a63bd..4155feadd9 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -6,6 +6,7 @@
Select,
Toggle,
RadioGroup,
+ DatePicker,
ModalContent,
Context,
} from "@budibase/bbui"
@@ -20,7 +21,6 @@
import { getAutoColumnInformation, buildAutoColumn } from "builderStore/utils"
import { notifications } from "@budibase/bbui"
import ValuesList from "components/common/ValuesList.svelte"
- import DatePicker from "components/common/DatePicker.svelte"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { truncate } from "lodash"
import { getContext } from "svelte"
diff --git a/packages/builder/src/components/common/DatePicker.svelte b/packages/builder/src/components/common/DatePicker.svelte
deleted file mode 100644
index 9931ba56ef..0000000000
--- a/packages/builder/src/components/common/DatePicker.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
diff --git a/packages/builder/src/components/common/DrawerBindableInput.svelte b/packages/builder/src/components/common/DrawerBindableInput.svelte
index 7e4ce762f8..1d23f29bf2 100644
--- a/packages/builder/src/components/common/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/DrawerBindableInput.svelte
@@ -36,7 +36,7 @@
on:change={event => onChange(event.detail)}
{placeholder} />
-
+
@@ -69,20 +69,26 @@
top: 1px;
bottom: 1px;
position: absolute;
+ justify-content: center;
align-items: center;
display: flex;
+ flex-direction: row;
box-sizing: border-box;
- padding-left: 4px;
- padding-right: 2px;
border-left: 1px solid var(--spectrum-alias-border-color);
- background-color: var(--spectrum-global-color-gray-50);
border-top-right-radius: var(--spectrum-alias-border-radius-regular);
border-bottom-right-radius: var(--spectrum-alias-border-radius-regular);
- color: var(--grey-7);
- font-size: 14px;
+ width: 31px;
+ color: var(--spectrum-alias-text-color);
+ background-color: var(--spectrum-global-color-gray-75);
+ transition: background-color
+ var(--spectrum-global-animation-duration-100, 130ms),
+ box-shadow var(--spectrum-global-animation-duration-100, 130ms),
+ border-color var(--spectrum-global-animation-duration-100, 130ms);
}
.icon:hover {
- color: var(--ink);
cursor: pointer;
+ color: var(--spectrum-alias-text-color-hover);
+ background-color: var(--spectrum-global-color-gray-50);
+ border-color: var(--spectrum-alias-border-color-hover);
}
diff --git a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
index 90171b843c..647d7a00a5 100644
--- a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
@@ -1,6 +1,6 @@
{#if fieldState}
-
-
-
- {#if open}
-
- {/if}
+ on:change={e => fieldApi.setValue(e.detail)}
+ disabled={$fieldState.disabled}
+ error={$fieldState.error}
+ id={$fieldState.fieldId}
+ {enableTime}
+ {placeholder} />
{/if}
-
-
diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte
index 1052abcbe5..e35bee0554 100644
--- a/packages/standard-components/src/forms/Form.svelte
+++ b/packages/standard-components/src/forms/Form.svelte
@@ -1,5 +1,4 @@