@ionic/core 8.2.3-dev.11719513154.1075733b → 8.2.3-dev.11719565135.1ab35bb2

package/dist/collection/components/datetime-button/datetime-button.js

@@ -5,13 +5,14 @@ import { Host, h } from "@stencil/core";
 import { componentOnReady, addEventListener } from "../../utils/helpers";
 import { printIonError } from "../../utils/logging/index";
 import { createColorClasses } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 import { getToday } from "../datetime/utils/data";
 import { getLocalizedDateTime, getLocalizedTime } from "../datetime/utils/format";
 import { getHourCycle } from "../datetime/utils/helpers";
 import { parseDate } from "../datetime/utils/parse";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot date-target - Content displayed inside of the date button.
  * @slot time-target - Content displayed inside of the time button.
@@ -336,25 +337,27 @@ export class DatetimeButton {
     }
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
-        const mode = getIonMode(this);
-        return (h(Host, { key: '0be955404133adbb31ae16a6599014bb29765f19', class: createColorClasses(color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '1d22d1cd09aaaac6bb14d8b5ed06f88a5f361115', class: createColorClasses(color, {
+                [theme]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
-            }) }, dateText && (h("button", { key: '812dcb50b17768cc13a5cfa0bcce8b113cee0f09', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { key: '46930c740a32a78502df9e651f9bd5914d6a9fea', name: "date-target" }, dateText), mode === 'md' && h("ion-ripple-effect", { key: '0602999cc8435dc37aa22da7f5531bc8cb71e1b4' }))), timeText && (h("button", { key: 'ecdd21da5181ecbdce03209f9f6673b7dcbc1f78', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { key: 'b5b093b5166d12d11e27360788edaac916d44390', name: "time-target" }, timeText), mode === 'md' && h("ion-ripple-effect", { key: '70bb3a04f4748d13233eeb257503968dbd1161a9' })))));
+            }) }, dateText && (h("button", { key: '8858b456f0ed626fc0146fb183413d58c73654cd', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { key: 'e5ffe4e62a4313e2f069b2263e5388d5167ea215', name: "date-target" }, dateText), theme === 'md' && h("ion-ripple-effect", { key: 'e39fb3dd3478625c52e21f6c36fbbdf2c660b42f' }))), timeText && (h("button", { key: '2edaccdab0aef5262ce8e4178cbc2d77edbf565e', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { key: 'eae4e909902791c1781909a13751a2ae6cc83f10', name: "time-target" }, timeText), theme === 'md' && h("ion-ripple-effect", { key: '22e5585c299a183a97dda34e557fa0727e4a9ef1' })))));
     }
     static get is() { return "ion-datetime-button"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["datetime-button.ios.scss"],
-            "md": ["datetime-button.md.scss"]
+            "md": ["datetime-button.md.scss"],
+            "ionic": ["datetime-button.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["datetime-button.ios.css"],
-            "md": ["datetime-button.md.css"]
+            "md": ["datetime-button.md.css"],
+            "ionic": ["datetime-button.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/datetime-button/datetime-button.md.css

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/datetime-button/test/a11y/datetime-button.e2e.js

@@ -0,0 +1,38 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * The tested behavior does not vary across directions/modes
+ */
+configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('datetime-button: font scaling'), () => {
+        test('should scale text on larger font sizes', async ({ page }) => {
+            await page.setContent(`
+        <style>
+          html {
+            font-size: 28px;
+          }
+        </style>
+        <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="date-time"></ion-datetime>
+      `, config);
+            const datetimeButton = page.locator('ion-datetime-button');
+            await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-scale`));
+        });
+        test('should wrap text on larger font sizes', async ({ page }) => {
+            await page.setContent(`
+        <style>
+          html {
+            font-size: 48px;
+          }
+        </style>
+        <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="date-time"></ion-datetime>
+      `, config);
+            const datetimeButton = page.locator('ion-datetime-button');
+            await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-scale-wrap`));
+        });
+    });
+});

package/dist/collection/components/datetime-button/test/basic/datetime-button.e2e.js

@@ -0,0 +1,254 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs().forEach(({ config, screenshot, title }) => {
+    test.describe(title('datetime-button: basic'), () => {
+        test('should not have visual regressions', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="date-time"></ion-datetime>
+      `, config);
+            const datetimeButton = page.locator('ion-datetime-button');
+            await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-basic`));
+        });
+    });
+});
+/**
+ * The tested behavior does not
+ * vary across modes/directions
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('datetime-button: switching to correct view'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="date-time"></ion-datetime>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+        });
+        test('should switch to a date-only view when the date button is clicked', async ({ page }) => {
+            const datetime = page.locator('ion-datetime');
+            await expect(datetime).toHaveJSProperty('presentation', 'date-time');
+            await page.click('#date-button');
+            await page.waitForChanges();
+            await expect(datetime).toHaveJSProperty('presentation', 'date');
+        });
+        test('should switch to a time-only view when the time button is clicked', async ({ page }) => {
+            const datetime = page.locator('ion-datetime');
+            await expect(datetime).toHaveJSProperty('presentation', 'date-time');
+            await page.click('#time-button');
+            await page.waitForChanges();
+            await expect(datetime).toHaveJSProperty('presentation', 'time');
+        });
+    });
+    test.describe(title('datetime-button: labels'), () => {
+        test('should set date and time labels in separate buttons', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="date-time"></ion-datetime>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('#date-button')).toContainText('Jan 1, 2022');
+            await expect(page.locator('#time-button')).toContainText('6:30 AM');
+        });
+        test('should set only month and year', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="month-year"></ion-datetime>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('#date-button')).toContainText('January 2022');
+            await expect(page.locator('#time-button')).toBeHidden();
+        });
+        test('should set only year', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="year"></ion-datetime>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('#date-button')).toContainText('2022');
+            await expect(page.locator('#time-button')).toBeHidden();
+        });
+        test('should set only month', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="month"></ion-datetime>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('#date-button')).toContainText('January');
+            await expect(page.locator('#time-button')).toBeHidden();
+        });
+        test('should set only time', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="time"></ion-datetime>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('#time-button')).toContainText('6:30 AM');
+            await expect(page.locator('#date-button')).toBeHidden();
+        });
+        test('should update the label when the value of the datetime changes', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="date"></ion-datetime>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            const datetime = page.locator('ion-datetime');
+            const dateTarget = page.locator('#date-button');
+            await expect(dateTarget).toContainText('Jan 1, 2022');
+            await datetime.evaluate((el) => (el.value = '2023-05-10'));
+            await page.waitForChanges();
+            await expect(dateTarget).toContainText('May 10, 2023');
+        });
+        test('should set only month and year when only passing month and year', async ({ page }, testInfo) => {
+            testInfo.annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/27797',
+            });
+            await page.setContent(`
+        <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" value="2022-01" presentation="month-year"></ion-datetime>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('#date-button')).toContainText('January 2022');
+            await expect(page.locator('#time-button')).toBeHidden();
+        });
+        test('should set only year when passing only year', async ({ page }, testInfo) => {
+            testInfo.annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/27797',
+            });
+            await page.setContent(`
+        <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" value="2022" presentation="year"></ion-datetime>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('#date-button')).toContainText('2022');
+            await expect(page.locator('#time-button')).toBeHidden();
+        });
+    });
+    test.describe(title('datetime-button: locale'), () => {
+        test('should use the same locale as datetime', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime locale="es-ES" id="datetime" value="2022-01-01T06:30:00" presentation="date-time"></ion-datetime>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            /**
+             * The entire text reads 1 ene 2022, but some browsers will add
+             * a period after "ene". Just checking ene allows us to verify the
+             * behavior while avoiding these cross browser differences.
+             */
+            await expect(page.locator('#date-button')).toContainText(/ene/);
+            await expect(page.locator('#time-button')).toContainText('6:30');
+        });
+        test('should respect hour cycle even if different from locale default', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime hour-cycle="h23" locale="en-US" id="datetime" value="2022-01-01T16:30:00" presentation="date-time"></ion-datetime>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('#time-button')).toContainText('16:30');
+        });
+        test('should ignore the timezone when selecting a date', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime locale="en-US" id="datetime" value="2022-01-02T06:30:00" presentation="date-time"></ion-datetime>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            const timeTarget = page.locator('#time-button');
+            await expect(timeTarget).toContainText('6:30');
+            const firstOfMonth = page.locator('ion-datetime .calendar-day[data-month="1"][data-day="1"]');
+            await firstOfMonth.click();
+            await page.waitForChanges();
+            await expect(timeTarget).toContainText('6:30');
+        });
+    });
+    test.describe(title('datetime-button: wheel'), () => {
+        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>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('#date-button')).toContainText('Jan 1, 2022 6:30 AM');
+            await expect(page.locator('#time-button')).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>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('#date-button')).toContainText('Jan 1, 2022 6:30 AM');
+            await expect(page.locator('#time-button')).not.toBeVisible();
+        });
+    });
+    test.describe(title('datetime-button: formatOptions'), () => {
+        test('should include date and time for presentation date-time', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="date-time" value="2023-11-02T01:22:00" locale="en-US"></ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {
+            date: {
+              weekday: "short",
+              month: "long",
+              day: "2-digit"
+            },
+            time: {
+              hour: "2-digit",
+              minute: "2-digit"
+            }
+          }
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('#date-button')).toContainText('Thu, November 02');
+            await expect(page.locator('#time-button')).toContainText('01:22 AM');
+        });
+        test('should include date for presentation date', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="date" value="2023-11-02" locale="en-US"></ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {
+            date: {
+              weekday: "short",
+              month: "long",
+              day: "2-digit"
+            }
+          }
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('#date-button')).toContainText('Thu, November 02');
+        });
+        test('should include date and time in same button for preferWheel', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="date-time" value="2023-11-02T01:22:00" locale="en-US" prefer-wheel="true"></ion-datetime>
+        <script>
+        const datetime = document.querySelector('ion-datetime');
+        datetime.formatOptions = {
+          date: {
+            weekday: "short",
+            month: "long",
+            day: "2-digit"
+          },
+          time: {
+            hour: "2-digit",
+            minute: "2-digit"
+          }
+        }
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('ion-datetime-button')).toContainText('Thu, November 02 01:22 AM');
+        });
+    });
+});

package/dist/collection/components/datetime-button/test/disabled/datetime-button.e2e.js

@@ -0,0 +1,27 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('datetime-button: disabled buttons'), () => {
+        test('buttons should not be enabled when component is disabled', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime" disabled="true"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="date-time"></ion-datetime>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('#date-button')).toBeDisabled();
+            await expect(page.locator('#time-button')).toBeDisabled();
+        });
+        test('buttons should visually be disabled', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime" disabled="true"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="date-time" value="2022-01-01T16:30:00"></ion-datetime>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            const datetimeButton = page.locator('ion-datetime-button');
+            await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-disabled`));
+        });
+    });
+});

package/dist/collection/components/datetime-button/test/multiple/datetime-button.e2e.js

@@ -0,0 +1,96 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * The tested behavior does not
+ * vary across modes/directions
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('datetime-button: multiple selection'), () => {
+        test('should render number of dates when more than 1 date is selected', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime locale="en-US" id="datetime" presentation="date" multiple="true"></ion-datetime>
+
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.value = ['2022-06-01', '2022-06-02', '2022-06-03'];
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('#date-button')).toContainText('3 days');
+        });
+        test('should render number of dates when 0 dates are selected', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime locale="en-US" id="datetime" presentation="date" multiple="true"></ion-datetime>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('#date-button')).toHaveText('0 days');
+        });
+        test('should render date when only 1 day is selected', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime locale="en-US" id="datetime" presentation="date" multiple="true"></ion-datetime>
+
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.value = ['2022-06-01'];
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('#date-button')).toHaveText('Jun 1, 2022');
+        });
+        test('should use customFormatter', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime locale="en-US" id="datetime" presentation="date" multiple="true"></ion-datetime>
+
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.titleSelectedDatesFormatter = (selectedDates) => {
+            return 'Selected: ' + selectedDates.length;
+          };
+          datetime.value = ['2022-06-01', '2022-06-02', '2022-06-03'];
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('#date-button')).toHaveText('Selected: 3');
+        });
+        test('should re-render when value is programmatically changed', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime locale="en-US" id="datetime" presentation="date" multiple="true"></ion-datetime>
+
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.value = ['2022-06-01', '2022-06-02'];
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            const datetime = page.locator('ion-datetime');
+            const ionValueChange = await page.spyOnEvent('ionValueChange');
+            const dateButton = page.locator('#date-button');
+            await expect(dateButton).toHaveText('2 days');
+            await datetime.evaluate((el) => (el.value = ['2022-06-01', '2022-06-02', '2022-06-03']));
+            await ionValueChange.next();
+            await expect(dateButton).toHaveText('3 days');
+        });
+        test('should render single date if datetime is used incorrectly', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime locale="en-US" id="datetime" presentation="date-time" multiple="true"></ion-datetime>
+
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.value = ['2022-06-01T16:30', '2022-06-02'];
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('#date-button')).toHaveText('Jun 1, 2022');
+            await expect(page.locator('#time-button')).toHaveText('4:30 PM');
+        });
+    });
+});

package/dist/collection/components/datetime-button/test/overlays/datetime-button.e2e.js

@@ -0,0 +1,143 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('datetime-button: rendering'), () => {
+        test('should size the modal correctly', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-modal>
+          <ion-datetime id="datetime" show-default-title="true" show-default-buttons="true" value="2022-01-01T16:30:00"></ion-datetime>
+        </ion-modal>
+      `, config);
+            const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+            const dateButton = page.locator('ion-datetime-button #date-button');
+            await dateButton.click();
+            await ionModalDidPresent.next();
+            await expect(page).toHaveScreenshot(screenshot(`datetime-overlay-modal`));
+        });
+        test('should size the popover correctly', async ({ page, skip }) => {
+            skip.browser('firefox', 'Rendering is flaky in Firefox 107');
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-popover>
+          <ion-datetime id="datetime" show-default-title="true" show-default-buttons="true" value="2022-01-01T16:30:00"></ion-datetime>
+        </ion-popover>
+      `, config);
+            const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+            const dateButton = page.locator('ion-datetime-button #date-button');
+            await dateButton.click();
+            await ionPopoverDidPresent.next();
+            await expect(page).toHaveScreenshot(screenshot(`datetime-overlay-popover`));
+        });
+    });
+});
+/**
+ * The tested behavior does not
+ * vary across modes/directions
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('datetime-button: popover'), () => {
+        let datetime;
+        let popover;
+        let ionPopoverDidPresent;
+        let ionPopoverDidDismiss;
+        test.beforeEach(async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+
+        <ion-popover>
+          <ion-datetime id="datetime" presentation="date-time"></ion-datetime>
+        </ion-popover>
+      `, config);
+            datetime = page.locator('ion-datetime');
+            popover = page.locator('ion-popover');
+            ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+            ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
+        });
+        test('should open the date popover', async ({ page }) => {
+            await page.click('#date-button');
+            await ionPopoverDidPresent.next();
+            await expect(datetime).toBeVisible();
+        });
+        test('should open the time popover', async ({ page }) => {
+            await page.click('#time-button');
+            await ionPopoverDidPresent.next();
+            await expect(datetime).toBeVisible();
+        });
+        test('should open the date popover then the time popover', async ({ page }) => {
+            await page.click('#date-button');
+            await ionPopoverDidPresent.next();
+            await expect(datetime).toBeVisible();
+            await popover.evaluate((el) => el.dismiss());
+            await ionPopoverDidDismiss.next();
+            await page.click('#time-button');
+            await ionPopoverDidPresent.next();
+            await expect(datetime).toBeVisible();
+        });
+        test('should open the time popover then the date popover', async ({ page }) => {
+            await page.click('#time-button');
+            await ionPopoverDidPresent.next();
+            await expect(datetime).toBeVisible();
+            await popover.evaluate((el) => el.dismiss());
+            await ionPopoverDidDismiss.next();
+            await page.click('#date-button');
+            await ionPopoverDidPresent.next();
+            await expect(datetime).toBeVisible();
+        });
+    });
+    test.describe(title('datetime-button: modal'), () => {
+        let datetime;
+        let modal;
+        let ionModalDidPresent;
+        let ionModalDidDismiss;
+        test.beforeEach(async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+
+        <ion-modal>
+          <ion-datetime id="datetime" presentation="date-time"></ion-datetime>
+        </ion-modal>
+      `, config);
+            datetime = page.locator('ion-datetime');
+            modal = page.locator('ion-modal');
+            ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+            ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+        });
+        test('should open the date modal', async ({ page }) => {
+            await page.click('#date-button');
+            await ionModalDidPresent.next();
+            await expect(datetime).toBeVisible();
+        });
+        test('should open the time modal', async ({ page }) => {
+            await page.click('#time-button');
+            await ionModalDidPresent.next();
+            await expect(datetime).toBeVisible();
+        });
+        test('should open the date modal then the time modal', async ({ page }) => {
+            await page.click('#date-button');
+            await ionModalDidPresent.next();
+            await expect(datetime).toBeVisible();
+            await modal.evaluate((el) => el.dismiss());
+            await ionModalDidDismiss.next();
+            await page.click('#time-button');
+            await ionModalDidPresent.next();
+            await expect(datetime).toBeVisible();
+        });
+        test('should open the time modal then the date modal', async ({ page }) => {
+            await page.click('#time-button');
+            await ionModalDidPresent.next();
+            await expect(datetime).toBeVisible();
+            await modal.evaluate((el) => el.dismiss());
+            await ionModalDidDismiss.next();
+            await page.click('#date-button');
+            await ionModalDidPresent.next();
+            await expect(datetime).toBeVisible();
+        });
+    });
+});