From 321341d97dff98b76b69a1efce58923a80e92bc4 Mon Sep 17 00:00:00 2001
From: William Martin <contact@willmartin.dev>
Date: Tue, 20 Jul 2021 12:31:38 -0400
Subject: [PATCH] feat(datetime): add size property (#23649)

resolves #23518
---
 angular/src/directives/proxies.ts             |   4 +-
 core/api.txt                                  |   1 +
 core/src/components.d.ts                      |   8 ++
 core/src/components/datetime/datetime.scss    |  10 +-
 core/src/components/datetime/datetime.tsx     |  11 +-
 core/src/components/datetime/readme.md        |  16 +++
 .../components/datetime/test/size/index.html  | 123 ++++++++++++++++++
 core/src/components/datetime/usage/angular.md |   3 +
 .../components/datetime/usage/javascript.md   |   3 +
 core/src/components/datetime/usage/react.md   |   3 +
 core/src/components/datetime/usage/stencil.md |   3 +
 core/src/components/datetime/usage/vue.md     |   3 +
 packages/vue/src/proxies.ts                   |   1 +
 13 files changed, 184 insertions(+), 5 deletions(-)
 create mode 100644 core/src/components/datetime/test/size/index.html

diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index 4f5f68d02d..87568a06d2 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -244,8 +244,8 @@ export class IonContent {
 }
 export declare interface IonDatetime extends Components.IonDatetime {
 }
-@ProxyCmp({ inputs: ["cancelText", "color", "dayValues", "disabled", "doneText", "hourValues", "locale", "max", "min", "minuteValues", "mode", "monthValues", "name", "presentation", "readonly", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "value", "yearValues"], "methods": ["confirm", "reset", "cancel"] })
-@Component({ selector: "ion-datetime", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["cancelText", "color", "dayValues", "disabled", "doneText", "hourValues", "locale", "max", "min", "minuteValues", "mode", "monthValues", "name", "presentation", "readonly", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "value", "yearValues"] })
+@ProxyCmp({ inputs: ["cancelText", "color", "dayValues", "disabled", "doneText", "hourValues", "locale", "max", "min", "minuteValues", "mode", "monthValues", "name", "presentation", "readonly", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "value", "yearValues"], "methods": ["confirm", "reset", "cancel"] })
+@Component({ selector: "ion-datetime", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["cancelText", "color", "dayValues", "disabled", "doneText", "hourValues", "locale", "max", "min", "minuteValues", "mode", "monthValues", "name", "presentation", "readonly", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "value", "yearValues"] })
 export class IonDatetime {
   ionCancel!: EventEmitter<CustomEvent>;
   ionChange!: EventEmitter<CustomEvent>;
diff --git a/core/api.txt b/core/api.txt
index 00e95b8d14..fde54923b6 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -387,6 +387,7 @@ ion-datetime,prop,readonly,boolean,false,false,false
 ion-datetime,prop,showDefaultButtons,boolean,false,false,false
 ion-datetime,prop,showDefaultTimeLabel,boolean,true,false,false
 ion-datetime,prop,showDefaultTitle,boolean,false,false,false
+ion-datetime,prop,size,"cover" | "fixed",'fixed',false,false
 ion-datetime,prop,value,null | string | undefined,undefined,false,false
 ion-datetime,prop,yearValues,number | number[] | string | undefined,undefined,false,false
 ion-datetime,method,cancel,cancel(closeOverlay?: boolean) => Promise<void>
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 11001a2a4c..78eb2c0fa7 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -784,6 +784,10 @@ export namespace Components {
           * If `true`, a header will be shown above the calendar picker. On `ios` mode this will include the slotted title, and on `md` mode this will include the slotted title and the selected date.
          */
         "showDefaultTitle": boolean;
+        /**
+          * If `cover`, the `ion-datetime` will expand to cover the full width of its container. If `fixed`, the `ion-datetime` will have a fixed width.
+         */
+        "size": 'cover' | 'fixed';
         /**
           * The value of the datetime as a valid ISO 8601 datetime string.
          */
@@ -4352,6 +4356,10 @@ declare namespace LocalJSX {
           * If `true`, a header will be shown above the calendar picker. On `ios` mode this will include the slotted title, and on `md` mode this will include the slotted title and the selected date.
          */
         "showDefaultTitle"?: boolean;
+        /**
+          * If `cover`, the `ion-datetime` will expand to cover the full width of its container. If `fixed`, the `ion-datetime` will have a fixed width.
+         */
+        "size"?: 'cover' | 'fixed';
         /**
           * The value of the datetime as a valid ISO 8601 datetime string.
          */
diff --git a/core/src/components/datetime/datetime.scss b/core/src/components/datetime/datetime.scss
index a3c50d179c..7f6e8a85d1 100644
--- a/core/src/components/datetime/datetime.scss
+++ b/core/src/components/datetime/datetime.scss
@@ -14,7 +14,6 @@
 
   flex-flow: column;
 
-  width: 350px;
   height: 100%;
 
   background: var(--background);
@@ -22,6 +21,15 @@
   overflow: hidden;
 }
 
+:host(.datetime-size-fixed) {
+  width: 350px;
+}
+
+:host(.datetime-size-cover) {
+  width: 100%;
+  min-width: 350px;
+}
+
 :host .calendar-body,
 :host .time-column,
 :host .datetime-year {
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 5958efc57a..51efb4ef5a 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -318,6 +318,12 @@ export class Datetime implements ComponentInterface {
    */
   @Prop() showDefaultTimeLabel = true;
 
+  /**
+   * If `cover`, the `ion-datetime` will expand to cover the full width of its container.
+   * If `fixed`, the `ion-datetime` will have a fixed width.
+   */
+  @Prop() size: 'cover' | 'fixed' = 'fixed';
+
   /**
    * Emitted when the datetime selection was cancelled.
    */
@@ -1525,7 +1531,7 @@ export class Datetime implements ComponentInterface {
   }
 
   render() {
-    const { name, value, disabled, el, color, isPresented, readonly, showMonthAndYear, presentation } = this;
+    const { name, value, disabled, el, color, isPresented, readonly, showMonthAndYear, presentation, size } = this;
     const mode = getIonMode(this);
 
     renderHiddenInput(true, el, name, value, disabled);
@@ -1540,7 +1546,8 @@ export class Datetime implements ComponentInterface {
             ['datetime-readonly']: readonly,
             ['datetime-disabled']: disabled,
             'show-month-and-year': showMonthAndYear,
-            [`datetime-presentation-${presentation}`]: true
+            [`datetime-presentation-${presentation}`]: true,
+            [`datetime-size-${size}`]: true
           })
         }}
       >
diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md
index fae7c95729..a3c261c9be 100644
--- a/core/src/components/datetime/readme.md
+++ b/core/src/components/datetime/readme.md
@@ -173,6 +173,9 @@ dates in JavaScript.
 <!-- Selecting time first, date second -->
 <ion-datetime presentation="time-date"></ion-datetime>
 
+<!-- Full width size -->
+<ion-datetime size="cover"></ion-datetime>
+
 <!-- Custom title -->
 <ion-datetime>
   <div slot="title">My Custom Title</div>
@@ -252,6 +255,9 @@ export class MyComponent {
 <!-- Selecting time first, date second -->
 <ion-datetime presentation="time-date"></ion-datetime>
 
+<!-- Full width size -->
+<ion-datetime size="cover"></ion-datetime>
+
 <!-- Custom title -->
 <ion-datetime>
   <div slot="title">My Custom Title</div>
@@ -342,6 +348,9 @@ export const DateTimeExamples: React.FC = () => {
       
       {/* Selecting time first, date second */}
       <IonDatetime presentation="time-date"></IonDatetime>
+
+      {/* Full width size */}
+      <IonDatetime size="cover"></IonDatetime>
       
       {/* Custom title */}
       <IonDatetime>
@@ -423,6 +432,9 @@ export class DatetimeExample {
       
       {/* Selecting time first, date second */}
       <ion-datetime presentation="time-date"></ion-datetime>,
+
+      {/* Full width size */}
+      <ion-datetime size="cover"></ion-datetime>,
       
       {/* Custom title */}
       <ion-datetime>
@@ -480,6 +492,9 @@ export class DatetimeExample {
   
   <!-- Selecting time first, date second -->
   <ion-datetime presentation="time-date"></ion-datetime>
+
+  <!-- Full width size -->
+  <ion-datetime size="cover"></ion-datetime>
   
   <!-- Custom title -->
   <ion-datetime>
@@ -567,6 +582,7 @@ export class DatetimeExample {
 | `showDefaultButtons`   | `show-default-buttons`    | If `true`, the default "Cancel" and "OK" buttons will be rendered at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.                                                                                                                                                                                                 | `boolean`                                        | `false`        |
 | `showDefaultTimeLabel` | `show-default-time-label` | If `true`, the default "Time" label will be rendered for the time selector of the `ion-datetime` component. Developers can also use the `time-label` slot if they want to customize this label. If a custom label is set in the `time-label` slot then the default label will not be rendered.                                                                                                                                                                                                    | `boolean`                                        | `true`         |
 | `showDefaultTitle`     | `show-default-title`      | If `true`, a header will be shown above the calendar picker. On `ios` mode this will include the slotted title, and on `md` mode this will include the slotted title and the selected date.                                                                                                                                                                                                                                                                                                       | `boolean`                                        | `false`        |
+| `size`                 | `size`                    | If `cover`, the `ion-datetime` will expand to cover the full width of its container. If `fixed`, the `ion-datetime` will have a fixed width.                                                                                                                                                                                                                                                                                                                                                      | `"cover" \| "fixed"`                             | `'fixed'`      |
 | `value`                | `value`                   | The value of the datetime as a valid ISO 8601 datetime string.                                                                                                                                                                                                                                                                                                                                                                                                                                    | `null \| string \| undefined`                    | `undefined`    |
 | `yearValues`           | `year-values`             | Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.                                                                         | `number \| number[] \| string \| undefined`      | `undefined`    |
 
diff --git a/core/src/components/datetime/test/size/index.html b/core/src/components/datetime/test/size/index.html
new file mode 100644
index 0000000000..7880776301
--- /dev/null
+++ b/core/src/components/datetime/test/size/index.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8">
+    <title>Datetime - Basic</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-popover {
+        --width: 500px;
+      }
+    </style>
+  </head>
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
+        <ion-toolbar>
+          <ion-title>Datetime - Basic</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 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">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Inline - Fixed (350px)</h2>
+            <ion-datetime value="2020-03-14T14:23:00.000Z" id="inline-datetime"></ion-datetime>
+          </div>
+
+          <div class="grid-item">
+            <h2>Popover - Fixed (350px)</h2>
+            <ion-button onclick="presentPopover(defaultPopover, event)">Present Popover</ion-button>
+            <ion-popover class="datetime-popover" id="default-popover">
+              <ion-datetime></ion-datetime>
+            </ion-popover>
+          </div>
+
+          <div class="grid-item">
+            <h2>Modal - Fixed (350px)</h2>
+            <ion-button onclick="presentModal()">Present Modal</ion-button>
+          </div>
+
+          <div class="grid-item">
+            <h2>Inline - Cover (100%)</h2>
+            <ion-datetime value="2020-03-14T14:23:00.000Z" id="custom-datetime" size="cover"></ion-datetime>
+          </div>
+
+          <div class="grid-item">
+            <h2>Popover - Cover (100%)</h2>
+            <ion-button onclick="presentPopover(customPopover, event)">Present Popover</ion-button>
+            <ion-popover class="datetime-popover" id="custom-popover">
+              <ion-datetime size="cover"></ion-datetime>
+            </ion-popover>
+          </div>
+
+          <div class="grid-item">
+            <h2>Modal - Cover (100%)</h2>
+            <ion-button onclick="presentModal('cover')">Present Modal</ion-button>
+          </div>
+        </div>
+      </ion-content>
+      <script>
+        const datetimes = document.querySelectorAll('ion-datetime');
+        const datetime = document.querySelector('ion-datetime');
+  
+        const defaultPopover = document.querySelector('ion-popover#default-popover');
+        const customPopover = document.querySelector('ion-popover#custom-popover');
+        const presentPopover = (popover, ev) => {
+          popover.event = ev;
+          popover.showBackdrop = false;
+          popover.isOpen = true;
+  
+          const dismiss = () => {
+            popover.isOpen = false;
+            popover.event = undefined;
+  
+            popover.removeEventListener('didDismiss', dismiss);
+          }
+  
+          popover.addEventListener('didDismiss', dismiss);
+        }
+  
+        const presentModal = async (size = 'fixed') => {
+          const modal = await createModal(size);
+  
+          await modal.present();
+        }
+  
+        const createModal = (size) => {
+          // create component to open
+          const element = document.createElement('div');
+          element.innerHTML = `
+            <ion-datetime show-default-buttons="true" color="danger" size="${size}">
+              <span slot="title">Select Date</span>
+            </ion-datetime>
+          `;
+  
+          // present the modal
+          const modalElement = Object.assign(document.createElement('ion-modal'), {
+            component: element
+          });
+          document.body.appendChild(modalElement);
+          return modalElement;
+        }
+      </script>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/datetime/usage/angular.md b/core/src/components/datetime/usage/angular.md
index 3f6a0a644d..d99376256e 100644
--- a/core/src/components/datetime/usage/angular.md
+++ b/core/src/components/datetime/usage/angular.md
@@ -26,6 +26,9 @@
 <!-- Selecting time first, date second -->
 <ion-datetime presentation="time-date"></ion-datetime>
 
+<!-- Full width size -->
+<ion-datetime size="cover"></ion-datetime>
+
 <!-- Custom title -->
 <ion-datetime>
   <div slot="title">My Custom Title</div>
diff --git a/core/src/components/datetime/usage/javascript.md b/core/src/components/datetime/usage/javascript.md
index 83eb726f47..bb5c6cc18f 100644
--- a/core/src/components/datetime/usage/javascript.md
+++ b/core/src/components/datetime/usage/javascript.md
@@ -26,6 +26,9 @@
 <!-- Selecting time first, date second -->
 <ion-datetime presentation="time-date"></ion-datetime>
 
+<!-- Full width size -->
+<ion-datetime size="cover"></ion-datetime>
+
 <!-- Custom title -->
 <ion-datetime>
   <div slot="title">My Custom Title</div>
diff --git a/core/src/components/datetime/usage/react.md b/core/src/components/datetime/usage/react.md
index a8f0e7054a..d092d2b516 100644
--- a/core/src/components/datetime/usage/react.md
+++ b/core/src/components/datetime/usage/react.md
@@ -52,6 +52,9 @@ export const DateTimeExamples: React.FC = () => {
       
       {/* Selecting time first, date second */}
       <IonDatetime presentation="time-date"></IonDatetime>
+
+      {/* Full width size */}
+      <IonDatetime size="cover"></IonDatetime>
       
       {/* Custom title */}
       <IonDatetime>
diff --git a/core/src/components/datetime/usage/stencil.md b/core/src/components/datetime/usage/stencil.md
index 998b0623b8..313799156f 100644
--- a/core/src/components/datetime/usage/stencil.md
+++ b/core/src/components/datetime/usage/stencil.md
@@ -50,6 +50,9 @@ export class DatetimeExample {
       
       {/* Selecting time first, date second */}
       <ion-datetime presentation="time-date"></ion-datetime>,
+
+      {/* Full width size */}
+      <ion-datetime size="cover"></ion-datetime>,
       
       {/* Custom title */}
       <ion-datetime>
diff --git a/core/src/components/datetime/usage/vue.md b/core/src/components/datetime/usage/vue.md
index 70b4d32060..e49e977530 100644
--- a/core/src/components/datetime/usage/vue.md
+++ b/core/src/components/datetime/usage/vue.md
@@ -26,6 +26,9 @@
   
   <!-- Selecting time first, date second -->
   <ion-datetime presentation="time-date"></ion-datetime>
+
+  <!-- Full width size -->
+  <ion-datetime size="cover"></ion-datetime>
   
   <!-- Custom title -->
   <ion-datetime>
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index a143a494ac..ec73600912 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -285,6 +285,7 @@ export const IonDatetime = /*@__PURE__*/ defineContainer<JSX.IonDatetime>('ion-d
   'showDefaultTitle',
   'showDefaultButtons',
   'showDefaultTimeLabel',
+  'size',
   'ionCancel',
   'ionChange',
   'ionFocus',