fix(datetime): convert to shadow and fix broken styles

- adds shadow
- adds and documents css variables
- gets placeholder color working
- gets multiple datetimes in an item working

fixes #15547 references #14850

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

@@ -4,10 +4,12 @@
 // iOS Datetime
 // --------------------------------------------------
 
-.datetime-ios {
-  @include padding($datetime-ios-padding-top, $datetime-ios-padding-end, $datetime-ios-padding-bottom, $datetime-ios-padding-start);
-}
+:host {
+  --placeholder-color: #{$datetime-ios-placeholder-color};
 
-.datetime-ios .datetime-placeholder {
-  color: $datetime-ios-placeholder-color;
+  --padding-top: #{$datetime-ios-padding-top};
+  --padding-end: #{$datetime-ios-padding-end};
+  --padding-bottom: #{$datetime-ios-padding-bottom};
+  --padding-start: #{$datetime-ios-padding-start};
 }
+

core/src/components/datetime/datetime.md.scss

@@ -4,10 +4,11 @@
 // Material Design Datetime
 // --------------------------------------------------
 
-.datetime-md {
-  @include padding($datetime-md-padding-top, $datetime-md-padding-end, $datetime-md-padding-bottom, $datetime-md-padding-start);
-}
+:host {
+  --placeholder-color: #{$datetime-md-placeholder-color};
 
-.datetime-md .datetime-placeholder {
-  color: $datetime-md-placeholder-color;
+  --padding-top: #{$datetime-md-padding-top};
+  --padding-end: #{$datetime-md-padding-end};
+  --padding-bottom: #{$datetime-md-padding-bottom};
+  --padding-start: #{$datetime-md-padding-start};
 }

core/src/components/datetime/datetime.scss

@@ -3,49 +3,54 @@
 // Datetime
 // --------------------------------------------------
 
-ion-datetime {
+:host {
+  /**
+   * @prop --padding-top: Padding top of the datetime
+   * @prop --padding-end: Padding end of the datetime
+   * @prop --padding-bottom: Padding bottom of the datetime
+   * @prop --padding-start: Padding start of the datetime
+   *
+   * @prop --placeholder-color: Color of the datetime placeholder
+   */
+  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+
   display: flex;
   position: relative;
 
   font-family: $font-family-base;
 
-  overflow: hidden;
-}
-
-.datetime-cover {
-  @include input-cover();
-}
-
-.datetime-text {
-  flex: 1;
-
-  min-width: $datetime-text-min-width;
-  min-height: $datetime-text-min-height;
-
-  font-size: inherit;
-
-  line-height: $datetime-text-line-height;
-
   text-overflow: ellipsis;
 
   white-space: nowrap;
 
+  min-width: $datetime-min-width;
+  min-height: $datetime-min-height;
+
   overflow: hidden;
 }
 
-.datetime-disabled,
-.item-datetime-disabled ion-label {
-  opacity: $datetime-disabled-opacity;
-  pointer-events: none;
+:host(.in-item) {
+  position: static;
 }
 
-.item-label-stacked ion-datetime,
-.item-label-floating ion-datetime {
-  @include padding-horizontal(0, null);
+:host(.datetime-placeholder) {
+  color: var(--placeholder-color);
+}
 
-  width: 100%;
+:host(.datetime-disabled) {
+  opacity: .3;
 }
 
-.item .datetime {
-  position: static;
+.datetime-cover {
+  @include input-cover();
+}
+
+.datetime-text {
+  @include text-inherit();
+
+  flex: 1;
+
+  min-height: inherit;
+
+  overflow: inherit;
 }

core/src/components/datetime/datetime.tsx

@@ -1,8 +1,8 @@
-import { Component, ComponentInterface, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
 
 import { InputChangeEvent, Mode, PickerColumn, PickerColumnOption, PickerOptions, StyleEvent } from '../../interface';
 import { clamp, deferEvent } from '../../utils/helpers';
-import { createThemedClasses } from '../../utils/theme';
+import { createThemedClasses, hostContext } from '../../utils/theme';
 
 import { DatetimeData, LocaleData, convertFormatToKey, convertToArrayOfNumbers, convertToArrayOfStrings, dateDataSortValue, dateSortValue, dateValueRange, daysInMonth, getValueFromFormat, parseDate, parseTemplate, renderDatetime, renderTextFormat, updateDate } from './datetime-util';
 
@@ -11,10 +11,10 @@ import { DatetimeData, LocaleData, convertFormatToKey, convertToArrayOfNumbers,
   styleUrls: {
     ios: 'datetime.ios.scss',
     md: 'datetime.md.scss'
-  }
+  },
+  shadow: true
 })
 export class Datetime implements ComponentInterface {
-
   private inputId = `ion-dt-${datetimeIds++}`;
   private labelId = `${this.inputId}-lbl`;
   private picker?: HTMLIonPickerElement;
@@ -23,6 +23,8 @@ export class Datetime implements ComponentInterface {
   private datetimeMax: DatetimeData = {};
   private datetimeValue: DatetimeData = {};
 
+  @Element() el!: HTMLIonDatetimeElement;
+
   @State() text?: string;
 
   @Prop({ connect: 'ion-picker-controller' }) pickerCtrl!: HTMLIonPickerControllerElement;
@@ -500,35 +502,29 @@ export class Datetime implements ComponentInterface {
   }
 
   hostData() {
+    const addPlaceholderClass =
+      (this.text === undefined && this.placeholder != null) ? true : false;
+
     return {
       class: {
         ...createThemedClasses(this.mode, 'datetime'),
-        'datetime-disabled': this.disabled
+        'datetime-disabled': this.disabled,
+        'datetime-placeholder': addPlaceholderClass,
+        'in-item': hostContext('ion-item', this.el)
       }
     };
   }
 
   render() {
-    let addPlaceholderClass = false;
-
     // If selected text has been passed in, use that first
+    // otherwise use the placeholder
     let datetimeText = this.text;
     if (datetimeText === undefined) {
-      if (this.placeholder !== undefined) {
-        datetimeText = this.placeholder;
-        addPlaceholderClass = true;
-      } else {
-        datetimeText = '';
-      }
+      datetimeText = this.placeholder ? this.placeholder : '';
     }
 
-    const datetimeTextClasses = {
-      'datetime-text': true,
-      'datetime-placeholder': addPlaceholderClass
-    };
-
     return [
-      <div class={datetimeTextClasses}>{datetimeText}</div>,
+      <div class="datetime-text">{datetimeText}</div>,
       <button
         type="button"
         aria-haspopup="true"

core/src/components/datetime/datetime.vars.scss

@@ -3,14 +3,8 @@
 // Datetime
 // --------------------------------------------------
 
-/// @prop - Minimum width of the datetime text
-$datetime-text-min-width:             16px !default;
+/// @prop - Minimum width of the datetime
+$datetime-min-width:             16px !default;
 
-/// @prop - Minimum height of the datetime text
-$datetime-text-min-height:            1.2em !default;
-
-/// @prop - Line height of the datetime text
-$datetime-text-line-height:           1.2 !default;
-
-/// @prop - Opacity of the disabled datetime
-$datetime-disabled-opacity:           .4 !default;
+/// @prop - Minimum height of the datetime
+$datetime-min-height:            1.2em !default;

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

@@ -55,6 +55,13 @@
           <ion-datetime id="customPickerOptions" placeholder="Custom Options" display-format="YYYY" min="1981" max="2002"></ion-datetime>
         </ion-item>
 
+        <ion-item>
+          <ion-label>Multiple</ion-label>
+          <ion-datetime value="1994-12-24" display-format="YYYY" placeholder="year"></ion-datetime>
+          <ion-datetime value="1994-12-24" display-format="MM" placeholder="month"></ion-datetime>
+          <ion-datetime value="1994-12-24" display-format="DD" placeholder="day"></ion-datetime>
+        </ion-item>
+
         <ion-item>
           <ion-label position="stacked">MMMM YY</ion-label>
           <ion-datetime display-format="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>