From 3a2ca5adb77e7514d02a76cad1b17e8608b3a3c5 Mon Sep 17 00:00:00 2001
From: Rahul-28 <rahulrajeshrr365@gmail.com>
Date: Sat, 23 Mar 2024 16:12:02 +0530
Subject: [PATCH 1/4] feat(date-time): add Overlay roles

---
 core/src/components/datetime/datetime.tsx     |  10 +-
 .../test/overlay-roles/datetime.e2e.ts        |  41 +++
 .../datetime/test/overlay-roles/index.html    | 246 ++++++++++++++++++
 3 files changed, 293 insertions(+), 4 deletions(-)
 create mode 100644 core/src/components/datetime/test/overlay-roles/datetime.e2e.ts
 create mode 100644 core/src/components/datetime/test/overlay-roles/index.html

diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index e385657d896..e20165b08e4 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -542,7 +542,7 @@ export class Datetime implements ComponentInterface {
     }
 
     if (closeOverlay) {
-      this.closeParentOverlay();
+      this.closeParentOverlay(CONFIRM_ROLE);
     }
   }
 
@@ -567,7 +567,7 @@ export class Datetime implements ComponentInterface {
     this.ionCancel.emit();
 
     if (closeOverlay) {
-      this.closeParentOverlay();
+      this.closeParentOverlay(CANCEL_ROLE);
     }
   }
 
@@ -617,13 +617,13 @@ export class Datetime implements ComponentInterface {
     return Array.isArray(activeParts) ? activeParts[0] : activeParts;
   };
 
-  private closeParentOverlay = () => {
+  private closeParentOverlay = (role: string) => {
     const popoverOrModal = this.el.closest('ion-modal, ion-popover') as
       | HTMLIonModalElement
       | HTMLIonPopoverElement
       | null;
     if (popoverOrModal) {
-      popoverOrModal.dismiss();
+      popoverOrModal.dismiss(undefined, role);
     }
   };
 
@@ -2637,3 +2637,5 @@ export class Datetime implements ComponentInterface {
 }
 
 let datetimeIds = 0;
+const CANCEL_ROLE = 'datetime-cancel';
+const CONFIRM_ROLE = 'datetime-confirm';
diff --git a/core/src/components/datetime/test/overlay-roles/datetime.e2e.ts b/core/src/components/datetime/test/overlay-roles/datetime.e2e.ts
new file mode 100644
index 00000000000..2c7f9b1f8d6
--- /dev/null
+++ b/core/src/components/datetime/test/overlay-roles/datetime.e2e.ts
@@ -0,0 +1,41 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => {
+  test.describe(title('datetime: overlay roles'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-modal>
+            <ion-datetime></ion-datetime>
+          </ion-modal>  
+        `,
+        config
+      );
+    });
+    test('should pass role to overlay when calling confirm method', async ({ page }) => {
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+      const modal = page.locator('ion-modal');
+      const datetime = page.locator('ion-datetime');
+
+      await modal.evaluate((el: HTMLIonModalElement) => el.present());
+
+      await datetime.evaluate((el: HTMLIonDatetimeElement) => el.confirm(true));
+
+      await ionModalDidDismiss.next();
+      expect(ionModalDidDismiss).toHaveReceivedEventDetail({ data: undefined, role: 'datetime-confirm' });
+    });
+    test('should pass role to overlay when calling cancel method', async ({ page }) => {
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+      const modal = page.locator('ion-modal');
+      const datetime = page.locator('ion-datetime');
+
+      await modal.evaluate((el: HTMLIonModalElement) => el.present());
+
+      await datetime.evaluate((el: HTMLIonDatetimeElement) => el.cancel(true));
+
+      await ionModalDidDismiss.next();
+      expect(ionModalDidDismiss).toHaveReceivedEventDetail({ data: undefined, role: 'datetime-cancel' });
+    });
+  });
+});
diff --git a/core/src/components/datetime/test/overlay-roles/index.html b/core/src/components/datetime/test/overlay-roles/index.html
new file mode 100644
index 00000000000..fcefdc15610
--- /dev/null
+++ b/core/src/components/datetime/test/overlay-roles/index.html
@@ -0,0 +1,246 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Datetime - Overlay Roles</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-modal.ios,
+      ion-popover.datetime-popover.ios {
+        --width: 350px;
+        --height: 420px;
+      }
+
+      ion-modal.md,
+      ion-popover.datetime-popover.md {
+        --width: 350px;
+      }
+
+      ion-datetime {
+        width: 350px;
+      }
+
+      body.dark {
+        --ion-color-primary: #428cff;
+        --ion-color-primary-rgb: 66, 140, 255;
+        --ion-color-primary-contrast: #ffffff;
+        --ion-color-primary-contrast-rgb: 255, 255, 255;
+        --ion-color-primary-shade: #3a7be0;
+        --ion-color-primary-tint: #5598ff;
+
+        --ion-color-secondary: #50c8ff;
+        --ion-color-secondary-rgb: 80, 200, 255;
+        --ion-color-secondary-contrast: #ffffff;
+        --ion-color-secondary-contrast-rgb: 255, 255, 255;
+        --ion-color-secondary-shade: #46b0e0;
+        --ion-color-secondary-tint: #62ceff;
+
+        --ion-color-tertiary: #6a64ff;
+        --ion-color-tertiary-rgb: 106, 100, 255;
+        --ion-color-tertiary-contrast: #ffffff;
+        --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+        --ion-color-tertiary-shade: #5d58e0;
+        --ion-color-tertiary-tint: #7974ff;
+
+        --ion-color-success: #2fdf75;
+        --ion-color-success-rgb: 47, 223, 117;
+        --ion-color-success-contrast: #000000;
+        --ion-color-success-contrast-rgb: 0, 0, 0;
+        --ion-color-success-shade: #29c467;
+        --ion-color-success-tint: #44e283;
+
+        --ion-color-warning: #ffd534;
+        --ion-color-warning-rgb: 255, 213, 52;
+        --ion-color-warning-contrast: #000000;
+        --ion-color-warning-contrast-rgb: 0, 0, 0;
+        --ion-color-warning-shade: #e0bb2e;
+        --ion-color-warning-tint: #ffd948;
+
+        --ion-color-danger: #ff4961;
+        --ion-color-danger-rgb: 255, 73, 97;
+        --ion-color-danger-contrast: #ffffff;
+        --ion-color-danger-contrast-rgb: 255, 255, 255;
+        --ion-color-danger-shade: #e04055;
+        --ion-color-danger-tint: #ff5b71;
+
+        --ion-color-dark: #f4f5f8;
+        --ion-color-dark-rgb: 244, 245, 248;
+        --ion-color-dark-contrast: #000000;
+        --ion-color-dark-contrast-rgb: 0, 0, 0;
+        --ion-color-dark-shade: #d7d8da;
+        --ion-color-dark-tint: #f5f6f9;
+
+        --ion-color-medium: #989aa2;
+        --ion-color-medium-rgb: 152, 154, 162;
+        --ion-color-medium-contrast: #000000;
+        --ion-color-medium-contrast-rgb: 0, 0, 0;
+        --ion-color-medium-shade: #86888f;
+        --ion-color-medium-tint: #a2a4ab;
+
+        --ion-color-light: #222428;
+        --ion-color-light-rgb: 34, 36, 40;
+        --ion-color-light-contrast: #ffffff;
+        --ion-color-light-contrast-rgb: 255, 255, 255;
+        --ion-color-light-shade: #1e2023;
+        --ion-color-light-tint: #383a3e;
+      }
+
+      /*
+       * iOS Dark Theme
+       * -------------------------------------------
+       */
+
+      .ios body.dark {
+        --ion-background-color: #000000;
+        --ion-background-color-rgb: 0, 0, 0;
+
+        --ion-text-color: #ffffff;
+        --ion-text-color-rgb: 255, 255, 255;
+
+        --ion-color-step-50: #0d0d0d;
+        --ion-color-step-100: #1a1a1a;
+        --ion-color-step-150: #262626;
+        --ion-color-step-200: #333333;
+        --ion-color-step-250: #404040;
+        --ion-color-step-300: #4d4d4d;
+        --ion-color-step-350: #595959;
+        --ion-color-step-400: #666666;
+        --ion-color-step-450: #737373;
+        --ion-color-step-500: #808080;
+        --ion-color-step-550: #8c8c8c;
+        --ion-color-step-600: #999999;
+        --ion-color-step-650: #a6a6a6;
+        --ion-color-step-700: #b3b3b3;
+        --ion-color-step-750: #bfbfbf;
+        --ion-color-step-800: #cccccc;
+        --ion-color-step-850: #d9d9d9;
+        --ion-color-step-900: #e6e6e6;
+        --ion-color-step-950: #f2f2f2;
+
+        --ion-item-background: #000000;
+
+        --ion-card-background: #1c1c1d;
+      }
+
+      .ios body.dark ion-modal {
+        --ion-background-color: var(--ion-color-step-100);
+        --ion-toolbar-background: var(--ion-color-step-150);
+        --ion-toolbar-border-color: var(--ion-color-step-250);
+        --ion-item-background: var(--ion-color-step-150);
+      }
+
+      /*
+       * Material Design Dark Theme
+       * -------------------------------------------
+       */
+
+      .md body.dark {
+        --ion-background-color: #121212;
+        --ion-background-color-rgb: 18, 18, 18;
+
+        --ion-text-color: #ffffff;
+        --ion-text-color-rgb: 255, 255, 255;
+
+        --ion-border-color: #222222;
+
+        --ion-color-step-50: #1e1e1e;
+        --ion-color-step-100: #2a2a2a;
+        --ion-color-step-150: #363636;
+        --ion-color-step-200: #414141;
+        --ion-color-step-250: #4d4d4d;
+        --ion-color-step-300: #595959;
+        --ion-color-step-350: #656565;
+        --ion-color-step-400: #717171;
+        --ion-color-step-450: #7d7d7d;
+        --ion-color-step-500: #898989;
+        --ion-color-step-550: #949494;
+        --ion-color-step-600: #a0a0a0;
+        --ion-color-step-650: #acacac;
+        --ion-color-step-700: #b8b8b8;
+        --ion-color-step-750: #c4c4c4;
+        --ion-color-step-800: #d0d0d0;
+        --ion-color-step-850: #dbdbdb;
+        --ion-color-step-900: #e7e7e7;
+        --ion-color-step-950: #f3f3f3;
+
+        --ion-item-background: #1e1e1e;
+
+        --ion-toolbar-background: #1f1f1f;
+
+        --ion-tab-bar-background: #1f1f1f;
+
+        --ion-card-background: #1e1e1e;
+      }
+    </style>
+  </head>
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
+        <ion-toolbar>
+          <ion-title>Datetime - Overlay Roles</ion-title>
+          <ion-buttons slot="end">
+            <ion-button id="popover-trigger">Options</ion-button>
+          </ion-buttons>
+          <ion-popover class="options-popover" trigger="popover-trigger">
+            <ion-list lines="none">
+              <ion-item>
+                <ion-checkbox>Dark Mode</ion-checkbox>
+              </ion-item>
+
+              <ion-item detail="true" href="?ionic:mode=ios">
+                <ion-label>iOS Mode</ion-label>
+              </ion-item>
+
+              <ion-item detail="true" href="?ionic:mode=md">
+                <ion-label>MD Mode</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-popover>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <ion-button onclick="presentModal()">Present Modal</ion-button>
+      </ion-content>
+    </ion-app>
+    <script>
+      const darkModeCheckbox = document.querySelector('ion-checkbox');
+      darkModeCheckbox.addEventListener('ionChange', (ev) => {
+        if (ev.detail.checked) {
+          document.body.classList.add('dark');
+        } else {
+          document.body.classList.remove('dark');
+        }
+      });
+
+      const presentModal = async () => {
+        const modal = await createModal();
+
+        await modal.present();
+        console.log(await modal.onDidDismiss());
+      };
+
+      const createModal = () => {
+        // create component to open
+        const element = document.createElement('div');
+        element.innerHTML = `
+            <ion-datetime show-default-buttons="true" color="danger">
+              <span slot="title">Select Date</span>
+            </ion-datetime>
+          `;
+
+        // present the modal
+        const modalElement = Object.assign(document.createElement('ion-modal'), {
+          component: element,
+        });
+
+        const app = document.querySelector('ion-app');
+        app.appendChild(modalElement);
+        return modalElement;
+      };
+    </script>
+  </body>
+</html>

From d8bb1a1b04ffa29535c05d1eba79d631ca4246e8 Mon Sep 17 00:00:00 2001
From: Rahul-28 <rahulrajeshrr365@gmail.com>
Date: Thu, 28 Mar 2024 23:19:09 +0530
Subject: [PATCH 2/4] "Refactor: Remove redundant styles and disable dark mode"

---
 .../datetime/test/overlay-roles/index.html    | 183 +-----------------
 1 file changed, 2 insertions(+), 181 deletions(-)

diff --git a/core/src/components/datetime/test/overlay-roles/index.html b/core/src/components/datetime/test/overlay-roles/index.html
index fcefdc15610..a9897111b76 100644
--- a/core/src/components/datetime/test/overlay-roles/index.html
+++ b/core/src/components/datetime/test/overlay-roles/index.html
@@ -18,163 +18,12 @@
       ion-modal.md,
       ion-popover.datetime-popover.md {
         --width: 350px;
+        --height: 450px;
       }
 
       ion-datetime {
         width: 350px;
       }
-
-      body.dark {
-        --ion-color-primary: #428cff;
-        --ion-color-primary-rgb: 66, 140, 255;
-        --ion-color-primary-contrast: #ffffff;
-        --ion-color-primary-contrast-rgb: 255, 255, 255;
-        --ion-color-primary-shade: #3a7be0;
-        --ion-color-primary-tint: #5598ff;
-
-        --ion-color-secondary: #50c8ff;
-        --ion-color-secondary-rgb: 80, 200, 255;
-        --ion-color-secondary-contrast: #ffffff;
-        --ion-color-secondary-contrast-rgb: 255, 255, 255;
-        --ion-color-secondary-shade: #46b0e0;
-        --ion-color-secondary-tint: #62ceff;
-
-        --ion-color-tertiary: #6a64ff;
-        --ion-color-tertiary-rgb: 106, 100, 255;
-        --ion-color-tertiary-contrast: #ffffff;
-        --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-        --ion-color-tertiary-shade: #5d58e0;
-        --ion-color-tertiary-tint: #7974ff;
-
-        --ion-color-success: #2fdf75;
-        --ion-color-success-rgb: 47, 223, 117;
-        --ion-color-success-contrast: #000000;
-        --ion-color-success-contrast-rgb: 0, 0, 0;
-        --ion-color-success-shade: #29c467;
-        --ion-color-success-tint: #44e283;
-
-        --ion-color-warning: #ffd534;
-        --ion-color-warning-rgb: 255, 213, 52;
-        --ion-color-warning-contrast: #000000;
-        --ion-color-warning-contrast-rgb: 0, 0, 0;
-        --ion-color-warning-shade: #e0bb2e;
-        --ion-color-warning-tint: #ffd948;
-
-        --ion-color-danger: #ff4961;
-        --ion-color-danger-rgb: 255, 73, 97;
-        --ion-color-danger-contrast: #ffffff;
-        --ion-color-danger-contrast-rgb: 255, 255, 255;
-        --ion-color-danger-shade: #e04055;
-        --ion-color-danger-tint: #ff5b71;
-
-        --ion-color-dark: #f4f5f8;
-        --ion-color-dark-rgb: 244, 245, 248;
-        --ion-color-dark-contrast: #000000;
-        --ion-color-dark-contrast-rgb: 0, 0, 0;
-        --ion-color-dark-shade: #d7d8da;
-        --ion-color-dark-tint: #f5f6f9;
-
-        --ion-color-medium: #989aa2;
-        --ion-color-medium-rgb: 152, 154, 162;
-        --ion-color-medium-contrast: #000000;
-        --ion-color-medium-contrast-rgb: 0, 0, 0;
-        --ion-color-medium-shade: #86888f;
-        --ion-color-medium-tint: #a2a4ab;
-
-        --ion-color-light: #222428;
-        --ion-color-light-rgb: 34, 36, 40;
-        --ion-color-light-contrast: #ffffff;
-        --ion-color-light-contrast-rgb: 255, 255, 255;
-        --ion-color-light-shade: #1e2023;
-        --ion-color-light-tint: #383a3e;
-      }
-
-      /*
-       * iOS Dark Theme
-       * -------------------------------------------
-       */
-
-      .ios body.dark {
-        --ion-background-color: #000000;
-        --ion-background-color-rgb: 0, 0, 0;
-
-        --ion-text-color: #ffffff;
-        --ion-text-color-rgb: 255, 255, 255;
-
-        --ion-color-step-50: #0d0d0d;
-        --ion-color-step-100: #1a1a1a;
-        --ion-color-step-150: #262626;
-        --ion-color-step-200: #333333;
-        --ion-color-step-250: #404040;
-        --ion-color-step-300: #4d4d4d;
-        --ion-color-step-350: #595959;
-        --ion-color-step-400: #666666;
-        --ion-color-step-450: #737373;
-        --ion-color-step-500: #808080;
-        --ion-color-step-550: #8c8c8c;
-        --ion-color-step-600: #999999;
-        --ion-color-step-650: #a6a6a6;
-        --ion-color-step-700: #b3b3b3;
-        --ion-color-step-750: #bfbfbf;
-        --ion-color-step-800: #cccccc;
-        --ion-color-step-850: #d9d9d9;
-        --ion-color-step-900: #e6e6e6;
-        --ion-color-step-950: #f2f2f2;
-
-        --ion-item-background: #000000;
-
-        --ion-card-background: #1c1c1d;
-      }
-
-      .ios body.dark ion-modal {
-        --ion-background-color: var(--ion-color-step-100);
-        --ion-toolbar-background: var(--ion-color-step-150);
-        --ion-toolbar-border-color: var(--ion-color-step-250);
-        --ion-item-background: var(--ion-color-step-150);
-      }
-
-      /*
-       * Material Design Dark Theme
-       * -------------------------------------------
-       */
-
-      .md body.dark {
-        --ion-background-color: #121212;
-        --ion-background-color-rgb: 18, 18, 18;
-
-        --ion-text-color: #ffffff;
-        --ion-text-color-rgb: 255, 255, 255;
-
-        --ion-border-color: #222222;
-
-        --ion-color-step-50: #1e1e1e;
-        --ion-color-step-100: #2a2a2a;
-        --ion-color-step-150: #363636;
-        --ion-color-step-200: #414141;
-        --ion-color-step-250: #4d4d4d;
-        --ion-color-step-300: #595959;
-        --ion-color-step-350: #656565;
-        --ion-color-step-400: #717171;
-        --ion-color-step-450: #7d7d7d;
-        --ion-color-step-500: #898989;
-        --ion-color-step-550: #949494;
-        --ion-color-step-600: #a0a0a0;
-        --ion-color-step-650: #acacac;
-        --ion-color-step-700: #b8b8b8;
-        --ion-color-step-750: #c4c4c4;
-        --ion-color-step-800: #d0d0d0;
-        --ion-color-step-850: #dbdbdb;
-        --ion-color-step-900: #e7e7e7;
-        --ion-color-step-950: #f3f3f3;
-
-        --ion-item-background: #1e1e1e;
-
-        --ion-toolbar-background: #1f1f1f;
-
-        --ion-tab-bar-background: #1f1f1f;
-
-        --ion-card-background: #1e1e1e;
-      }
     </style>
   </head>
   <body>
@@ -182,24 +31,6 @@
       <ion-header translucent="true">
         <ion-toolbar>
           <ion-title>Datetime - Overlay Roles</ion-title>
-          <ion-buttons slot="end">
-            <ion-button id="popover-trigger">Options</ion-button>
-          </ion-buttons>
-          <ion-popover class="options-popover" trigger="popover-trigger">
-            <ion-list lines="none">
-              <ion-item>
-                <ion-checkbox>Dark Mode</ion-checkbox>
-              </ion-item>
-
-              <ion-item detail="true" href="?ionic:mode=ios">
-                <ion-label>iOS Mode</ion-label>
-              </ion-item>
-
-              <ion-item detail="true" href="?ionic:mode=md">
-                <ion-label>MD Mode</ion-label>
-              </ion-item>
-            </ion-list>
-          </ion-popover>
         </ion-toolbar>
       </ion-header>
       <ion-content class="ion-padding">
@@ -207,14 +38,6 @@
       </ion-content>
     </ion-app>
     <script>
-      const darkModeCheckbox = document.querySelector('ion-checkbox');
-      darkModeCheckbox.addEventListener('ionChange', (ev) => {
-        if (ev.detail.checked) {
-          document.body.classList.add('dark');
-        } else {
-          document.body.classList.remove('dark');
-        }
-      });
 
       const presentModal = async () => {
         const modal = await createModal();
@@ -227,9 +50,7 @@
         // create component to open
         const element = document.createElement('div');
         element.innerHTML = `
-            <ion-datetime show-default-buttons="true" color="danger">
-              <span slot="title">Select Date</span>
-            </ion-datetime>
+            <ion-datetime show-default-buttons="true"></ion-datetime>
           `;
 
         // present the modal

From ea29cb651e37ee74fdce27cb32424e0504bdaeac Mon Sep 17 00:00:00 2001
From: Rahul-28 <rahulrajeshrr365@gmail.com>
Date: Tue, 2 Apr 2024 12:36:42 +0530
Subject: [PATCH 3/4] lint fix

---
 core/src/components/datetime/test/overlay-roles/index.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/core/src/components/datetime/test/overlay-roles/index.html b/core/src/components/datetime/test/overlay-roles/index.html
index a9897111b76..c229f4872ad 100644
--- a/core/src/components/datetime/test/overlay-roles/index.html
+++ b/core/src/components/datetime/test/overlay-roles/index.html
@@ -38,7 +38,6 @@
       </ion-content>
     </ion-app>
     <script>
-
       const presentModal = async () => {
         const modal = await createModal();
 

From 12ee13b2da588f1eaa5f9342777a1d47cce3e890 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 3 Apr 2024 14:24:22 -0400
Subject: [PATCH 4/4] Update datetime.tsx

---
 core/src/components/datetime/datetime.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 4e8561c9139..4d5c6e5e605 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -2648,4 +2648,4 @@ let datetimeIds = 0;
 const CANCEL_ROLE = 'datetime-cancel';
 const CONFIRM_ROLE = 'datetime-confirm';
 const WHEEL_ITEM_PART = 'wheel-item';
-const WHEEL_ITEM_ACTIVE_PART = `active`;
\ No newline at end of file
+const WHEEL_ITEM_ACTIVE_PART = `active`;