javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Liam DeBeasi
2021-10-21 16:44:35 -04:00
committed by GitHub
parent 4eb02ca776
commit 71fab0fa12
4 changed files with 110 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/datetime/datetime.ios.scss
View File

@@ -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

11
core/src/components/datetime/datetime.scss
View File

@@ -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,

54
core/src/components/datetime/test/display/e2e.ts Normal file
View File

@@ -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();
}
});

52
core/src/components/datetime/test/display/index.html Normal file
View File

@@ -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>