fix(sbb-breadcrumb): avoid to collapse for two or fewer breadcrumbs (#…

…2733)
sbb-design-systems · Jun 10, 2024 · ecdb355 · ecdb355
1 parent c3ae839
commit ecdb355
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 29 deletions.
diff --git a/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts b/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts
@@ -1,9 +1,9 @@
-import { assert, expect } from '@open-wc/testing';
+import { assert, aTimeout, expect } from '@open-wc/testing';
 import { sendKeys, setViewport } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
 import { fixture } from '../../core/testing/private.js';
-import { waitForCondition, EventSpy, waitForLitRender } from '../../core/testing.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
 import type { SbbBreadcrumbElement } from '../breadcrumb.js';
 
 import { SbbBreadcrumbGroupElement } from './breadcrumb-group.js';
@@ -14,33 +14,59 @@ describe(`sbb-breadcrumb-group`, () => {
   describe('without ellipsis', () => {
     let element: SbbBreadcrumbGroupElement;
 
-    beforeEach(async () => {
-      element = await fixture(html`
-        <sbb-breadcrumb-group>
-          <sbb-breadcrumb href="#" icon-name="house-small" id="breadcrumb-0"></sbb-breadcrumb>
-          <sbb-breadcrumb href="#" id="breadcrumb-1">One</sbb-breadcrumb>
-          <sbb-breadcrumb href="#" id="breadcrumb-2">Two</sbb-breadcrumb>
-        </sbb-breadcrumb-group>
-      `);
-    });
-
-    it('renders', async () => {
-      assert.instanceOf(element, SbbBreadcrumbGroupElement);
+    describe('with three breadcrumbs', () => {
+      beforeEach(async () => {
+        element = await fixture(html`
+          <sbb-breadcrumb-group>
+            <sbb-breadcrumb href="#" icon-name="house-small" id="breadcrumb-0"></sbb-breadcrumb>
+            <sbb-breadcrumb href="#" id="breadcrumb-1">One</sbb-breadcrumb>
+            <sbb-breadcrumb href="#" id="breadcrumb-2">Two</sbb-breadcrumb>
+          </sbb-breadcrumb-group>
+        `);
+      });
+
+      it('renders', async () => {
+        assert.instanceOf(element, SbbBreadcrumbGroupElement);
+      });
+
+      it('keyboard navigation', async () => {
+        const first: SbbBreadcrumbElement =
+          element.querySelector<SbbBreadcrumbElement>('#breadcrumb-0')!;
+        const second: SbbBreadcrumbElement =
+          element.querySelector<SbbBreadcrumbElement>('#breadcrumb-1')!;
+        const third: SbbBreadcrumbElement =
+          element.querySelector<SbbBreadcrumbElement>('#breadcrumb-2')!;
+
+        first.focus();
+        await sendKeys({ down: 'ArrowRight' });
+        expect(document.activeElement!.id).to.be.equal(second.id);
+        await sendKeys({ down: 'ArrowRight' });
+        expect(document.activeElement!.id).to.be.equal(third.id);
+      });
     });
 
-    it('keyboard navigation', async () => {
-      const first: SbbBreadcrumbElement =
-        element.querySelector<SbbBreadcrumbElement>('#breadcrumb-0')!;
-      const second: SbbBreadcrumbElement =
-        element.querySelector<SbbBreadcrumbElement>('#breadcrumb-1')!;
-      const third: SbbBreadcrumbElement =
-        element.querySelector<SbbBreadcrumbElement>('#breadcrumb-2')!;
-
-      first.focus();
-      await sendKeys({ down: 'ArrowRight' });
-      expect(document.activeElement!.id).to.be.equal(second.id);
-      await sendKeys({ down: 'ArrowRight' });
-      expect(document.activeElement!.id).to.be.equal(third.id);
+    describe('with two breadcrumns', () => {
+      beforeEach(async () => {
+        element = await fixture(html`
+          <sbb-breadcrumb-group>
+            <sbb-breadcrumb href="#" id="breadcrumb-0">Level 0</sbb-breadcrumb>
+            <sbb-breadcrumb href="#" id="breadcrumb-1">Level 1</sbb-breadcrumb>
+          </sbb-breadcrumb-group>
+        `);
+      });
+
+      it('should not collapse', async () => {
+        await setViewport({ width: 80, height: 1000 });
+        await waitForLitRender(element);
+        // We need to ensure that the collapsed state is really rendered
+        await aTimeout(20);
+
+        const ellipsisButton = element.shadowRoot!.querySelector<HTMLButtonElement>(
+          '#sbb-breadcrumb-ellipsis',
+        )!;
+
+        expect(ellipsisButton).to.be.null;
+      });
     });
   });
 

diff --git a/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.ts b/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.ts
@@ -25,6 +25,8 @@ import style from './breadcrumb-group.scss?lit&inline';
 
 import '../../icon.js';
 
+const MIN_BREADCRUMBS_TO_COLLAPSE = 3;
+
 /**
  * It can be used as a container for one or more `sbb-breadcrumb` component.
  *
@@ -119,7 +121,7 @@ export class SbbBreadcrumbGroupElement extends SbbNamedSlotListMixin<
     this.listChildren[this.listChildren.length - 1]?.setAttribute('aria-current', 'page');
 
     // If it is not expandable, reset state
-    if (this.listChildren.length < 3) {
+    if (this.listChildren.length < MIN_BREADCRUMBS_TO_COLLAPSE) {
       this._state = null;
     }
   }
@@ -159,7 +161,11 @@ export class SbbBreadcrumbGroupElement extends SbbNamedSlotListMixin<
 
   /** Evaluate if the expanded breadcrumb element fits in page width, otherwise it needs ellipsis */
   private _evaluateCollapsedState(): void {
-    if (!this._state && this.scrollWidth > this.offsetWidth) {
+    if (
+      !this._state &&
+      this.scrollWidth > this.offsetWidth &&
+      this.listChildren.length >= MIN_BREADCRUMBS_TO_COLLAPSE
+    ) {
       this._state = 'collapsed';
       this._resizeObserver.disconnect();
     }