Skip to content

fix(datetime-button): handle preferWheel correctly #25621

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

Merged
merged 20 commits into from
Jul 14, 2022
Merged

fix(datetime-button): handle preferWheel correctly #25621

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
f15a41d
feat(datetime-button): add base component
liamdebeasi Jul 12, 2022
be5ef5a
chore(): lint
liamdebeasi Jul 12, 2022
c2a3669
chore(): prettier
liamdebeasi Jul 12, 2022
e931d28
feat(datetime-button): add base styles and examples
liamdebeasi Jul 12, 2022
059f118
feat(datetime-button): add base functionality
liamdebeasi Jul 12, 2022
98879f0
feat(datetime-button): add support for active states
liamdebeasi Jul 12, 2022
c6e594b
feat(datetime-button): ensure overlays are sized correctly
liamdebeasi Jul 12, 2022
4aa1bec
chore(): remove stubs
liamdebeasi Jul 12, 2022
a802aa5
Revert "feat(datetime-button): ensure overlays are sized correctly"
liamdebeasi Jul 12, 2022
a4ac7a2
test(datetime-button): add basic rendering tests
liamdebeasi Jul 12, 2022
bf1faeb
chore(): lint
liamdebeasi Jul 12, 2022
e4e9958
chore(): lint
liamdebeasi Jul 12, 2022
0be5fcf
fix(datetime-button): handle preferWheel correctly
liamdebeasi Jul 12, 2022
ae63db5
test(): fix test
liamdebeasi Jul 12, 2022
e817a2d
docs(): add slot documentation
liamdebeasi Jul 12, 2022
2adf417
Merge remote-tracking branch 'origin/FW-546' into 546-base
liamdebeasi Jul 12, 2022
cd7642b
Merge remote-tracking branch 'origin/546-base' into 546-styles
liamdebeasi Jul 12, 2022
31289c8
Merge remote-tracking branch 'origin/546-styles' into 546-text
liamdebeasi Jul 12, 2022
c6039c2
Merge remote-tracking branch 'origin/546-text' into 546-prefer-wheel
liamdebeasi Jul 12, 2022
2fe602c
chore(): sync with FW-546
liamdebeasi Jul 14, 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
36 changes: 25 additions & 11 deletions core/src/components/datetime-button/datetime-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ export class DatetimeButton implements ComponentInterface {
return;
}

const { value, locale, hourCycle } = datetimeEl;
const { value, locale, hourCycle, preferWheel } = datetimeEl;

/**
* Both ion-datetime and ion-datetime-button default
Expand All @@ -149,11 +149,19 @@ export class DatetimeButton implements ComponentInterface {
// TODO(FW-1865) - Remove once FW-1831 is fixed.
parsedDatetime.tzOffset = undefined;

this.dateText = this.timeText = undefined;

switch (datetimePresentation) {
case 'date-time':
case 'time-date':
this.dateText = getMonthDayAndYear(locale, parsedDatetime);
this.timeText = getLocalizedTime(locale, parsedDatetime, use24Hour);
const dateText = getMonthDayAndYear(locale, parsedDatetime);
const timeText = getLocalizedTime(locale, parsedDatetime, use24Hour);
if (preferWheel) {
this.dateText = `${dateText} ${timeText}`;
} else {
this.dateText = dateText;
this.timeText = timeText;
}
break;
case 'date':
this.dateText = getMonthDayAndYear(locale, parsedDatetime);
Expand Down Expand Up @@ -190,7 +198,17 @@ export class DatetimeButton implements ComponentInterface {
switch (datetimePresentation) {
case 'date-time':
case 'time-date':
datetimeEl.presentation = 'date';
/**
* The date+time wheel picker
* shows date and time together,
* so do not adjust the presentation
* in that case.
*/
if (!datetimeEl.preferWheel) {
datetimeEl.presentation = 'date';
}
break;
default:
break;
}

Expand Down Expand Up @@ -236,12 +254,8 @@ export class DatetimeButton implements ComponentInterface {
};

render() {
const { color, dateText, timeText, datetimePresentation, selectedButton, datetimeActive } = this;
const { color, dateText, timeText, selectedButton, datetimeActive } = this;

const showDateTarget =
!datetimePresentation ||
['date-time', 'time-date', 'date', 'month', 'year', 'month-year'].includes(datetimePresentation);
const showTimeTarget = !datetimePresentation || ['date-time', 'time-date', 'time'].includes(datetimePresentation);
const mode = getIonMode(this);

return (
Expand All @@ -251,7 +265,7 @@ export class DatetimeButton implements ComponentInterface {
[`${selectedButton}-active`]: datetimeActive,
})}
>
{showDateTarget && (
{dateText && (
<div class="date-target-container" onClick={() => this.handleDateClick()}>
<slot name="date-target">
{/*
Expand All @@ -266,7 +280,7 @@ export class DatetimeButton implements ComponentInterface {
</div>
)}

{showTimeTarget && (
{timeText && (
<div class="time-target-container" onClick={() => this.handleTimeClick()}>
<slot name="time-target">
<button id="time-button" aria-expanded={datetimeActive ? 'true' : 'false'}>
Expand Down
36 changes: 36 additions & 0 deletions core/src/components/datetime-button/test/basic/datetime-button.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ test.describe('datetime-button: labels', () => {
await page.waitForSelector('.datetime-ready');

await expect(page.locator('.date-target-container')).toContainText('January 2022');
await expect(page.locator('.time-target-container')).toBeHidden();
});
test('should set only year', async ({ page }) => {
await page.setContent(`
Expand All @@ -63,6 +64,7 @@ test.describe('datetime-button: labels', () => {
await page.waitForSelector('.datetime-ready');

await expect(page.locator('.date-target-container')).toContainText('2022');
await expect(page.locator('.time-target-container')).toBeHidden();
});
test('should set only month', async ({ page }) => {
await page.setContent(`
Expand All @@ -72,6 +74,7 @@ test.describe('datetime-button: labels', () => {
await page.waitForSelector('.datetime-ready');

await expect(page.locator('.date-target-container')).toContainText('January');
await expect(page.locator('.time-target-container')).toBeHidden();
});
test('should set only time', async ({ page }) => {
await page.setContent(`
Expand All @@ -80,6 +83,7 @@ test.describe('datetime-button: labels', () => {
`);
await page.waitForSelector('.datetime-ready');

await expect(page.locator('.date-target-container')).toBeHidden();
await expect(page.locator('.time-target-container')).toContainText('6:30 AM');
});
test('should update the label when the value of the datetime changes', async ({ page }) => {
Expand Down Expand Up @@ -148,3 +152,35 @@ test.describe('datetime-button: locale', () => {
await expect(timeTarget).toContainText('6:30');
});
});

test.describe('datetime-button: wheel', () => {
// eslint-disable-next-line no-empty-pattern
test.beforeEach(({}, testInfo) => {
test.skip(testInfo.project.metadata.rtl === 'rtl', 'No layout tests');
test.skip(testInfo.project.metadata.mode === 'ios', 'No mode-specific logic');
});
test('should only show a single date button when presentation="date-time" and prefer-wheel="true"', async ({
page,
}) => {
await page.setContent(`
<ion-datetime-button datetime="datetime"></ion-datetime-button>
<ion-datetime locale="en-US" id="datetime" value="2022-01-01T06:30:00" presentation="date-time" prefer-wheel="true"></ion-datetime>
`);
await page.waitForSelector('.datetime-ready');

await expect(page.locator('.date-target-container')).toContainText('Jan 1, 2022 6:30 AM');
await expect(page.locator('.time-target-container')).not.toBeVisible();
});
test('should only show a single date button when presentation="time-date" and prefer-wheel="true"', async ({
page,
}) => {
await page.setContent(`
<ion-datetime-button datetime="datetime"></ion-datetime-button>
<ion-datetime locale="en-US" id="datetime" value="2022-01-01T06:30:00" presentation="time-date" prefer-wheel="true"></ion-datetime>
`);
await page.waitForSelector('.datetime-ready');

await expect(page.locator('.date-target-container')).toContainText('Jan 1, 2022 6:30 AM');
await expect(page.locator('.time-target-container')).not.toBeVisible();
});
});
32 changes: 27 additions & 5 deletions core/src/components/datetime-button/test/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,23 +179,45 @@ <h2>Year</h2>
</ion-popover>
</div>
<div class="grid-item">
<h2>preferWheel</h2>
<h2>preferWheel / date</h2>

<ion-item>
<ion-label>Start Date</ion-label>
<ion-datetime-button
slot="end"
id="prefer-wheel-button"
datetime="prefer-wheel-datetime"
id="prefer-wheel-date-button"
datetime="prefer-wheel-date"
></ion-datetime-button>
</ion-item>

<ion-popover arrow="false" trigger="prefer-wheel-button">
<ion-popover arrow="false" trigger="prefer-wheel-date-button">
<ion-datetime
locale="en-US"
prefer-wheel="true"
presentation="date"
id="prefer-wheel-date"
value="2022-03-15T00:43:00"
></ion-datetime>
</ion-popover>
</div>
<div class="grid-item">
<h2>preferWheel / date-time</h2>

<ion-item>
<ion-label>Start Date</ion-label>
<ion-datetime-button
slot="end"
id="prefer-wheel-date-time-button"
datetime="prefer-wheel-date-time"
></ion-datetime-button>
</ion-item>

<ion-popover arrow="false" trigger="prefer-wheel-date-time-button">
<ion-datetime
locale="en-US"
prefer-wheel="true"
presentation="date-time"
id="prefer-wheel-datetime"
id="prefer-wheel-date-time"
value="2022-03-15T00:43:00"
></ion-datetime>
</ion-popover>
Expand Down