fix(sbb-calendar): fix month selection on wide view (#3192) (#3193)

(cherry picked from commit ecfd50d)
sbb-design-systems · Nov 4, 2024 · 4365e39 · 4365e39
1 parent 80cdfa9
commit 4365e39
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 6 deletions.
diff --git a/src/elements/calendar/calendar.spec.ts b/src/elements/calendar/calendar.spec.ts
@@ -1,5 +1,6 @@
 import { assert, expect } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
+import { SbbBreakpointMediumMin } from '@sbb-esta/lyne-design-tokens';
+import { sendKeys, setViewport } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
 import type { SbbSecondaryButtonElement } from '../button/secondary-button.js';
@@ -209,6 +210,47 @@ describe(`sbb-calendar`, () => {
     expect(dayCells.length).to.be.equal(31);
   });
 
+  it('changes to year and month selection views if wide', async () => {
+    await setViewport({ width: SbbBreakpointMediumMin, height: 1000 });
+    element.wide = true;
+
+    await waitForLitRender(element);
+
+    // Open year selection
+    element
+      .shadowRoot!.querySelector<HTMLButtonElement>('button#sbb-calendar__date-selection')!
+      .click();
+
+    await waitForTransition();
+    await waitForLitRender(element);
+
+    const selectedYear: HTMLElement = Array.from(
+      element.shadowRoot!.querySelectorAll<HTMLTableCellElement>('.sbb-calendar__table-year'),
+    ).find((e) => e.innerText === '2063')!;
+    const yearButton: HTMLElement = selectedYear.querySelector('button')!;
+
+    // Open month selection
+    yearButton.click();
+
+    await waitForLitRender(element);
+    await waitForTransition();
+
+    // Click last available month on right side
+    element
+      .shadowRoot!.querySelector<HTMLButtonElement>('button[aria-label="December 2062"]')!
+      .click();
+
+    await waitForLitRender(element);
+    await waitForTransition();
+
+    // Day view should be opened with December 2062
+    expect(
+      element
+        .shadowRoot!.querySelector<HTMLButtonElement>('button#sbb-calendar__date-selection')!
+        .innerText.trim(),
+    ).to.be.equal('December 2062');
+  });
+
   it('renders with min and max', async () => {
     const page: HTMLElement = await fixture(
       html`<sbb-calendar

diff --git a/src/elements/calendar/calendar.ts b/src/elements/calendar/calendar.ts
@@ -1029,7 +1029,7 @@ class SbbCalendarElement<T = Date> extends SbbHydrationMixin(LitElement) {
       </div>
       <div class="sbb-calendar__table-container sbb-calendar__table-month-view">
         ${this._createMonthTable(this._months, this._chosenYear!)}
-        ${this._wide ? this._createMonthTable(this._months, this._chosenYear! + 1, true) : nothing}
+        ${this._wide ? this._createMonthTable(this._months, this._chosenYear! + 1) : nothing}
       </div>
     `;
   }
@@ -1050,7 +1050,7 @@ class SbbCalendarElement<T = Date> extends SbbHydrationMixin(LitElement) {
   }
 
   /** Creates the table for the month selection view. */
-  private _createMonthTable(months: Month[][], year: number, shiftRight = false): TemplateResult {
+  private _createMonthTable(months: Month[][], year: number): TemplateResult {
     return html`
       <table
         class="sbb-calendar__table"
@@ -1097,7 +1097,7 @@ class SbbCalendarElement<T = Date> extends SbbHydrationMixin(LitElement) {
                         'sbb-calendar__crossed-out': !isOutOfRange && isFilteredOut,
                         'sbb-calendar__selected': selected,
                       })}
-                      @click=${() => this._onMonthSelection(month.monthValue, year, shiftRight)}
+                      @click=${() => this._onMonthSelection(month.monthValue, year)}
                       ?disabled=${isOutOfRange || isFilteredOut}
                       aria-label=${`${month.longValue} ${this._chosenYear}`}
                       aria-pressed=${selected}
@@ -1119,8 +1119,8 @@ class SbbCalendarElement<T = Date> extends SbbHydrationMixin(LitElement) {
   }
 
   /** Select the month and change the view to day selection. */
-  private _onMonthSelection(month: number, year: number, shiftRight: boolean): void {
-    this._chosenMonth = shiftRight ? month + 1 : month;
+  private _onMonthSelection(month: number, year: number): void {
+    this._chosenMonth = month;
     this._nextCalendarView = 'day';
     this._init(
       this._dateAdapter.createDate(