From aa5e1b962150b9ed9629812ec566873784526c83 Mon Sep 17 00:00:00 2001 From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> Date: Fri, 29 Apr 2022 14:29:30 -0500 Subject: [PATCH] fix(datetime): hide footer when month-year picker is open (#25205) --- core/src/components/datetime/datetime.scss | 4 ++ core/src/components/datetime/datetime.tsx | 2 + .../test/month-year-picker/datetime.e2e.ts | 23 +++++++ .../test/month-year-picker/index.html | 62 +++++++++++++++++++ 4 files changed, 91 insertions(+) create mode 100644 core/src/components/datetime/test/month-year-picker/datetime.e2e.ts create mode 100644 core/src/components/datetime/test/month-year-picker/index.html diff --git a/core/src/components/datetime/datetime.scss b/core/src/components/datetime/datetime.scss index b03b0c01d9..d8cc538250 100644 --- a/core/src/components/datetime/datetime.scss +++ b/core/src/components/datetime/datetime.scss @@ -153,6 +153,10 @@ } } +:host(.month-year-picker-open) .datetime-footer { + display: none; +} + :host(.datetime-readonly), :host(.datetime-disabled) { pointer-events: none; diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index d5143aea79..6d2f4f3239 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -1763,6 +1763,7 @@ export class Datetime implements ComponentInterface { const isMonthAndYearPresentation = presentation === 'year' || presentation === 'month' || presentation === 'month-year'; const shouldShowMonthAndYear = showMonthAndYear || isMonthAndYearPresentation; + const monthYearPickerOpen = showMonthAndYear && !isMonthAndYearPresentation; renderHiddenInput(true, el, name, value, disabled); @@ -1778,6 +1779,7 @@ export class Datetime implements ComponentInterface { ['datetime-readonly']: readonly, ['datetime-disabled']: disabled, 'show-month-and-year': shouldShowMonthAndYear, + 'month-year-picker-open': monthYearPickerOpen, [`datetime-presentation-${presentation}`]: true, [`datetime-size-${size}`]: true, }), diff --git a/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts b/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts new file mode 100644 index 0000000000..942034b747 --- /dev/null +++ b/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts @@ -0,0 +1,23 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('datetime: month-year picker', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/datetime/test/month-year-picker'); + }); + + test('should hide the footer when picker is open', async ({ page }) => { + const datetimeFooter = page.locator('#date-time .datetime-footer'); + expect(datetimeFooter).toBeVisible(); + + const pickerButton = page.locator('#date-time .calendar-month-year > ion-item'); + await pickerButton.click(); + await page.waitForChanges(); + expect(datetimeFooter).not.toBeVisible(); + }); + + test('should not hide the footer on month-year presentation', async ({ page }) => { + const monthyearFooter = page.locator('#month-year .datetime-footer'); + expect(monthyearFooter).toBeVisible(); + }); +}); diff --git a/core/src/components/datetime/test/month-year-picker/index.html b/core/src/components/datetime/test/month-year-picker/index.html new file mode 100644 index 0000000000..7af3b395bd --- /dev/null +++ b/core/src/components/datetime/test/month-year-picker/index.html @@ -0,0 +1,62 @@ + + + + + Datetime - Month-Year Picker + + + + + + + + + + + + + Datetime - Month-Year Picker + + + +
+
+

Default Presentation

+ +
+
+

Month-Year Presentation

+ +
+
+ + + +