diff --git a/hosting/docker-compose.dev.yaml b/hosting/docker-compose.dev.yaml index 1626d520b6..7906a389fa 100644 --- a/hosting/docker-compose.dev.yaml +++ b/hosting/docker-compose.dev.yaml @@ -6,7 +6,8 @@ services: minio-service: container_name: budi-minio-dev restart: on-failure - image: minio/minio + # Last version that supports the "fs" backend + image: minio/minio:RELEASE.2022-10-24T18-35-07Z volumes: - minio_data:/data ports: diff --git a/packages/bbui/src/Actions/click_outside.js b/packages/bbui/src/Actions/click_outside.js index 3a08484635..6842b94a32 100644 --- a/packages/bbui/src/Actions/click_outside.js +++ b/packages/bbui/src/Actions/click_outside.js @@ -1,11 +1,11 @@ -const ignoredClasses = [".flatpickr-calendar", ".modal-container"] +const ignoredClasses = [".flatpickr-calendar"] let clickHandlers = [] /** * Handle a body click event */ const handleClick = event => { - // Ignore click if needed + // Ignore click if this is an ignored class for (let className of ignoredClasses) { if (event.target.closest(className)) { return @@ -14,9 +14,18 @@ const handleClick = event => { // Process handlers clickHandlers.forEach(handler => { - if (!handler.element.contains(event.target)) { - handler.callback?.(event) + if (handler.element.contains(event.target)) { + return } + + // Ignore clicks for modals, unless the handler is registered from a modal + const sourceInModal = handler.element.closest(".spectrum-Modal") != null + const clickInModal = event.target.closest(".spectrum-Modal") != null + if (clickInModal && !sourceInModal) { + return + } + + handler.callback?.(event) }) } document.documentElement.addEventListener("click", handleClick, true) diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js index 7570a39c8c..463b69169f 100644 --- a/packages/bbui/src/Actions/position_dropdown.js +++ b/packages/bbui/src/Actions/position_dropdown.js @@ -1,75 +1,68 @@ -export default function positionDropdown(element, { anchor, align, maxWidth }) { - let positionSide = "top" - let maxHeight = 0 - let dimensions = getDimensions(anchor) +export default function positionDropdown( + element, + { anchor, align, maxWidth, useAnchorWidth } +) { + const update = () => { + const anchorBounds = anchor.getBoundingClientRect() + const elementBounds = element.getBoundingClientRect() + let styles = { + maxHeight: null, + minWidth: null, + maxWidth, + left: null, + top: null, + } - function getDimensions() { - const { - bottom, - top: spaceAbove, - left, - width, - } = anchor.getBoundingClientRect() - const spaceBelow = window.innerHeight - bottom - const containerRect = element.getBoundingClientRect() - - let y - - if (spaceAbove > spaceBelow) { - positionSide = "bottom" - maxHeight = spaceAbove - 20 - y = window.innerHeight - spaceAbove + 5 + // Determine vertical styles + if (window.innerHeight - anchorBounds.bottom < 100) { + styles.top = anchorBounds.top - elementBounds.height - 5 } else { - positionSide = "top" - y = bottom + 5 - maxHeight = spaceBelow - 20 + styles.top = anchorBounds.bottom + 5 + styles.maxHeight = window.innerHeight - anchorBounds.bottom - 20 } - return { - [positionSide]: y, - left, - width, - containerWidth: containerRect.width, + // Determine horizontal styles + if (!maxWidth && useAnchorWidth) { + styles.maxWidth = anchorBounds.width } + if (useAnchorWidth) { + styles.minWidth = anchorBounds.width + } + if (align === "right") { + styles.left = anchorBounds.left + anchorBounds.width - elementBounds.width + } else if (align === "right-side") { + styles.left = anchorBounds.left + anchorBounds.width + } else { + styles.left = anchorBounds.left + } + + // Apply styles + Object.entries(styles).forEach(([style, value]) => { + if (value) { + element.style[style] = `${value.toFixed(0)}px` + } else { + element.style[style] = null + } + }) } - function calcLeftPosition() { - let left - - if (align == "right") { - left = dimensions.left + dimensions.width - dimensions.containerWidth - } else if (align == "right-side") { - left = dimensions.left + dimensions.width - } else { - left = dimensions.left - } - - return left - } - + // Apply initial styles which don't need to change element.style.position = "absolute" element.style.zIndex = "9999" - if (maxWidth) { - element.style.maxWidth = `${maxWidth}px` - } - element.style.minWidth = `${dimensions.width}px` - element.style.maxHeight = `${maxHeight.toFixed(0)}px` - element.style.transformOrigin = `center ${positionSide}` - element.style[positionSide] = `${dimensions[positionSide]}px` - element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px` + // Observe both anchor and element and resize the popover as appropriate const resizeObserver = new ResizeObserver(entries => { - entries.forEach(() => { - dimensions = getDimensions() - element.style[positionSide] = `${dimensions[positionSide]}px` - element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px` - }) + entries.forEach(update) }) resizeObserver.observe(anchor) resizeObserver.observe(element) + + document.addEventListener("scroll", update, true) + return { destroy() { resizeObserver.disconnect() + document.removeEventListener("scroll", update, true) }, } } diff --git a/packages/bbui/src/Avatar/Avatar.svelte b/packages/bbui/src/Avatar/Avatar.svelte index 136a4fe24b..1e4cefd8ce 100644 --- a/packages/bbui/src/Avatar/Avatar.svelte +++ b/packages/bbui/src/Avatar/Avatar.svelte @@ -58,5 +58,6 @@ overflow: hidden; user-select: none; text-transform: uppercase; + flex-shrink: 0; } diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte index 36abcbf4da..979ec6a728 100644 --- a/packages/bbui/src/Button/Button.svelte +++ b/packages/bbui/src/Button/Button.svelte @@ -14,7 +14,7 @@ export let active = false export let tooltip = undefined export let dataCy - export let newStyles = false + export let newStyles = true let showTooltip = false @@ -28,6 +28,7 @@ class:spectrum-Button--quiet={quiet} class:new-styles={newStyles} class:active + class:disabled class="spectrum-Button spectrum-Button--size{size.toUpperCase()}" {disabled} data-cy={dataCy} @@ -108,7 +109,10 @@ border-color: transparent; color: var(--spectrum-global-color-gray-900); } - .spectrum-Button--secondary.new-styles:hover { + .spectrum-Button--secondary.new-styles:not(.disabled):hover { background: var(--spectrum-global-color-gray-300); } + .spectrum-Button--secondary.new-styles.disabled { + color: var(--spectrum-global-color-gray-500); + } diff --git a/packages/bbui/src/Drawer/DrawerContent.svelte b/packages/bbui/src/Drawer/DrawerContent.svelte index 28e0975d82..944a3f4313 100644 --- a/packages/bbui/src/Drawer/DrawerContent.svelte +++ b/packages/bbui/src/Drawer/DrawerContent.svelte @@ -34,7 +34,6 @@ display: none; } .main { - font-family: var(--font-sans); padding: var(--spacing-xl); } .main :global(textarea) { diff --git a/packages/bbui/src/Form/Core/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker.svelte index 6996525a76..10aae67ec6 100644 --- a/packages/bbui/src/Form/Core/DatePicker.svelte +++ b/packages/bbui/src/Form/Core/DatePicker.svelte @@ -264,7 +264,7 @@ max-height: 100%; } :global(.flatpickr-calendar) { - font-family: "Source Sans Pro", sans-serif; + font-family: var(--font-sans); } .is-disabled { pointer-events: none !important; diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte index 97bd1394b4..81348452c7 100644 --- a/packages/bbui/src/Form/Core/Picker.svelte +++ b/packages/bbui/src/Form/Core/Picker.svelte @@ -2,12 +2,12 @@ import "@spectrum-css/picker/dist/index-vars.css" import "@spectrum-css/popover/dist/index-vars.css" import "@spectrum-css/menu/dist/index-vars.css" - import { fly } from "svelte/transition" import { createEventDispatcher } from "svelte" import clickOutside from "../../Actions/click_outside" import Search from "./Search.svelte" import Icon from "../../Icon/Icon.svelte" import StatusLight from "../../StatusLight/StatusLight.svelte" + import Popover from "../../Popover/Popover.svelte" export let id = null export let disabled = false @@ -33,7 +33,10 @@ export let sort = false const dispatch = createEventDispatcher() + let searchTerm = null + let button + let popover $: sortedOptions = getSortedOptions(options, getOptionLabel, sort) $: filteredOptions = getFilteredOptions( @@ -76,77 +79,117 @@ } -
(open = false)}> - - {#if open} -
- {#if autocomplete} - (searchTerm = event.detail)} - {disabled} - placeholder="Search" - /> + {/if} + + + + (open = false)} + useAnchorWidth={!autoWidth} + maxWidth={autoWidth ? 400 : null} +> +
+ {#if autocomplete} + (searchTerm = event.detail)} + {disabled} + placeholder="Search" + /> + {/if} +
    + {#if placeholderOption} +
  • onSelectOption(null)} + > + {placeholderOption} + +
    • {/if} -
      - {#if placeholderOption} + {#if filteredOptions.length} + {#each filteredOptions as option, idx}
    • onSelectOption(null)} + on:click={() => onSelectOption(getOptionValue(option, idx))} + class:is-disabled={!isOptionEnabled(option)} > - {placeholderOption} + {#if getOptionIcon(option, idx)} + + + + {/if} + {#if getOptionColour(option, idx)} + + + + {/if} + + {getOptionLabel(option, idx)} +
      • - {/if} - {#if filteredOptions.length} - {#each filteredOptions as option, idx} -
    • onSelectOption(getOptionValue(option, idx))} - class:is-disabled={!isOptionEnabled(option)} - > - {#if getOptionIcon(option, idx)} - - - - {/if} - {#if getOptionColour(option, idx)} - - - - {/if} - - {getOptionLabel(option, idx)} - - -
      • - {/each} - {/if} -
    -
- {/if} -
+ {/each} + {/if} + +
+ diff --git a/packages/bbui/src/Form/Core/TextField.svelte b/packages/bbui/src/Form/Core/TextField.svelte index 0a723c140a..6a64876a2c 100644 --- a/packages/bbui/src/Form/Core/TextField.svelte +++ b/packages/bbui/src/Form/Core/TextField.svelte @@ -112,8 +112,4 @@ .spectrum-Textfield { width: 100%; } - input:disabled { - color: var(--spectrum-global-color-gray-600) !important; - -webkit-text-fill-color: var(--spectrum-global-color-gray-600) !important; - } diff --git a/packages/bbui/src/Icon/IconAvatar.svelte b/packages/bbui/src/Icon/IconAvatar.svelte index b404cdea9f..add51f5bdc 100644 --- a/packages/bbui/src/Icon/IconAvatar.svelte +++ b/packages/bbui/src/Icon/IconAvatar.svelte @@ -19,6 +19,7 @@ .icon { width: 28px; height: 28px; + flex: 0 0 28px; display: grid; place-items: center; border-radius: 50%; @@ -34,6 +35,7 @@ .icon.size--S { width: 22px; height: 22px; + flex: 0 0 22px; } .icon.size--S :global(.spectrum-Icon) { width: 16px; @@ -46,6 +48,7 @@ .icon.size--L { width: 40px; height: 40px; + flex: 0 0 40px; } .icon.size--L :global(.spectrum-Icon) { width: 28px; diff --git a/packages/bbui/src/InlineAlert/InlineAlert.svelte b/packages/bbui/src/InlineAlert/InlineAlert.svelte index 94ac6b2c2a..57e7296234 100644 --- a/packages/bbui/src/InlineAlert/InlineAlert.svelte +++ b/packages/bbui/src/InlineAlert/InlineAlert.svelte @@ -56,5 +56,6 @@ --spectrum-semantic-positive-icon-color: #2d9d78; --spectrum-semantic-negative-icon-color: #e34850; min-width: 100px; + margin: 0; } diff --git a/packages/bbui/src/Label/Label.svelte b/packages/bbui/src/Label/Label.svelte index 6b3392ce2d..ee6d9adf76 100644 --- a/packages/bbui/src/Label/Label.svelte +++ b/packages/bbui/src/Label/Label.svelte @@ -21,6 +21,7 @@ label { padding: 0; white-space: nowrap; + color: var(--spectrum-global-color-gray-600); } .muted { diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte index 2996bcc613..15aabd2c61 100644 --- a/packages/bbui/src/Layout/Page.svelte +++ b/packages/bbui/src/Layout/Page.svelte @@ -1,32 +1,95 @@ -
- +
+
+
+ +
+
+
{ + sidePanelVisble = false + }} + > + +
diff --git a/packages/bbui/src/List/ListItem.svelte b/packages/bbui/src/List/ListItem.svelte index 40d3c5541c..28015c4c57 100644 --- a/packages/bbui/src/List/ListItem.svelte +++ b/packages/bbui/src/List/ListItem.svelte @@ -30,9 +30,11 @@ {/if}
-
- -
+ {#if $$slots.default} +
+ +
+ {/if} diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte index cec270486a..19d361c8b1 100644 --- a/packages/bbui/src/Table/Table.svelte +++ b/packages/bbui/src/Table/Table.svelte @@ -21,6 +21,8 @@ * template: a HBS or JS binding to use as the value * background: the background color * color: the text color + * borderLeft: show a left border + * borderRight: show a right border */ export let data = [] export let schema = {} @@ -31,6 +33,7 @@ export let allowSelectRows export let allowEditRows = true export let allowEditColumns = true + export let allowClickRows = true export let selectedRows = [] export let customRenderers = [] export let disableSorting = false @@ -270,6 +273,17 @@ if (schema[field].align === "Right") { styles[field] += "justify-content: flex-end; text-align: right;" } + if (schema[field].borderLeft) { + styles[field] += + "border-left: 1px solid var(--spectrum-global-color-gray-200);" + } + if (schema[field].borderLeft) { + styles[field] += + "border-right: 1px solid var(--spectrum-global-color-gray-200);" + } + if (schema[field].minWidth) { + styles[field] += `min-width: ${schema[field].minWidth};` + } }) return styles } @@ -290,7 +304,11 @@ {:else} -
+
{#if fields.length}
{#if showEditColumn} @@ -356,7 +374,7 @@ {/if} {#if sortedRows?.length} {#each sortedRows as row, idx} -
+
{#if showEditColumn}
diff --git a/packages/bbui/src/Tags/Tag.svelte b/packages/bbui/src/Tags/Tag.svelte index f7089decdb..0cdd6c385d 100644 --- a/packages/bbui/src/Tags/Tag.svelte +++ b/packages/bbui/src/Tags/Tag.svelte @@ -37,7 +37,7 @@ diff --git a/packages/bbui/src/Tags/Tags.svelte b/packages/bbui/src/Tags/Tags.svelte index 36d34507f3..ebca64b774 100644 --- a/packages/bbui/src/Tags/Tags.svelte +++ b/packages/bbui/src/Tags/Tags.svelte @@ -5,3 +5,13 @@
+ + diff --git a/packages/bbui/src/Typography/Heading.svelte b/packages/bbui/src/Typography/Heading.svelte index 077c0a4878..5f243ad5a6 100644 --- a/packages/bbui/src/Typography/Heading.svelte +++ b/packages/bbui/src/Typography/Heading.svelte @@ -15,3 +15,9 @@ > + + diff --git a/packages/bbui/src/bbui.css b/packages/bbui/src/bbui.css index f98f27bf58..ef3483d3df 100644 --- a/packages/bbui/src/bbui.css +++ b/packages/bbui/src/bbui.css @@ -40,12 +40,14 @@ --rounded-medium: 8px; --rounded-large: 16px; - --font-sans: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter", - "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", - "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter", + "Helvetica Neue", Arial, "Noto Sans", sans-serif; + --font-accent: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter", + "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-serif: "Georgia", Cambria, Times New Roman, Times, serif; --font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --spectrum-alias-body-text-font-family: var(--font-sans); font-size: 16px; --font-size-xs: 0.75rem; @@ -89,6 +91,8 @@ --border-light-2: 2px var(--grey-3) solid; --border-blue: 2px var(--blue) solid; --border-transparent: 2px transparent solid; + + --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-600); } a { diff --git a/packages/builder/assets/bb-emblem.svg b/packages/builder/assets/bb-emblem.svg index 9f4f3690d5..7d499e4862 100644 --- a/packages/builder/assets/bb-emblem.svg +++ b/packages/builder/assets/bb-emblem.svg @@ -3,7 +3,7 @@ diff --git a/packages/builder/package.json b/packages/builder/package.json index e1086fde16..eefdd9d0f1 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -87,7 +87,7 @@ "shortid": "2.2.15", "svelte-dnd-action": "^0.9.8", "svelte-loading-spinners": "^0.1.1", - "svelte-portal": "0.1.0", + "svelte-portal": "1.0.0", "uuid": "8.3.1", "yup": "0.29.2" }, diff --git a/packages/builder/src/App.svelte b/packages/builder/src/App.svelte index 4d193df104..04846e01bf 100644 --- a/packages/builder/src/App.svelte +++ b/packages/builder/src/App.svelte @@ -11,11 +11,8 @@