From 71fab0fa124254f8cdc3b513627aa7b045993f4e Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 21 Oct 2021 16:44:35 -0400 Subject: [PATCH] fix(datetime): default sizing preserves shape of datetime (#24104) --- .../src/components/datetime/datetime.ios.scss | 2 +- core/src/components/datetime/datetime.scss | 11 ++-- .../components/datetime/test/display/e2e.ts | 54 +++++++++++++++++++ .../datetime/test/display/index.html | 52 ++++++++++++++++++ 4 files changed, 110 insertions(+), 9 deletions(-) create mode 100644 core/src/components/datetime/test/display/e2e.ts create mode 100644 core/src/components/datetime/test/display/index.html diff --git a/core/src/components/datetime/datetime.ios.scss b/core/src/components/datetime/datetime.ios.scss index 7507681e0d9..7935d69f441 100644 --- a/core/src/components/datetime/datetime.ios.scss +++ b/core/src/components/datetime/datetime.ios.scss @@ -11,7 +11,7 @@ :host(.datetime-presentation-date-time), :host(.datetime-presentation-time-date), :host(.datetime-presentation-date) { - min-height: 300px; + min-height: 350px; } // Header diff --git a/core/src/components/datetime/datetime.scss b/core/src/components/datetime/datetime.scss index c5e5c6c26a0..a5ea17f4cd8 100644 --- a/core/src/components/datetime/datetime.scss +++ b/core/src/components/datetime/datetime.scss @@ -19,19 +19,14 @@ overflow: hidden; } -:host(.datetime-presentation-date-time), -:host(.datetime-presentation-time-date), -:host(.datetime-presentation-date) { - height: 100%; -} - :host(.datetime-size-fixed) { - width: 350px; + width: auto; + max-width: 350px; + height: auto; } :host(.datetime-size-cover) { width: 100%; - min-width: 350px; } :host .calendar-body, diff --git a/core/src/components/datetime/test/display/e2e.ts b/core/src/components/datetime/test/display/e2e.ts new file mode 100644 index 00000000000..e763b6b3407 --- /dev/null +++ b/core/src/components/datetime/test/display/e2e.ts @@ -0,0 +1,54 @@ +import { newE2EPage } from '@stencil/core/testing'; + +test('display', async () => { + const page = await newE2EPage({ + url: '/src/components/datetime/test/display?ionic:_testing=true' + }); + + const screenshotCompares = []; + + await page.select('#presentation', 'date-time'); + await page.waitForChanges(); + + screenshotCompares.push(await page.compareScreenshot()); + + await page.select('#presentation', 'time-date'); + await page.waitForChanges(); + + screenshotCompares.push(await page.compareScreenshot()); + + await page.select('#presentation', 'time'); + await page.waitForChanges(); + + screenshotCompares.push(await page.compareScreenshot()); + + await page.select('#presentation', 'date'); + await page.waitForChanges(); + + screenshotCompares.push(await page.compareScreenshot()); + + await page.select('#size', 'cover'); + await page.select('#presentation', 'date-time'); + await page.waitForChanges(); + + screenshotCompares.push(await page.compareScreenshot()); + + await page.select('#presentation', 'time-date'); + await page.waitForChanges(); + + screenshotCompares.push(await page.compareScreenshot()); + + await page.select('#presentation', 'time'); + await page.waitForChanges(); + + screenshotCompares.push(await page.compareScreenshot()); + + await page.select('#presentation', 'date'); + await page.waitForChanges(); + + screenshotCompares.push(await page.compareScreenshot()); + + for (const screenshotCompare of screenshotCompares) { + expect(screenshotCompare).toMatchScreenshot(); + } +}); diff --git a/core/src/components/datetime/test/display/index.html b/core/src/components/datetime/test/display/index.html new file mode 100644 index 00000000000..a69f6a91367 --- /dev/null +++ b/core/src/components/datetime/test/display/index.html @@ -0,0 +1,52 @@ + + + + + Datetime - Standalone + + + + + + + + + + + + + + + +

+ + + + + +