fix(uui-tab-group): layout is causing issues due to missing display: flex (#730)

* add flex layout story

* use mainElement for width

* update stories

* fix stories

* make tab group flex

* fix height

* fix: add missing imports in test file

---------

Co-authored-by: Jacob Overgaard <[email protected]>

Author: JesmoDev

packages/uui-tabs/lib/uui-tab-group.element.ts

@@ -25,6 +25,8 @@ export class UUITabGroupElement extends LitElement {
   @query('#popover-container')
   private _popoverContainerElement!: UUIPopoverContainerElement;
 
+  @query('#main') private _mainElement!: HTMLElement;
+
   @queryAssignedElements({
     flatten: true,
     selector: 'uui-tab, [uui-tab], [role=tab]',
@@ -61,19 +63,24 @@ export class UUITabGroupElement extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
+    this.#initialize();
+  }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#resizeObserver.unobserve(this);
+    this.#cleanupTabs();
+  }
+
+  async #initialize() {
     demandCustomElement(this, 'uui-button');
     demandCustomElement(this, 'uui-popover-container');
     demandCustomElement(this, 'uui-symbol-more');
 
-    this.#resizeObserver.observe(this);
     if (!this.hasAttribute('role')) this.setAttribute('role', 'tablist');
-  }
 
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#resizeObserver.unobserve(this);
-    this.#cleanupTabs();
+    await this.updateComplete;
+    this.#resizeObserver.observe(this._mainElement);
   }
 
   #onResize(entries: ResizeObserverEntry[]) {
@@ -174,9 +181,9 @@ export class UUITabGroupElement extends LitElement {
     }
 
     const tolerance = 2;
-    this.style.maxWidth = childrenWidth - gap + tolerance + 'px';
+    this._mainElement.style.width = childrenWidth - gap + tolerance + 'px';
 
-    this.#updateCollapsibleTabs(this.offsetWidth);
+    this.#updateCollapsibleTabs(this._mainElement.offsetWidth);
   }
 
   #setTabArray() {
@@ -286,12 +293,15 @@ export class UUITabGroupElement extends LitElement {
   static styles = [
     css`
       :host {
-        width: 100%;
+        min-width: 0;
+        display: flex;
+        height: 100%;
       }
 
       #main {
         display: flex;
         justify-content: space-between;
+        overflow: hidden;
       }
 
       #grid {

packages/uui-tabs/lib/uui-tabs.story.ts

@@ -68,7 +68,7 @@ export const WithBorders: Story = () => html`
     display: flex;
     --uui-tab-divider: var(--uui-color-divider-standalone);
     ">
-    <uui-tab-group style="display: flex;">
+    <uui-tab-group>
       <uui-tab label="content"> Content </uui-tab>
       <uui-tab label="Packages"> Packages </uui-tab>
       <uui-tab label="Media" active> Media </uui-tab>
@@ -87,7 +87,7 @@ export const Navbar: Story = () => html`
     height: 60px;
     font-size: var(--uui-type-default-size);
     ">
-    <uui-tab-group style="display: flex;">
+    <uui-tab-group>
       <uui-tab label="content"> Content </uui-tab>
       <uui-tab label="Packages" active> Packages </uui-tab>
       <uui-tab label="Media"> Media </uui-tab>
@@ -291,17 +291,49 @@ Async.parameters = {
   },
 };
 
+export const FlexLayout: Story = props => html`
+  <uui-icon-registry-essential>
+    <div style="display: flex;">
+      <uui-input style="min-width: 200px; flex-grow: 1"></uui-input>
+      <uui-tab-group
+        dropdown-direction="horizontal"
+        style="
+        ${props.inlineStyles}">
+        <uui-tab label="content">Content</uui-tab>
+        <uui-tab active label="packages">Packages</uui-tab>
+        <uui-tab label="media">Media</uui-tab>
+        <uui-tab label="settings">Settings</uui-tab>
+        <uui-tab label="translations">Translations</uui-tab>
+      </uui-tab-group>
+    </div>
+  </uui-icon-registry-essential>
+`;
+FlexLayout.parameters = {
+  docs: {
+    source: {
+      code: `
+      <div style="display: flex">
+        <uui-tab-group style="margin: auto">
+          <uui-tab label="content">Content</uui-tab>
+          <uui-tab active label="packages">Packages</uui-tab>
+          <uui-tab label="media">Media</uui-tab>
+          <uui-tab label="settings">Settings</uui-tab>
+          <uui-tab label="translations">Translations</uui-tab>
+          </uui-tab-group>
+      </div>
+      `,
+    },
+  },
+};
+
 export const CenterAlign: Story = props => html`
   <h3>Tabs implemented into Flex-box scenario</h3>
   <p>Here the tab group is center aligned in a flex-box container.</p>
   <uui-icon-registry-essential>
-    <div style="display: flex;">
+    <div style="display: flex; justify-content: center">
       <uui-tab-group
         dropdown-direction="horizontal"
-        style="
-          margin: auto;
-        --uui-tab-group-gap: 25px;
-        font-size: var(--uui-type-small-size);
+        style="--uui-tab-group-gap: 25px;
         ${props.inlineStyles}">
         <uui-tab label="content">Content</uui-tab>
         <uui-tab active label="packages">Packages</uui-tab>
@@ -334,13 +366,11 @@ export const RightAlign: Story = props => html`
   <h3>Tabs implemented into Flex-box scenario</h3>
   <p>Here the tab group is right aligned in a flex-box container.</p>
   <uui-icon-registry-essential>
-    <div style="display: flex;">
+    <div style="display: flex; justify-content: right">
       <uui-tab-group
         dropdown-direction="horizontal"
         style="
-          margin-left: auto;
         --uui-tab-group-gap: 25px;
-        font-size: var(--uui-type-small-size);
         ${props.inlineStyles}">
         <uui-tab label="content">Content</uui-tab>
         <uui-tab active label="packages">Packages</uui-tab>

packages/uui-tabs/lib/uui-tabs.test.ts

@@ -3,6 +3,9 @@ import { expect, fixture, html, oneEvent } from '@open-wc/testing';
 import { UUITabGroupElement } from './uui-tab-group.element';
 import { UUITabElement } from './uui-tab.element';
 
+import '@umbraco-ui/uui-button/lib';
+import '@umbraco-ui/uui-popover-container/lib';
+
 describe('UuiTab', () => {
   let element: UUITabGroupElement;
   let tabs: UUITabElement[];