From b43e0e654760ead809e06d2fe7cb3d86005b77f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= Date: Fri, 9 Apr 2021 13:38:48 +0200 Subject: [PATCH 01/10] adds an ActionButton component to bbui --- package.json | 1 + packages/bbui/src/Button/ActionButton.svelte | 67 +++++++++++++++++++ packages/bbui/src/Button/Button.svelte | 2 - .../bbui/src/DatePicker/DatePicker.svelte | 2 +- packages/bbui/src/Drawer/Drawer.svelte | 4 +- yarn.lock | 5 ++ 6 files changed, 76 insertions(+), 5 deletions(-) create mode 100644 packages/bbui/src/Button/ActionButton.svelte diff --git a/package.json b/package.json index 7429805b11..381f1c69bc 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "build:docker:staging": "cd hosting/scripts/linux/ && ./release-to-docker-hub.sh staging && cd -" }, "dependencies": { + "@spectrum-css/actionbutton": "^1.0.1", "@spectrum-css/toast": "^3.0.1" } } diff --git a/packages/bbui/src/Button/ActionButton.svelte b/packages/bbui/src/Button/ActionButton.svelte new file mode 100644 index 0000000000..b68d7f72bf --- /dev/null +++ b/packages/bbui/src/Button/ActionButton.svelte @@ -0,0 +1,67 @@ + + + + + + + \ No newline at end of file diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte index 80cd5aff19..1d84bfc3e6 100644 --- a/packages/bbui/src/Button/Button.svelte +++ b/packages/bbui/src/Button/Button.svelte @@ -1,8 +1,6 @@ + +
+ +
\ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 2965fa7ed3..07cfddf1f0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -829,6 +829,11 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.1.tgz#9c75da37ea6915919fb574c74bd60dacc03b6577" integrity sha512-AUqtyNabHF451Aj9i3xz82TxS5Z6k1dttA68/1hMeU9kbPCSS4P6Viw3vaRGs9CSspuR8xnnhDgrq+F+zMy2Hw== +"@spectrum-css/actiongroup@^1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/actiongroup/-/actiongroup-1.0.1.tgz#b95b86e7af229e90fe1e70399d8d4b547b4bd31c" + integrity sha512-5Q6uMjzv5BFA2TwGASr/jAtJpTWl26fhWvgGY8kOA0RCSij35l+YJg/FPXf6Nnj2qCOl8DkNycjT9YXJ+bhyVA== + "@spectrum-css/toast@^3.0.1": version "3.0.1" resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.1.tgz#36f62ea05302761e59b9d53e05f6c04423861796" From 9e2cf6617324fc1dd1d0ca0b846ce8466bb97e91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= Date: Fri, 9 Apr 2021 14:44:48 +0200 Subject: [PATCH 03/10] adds Link component to bbui --- package.json | 1 + .../ActionButton.svelte | 0 .../ActionGroup.svelte | 0 packages/bbui/src/Button/TextButton.svelte | 128 ------------------ packages/bbui/src/Button/TextButton.svench | 69 ---------- packages/bbui/src/Drawer/Drawer.svelte | 2 +- packages/bbui/src/Link/Link.svelte | 17 +++ packages/bbui/src/Menu/ActionMenu.svelte | 0 packages/bbui/src/Menu/Menu.svelte | 0 packages/bbui/src/index.js | 4 +- .../components/settings/tabs/APIKeys.svelte | 6 +- .../settings/tabs/DangerZone.svelte | 2 +- .../src/components/start/AppCard.svelte | 12 +- .../start/BuilderSettingsButton.svelte | 4 +- yarn.lock | 5 + 15 files changed, 38 insertions(+), 212 deletions(-) rename packages/bbui/src/{Button => ActionButton}/ActionButton.svelte (100%) rename packages/bbui/src/{Button => ActionGroup}/ActionGroup.svelte (100%) delete mode 100644 packages/bbui/src/Button/TextButton.svelte delete mode 100644 packages/bbui/src/Button/TextButton.svench create mode 100644 packages/bbui/src/Link/Link.svelte create mode 100644 packages/bbui/src/Menu/ActionMenu.svelte create mode 100644 packages/bbui/src/Menu/Menu.svelte diff --git a/package.json b/package.json index 6ce17d09a0..f2ad3c4428 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "dependencies": { "@spectrum-css/actionbutton": "^1.0.1", "@spectrum-css/actiongroup": "^1.0.1", + "@spectrum-css/link": "^3.1.1", "@spectrum-css/toast": "^3.0.1" } } diff --git a/packages/bbui/src/Button/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte similarity index 100% rename from packages/bbui/src/Button/ActionButton.svelte rename to packages/bbui/src/ActionButton/ActionButton.svelte diff --git a/packages/bbui/src/Button/ActionGroup.svelte b/packages/bbui/src/ActionGroup/ActionGroup.svelte similarity index 100% rename from packages/bbui/src/Button/ActionGroup.svelte rename to packages/bbui/src/ActionGroup/ActionGroup.svelte diff --git a/packages/bbui/src/Button/TextButton.svelte b/packages/bbui/src/Button/TextButton.svelte deleted file mode 100644 index 351a2c45bf..0000000000 --- a/packages/bbui/src/Button/TextButton.svelte +++ /dev/null @@ -1,128 +0,0 @@ - - -{#if href} - -{:else} - -{/if} - - diff --git a/packages/bbui/src/Button/TextButton.svench b/packages/bbui/src/Button/TextButton.svench deleted file mode 100644 index e3c3477805..0000000000 --- a/packages/bbui/src/Button/TextButton.svench +++ /dev/null @@ -1,69 +0,0 @@ - - - - - -
- alert('Clicked!')}> - - Add View - - alert('Clicked!')}> - - Add Column - - alert('Clicked!')}> - - Add Row - - alert('Clicked!')}> - - Disabled Text Button - - alert('Clicked!')}> - - Active Calculation - -
- - - -
- alert('Clicked!')}> - - Add View - - alert('Clicked!')}> - - Add Column - - alert('Clicked!')}> - - Add Row - - alert('Clicked!')}> - - Delete - - alert('Clicked!')}> - - Calculate - -
- - - -
- This is a link -
- diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte index 071509f555..bbae35d25a 100644 --- a/packages/bbui/src/Drawer/Drawer.svelte +++ b/packages/bbui/src/Drawer/Drawer.svelte @@ -1,7 +1,7 @@ + + \ No newline at end of file diff --git a/packages/bbui/src/Menu/ActionMenu.svelte b/packages/bbui/src/Menu/ActionMenu.svelte new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/bbui/src/Menu/Menu.svelte b/packages/bbui/src/Menu/Menu.svelte new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js index 6e8db956b0..ea479ab031 100644 --- a/packages/bbui/src/index.js +++ b/packages/bbui/src/index.js @@ -8,9 +8,10 @@ export { default as Select } from "./Form/Select.svelte" export { default as DataList } from "./Form/DataList.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" +export { default as ActionGroup } from "./ActionGroup/ActionGroup.svelte" export { default as Button } from "./Button/Button.svelte" export { default as Icon, iconOptions, directions } from "./Icons/Icon.svelte" -export { default as TextButton } from "./Button/TextButton.svelte" export { default as Toggle } from "./Form/Toggle.svelte" export { default as Radio } from "./Form/Radio.svelte" export { default as Checkbox } from "./Form/Checkbox.svelte" @@ -22,6 +23,7 @@ export { default as Popover } from "./Popover/Popover.svelte" export { default as Body } from "./Styleguide/Body.svelte" export { default as Heading } from "./Styleguide/Heading.svelte" export { default as Label } from "./Styleguide/Label.svelte" +export { default as Link } from "./Link/Link.svelte" export { default as Close } from "./Button/Close.svelte" export { default as Modal } from "./Modal/Modal.svelte" export { default as ModalContent } from "./Modal/ModalContent.svelte" diff --git a/packages/builder/src/components/settings/tabs/APIKeys.svelte b/packages/builder/src/components/settings/tabs/APIKeys.svelte index 729f464fd6..affc3fffd9 100644 --- a/packages/builder/src/components/settings/tabs/APIKeys.svelte +++ b/packages/builder/src/components/settings/tabs/APIKeys.svelte @@ -1,5 +1,5 @@
- diff --git a/yarn.lock b/yarn.lock index 07cfddf1f0..11de11c2dc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -834,6 +834,11 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/actiongroup/-/actiongroup-1.0.1.tgz#b95b86e7af229e90fe1e70399d8d4b547b4bd31c" integrity sha512-5Q6uMjzv5BFA2TwGASr/jAtJpTWl26fhWvgGY8kOA0RCSij35l+YJg/FPXf6Nnj2qCOl8DkNycjT9YXJ+bhyVA== +"@spectrum-css/link@^3.1.1": + version "3.1.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/link/-/link-3.1.1.tgz#cb526a2e10b50ef5a7ae29cca7272e2610d597eb" + integrity sha512-Bi88lRhTY7g6nM/ryW1yY4Cji211ZYNtRxkxbV7n2lPvwMAAQtyx0qVD3ru4kTGj/FFVvmPR3XiOE10K13HSNA== + "@spectrum-css/toast@^3.0.1": version "3.0.1" resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.1.tgz#36f62ea05302761e59b9d53e05f6c04423861796" From a44a208391b6243768d8d26ef190b6a2af939833 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= Date: Fri, 9 Apr 2021 14:57:31 +0200 Subject: [PATCH 04/10] fix erroneous class usage --- .../bbui/src/ActionButton/ActionButton.svelte | 18 ++++++++---------- .../bbui/src/ActionGroup/ActionGroup.svelte | 11 ++++++----- packages/bbui/src/Link/Link.svelte | 12 ++++++------ 3 files changed, 20 insertions(+), 21 deletions(-) diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte index b68d7f72bf..df087dd627 100644 --- a/packages/bbui/src/ActionButton/ActionButton.svelte +++ b/packages/bbui/src/ActionButton/ActionButton.svelte @@ -3,19 +3,14 @@ import { createEventDispatcher } from "svelte" const dispatch = createEventDispatcher() - export let disabled = false - + /** @type {('S', 'M', 'L', 'XL')} Size of button */ export let size = "M"; - /** @type {('cta','primary','secondary','warning', 'overBackground')} Type of button */ - export let type = "primary" - export let quiet = false; - - export let selected = false; - + export let emphasized = false; + export let selected = false export let longPressable = false; - + export let disabled = false export let icon = ''; function longPress(element) { @@ -42,7 +37,10 @@ -{/if} + {/if} + From 0b18b55433edd554c4f6558d7f66c509aa84a464 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= Date: Mon, 12 Apr 2021 16:26:26 +0200 Subject: [PATCH 09/10] Implements Menu component --- packages/bbui/src/Menu/Item.svelte | 16 +++++++-- packages/bbui/src/Menu/Menu.svelte | 33 +------------------ packages/bbui/src/Menu/Menu.svench | 19 +++++++++++ packages/bbui/src/Menu/Section.svelte | 4 +-- packages/bbui/src/Menu/Separator.svelte | 1 + packages/bbui/src/index.js | 1 + .../builder/src/pages/builder/index.svelte | 4 --- 7 files changed, 38 insertions(+), 40 deletions(-) create mode 100644 packages/bbui/src/Menu/Menu.svench create mode 100644 packages/bbui/src/Menu/Separator.svelte diff --git a/packages/bbui/src/Menu/Item.svelte b/packages/bbui/src/Menu/Item.svelte index c7b73fea02..58b031fe78 100644 --- a/packages/bbui/src/Menu/Item.svelte +++ b/packages/bbui/src/Menu/Item.svelte @@ -1,3 +1,15 @@ - \ No newline at end of file diff --git a/packages/bbui/src/Menu/Menu.svelte b/packages/bbui/src/Menu/Menu.svelte index 3f6cb74781..2fa1021732 100644 --- a/packages/bbui/src/Menu/Menu.svelte +++ b/packages/bbui/src/Menu/Menu.svelte @@ -3,36 +3,5 @@ \ No newline at end of file diff --git a/packages/bbui/src/Menu/Menu.svench b/packages/bbui/src/Menu/Menu.svench new file mode 100644 index 0000000000..1da76869ba --- /dev/null +++ b/packages/bbui/src/Menu/Menu.svench @@ -0,0 +1,19 @@ + + + +
+ Some Item 1 + Some Item 2 + Some Item 3 +
+ +
+ Save + Download +
+ \ No newline at end of file diff --git a/packages/bbui/src/Menu/Section.svelte b/packages/bbui/src/Menu/Section.svelte index 58bfbdd7a4..54ae4123be 100644 --- a/packages/bbui/src/Menu/Section.svelte +++ b/packages/bbui/src/Menu/Section.svelte @@ -2,8 +2,8 @@ export let heading
  • - -
      +{heading} +
      \ No newline at end of file diff --git a/packages/bbui/src/Menu/Separator.svelte b/packages/bbui/src/Menu/Separator.svelte new file mode 100644 index 0000000000..187fab2347 --- /dev/null +++ b/packages/bbui/src/Menu/Separator.svelte @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js index a417d691f2..1f22e7e253 100644 --- a/packages/bbui/src/index.js +++ b/packages/bbui/src/index.js @@ -28,6 +28,7 @@ export { default as Link } from "./Link/Link.svelte" export { default as Close } from "./Button/Close.svelte" export { default as Menu } from "./Menu/Menu.svelte" export { default as MenuSection } from "./Menu/Section.svelte" +export { default as MenuSeparator } from "./Menu/Separator.svelte" export { default as MenuItem } from "./Menu/Item.svelte" export { default as Modal } from "./Modal/Modal.svelte" export { default as ModalContent } from "./Modal/ModalContent.svelte" diff --git a/packages/builder/src/pages/builder/index.svelte b/packages/builder/src/pages/builder/index.svelte index 0be57a1b53..21fdeb0128 100644 --- a/packages/builder/src/pages/builder/index.svelte +++ b/packages/builder/src/pages/builder/index.svelte @@ -75,10 +75,6 @@ - -
      - -
    • From cef3437c5073a7e983bdfe1d8c2784d78c95bd0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= Date: Mon, 12 Apr 2021 17:10:55 +0200 Subject: [PATCH 10/10] Implements ActionMenu component --- .../bbui/src/ActionMenu/ActionMenu.svelte | 30 +++++++++++++++++++ .../bbui/src/Actions/position_dropdown.js | 4 +-- 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/packages/bbui/src/ActionMenu/ActionMenu.svelte b/packages/bbui/src/ActionMenu/ActionMenu.svelte index e69de29bb2..33b2fcbdd1 100644 --- a/packages/bbui/src/ActionMenu/ActionMenu.svelte +++ b/packages/bbui/src/ActionMenu/ActionMenu.svelte @@ -0,0 +1,30 @@ + + +
    + +
    + + + + + + + \ No newline at end of file diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js index 9bf5a40a67..a25cc1bbd5 100644 --- a/packages/bbui/src/Actions/position_dropdown.js +++ b/packages/bbui/src/Actions/position_dropdown.js @@ -18,10 +18,10 @@ export default function positionDropdown(element, { anchor, align }) { if (spaceAbove > spaceBelow) { positionSide = "bottom" maxHeight = spaceAbove - 20 - y = window.innerHeight - spaceAbove + y = window.innerHeight - spaceAbove + 5 } else { positionSide = "top" - y = bottom + y = bottom + 5 maxHeight = spaceBelow - 20 }