Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(datetime): improve datetime sizing in modals #24762

Merged
merged 2 commits into from
Feb 22, 2022
Merged

fix(datetime): improve datetime sizing in modals #24762

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0ae5b1b
fix(datetime): improved auto-sizing datetime support
sean-perkins Feb 9, 2022
a9a476b
test(datetime): zoom in/out tests
sean-perkins Feb 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 11 additions & 2 deletions core/src/components/datetime/datetime.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -810,6 +810,12 @@ export class Datetime implements ComponentInterface {
navigator.maxTouchPoints > 1 ?
[0.7, 1] : 1;

// Intersection observers cannot accurately detect the
// intersection with a threshold of 1, when the observed
// element width is a sub-pixel value (i.e. 334.05px).
// Setting a root margin to 1px solves the issue.
const rootMargin = '1px';

/**
* Listen on the first month to
* prepend a new month and on the last
Expand All @@ -828,15 +834,18 @@ export class Datetime implements ComponentInterface {
* it applies to active gestures which is not
* something WebKit does.
*/

endIO = new IntersectionObserver(ev => ioCallback('end', ev), {
threshold,
root: calendarBodyRef
root: calendarBodyRef,
rootMargin
});
endIO.observe(endMonth);

startIO = new IntersectionObserver(ev => ioCallback('start', ev), {
threshold,
root: calendarBodyRef
root: calendarBodyRef,
rootMargin
});
startIO.observe(startMonth);

Expand Down
53 changes: 53 additions & 0 deletions core/src/components/datetime/test/sub-pixel-width/e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { newE2EPage } from '@stencil/core/testing';

describe('datetime: sub-pixel width', () => {

test('should update the month when next button is clicked', async () => {
const page = await newE2EPage({
url: '/src/components/datetime/test/sub-pixel-width?ionic:_testing=true'
});

const openModalBtn = await page.find('#open-modal');

await openModalBtn.click();

const modal = await page.find('ion-modal');
await modal.waitForVisible();
await page.waitForTimeout(250);

const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button')

await buttons[1].click();

await page.waitForTimeout(350);

const monthYear = await page.find('ion-datetime >>> .calendar-month-year');

expect(monthYear.textContent.trim()).toBe('March 2022');
});

test('should update the month when prev button is clicked', async () => {
const page = await newE2EPage({
url: '/src/components/datetime/test/sub-pixel-width?ionic:_testing=true'
});

const openModalBtn = await page.find('#open-modal');

await openModalBtn.click();

const modal = await page.find('ion-modal');
await modal.waitForVisible();
await page.waitForTimeout(250);

const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button')

await buttons[0].click();

await page.waitForTimeout(350);

const monthYear = await page.find('ion-datetime >>> .calendar-month-year');

expect(monthYear.textContent.trim()).toBe('January 2022');
});

});
47 changes: 47 additions & 0 deletions core/src/components/datetime/test/sub-pixel-width/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="UTF-8">
<title>Datetime - Sub Pixel Width</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>
ion-datetime {
width: 334.05px;
height: 500px;
}

#background {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
</style>
</head>

<body>
<ion-app>
<ion-header translucent="true">
<ion-toolbar>
<ion-title>Datetime - Sub Pixel Width</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h2>Modal</h2>
<ion-button id="open-modal">Present Modal</ion-button>
<ion-modal trigger="open-modal" id="modal">
<div id="background">
<ion-datetime id="picker" value="2022-02-01"></ion-datetime>
</div>
</ion-modal>
</ion-content>
</ion-app>
</body>

</html>
136 changes: 136 additions & 0 deletions core/src/components/datetime/test/zoom/e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
import { newE2EPage } from '@stencil/core/testing';

/**
* This test emulates zoom behavior in the browser to make sure
* that key functions of the ion-datetime continue to function even
* if the page is zoomed in or out.
*/
describe('datetime: zoom interactivity', () => {

let deviceScaleFactor;

describe('zoom out', () => {

beforeEach(() => {
deviceScaleFactor = 0.75;
});

test('should update the month when next button is clicked', async () => {
const page = await newE2EPage({
url: '/src/components/datetime/test/sub-pixel-width?ionic:_testing=true'
});

page.setViewport({
width: 640,
height: 480,
deviceScaleFactor
});

const openModalBtn = await page.find('#open-modal');

await openModalBtn.click();

const modal = await page.find('ion-modal');
await modal.waitForVisible();
await page.waitForTimeout(250);

const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button')

await buttons[1].click();

await page.waitForTimeout(350);

const monthYear = await page.find('ion-datetime >>> .calendar-month-year');

expect(monthYear.textContent.trim()).toBe('March 2022');
});

test('should update the month when prev button is clicked', async () => {
const page = await newE2EPage({
url: '/src/components/datetime/test/sub-pixel-width?ionic:_testing=true'
});

const openModalBtn = await page.find('#open-modal');

await openModalBtn.click();

const modal = await page.find('ion-modal');
await modal.waitForVisible();
await page.waitForTimeout(250);

const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button')

await buttons[0].click();

await page.waitForTimeout(350);

const monthYear = await page.find('ion-datetime >>> .calendar-month-year');

expect(monthYear.textContent.trim()).toBe('January 2022');
});

});

describe('zoom in', () => {

beforeEach(() => {
deviceScaleFactor = 2;
});

test('should update the month when next button is clicked', async () => {
const page = await newE2EPage({
url: '/src/components/datetime/test/sub-pixel-width?ionic:_testing=true'
});

page.setViewport({
width: 640,
height: 480,
deviceScaleFactor
});

const openModalBtn = await page.find('#open-modal');

await openModalBtn.click();

const modal = await page.find('ion-modal');
await modal.waitForVisible();
await page.waitForTimeout(250);

const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button')

await buttons[1].click();

await page.waitForTimeout(350);

const monthYear = await page.find('ion-datetime >>> .calendar-month-year');

expect(monthYear.textContent.trim()).toBe('March 2022');
});

test('should update the month when prev button is clicked', async () => {
const page = await newE2EPage({
url: '/src/components/datetime/test/sub-pixel-width?ionic:_testing=true'
});

const openModalBtn = await page.find('#open-modal');

await openModalBtn.click();

const modal = await page.find('ion-modal');
await modal.waitForVisible();
await page.waitForTimeout(250);

const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button')

await buttons[0].click();

await page.waitForTimeout(350);

const monthYear = await page.find('ion-datetime >>> .calendar-month-year');

expect(monthYear.textContent.trim()).toBe('January 2022');
});

});

});
42 changes: 42 additions & 0 deletions core/src/components/datetime/test/zoom/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="UTF-8">
<title>Datetime - Zoom</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>
#background {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
</style>
</head>

<body>
<ion-app>
<ion-header translucent="true">
<ion-toolbar>
<ion-title>Datetime - Zoom</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h2>Modal</h2>
<ion-button id="open-modal">Present Modal</ion-button>
<ion-modal trigger="open-modal" id="modal">
<div id="background">
<ion-datetime id="picker" value="2022-02-01"></ion-datetime>
</div>
</ion-modal>
</ion-content>
</ion-app>
</body>

</html>