From 250fc89cb144463bf72eee5ec3392955d394fbb7 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Wed, 17 Jan 2024 17:09:14 +0100 Subject: [PATCH 01/12] add flex gap story --- packages/uui-tabs/lib/uui-tabs.story.ts | 49 +++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/packages/uui-tabs/lib/uui-tabs.story.ts b/packages/uui-tabs/lib/uui-tabs.story.ts index afa7a31cf..7867ff2f4 100644 --- a/packages/uui-tabs/lib/uui-tabs.story.ts +++ b/packages/uui-tabs/lib/uui-tabs.story.ts @@ -172,3 +172,52 @@ WithIcons.parameters = { }, }, }; + +export const WitchSpacing: Story = props => html` +

Tabs with Spacing

+ +
+ + + + Content + + + + Packages + + + + Media + + +
+ +`; +WitchSpacing.parameters = { + docs: { + source: { + code: ` + + + + Content + + + + Packages + + + + Media + + `, + }, + }, +}; From 52b51d95303312ff2ac4b30882a556d5b9be9545 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Fri, 19 Jan 2024 19:44:26 +1300 Subject: [PATCH 02/12] add missing imports in story --- packages/uui-tabs/lib/uui-tabs.story.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/uui-tabs/lib/uui-tabs.story.ts b/packages/uui-tabs/lib/uui-tabs.story.ts index afa7a31cf..8b7889711 100644 --- a/packages/uui-tabs/lib/uui-tabs.story.ts +++ b/packages/uui-tabs/lib/uui-tabs.story.ts @@ -1,6 +1,9 @@ import '.'; import '@umbraco-ui/uui-icon/lib'; import '@umbraco-ui/uui-icon-registry-essential/lib'; +import '@umbraco-ui/uui-button/lib'; +import '@umbraco-ui/uui-popover-container/lib'; +import '@umbraco-ui/uui-symbol-more/lib'; import { Story } from '@storybook/web-components'; import { html } from 'lit'; From add6be12e10fd779a5e65b59ad62956957c968e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Fri, 19 Jan 2024 20:06:18 +1300 Subject: [PATCH 03/12] move contents into main to prevent gap from being applied to popover --- .../uui-tabs/lib/uui-tab-group.element.ts | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/uui-tabs/lib/uui-tab-group.element.ts b/packages/uui-tabs/lib/uui-tab-group.element.ts index 1e089d6f2..da8a245d8 100644 --- a/packages/uui-tabs/lib/uui-tab-group.element.ts +++ b/packages/uui-tabs/lib/uui-tab-group.element.ts @@ -212,15 +212,17 @@ export class UUITabGroupElement extends LitElement { render() { return html` - - +
+ + +
Date: Fri, 19 Jan 2024 20:06:44 +1300 Subject: [PATCH 04/12] add gap css var and add it to calculation --- packages/uui-tabs/lib/uui-tab-group.element.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/uui-tabs/lib/uui-tab-group.element.ts b/packages/uui-tabs/lib/uui-tab-group.element.ts index da8a245d8..bf1c7f692 100644 --- a/packages/uui-tabs/lib/uui-tab-group.element.ts +++ b/packages/uui-tabs/lib/uui-tab-group.element.ts @@ -15,6 +15,7 @@ import type { UUITabElement } from './uui-tab.element'; * @cssprop --uui-tab-group-dropdown-tab-text-hover - Define the tab text hover color in the dropdown * @cssprop --uui-tab-group-dropdown-tab-text-active - Define the tab text active color in the dropdown * @cssprop --uui-tab-group-dropdown-background - Define the background color of the dropdown + * @cssprop --uui-tab-group-gap - Define the gap between elements dropdown. Only pixel values are valid */ @defineElement('uui-tab-group') export class UUITabGroupElement extends LitElement { @@ -185,11 +186,15 @@ export class UUITabGroupElement extends LitElement { // Whenever a tab is added or removed, we need to recalculate the breakpoints await this.updateComplete; // Wait for the tabs to be rendered + const gap = Number.parseFloat( + this.style.getPropertyValue('--uui-tab-group-gap') + ); let childrenWidth = 0; for (let i = 0; i < this.#tabElements.length; i++) { + const isLast = i === this.#tabElements.length - 1 ? 0 : 1; this.#tabElements[i].style.display = ''; - childrenWidth += this.#tabElements[i].offsetWidth; + childrenWidth += this.#tabElements[i].offsetWidth + gap * isLast; // Add gap to calculation except for last element. this.#visibilityBreakpoints[i] = childrenWidth; } @@ -244,6 +249,7 @@ export class UUITabGroupElement extends LitElement { min-height: 48px; overflow: hidden; text-wrap: nowrap; + gap: var(--uui-tab-group-gap, 0); } #popover-container { From c3c4e2a44d58d32930ffe848637f474da06a9d6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Mon, 22 Jan 2024 10:35:25 +0100 Subject: [PATCH 05/12] fix NaN issues --- packages/uui-tabs/lib/uui-tab-group.element.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/uui-tabs/lib/uui-tab-group.element.ts b/packages/uui-tabs/lib/uui-tab-group.element.ts index bf1c7f692..f535915ee 100644 --- a/packages/uui-tabs/lib/uui-tab-group.element.ts +++ b/packages/uui-tabs/lib/uui-tab-group.element.ts @@ -186,9 +186,10 @@ export class UUITabGroupElement extends LitElement { // Whenever a tab is added or removed, we need to recalculate the breakpoints await this.updateComplete; // Wait for the tabs to be rendered - const gap = Number.parseFloat( + const gapCSSVar = Number.parseFloat( this.style.getPropertyValue('--uui-tab-group-gap') ); + const gap = Number.isNaN(gapCSSVar) ? 0 : gapCSSVar; let childrenWidth = 0; for (let i = 0; i < this.#tabElements.length; i++) { From 172d80286c01a62858128c3687c4686055c5c4fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Mon, 22 Jan 2024 10:35:36 +0100 Subject: [PATCH 06/12] update story --- packages/uui-tabs/lib/uui-tabs.story.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/uui-tabs/lib/uui-tabs.story.ts b/packages/uui-tabs/lib/uui-tabs.story.ts index 8ceca34ff..5d9ccd9ac 100644 --- a/packages/uui-tabs/lib/uui-tabs.story.ts +++ b/packages/uui-tabs/lib/uui-tabs.story.ts @@ -138,15 +138,15 @@ export const WithIcons: Story = props => html` height: 70px; font-size: 12px; ${props.inlineStyles}"> - + Content - + Packages - + Media @@ -183,19 +183,19 @@ export const WitchSpacing: Story = props => html` - + Content - + Packages - + Media From fb53a969e6910783fa85e822cd52bf69a0361238 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 23 Jan 2024 11:07:52 +0100 Subject: [PATCH 07/12] remove double text-wrap --- packages/uui-tabs/lib/uui-tab-group.element.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/uui-tabs/lib/uui-tab-group.element.ts b/packages/uui-tabs/lib/uui-tab-group.element.ts index f535915ee..073e091c8 100644 --- a/packages/uui-tabs/lib/uui-tab-group.element.ts +++ b/packages/uui-tabs/lib/uui-tab-group.element.ts @@ -244,12 +244,11 @@ export class UUITabGroupElement extends LitElement { css` #main { display: flex; - flex-wrap: nowrap; - color: var(--uui-tab-text); height: 100%; min-height: 48px; overflow: hidden; text-wrap: nowrap; + color: var(--uui-tab-text); gap: var(--uui-tab-group-gap, 0); } From 5cbdb6af4ea1cf7a9c144172d59c09a47b5c6dce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 23 Jan 2024 13:05:32 +0100 Subject: [PATCH 08/12] calculation change --- .../uui-tabs/lib/uui-tab-group.element.ts | 105 +++++++++++------- packages/uui-tabs/lib/uui-tabs.story.ts | 2 +- 2 files changed, 63 insertions(+), 44 deletions(-) diff --git a/packages/uui-tabs/lib/uui-tab-group.element.ts b/packages/uui-tabs/lib/uui-tab-group.element.ts index 073e091c8..57394ff0f 100644 --- a/packages/uui-tabs/lib/uui-tab-group.element.ts +++ b/packages/uui-tabs/lib/uui-tab-group.element.ts @@ -31,6 +31,9 @@ export class UUITabGroupElement extends LitElement { }) private _slottedNodes?: HTMLElement[]; + /** Stores the current gap used in the breakpoints */ + #currentGap = 0; + /** * Set the flex direction of the content of the dropdown. * @type {string} @@ -70,7 +73,16 @@ export class UUITabGroupElement extends LitElement { } #onResize(entries: ResizeObserverEntry[]) { - this.#updateCollapsibleTabs(entries[0].contentBoxSize[0].inlineSize); + // Check if the gap css custom property has changed. + const gapCSSVar = Number.parseFloat( + this.style.getPropertyValue('--uui-tab-group-gap') + ); + const newGap = Number.isNaN(gapCSSVar) ? 0 : gapCSSVar; + if (newGap !== this.#currentGap) { + this.#calculateBreakPoints(); + } else { + this.#updateCollapsibleTabs(entries[0].contentBoxSize[0].inlineSize); + } } #onSlotChange() { @@ -118,13 +130,39 @@ export class UUITabGroupElement extends LitElement { } }; + async #calculateBreakPoints() { + // Whenever a tab is added or removed, we need to recalculate the breakpoints + + await this.updateComplete; // Wait for the tabs to be rendered + const gapCSSVar = Number.parseFloat( + this.style.getPropertyValue('--uui-tab-group-gap') + ); + const gap = Number.isNaN(gapCSSVar) ? 0 : gapCSSVar; + this.#currentGap = gap; + let childrenWidth = 0; + + for (let i = 0; i < this.#tabElements.length; i++) { + this.#tabElements[i].style.display = ''; + childrenWidth += this.#tabElements[i].offsetWidth; + this.#visibilityBreakpoints[i] = childrenWidth; + // Add the gap, which will then be included in the next breakpoint: + childrenWidth += gap; + } + + this.#updateCollapsibleTabs(this.offsetWidth); + } + + #setTabArray() { + this.#tabElements = this._slottedNodes ? this._slottedNodes : []; + this.#calculateBreakPoints(); + } + #updateCollapsibleTabs(containerWidth: number) { - const buttonWidth = this._moreButtonElement.offsetWidth; + const moreButtonWidth = this._moreButtonElement.offsetWidth; - // Only update if the container is smaller than the last breakpoint - const lastBreakpoint = this.#visibilityBreakpoints.slice(-1)[0]; - if (lastBreakpoint < containerWidth && this.#hiddenTabElements.length === 0) - return; + const containerWithoutButtonWidth = + containerWidth - + (moreButtonWidth ? moreButtonWidth + this.#currentGap : 0); // Do the update // Reset the hidden tabs @@ -136,18 +174,19 @@ export class UUITabGroupElement extends LitElement { let hasActiveTabInDropdown = false; - for (let i = 0; i < this.#visibilityBreakpoints.length; i++) { + const len = this.#visibilityBreakpoints.length; + for (let i = 0; i < len; i++) { const breakpoint = this.#visibilityBreakpoints[i]; const tab = this.#tabElements[i] as UUITabElement; - // Subtract the button width when we are not at the last breakpoint - const containerWidthButtonWidth = - containerWidth - - (i !== this.#visibilityBreakpoints.length - 1 ? buttonWidth : 0); - - if (breakpoint < containerWidthButtonWidth) { + // If breakpoint is smaller than the container width, then show the tab. + // If last breakpoint, then we will use the containerWidth, as we do not want to include the more-button in that calculation. + if ( + breakpoint <= + (i === len - 1 ? containerWidth : containerWithoutButtonWidth) + ) { + // Show this tab: tab.style.display = ''; - this._moreButtonElement.style.display = 'none'; } else { // Make a proxy tab to put in the hidden tabs container and link it to the original tab const proxyTab = tab.cloneNode(true) as UUITabElement; @@ -163,7 +202,6 @@ export class UUITabGroupElement extends LitElement { this.#hiddenTabElements.push(proxyTab); tab.style.display = 'none'; - this._moreButtonElement.style.display = ''; if (tab.active) { hasActiveTabInDropdown = true; } @@ -171,8 +209,13 @@ export class UUITabGroupElement extends LitElement { } if (this.#hiddenTabElements.length === 0) { + // Hide more button: + this._moreButtonElement.style.display = 'none'; // close the popover this._popoverContainerElement.hidePopover(); + } else { + // Show more button: + this._moreButtonElement.style.display = ''; } hasActiveTabInDropdown @@ -182,34 +225,6 @@ export class UUITabGroupElement extends LitElement { this.requestUpdate(); } - async #calculateBreakPoints() { - // Whenever a tab is added or removed, we need to recalculate the breakpoints - - await this.updateComplete; // Wait for the tabs to be rendered - const gapCSSVar = Number.parseFloat( - this.style.getPropertyValue('--uui-tab-group-gap') - ); - const gap = Number.isNaN(gapCSSVar) ? 0 : gapCSSVar; - let childrenWidth = 0; - - for (let i = 0; i < this.#tabElements.length; i++) { - const isLast = i === this.#tabElements.length - 1 ? 0 : 1; - this.#tabElements[i].style.display = ''; - childrenWidth += this.#tabElements[i].offsetWidth + gap * isLast; // Add gap to calculation except for last element. - this.#visibilityBreakpoints[i] = childrenWidth; - } - - const tolerance = 2; - this.style.width = childrenWidth + tolerance + 'px'; - - this.#updateCollapsibleTabs(this.offsetWidth); - } - - #setTabArray() { - this.#tabElements = this._slottedNodes ? this._slottedNodes : []; - this.#calculateBreakPoints(); - } - #isElementTabLike(el: any): el is UUITabElement { return ( typeof el === 'object' && 'active' in el && typeof el.active === 'boolean' @@ -242,6 +257,10 @@ export class UUITabGroupElement extends LitElement { static styles = [ css` + :host { + width: 100%; + } + #main { display: flex; height: 100%; diff --git a/packages/uui-tabs/lib/uui-tabs.story.ts b/packages/uui-tabs/lib/uui-tabs.story.ts index 5d9ccd9ac..950e4a101 100644 --- a/packages/uui-tabs/lib/uui-tabs.story.ts +++ b/packages/uui-tabs/lib/uui-tabs.story.ts @@ -183,7 +183,7 @@ export const WitchSpacing: Story = props => html` From 50b5bee6e4cdbcaadf9eb1a62c17a6de51671f34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Tue, 23 Jan 2024 13:40:50 +0100 Subject: [PATCH 09/12] test story --- packages/uui-tabs/lib/uui-tabs.story.ts | 52 +++++++++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/packages/uui-tabs/lib/uui-tabs.story.ts b/packages/uui-tabs/lib/uui-tabs.story.ts index 950e4a101..a27d0875c 100644 --- a/packages/uui-tabs/lib/uui-tabs.story.ts +++ b/packages/uui-tabs/lib/uui-tabs.story.ts @@ -4,6 +4,7 @@ import '@umbraco-ui/uui-icon-registry-essential/lib'; import '@umbraco-ui/uui-button/lib'; import '@umbraco-ui/uui-popover-container/lib'; import '@umbraco-ui/uui-symbol-more/lib'; +import '@umbraco-ui/uui-input/lib'; import { Story } from '@storybook/web-components'; import { html } from 'lit'; @@ -224,3 +225,54 @@ WitchSpacing.parameters = { }, }, }; + +export const FlexLayout: Story = props => html` +

Tabs with Spacing

+

We want the input to grow and the tabs to take up the remaining space.

+ +
+ + + + + Content + + + + Packages + + + + Media + + +
+ +`; +FlexLayout.parameters = { + docs: { + source: { + code: ` + + + + Content + + + + Packages + + + + Media + + `, + }, + }, +}; From a489af60cf09f8555fd878ebe71f01054cb7e51e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Tue, 23 Jan 2024 15:14:56 +0100 Subject: [PATCH 10/12] fix test story --- packages/uui-tabs/lib/uui-tabs.story.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/uui-tabs/lib/uui-tabs.story.ts b/packages/uui-tabs/lib/uui-tabs.story.ts index a27d0875c..735012c89 100644 --- a/packages/uui-tabs/lib/uui-tabs.story.ts +++ b/packages/uui-tabs/lib/uui-tabs.story.ts @@ -231,12 +231,13 @@ export const FlexLayout: Story = props => html`

We want the input to grow and the tabs to take up the remaining space.

- + style="display: flex; outline: 1px solid black; max-width: 800px; height: 100%; align-items: center; padding-left: 12px;"> + From e3423f8cbbd08edad1234c5b1565f0b350b9d2bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Tue, 23 Jan 2024 15:15:03 +0100 Subject: [PATCH 11/12] add max width --- packages/uui-tabs/lib/uui-tab-group.element.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/uui-tabs/lib/uui-tab-group.element.ts b/packages/uui-tabs/lib/uui-tab-group.element.ts index 57394ff0f..41aa5a95e 100644 --- a/packages/uui-tabs/lib/uui-tab-group.element.ts +++ b/packages/uui-tabs/lib/uui-tab-group.element.ts @@ -149,6 +149,9 @@ export class UUITabGroupElement extends LitElement { childrenWidth += gap; } + const tolerance = 2; + this.style.maxWidth = childrenWidth - gap + tolerance + 'px'; + this.#updateCollapsibleTabs(this.offsetWidth); } From ade35f7487305bf8ff418078ca98329ba84fce37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 23 Jan 2024 15:40:08 +0100 Subject: [PATCH 12/12] size corrections --- packages/uui-tabs/lib/uui-tab.element.ts | 2 +- packages/uui-tabs/lib/uui-tabs.story.ts | 24 +++++++++++++----------- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/packages/uui-tabs/lib/uui-tab.element.ts b/packages/uui-tabs/lib/uui-tab.element.ts index 2ed39d170..2e615c213 100644 --- a/packages/uui-tabs/lib/uui-tab.element.ts +++ b/packages/uui-tabs/lib/uui-tab.element.ts @@ -115,7 +115,7 @@ export class UUITabElement extends ActiveMixin(LabelMixin('', LitElement)) { height: 100%; min-height: var(--uui-size-12); min-width: 70px; - padding: var(--uui-size-2) + padding: var(--uui-size-3) var(--uui-tab-padding-horizontal, var(--uui-size-5)); border: none; font-size: inherit; diff --git a/packages/uui-tabs/lib/uui-tabs.story.ts b/packages/uui-tabs/lib/uui-tabs.story.ts index 735012c89..0f1480a09 100644 --- a/packages/uui-tabs/lib/uui-tabs.story.ts +++ b/packages/uui-tabs/lib/uui-tabs.story.ts @@ -85,7 +85,7 @@ export const Navbar: Story = () => html` style=" display: flex; height: 60px; - font-size: 16px; + font-size: var(--uui-type-default-size); "> Content @@ -104,7 +104,7 @@ export const UsingHref: Story = () => html` style=" display: flex; height: 60px; - font-size: 16px; + font-size: var(--uui-type-default-size); "> @@ -136,8 +136,7 @@ export const WithIcons: Story = props => html` @@ -177,8 +176,8 @@ WithIcons.parameters = { }, }; -export const WitchSpacing: Story = props => html` -

Tabs with Spacing

+export const WithGap: Story = props => html` +

Tabs with custom gap

html` style=" --uui-tab-group-gap: 180px; margin: 0 auto; - font-size: 12px; + font-size: var(--uui-type-small-size); ${props.inlineStyles}"> @@ -204,7 +203,7 @@ export const WitchSpacing: Story = props => html`
`; -WitchSpacing.parameters = { +WithGap.parameters = { docs: { source: { code: ` @@ -227,8 +226,11 @@ WitchSpacing.parameters = { }; export const FlexLayout: Story = props => html` -

Tabs with Spacing

-

We want the input to grow and the tabs to take up the remaining space.

+

Tabs implemented into Flex-box scenario

+

+ In this case we want the input to grow and the tabs to take up the remaining + space: +

@@ -238,7 +240,7 @@ export const FlexLayout: Story = props => html` style=" flex-grow: 1; --uui-tab-group-gap: 25px; - font-size: 12px; + font-size: var(--uui-type-small-size); ${props.inlineStyles}">