fix(datetime): default sizing preserves shape of datetime (#24104)

ionic-team · Oct 21, 2021 · 71fab0f · 71fab0f
1 parent 4eb02ca
commit 71fab0f
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8">
+    <title>Datetime - Standalone</title>
+    <meta name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      body {
+        padding: 20px;
+      }
+      ion-datetime {
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <label for="presentation">Presentation</label>
+    <select id="presentation" onchange="changePresentation(event)">
+      <option value="date-time" selected>date-time</option>
+      <option value="time-date">time-date</option>
+      <option value="date">date</option>
+      <option value="time">time</option>
+    </select>
+
+
+    <label for="size">Size</label>
+    <select id="size" onchange="changeSize(event)">
+      <option value="fixed" selected>fixed</option>
+      <option value="cover">cover</option>
+    </select>
+
+    <br /><br />
+
+    <ion-datetime></ion-datetime>
+
+    <script>
+      const datetime = document.querySelector('ion-datetime');
+
+      const changePresentation = (ev) => {
+        datetime.presentation = ev.target.value;
+      }
+      const changeSize = (ev) => {
+        datetime.size = ev.target.value;
+      }
+    </script>
+  </body>
+</html>