fix(tab-bar): resize callback is not fired when a new tab has been ad…

…ded (#389) * fix(tab-bar): replace content part with layout element * test(tab-bar): update snapshot and test case * chore: update package-lock * fix(tab-bar): change part content style Co-authored-by: wsuwt <[email protected]>
Refinitiv · Jul 11, 2022 · 13408e1 · 13408e1
1 parent b7d1671
commit 13408e1
Show file tree

Hide file tree

Showing 7 changed files with 1,079 additions and 1,066 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/elemental-theme/src/custom-elements/ef-tab-bar.less b/packages/elemental-theme/src/custom-elements/ef-tab-bar.less
@@ -1,5 +1,6 @@
 @import 'element:ef-tab';
 @import 'element:ef-button';
+@import 'element:ef-layout';
 
 :host {
   position: relative;

diff --git a/packages/elements/src/tab-bar/__snapshots__/Template.md b/packages/elements/src/tab-bar/__snapshots__/Template.md
@@ -13,10 +13,10 @@
   textpos="after"
 >
 </ef-button>
-<div part="content">
+<ef-layout part="content">
   <slot>
   </slot>
-</div>
+</ef-layout>
 <ef-button
   aria-hidden="true"
   empty=""

diff --git a/packages/elements/src/tab-bar/__test__/tab-bar.accessibility.test.js b/packages/elements/src/tab-bar/__test__/tab-bar.accessibility.test.js
@@ -1,4 +1,4 @@
-import { fixture, expect, keyboardEvent, isIE, oneEvent } from '@refinitiv-ui/test-helpers';
+import { fixture, expect, keyboardEvent, isIE } from '@refinitiv-ui/test-helpers';
 
 import '@refinitiv-ui/elements/tab-bar';
 import '@refinitiv-ui/elemental-theme/light/ef-tab-bar';

diff --git a/packages/elements/src/tab-bar/__test__/tab-bar.template.test.js b/packages/elements/src/tab-bar/__test__/tab-bar.template.test.js
@@ -1,4 +1,4 @@
-import { fixture, expect, elementUpdated, aTimeout, oneEvent } from '@refinitiv-ui/test-helpers';
+import { fixture, expect, elementUpdated, aTimeout } from '@refinitiv-ui/test-helpers';
 
 import '@refinitiv-ui/elements/tab-bar';
 import '@refinitiv-ui/elemental-theme/light/ef-tab-bar';
@@ -14,7 +14,7 @@ const scrollUpdated = async () => {
 describe('tab-bar/Template', () => {
   it('DOM structure is correct', async () => {
     const el = await fixture('<ef-tab-bar></ef-tab-bar>');
-    expect(el).shadowDom.to.equalSnapshot();
+    expect(el).shadowDom.to.equalSnapshot({ ignoreAttributes: ['style'] });
   });
 
   describe('level', () => {
@@ -161,5 +161,21 @@ describe('tab-bar/Template', () => {
       expect(leftScrollBtn).equal(null);
       expect(rightScrollBtn).equal(null);
     });
+
+    it('Should show scroll button correctly when a new tab has been added', async () => {
+      el = await fixture(`
+        <ef-tab-bar style="width: 150px;">
+          <ef-tab>Home</ef-tab>
+          <ef-tab>About</ef-tab>
+        </ef-tab-bar>
+      `);
+      rightScrollBtn = el.shadowRoot.querySelector('[part=right-btn]');
+      expect(getElementStyle(rightScrollBtn, 'display')).equal('none');
+      const newTab = document.createElement('ef-tab');
+      newTab.label = "Application";
+      el.appendChild(newTab);
+      await elementUpdated();
+      expect(getElementStyle(rightScrollBtn, 'display')).equal('flex');
+    });
   });
 });
diff --git a/packages/elements/src/tab-bar/index.ts b/packages/elements/src/tab-bar/index.ts
@@ -4,8 +4,8 @@ import {
   TemplateResult,
   CSSResultGroup,
   PropertyValues,
-  ResponsiveElement,
-  ElementSize
+  BasicElement,
+  ResizeEvent
 } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
@@ -15,6 +15,7 @@ import { tweenAnimate } from './helpers/animate.js';
 import { Tab } from '../tab/index.js';
 import type { Button } from '../button';
 import '../button/index.js';
+import '../layout/index.js';
 
 const BAR_TRAVEL_DISTANCE = 150; // scroll distance
 
@@ -26,7 +27,7 @@ const BAR_TRAVEL_DISTANCE = 150; // scroll distance
 @customElement('ef-tab-bar', {
   alias: 'coral-tab-bar'
 })
-export class TabBar extends ResponsiveElement {
+export class TabBar extends BasicElement {
 
   /**
    * Element version number
@@ -55,6 +56,9 @@ export class TabBar extends ResponsiveElement {
       :host([alignment=right]) {
         justify-content: flex-end;
       }
+      :host [part=content] {
+        flex-grow: 0;
+      }
     `;
   }
 
@@ -145,15 +149,13 @@ export class TabBar extends ResponsiveElement {
   }
 
   /**
-   * private method but can't override
-   * access modifiers in typescript.
-   * @ignore
-   * @param size element dimensions
+   * Handles content's container resize
+   * @param event Resize event
    * @returns {void}
    */
-  public resizedCallback (size: ElementSize): void {
+  private handleResize (event: ResizeEvent): void {
     if (!this.vertical) {
-      this.toggleScrollButton(size.width);
+      this.toggleScrollButton(event.detail.width);
     }
   }
 
@@ -459,9 +461,9 @@ export class TabBar extends ResponsiveElement {
   protected render (): TemplateResult {
     return html`
       ${!this.vertical ? html`<ef-button tabIndex="-1" aria-hidden="true" icon="left" part="left-btn" @tap=${this.handleScrollLeft}></ef-button>` : null }
-        <div part="content">
+        <ef-layout part="content" @resize=${this.handleResize}>
           <slot @slotchange=${this.onSlotChange}></slot>
-        </div>
+        </ef-layout>
       ${!this.vertical ? html`<ef-button tabIndex="-1" aria-hidden="true" icon="right" part="right-btn" @tap=${this.handleScrollRight}></ef-button>` : null }
     `;
   }

diff --git a/packages/elements/src/time-picker/__snapshots__/TimePicker.md b/packages/elements/src/time-picker/__snapshots__/TimePicker.md
@@ -205,7 +205,6 @@
 
 ```html
 <ef-number-field
-  aria-label="1 hour"
   id="hours"
   max="12"
   min="1"
@@ -218,7 +217,6 @@
 <span part="divider">
 </span>
 <ef-number-field
-  aria-label="30 minutes"
   id="minutes"
   max="59"
   min="0"
@@ -230,14 +228,12 @@
 </ef-number-field>
 <div
   aria-activedescendant="toggle-pm"
-  aria-label="Toggle Time Period"
   id="toggle"
   part="toggle"
   role="listbox"
   tabindex="0"
 >
   <div
-    aria-label="Before Midday"
     id="toggle-am"
     part="toggle-item"
     role="option"
@@ -246,7 +242,6 @@
   </div>
   <div
     active=""
-    aria-label="After Midday"
     id="toggle-pm"
     part="toggle-item"
     role="option"
@@ -255,7 +250,6 @@
   </div>
 </div>
 <div
-  aria-label="Selected time is: 1:30 PM"
   aria-live="polite"
   part="aria-selection"
   role="status"