Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(sbb-calendar): fix month selection on wide view (#3192)
Browse files Browse the repository at this point in the history
(cherry picked from commit ecfd50d)
jeripeierSBB committed Nov 4, 2024
1 parent 80cdfa9 commit 15ad660
Showing 2 changed files with 48 additions and 6 deletions.
44 changes: 43 additions & 1 deletion src/elements/calendar/calendar.spec.ts
Original file line number Diff line number Diff line change
@@ -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
10 changes: 5 additions & 5 deletions src/elements/calendar/calendar.ts
Original file line number Diff line number Diff line change
@@ -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(

0 comments on commit 15ad660

Please sign in to comment.