From 06b438d5850e6406af7de524ffdc5365d53cac6b Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 20 Apr 2021 20:06:27 +0100 Subject: [PATCH] Add datepicker, centralise icon management and update builder styles --- packages/bbui/package.json | 7 +- .../bbui/src/DatePicker/DatePicker.svelte | 45 --- .../bbui/src/DatePicker/DatePicker.svench | 17 - packages/bbui/src/Form/Core/DatePicker.svelte | 142 ++++++++ packages/bbui/src/Form/Core/index.js | 1 + packages/bbui/src/Form/DatePicker.svelte | 29 ++ packages/bbui/src/Icon/Icon.svelte | 35 +- packages/bbui/src/index.js | 5 +- .../src/spectrum-icons-rollup.js} | 3 +- .../src/spectrum-icons-vite.js} | 3 +- packages/bbui/src/utils/helpers.js | 8 + packages/bbui/yarn.lock | 13 +- packages/builder/package.json | 2 - .../components/backend/DataTable/Table.svelte | 1 - .../DataTable/modals/CreateEditColumn.svelte | 2 +- .../src/components/common/DatePicker.svelte | 13 - .../common/DrawerBindableInput.svelte | 20 +- .../PropertiesPanel/BindingPanel.svelte | 4 +- .../PropertyControls/PropertyControl.svelte | 20 +- packages/builder/src/main.js | 2 +- .../pages/builder/[application]/_reset.svelte | 8 +- packages/builder/vite.config.js | 1 - packages/builder/yarn.lock | 27 -- packages/standard-components/package.json | 26 +- .../src/forms/DateTimeField.svelte | 138 +------ .../standard-components/src/forms/Form.svelte | 1 - packages/standard-components/src/index.js | 3 +- .../src/table/Table.svelte | 1 - packages/standard-components/yarn.lock | 343 +----------------- 29 files changed, 271 insertions(+), 649 deletions(-) delete mode 100644 packages/bbui/src/DatePicker/DatePicker.svelte delete mode 100644 packages/bbui/src/DatePicker/DatePicker.svench create mode 100644 packages/bbui/src/Form/Core/DatePicker.svelte create mode 100644 packages/bbui/src/Form/DatePicker.svelte rename packages/{standard-components/src/spectrum-icons.js => bbui/src/spectrum-icons-rollup.js} (91%) rename packages/{builder/src/spectrum-icons.js => bbui/src/spectrum-icons-vite.js} (91%) create mode 100644 packages/bbui/src/utils/helpers.js delete mode 100644 packages/builder/src/components/common/DatePicker.svelte 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 !!error} + + {/if} + +
+ +
+
+{#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 !$fieldState.valid} - - {/if} - -
- -
-
- {#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 @@