fix: fix calling .layout() for certain properties, use 4px for shape

Signed-off-by: Rong Sen Ng (motss) <[email protected]>
motss · Apr 2, 2022 · 6bc4d54 · 6bc4d54
1 parent ebbbda4
commit 6bc4d54
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 33 deletions.
diff --git a/docs/app-date-picker.md b/docs/app-date-picker.md
@@ -121,7 +121,7 @@ via the read-only `detail` property.
 | `--app-selected-hover` | `#6200ee` | Border color for all hover state when selected. |
 | `--app-selected-on-focus` | `#fff` | Text color for all focus state when selected. |
 | `--app-selected-on-hover` | `#fff` | Text color for all hover state when selected. |
-| `--app-shape` | `8px` | Border radius of the picker. |
+| `--app-shape` | `4px` | Border radius of the picker. |
 | `--app-surface` | `#fff` | Background color of the picker surface. |
 | `--app-today` | `#000` | Border color of today date. |
 

diff --git a/index.html b/index.html
@@ -93,8 +93,14 @@
         --white55: rgba(255, 255, 255, .55);
 
         /** Override MDC CSS Variables */
+        --mdc-ripple-color: var(--primary);
+        --mdc-text-field-disabled-fill-color: var(--disabled);
         --mdc-text-field-disabled-ink-color: var(--disabled);
         --mdc-text-field-disabled-line-color: var(--disabled);
+        --mdc-text-field-disabled-line-color: var(--disabled);
+        --mdc-text-field-fill-color: var(--surface);
+        --mdc-text-field-hover-line-color: var(--disabled);
+        --mdc-text-field-idle-line-color: var(--disabled);
         --mdc-text-field-ink-color: var(--white);
         --mdc-text-field-label-ink-color: var(--white55);
         --mdc-text-field-outlined-disabled-border-color: var(--disabled);

diff --git a/src/__demo__/demo-app.ts b/src/__demo__/demo-app.ts
@@ -4,7 +4,7 @@ import '../date-picker-input/app-date-picker-input.js';
 // import '../date-picker-dialog/app-date-picker-dialog.js';
 // import '../date-picker-input-surface/app-date-picker-input-surface.js';
 import { css, html } from 'lit';
-import { customElement, queryAsync } from 'lit/decorators.js';
+import { customElement, queryAsync, state } from 'lit/decorators.js';
 
 import type { AppDatePicker } from '../date-picker/app-date-picker.js';
 import type { AppDatePickerDialog } from '../date-picker-dialog/app-date-picker-dialog.js';
@@ -17,6 +17,8 @@ import type { CustomEventDetail } from '../typings.js';
 
 @customElement('demo-app')
 export class DemoApp extends RootElement {
+  @state() _outlined = false;
+
   @queryAsync(appDatePickerDialogName) dialog!: Promise<AppDatePickerDialog>;
   @queryAsync(appDatePickerDialogBaseName) dialogBase!: Promise<AppDatePickerDialogBase>;
   @queryAsync(appDatePickerInputName) input!: Promise<AppDatePickerInput>;
@@ -121,16 +123,22 @@ export class DemoApp extends RootElement {
     ></app-date-picker-input>
 
     <app-date-picker-input
-      id="datePickerInput1"
-      ?outlined=${true}
+      ?outlined=${this._outlined}
       .label=${'Readonly DOB'}
-      .placeholder=${'Select your date of birth'}
       .max=${'2100-12-31'}
       .min=${'1970-01-01'}
-      .value=${'2020-02-02'}
-      .startView=${'yearGrid'}
+      .placeholder=${'Select your date of birth'}
       .readOnly=${true}
+      .startView=${'yearGrid'}
+      .value=${'2020-02-02'}
+      id="datePickerInput1"
     ></app-date-picker-input>
+    <input id=outlined1 type=checkbox .checked=${this._outlined} @input=${() => {
+      this._outlined = !this._outlined;
+    }} />
+    <label for=outlined1>
+      <span>Outlined</span>
+    </label>
 
     <button data-id="datePickerDialog1" @click=${this.#showDialog}>Open</button>
     <app-date-picker-dialog id="datePickerDialog1"></app-date-picker-dialog>

diff --git a/src/date-picker-input/date-picker-input.ts b/src/date-picker-input/date-picker-input.ts
@@ -7,7 +7,6 @@ import { nothing } from 'lit';
 import { html } from 'lit';
 import { property, queryAsync, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { live } from 'lit/directives/live.js';
 
 import { DateTimeFormat } from '../constants.js';
 import type { AppDatePicker } from '../date-picker/app-date-picker.js';
@@ -49,7 +48,6 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
   @state() private _disabled = false;
   @state() private _lazyLoaded = false;
   @state() private _open = false;
-  @state() private _valueText = '';
 
   #disconnect: () => void = () => undefined;
   #focusElement: HTMLElement | undefined = undefined;
@@ -135,6 +133,10 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
     if (changedProperties.has('disabled') || changedProperties.has('readOnly')) {
       this._disabled = this.disabled || this.readOnly;
     }
+
+    if (changedProperties.has('disabled') || changedProperties.has('outlined')) {
+      this.layout();
+    }
   }
 
   public override async updated(): Promise<void> {
@@ -167,7 +169,7 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
     if (this._disabled) return;
 
     this.#valueAsDate = undefined;
-    this.value = this._valueText = '';
+    this.value = '';
   }
 
   public showPicker(): void {
@@ -178,38 +180,53 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
 
   protected override renderInput(shouldRenderHelperText: boolean): TemplateResult {
     /**
-     * NOTE: All these code are copied from original implementation.
+     * NOTE(motss): All these code are copied from original implementation with minor modification.
      */
-    const autocapitalizeOrUndef = this.autocapitalize ?
-        this.autocapitalize as (
+    const {
+      autocapitalize,
+      disabled,
+      focused,
+      helperPersistent,
+      inputMode,
+      isUiValid,
+      label,
+      name,
+      placeholder,
+      required,
+      validationMessage,
+    } = this;
+
+    const autocapitalizeOrUndef = autocapitalize ?
+        autocapitalize as (
             'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters') :
         undefined;
-    const showValidationMessage = this.validationMessage && !this.isUiValid;
-    const ariaLabelledbyOrUndef = this.label ? 'label' : undefined;
+    const showValidationMessage = validationMessage && !isUiValid;
+    const ariaLabelledbyOrUndef = label ? 'label' : undefined;
     const ariaControlsOrUndef =
         shouldRenderHelperText ? 'helper-text' : undefined;
     const ariaDescribedbyOrUndef =
-        this.focused || this.helperPersistent || showValidationMessage ?
+        focused || helperPersistent || showValidationMessage ?
         'helper-text' :
         undefined;
+    const valueText = this.#valueAsDate ? this.#valueFormatter.format(this.#valueAsDate) : '';
 
     return html`
       <input
-        ?disabled=${this.disabled}
-        ?readonly=${true}
-        ?required=${this.required}
-        .value=${live(this._valueText)}
-        @blur=${this.onInputBlur}
-        @focus=${this.onInputFocus}
-        aria-controls=${ifDefined(ariaControlsOrUndef)}
-        aria-describedby=${ifDefined(ariaDescribedbyOrUndef)}
-        aria-labelledby=${ifDefined(ariaLabelledbyOrUndef)}
-        autocapitalize=${ifDefined(autocapitalizeOrUndef)}
-        class=mdc-text-field__input
-        inputmode=${ifDefined(this.inputMode)}
-        name=${ifDefined(this.name === '' ? undefined : this.name)}
-        placeholder=${this.placeholder}
-        type=text
+          ?disabled=${disabled}
+          ?required=${required}
+          .value=${valueText}
+          @blur=${this.onInputBlur}
+          @focus=${this.onInputFocus}
+          aria-controls=${ifDefined(ariaControlsOrUndef)}
+          aria-describedby=${ifDefined(ariaDescribedbyOrUndef)}
+          aria-labelledby=${ifDefined(ariaLabelledbyOrUndef)}
+          autocapitalize=${ifDefined(autocapitalizeOrUndef)}
+          class=mdc-text-field__input
+          inputmode=${ifDefined(inputMode)}
+          name=${ifDefined(name || undefined)}
+          placeholder=${ifDefined(placeholder)}
+          readonly
+          type=text
       >`;
   }
 
@@ -407,7 +424,6 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
       const valueDate = new Date(value);
 
       this.#valueAsDate = valueDate;
-      this._valueText = this.#valueFormatter.format(valueDate);
       this.value = toDateString(valueDate);
     } else {
       this.reset();

diff --git a/src/stylings.ts b/src/stylings.ts
@@ -19,7 +19,7 @@ export const baseStyling = css`
   --_selected-hover: var(--app-selected-hover, #6200ee);
   --_selected-on-focus: var(--app-selected-on-focus, #fff);
   --_selected-on-hover: var(--app-selected-on-hover, #fff);
-  --_shape: var(--app-shape, 8px);
+  --_shape: var(--app-shape, 4px);
   --_surface: var(--app-surface, #fff);
   --_today: var(--app-today, #000);
 }