From fa7701721cb0b9872af034aef639791b120e30e9 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 18 Sep 2018 15:45:52 -0400 Subject: [PATCH] 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 --- .../src/components/datetime/datetime.ios.scss | 12 ++-- core/src/components/datetime/datetime.md.scss | 11 ++-- core/src/components/datetime/datetime.scss | 61 ++++++++++--------- core/src/components/datetime/datetime.tsx | 34 +++++------ .../components/datetime/datetime.vars.scss | 14 ++--- .../components/datetime/test/basic/index.html | 7 +++ 6 files changed, 72 insertions(+), 67 deletions(-) diff --git a/core/src/components/datetime/datetime.ios.scss b/core/src/components/datetime/datetime.ios.scss index fe2728aa73..96943da9cf 100644 --- a/core/src/components/datetime/datetime.ios.scss +++ b/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}; } + diff --git a/core/src/components/datetime/datetime.md.scss b/core/src/components/datetime/datetime.md.scss index 284aa02a86..fa9d74ed92 100644 --- a/core/src/components/datetime/datetime.md.scss +++ b/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}; } diff --git a/core/src/components/datetime/datetime.scss b/core/src/components/datetime/datetime.scss index f83b7fd00e..76ecb87af3 100644 --- a/core/src/components/datetime/datetime.scss +++ b/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; } diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index c7d7966c95..990e252ca2 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/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 [ -
{datetimeText}
, +
{datetimeText}
,