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..63f07b7cd6 100644 --- a/packages/bbui/src/Form/Core/Picker.svelte +++ b/packages/bbui/src/Form/Core/Picker.svelte @@ -88,8 +88,8 @@ on:click={onClick} > {#if fieldIcon} - - + + {/if} {#if fieldColour} @@ -168,8 +168,8 @@ class:is-disabled={!isOptionEnabled(option)} > {#if getOptionIcon(option, idx)} - - + + {/if} {#if getOptionColour(option, idx)} @@ -241,6 +241,9 @@ .option-extra { padding-right: 8px; } + .option-extra.icon { + margin: 0 -1px; + } .spectrum-Popover :global(.spectrum-Search) { margin-top: -1px; 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..02f089b340 100644 --- a/packages/bbui/src/Layout/Page.svelte +++ b/packages/bbui/src/Layout/Page.svelte @@ -1,32 +1,84 @@ -
- +
+
+
+ +
+
+
{ + 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..00ba5ab37c 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 = {} @@ -270,6 +272,14 @@ 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);" + } }) return styles } @@ -290,7 +300,11 @@ {:else} -
+
{#if fields.length}
{#if showEditColumn} @@ -433,7 +447,6 @@ /* Wrapper */ .wrapper { position: relative; - z-index: 0; --table-bg: var(--spectrum-global-color-gray-50); --table-border: 1px solid var(--spectrum-alias-border-color-mid); --cell-padding: var(--spectrum-global-dimension-size-250); @@ -460,6 +473,9 @@ display: grid; overflow: auto; } + .spectrum-Table.no-scroll { + overflow: visible; + } /* Header */ .spectrum-Table-head { @@ -548,10 +564,7 @@ display: contents; } .spectrum-Table-row:hover .spectrum-Table-cell { - /*background-color: var(--hover-bg) !important;*/ - } - .spectrum-Table-row:hover .spectrum-Table-cell:after { - background-color: var(--spectrum-alias-highlight-hover); + background-color: var(--spectrum-global-color-gray-100); } .wrapper--quiet .spectrum-Table-row { border-left: none; @@ -584,24 +597,13 @@ border-bottom: 1px solid var(--spectrum-alias-border-color-mid); background-color: var(--table-bg); z-index: auto; + transition: background-color 130ms ease-out; } .spectrum-Table-cell--edit { position: sticky; left: 0; z-index: 2; } - .spectrum-Table-cell:after { - content: ""; - position: absolute; - width: 100%; - height: 100%; - background-color: transparent; - top: 0; - left: 0; - pointer-events: none; - transition: background-color - var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out; - } /* Placeholder */ .placeholder { diff --git a/packages/bbui/src/Tabs/Tab.svelte b/packages/bbui/src/Tabs/Tab.svelte index c25be7dbc9..637371ded2 100644 --- a/packages/bbui/src/Tabs/Tab.svelte +++ b/packages/bbui/src/Tabs/Tab.svelte @@ -82,7 +82,8 @@ .spectrum-Tabs-item { color: var(--spectrum-global-color-gray-600); } - .spectrum-Tabs-item.is-selected { + .spectrum-Tabs-item.is-selected, + .spectrum-Tabs-item:hover { color: var(--spectrum-global-color-gray-900); } 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..b3213ef694 100644 --- a/packages/bbui/src/bbui.css +++ b/packages/bbui/src/bbui.css @@ -40,12 +40,15 @@ --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; 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 e22ca2bd89..01a8882bb3 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 @@