docs(datetime): improve example tests with sizing (#23456)

core/src/components/datetime/datetime.ios.scss

@@ -6,6 +6,8 @@
   --background: var(--ion-color-light, #ffffff);
   --background-rgb: var(--ion-color-light-rgb);
   --title-color: #{$text-color-step-400};
+
+  min-height: 300px;
 }
 
 // Header

core/src/components/datetime/test/basic/index.html

@@ -31,6 +31,179 @@
           padding: 0;
         }
       }
+
+      .options-popover {
+        --width: 300px;
+      }
+
+      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>
@@ -39,11 +212,49 @@
         <ion-toolbar>
           <ion-title>Datetime - Basic</ion-title>
           <ion-buttons slot="end">
-            <ion-item lines="none">
+            <ion-button id="popover-trigger">Options</ion-button>
-              <ion-label>Dark Mode</ion-label>
-              <ion-checkbox slot="end"></ion-checkbox>
-            </ion-item>
           </ion-buttons>
+          <ion-popover class="options-popover" trigger="popover-trigger">
+            <ion-list lines="none">
+              <ion-item>
+                <ion-label>Dark Mode</ion-label>
+                <ion-checkbox slot="end"></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-item>
+                <ion-label>Show Default Title</ion-label>
+                <ion-toggle id="titleToggle"></ion-toggle>
+              </ion-item>
+
+              <ion-item>
+                <ion-label>Show Default Buttons</ion-label>
+                <ion-toggle id="buttonsToggle"></ion-toggle>
+              </ion-item>
+
+              <ion-item>
+                <ion-label>Locale</ion-label>
+                <ion-input placeholder="default" id="locale"></ion-input>
+              </ion-item>
+
+              <ion-item>
+                <ion-label>Color</ion-label>
+                <ion-select id="color" value="primary">
+                  <ion-select-option value="primary">Primary</ion-select-option>
+                  <ion-select-option value="secondary">Secondary</ion-select-option>
+                  <ion-select-option value="tertiary">Tertiary</ion-select-option>
+                  <ion-select-option value="success">Success</ion-select-option>
+                  <ion-select-option value="warning">Warning</ion-select-option>
+                  <ion-select-option value="danger">Danger</ion-select-option>
+                </ion-select>
+              </ion-item>
+            </ion-list>
+          </ion-popover>
         </ion-toolbar>
       </ion-header>
       <ion-content class="ion-padding">
@@ -56,7 +267,7 @@
           <div class="grid-item">
             <h2>Popover</h2>
             <ion-button onclick="presentPopover(defaultPopover, event)">Present Popover</ion-button>
-            <ion-popover id="default-popover">
+            <ion-popover class="datetime-popover" id="default-popover">
               <ion-datetime></ion-datetime>
             </ion-popover>
           </div>
@@ -71,17 +282,12 @@
             <ion-datetime show-default-buttons="true" color="danger" id="custom-datetime">
               <span slot="title">Select Date</span>
             </ion-datetime>
-
-            <form>
-              <label for="party">Enter a date and time for your party booking sdf sdf  sdf sdf sdfsdf:</label>
-              <input id="party" type="datetime-local" name="partydate">
-          </form>
           </div>
 
           <div class="grid-item">
             <h2>Popover - Custom</h2>
             <ion-button id="open-popover">Present Popover</ion-button>
-            <ion-popover trigger="open-popover" id="custom-popover">
+            <ion-popover class="datetime-popover" trigger="open-popover" id="custom-popover">
               <ion-datetime>
                 <span slot="title">My Custom Title</span>
                 <ion-buttons slot="buttons">
@@ -108,15 +314,21 @@
         </div>
       </ion-content>
       <script>
-        const inlineDatetime = document.querySelector('#inline-datetime');
+        const datetimes = document.querySelectorAll('ion-datetime');
-        inlineDatetime.addEventListener('ionChange', (ev) => {
+        const color = document.querySelector('#color');
-          console.log('did change', ev);
+        const locale = document.querySelector('#locale');
+        const datetime = document.querySelector('ion-datetime');
+        const buttons = document.querySelectorAll('ion-button');
+        const titleToggle = document.querySelector('#titleToggle');
+        const buttonsToggle = document.querySelector('#buttonsToggle');
+
+        locale.addEventListener('ionBlur', (ev) => {
+          const value = ev.target.value;
+          datetimes.forEach(datetime => {
+            datetime.locale = (!!value) ? value : 'default';
+          });
         })
 
-        const customDatetime = document.querySelector('#custom-datetime');
-        customDatetime.addEventListener('ionChange', (ev) => {
-          console.log('did change', ev);
-        })
         const darkModeCheckbox = document.querySelector('ion-checkbox');
         darkModeCheckbox.addEventListener('ionChange', (ev) => {
           if (ev.detail.checked) {
@@ -125,6 +337,24 @@
             document.body.classList.remove('dark');
           }
         });
+        color.addEventListener('ionChange', (ev) => {
+          datetime.color = ev.target.value;
+          buttons.forEach(button => {
+            button.color = ev.target.value;
+          })
+        })
+
+        titleToggle.addEventListener('ionChange', (ev) => {
+          datetimes.forEach(datetime => {
+            datetime.showDefaultTitle = ev.detail.checked;
+          });
+        })
+        buttonsToggle.addEventListener('ionChange', (ev) => {
+          datetimes.forEach(datetime => {
+            datetime.showDefaultButtons = ev.detail.checked;
+          });
+        })
+
         const defaultPopover = document.querySelector('ion-popover#default-popover');
         const customPopover = document.querySelector('ion-popover#custom-popover');
         const presentPopover = (popover, ev) => {

core/src/components/datetime/test/demo/index.html

@@ -1,294 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8">
-    <title>Datetime - Basic</title>
-    <meta name="color-scheme" content="light dark" />
-    <meta
-      name="viewport"
-      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <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>
-
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-title" content="Ionic App" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-
-    <style>
-    body {
-      overflow: hidden;
-    }
-      ion-datetime {
-
-      }
-
-      ion-datetime.md {
-        border-radius: 4px;
-
-        box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.25), 0px 8px 16px rgba(0, 0, 0, 0.25);
-      }
-
-      ion-content.ios {
-        --background: linear-gradient(45deg, rgba(241,87,122,1) 0%, rgba(241,165,128,1) 50%, rgba(5,131,238,1) 100%);
-      }
-
-
-
-      ion-datetime.ios {
-        border-radius: 12px;
-      }
-
-      /*
-       * Dark Colors
-       * -------------------------------------------
-       */
-
-      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;
-      }
-
-      ion-content::part(scroll) {
-        touch-action: auto;
-      }
-
-      #invisible {
-        opacity: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-content scroll-y="false">
-        <ion-button id="popover-trigger">Options</ion-button>
-        <ion-popover trigger="popover-trigger">
-          <ion-list lines="none">
-            <ion-item>
-              <ion-label>Dark Mode</ion-label>
-              <ion-checkbox slot="end"></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-item>
-              <ion-label>Show Default Title</ion-label>
-              <ion-toggle id="titleToggle"></ion-toggle>
-            </ion-item>
-
-            <ion-item>
-              <ion-label>Show Default Buttons</ion-label>
-              <ion-toggle id="buttonsToggle"></ion-toggle>
-            </ion-item>
-
-            <ion-item>
-              <ion-label>Locale</ion-label>
-              <ion-input placeholder="default" id="locale"></ion-input>
-            </ion-item>
-
-            <ion-item>
-              <ion-label>Color</ion-label>
-              <ion-select id="color" value="primary">
-                <ion-select-option value="primary">Primary</ion-select-option>
-                <ion-select-option value="secondary">Secondary</ion-select-option>
-                <ion-select-option value="tertiary">Tertiary</ion-select-option>
-                <ion-select-option value="success">Success</ion-select-option>
-                <ion-select-option value="warning">Warning</ion-select-option>
-                <ion-select-option value="danger">Danger</ion-select-option>
-              </ion-select>
-            </ion-item>
-          </ion-list>
-        </ion-popover>
-
-        <ion-datetime></ion-datetime>
-      </ion-content>
-    </ion-app>
-    <script>
-      const color = document.querySelector('#color');
-      const locale = document.querySelector('#locale');
-      const datetime = document.querySelector('ion-datetime');
-      const buttons = document.querySelectorAll('ion-button');
-      const titleToggle = document.querySelector('#titleToggle');
-      const buttonsToggle = document.querySelector('#buttonsToggle');
-      locale.addEventListener('ionBlur', (ev) => {
-        const value = ev.target.value;
-        datetime.locale = (!!value) ? value : 'default';
-      })
-      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');
-        }
-      });
-      color.addEventListener('ionChange', (ev) => {
-        datetime.color = ev.target.value;
-        buttons.forEach(button => {
-          button.color = ev.target.value;
-        })
-      })
-
-      titleToggle.addEventListener('ionChange', (ev) => {
-        datetime.showDefaultTitle = ev.detail.checked;
-      })
-      buttonsToggle.addEventListener('ionChange', (ev) => {
-        datetime.showDefaultButtons = ev.detail.checked;
-      })
-    </script>
-  </body>
-</html>