From b96c84d14a26bc61f7b896434c3053613462143d Mon Sep 17 00:00:00 2001 From: Erik Harper Date: Tue, 8 Sep 2020 15:26:49 -0700 Subject: [PATCH 001/188] feat(calcite-time): basic time input using calcite-input --- .../calcite-input/calcite-input.tsx | 8 +- .../calcite-time/calcite-time.e2e.ts | 28 +++++ src/components/calcite-time/calcite-time.scss | 7 ++ .../calcite-time/calcite-time.stories.ts | 22 ++++ src/components/calcite-time/calcite-time.tsx | 111 ++++++++++++++++++ src/demos/calcite-time.html | 63 ++++++++++ src/index.html | 5 + 7 files changed, 242 insertions(+), 2 deletions(-) create mode 100644 src/components/calcite-time/calcite-time.e2e.ts create mode 100644 src/components/calcite-time/calcite-time.scss create mode 100644 src/components/calcite-time/calcite-time.stories.ts create mode 100644 src/components/calcite-time/calcite-time.tsx create mode 100644 src/demos/calcite-time.html diff --git a/src/components/calcite-input/calcite-input.tsx b/src/components/calcite-input/calcite-input.tsx index f1112b88b2f..05c3ed9e2f0 100644 --- a/src/components/calcite-input/calcite-input.tsx +++ b/src/components/calcite-input/calcite-input.tsx @@ -72,6 +72,9 @@ export class CalciteInput { /** for recognized input types, show an icon if applicable */ @Prop({ reflect: true }) icon: string | boolean = false; + /** The name of the input */ + @Prop() name?: string = ""; + /** specify the input type */ @Prop({ mutable: true, reflect: true }) type: | "color" @@ -275,6 +278,7 @@ export class CalciteInput { this.childElType !== "textarea" ? ( { + it("renders", async () => renders("calcite-time")); + + it("is accessible", async () => accessible(``)); + + it("has defaults", async () => + defaults("calcite-time", [ + { propertyName: "embed", defaultValue: false }, + { propertyName: "focused", defaultValue: false }, + { propertyName: "hidden", defaultValue: false }, + { propertyName: "theme", defaultValue: "light" } + ])); + + it("reflects", async () => + reflects("calcite-time", [ + { propertyName: "active", value: true }, + { propertyName: "embed", value: true }, + { propertyName: "focused", value: true }, + { propertyName: "href", value: "http://www.esri.com" }, + { propertyName: "icon", value: "layers" }, + { propertyName: "theme", value: "light" } + ])); + + it("honors hidden attribute", async () => hidden("calcite-time")); +}); diff --git a/src/components/calcite-time/calcite-time.scss b/src/components/calcite-time/calcite-time.scss new file mode 100644 index 00000000000..014b3b34f33 --- /dev/null +++ b/src/components/calcite-time/calcite-time.scss @@ -0,0 +1,7 @@ +:host-context([theme="dark"]) { + @include calcite-theme-dark(); +} + +:host { + display: inline-block; +} diff --git a/src/components/calcite-time/calcite-time.stories.ts b/src/components/calcite-time/calcite-time.stories.ts new file mode 100644 index 00000000000..e90f4f3c9da --- /dev/null +++ b/src/components/calcite-time/calcite-time.stories.ts @@ -0,0 +1,22 @@ +import { storiesOf } from "@storybook/html"; +import { select, text } from "@storybook/addon-knobs"; +import { boolean } from "../../../.storybook/helpers"; +import readme from "./readme.md"; + +storiesOf("Components/Time", module) + .addParameters({ notes: readme }) + .add( + "Basic", + () => ` + + + ` + ); diff --git a/src/components/calcite-time/calcite-time.tsx b/src/components/calcite-time/calcite-time.tsx new file mode 100644 index 00000000000..96019378f5f --- /dev/null +++ b/src/components/calcite-time/calcite-time.tsx @@ -0,0 +1,111 @@ +import { Component, Element, Host, h, Prop, Watch, VNode } from "@stencil/core"; + +@Component({ + tag: "calcite-time", + styleUrl: "calcite-time.scss", + shadow: true +}) +export class CalciteTime { + //-------------------------------------------------------------------------- + // + // Element + // + //-------------------------------------------------------------------------- + + @Element() el: HTMLCalciteTimeElement; + + //-------------------------------------------------------------------------- + // + // Properties + // + //-------------------------------------------------------------------------- + + /** The active state of the time input. When true, the time input popup is displayed. */ + @Prop({ reflect: true }) active = false; + + /** The disabled state of the time input */ + @Prop({ reflect: true }) disabled?: boolean = false; + + @Watch("disabled") + disabledChanged(disabled: boolean): void { + this.input.disabled = disabled; + } + + /** The focused state of the time input */ + @Prop({ mutable: true, reflect: true }) focused = false; + + @Watch("focused") + focusedChanged(focused: boolean): void { + if (focused && !this.el.hasAttribute("hidden")) { + this.input.focus(); + } else { + this.input.blur(); + } + } + + /** The name of the time input */ + @Prop({ reflect: true }) name?: string = ""; + + @Watch("name") + nameChanged(newName: string): void { + this.input.name = newName; + } + + /** The scale (size) of the time input */ + @Prop({ reflect: true }) scale: "s" | "m" | "l" = "m"; + + /** The selected time */ + @Prop({ reflect: true }) value?: string; + + //-------------------------------------------------------------------------- + // + // Private Properties + // + //-------------------------------------------------------------------------- + + private input: HTMLCalciteInputElement; + + //-------------------------------------------------------------------------- + // + // Lifecycle + // + //-------------------------------------------------------------------------- + + connectedCallback(): void { + this.renderInput(); + } + + disconnectedCallback(): void { + this.input.parentNode.removeChild(this.input); + } + + // -------------------------------------------------------------------------- + // + // Render Methods + // + // -------------------------------------------------------------------------- + + private renderInput() { + this.input = document.createElement("calcite-input"); + this.input.disabled = this.disabled; + this.input.icon = "clock"; + this.input.id = `${this.el.id}-input`; + this.input.name = this.name; + this.input.onblur = () => (this.focused = false); + this.input.onfocus = () => (this.focused = true); + this.input.type = "time"; + if (this.value) { + this.input.value = this.value; + } + this.el.insertAdjacentElement("beforeend", this.input); + } + + render(): VNode { + return ( + + +
+ + ); + } +} diff --git a/src/demos/calcite-time.html b/src/demos/calcite-time.html new file mode 100644 index 00000000000..76f0bf12f94 --- /dev/null +++ b/src/demos/calcite-time.html @@ -0,0 +1,63 @@ + + + + + + + + Calcite Time + + + + + + + + + + + + + + < Home +

Calcite Time

+ +
+ +
+
+ +
+
+
+
+ Submit + + +
+ + + + + \ No newline at end of file diff --git a/src/index.html b/src/index.html index eead1e307e3..3d0a8cfcc77 100644 --- a/src/index.html +++ b/src/index.html @@ -150,6 +150,11 @@

Calcite Component Examples - WIP !

>calcite-tile-select +
  • + calcite-time +
  • calcite-tooltip Date: Wed, 23 Sep 2020 16:47:07 -0700 Subject: [PATCH 002/188] wip: fleshing out more UI --- src/components/calcite-time/calcite-time.scss | 47 ++++++++++++++++ src/components/calcite-time/calcite-time.tsx | 55 ++++++++++++++++++- src/demos/calcite-time.html | 19 ++++++- 3 files changed, 118 insertions(+), 3 deletions(-) diff --git a/src/components/calcite-time/calcite-time.scss b/src/components/calcite-time/calcite-time.scss index 014b3b34f33..9963b896a5f 100644 --- a/src/components/calcite-time/calcite-time.scss +++ b/src/components/calcite-time/calcite-time.scss @@ -4,4 +4,51 @@ :host { display: inline-block; + input { + @include focus-style-base(); + border: none; + &:focus { + @include focus-style-inset(); + } + &[type="number"] { + -moz-appearance: textfield; + + &::-webkit-inner-spin-button, + &::-webkit-outer-spin-button { + -webkit-appearance: none; + -moz-appearance: textfield; + margin: 0; + } + } + } +} +:host([scale="s"]) { + input { + font-size: 12px; + padding: 8px; + } +} +:host([scale="m"]) { + input { + font-size: 16px; + padding: 12px; + } +} +:host([scale="l"]) { + input { + font-size: 20px; + padding: 16px; + } +} +.time-picker { + align-items: center; + display: flex; +} +.column { + align-items: center; + display: flex; + flex-direction: column; + input { + width: 1.1em; + } } diff --git a/src/components/calcite-time/calcite-time.tsx b/src/components/calcite-time/calcite-time.tsx index 96019378f5f..76194bc99ff 100644 --- a/src/components/calcite-time/calcite-time.tsx +++ b/src/components/calcite-time/calcite-time.tsx @@ -104,7 +104,60 @@ export class CalciteTime { return ( -
    +
    +
    + + + + +
    +
    :
    +
    + + + + +
    +
    + + + + +
    +
    ); } diff --git a/src/demos/calcite-time.html b/src/demos/calcite-time.html index 76f0bf12f94..f74f5dac784 100644 --- a/src/demos/calcite-time.html +++ b/src/demos/calcite-time.html @@ -34,11 +34,26 @@ - + 05 +
    + + +
    +
    + + +
    +
    + + +
    +     + \ No newline at end of file From 5e704ec069fd3e23aa7f4ec36dc66157b1d9acb9 Mon Sep 17 00:00:00 2001 From: Erik Harper Date: Thu, 15 Oct 2020 12:36:55 -0700 Subject: [PATCH 003/188] time picker styling, start to keydown functionality --- src/components/calcite-time/calcite-time.scss | 55 +++---- src/components/calcite-time/calcite-time.tsx | 141 ++++++++++++++---- src/demos/calcite-time.html | 55 ++++--- 3 files changed, 169 insertions(+), 82 deletions(-) diff --git a/src/components/calcite-time/calcite-time.scss b/src/components/calcite-time/calcite-time.scss index 9963b896a5f..fd66f8a575c 100644 --- a/src/components/calcite-time/calcite-time.scss +++ b/src/components/calcite-time/calcite-time.scss @@ -4,51 +4,44 @@ :host { display: inline-block; - input { - @include focus-style-base(); - border: none; - &:focus { - @include focus-style-inset(); - } - &[type="number"] { - -moz-appearance: textfield; - - &::-webkit-inner-spin-button, - &::-webkit-outer-spin-button { - -webkit-appearance: none; - -moz-appearance: textfield; - margin: 0; - } - } - } } :host([scale="s"]) { - input { - font-size: 12px; - padding: 8px; - } + font-size: 12px; } :host([scale="m"]) { - input { - font-size: 16px; - padding: 12px; - } + font-size: 16px; } :host([scale="l"]) { - input { - font-size: 20px; - padding: 16px; - } + font-size: 20px; +} +::slotted(calcite-input) { + position: relative; + z-index: 200; } .time-picker { align-items: center; + border-radius: var(--calcite-border-radius); + box-shadow: var(--calcite-shadow-2); display: flex; + padding: 0.25em 0; + position: relative; + z-index: 200; } .column { align-items: center; display: flex; + flex: 1 1 auto; flex-direction: column; - input { - width: 1.1em; +} +span { + display: inline-block; + font-weight: var(--calcite-ui-text-weight-medium); + text-align: center; + &:focus { + background: #b5d5ff; + outline: none; } } +calcite-icon { + color: var(--calcite-ui-border-5); +} diff --git a/src/components/calcite-time/calcite-time.tsx b/src/components/calcite-time/calcite-time.tsx index 76194bc99ff..88912773b33 100644 --- a/src/components/calcite-time/calcite-time.tsx +++ b/src/components/calcite-time/calcite-time.tsx @@ -1,4 +1,6 @@ -import { Component, Element, Host, h, Prop, Watch, VNode } from "@stencil/core"; +import { Component, Element, Host, h, Prop, Watch, VNode, State } from "@stencil/core"; + +const numberKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]; @Component({ tag: "calcite-time", @@ -65,6 +67,89 @@ export class CalciteTime { private input: HTMLCalciteInputElement; + @State() hour?: string = "--"; + + @State() minute?: string = "--"; + + @State() ampm?: string = "--"; + + // -------------------------------------------------------------------------- + // + // Private Methods + // + // -------------------------------------------------------------------------- + + private onAmPmKeyDown = (event: KeyboardEvent) => { + // TODO: Support typing am and pm + switch (event.key) { + case "Backspace": + this.ampm = "--"; + break; + case "ArrowUp": + switch (this.ampm) { + case "--": + this.ampm = "AM"; + break; + case "AM": + this.ampm = "PM"; + break; + case "PM": + this.ampm = "AM"; + break; + } + break; + case "ArrowDown": + switch (this.ampm) { + case "--": + this.ampm = "PM"; + break; + case "AM": + this.ampm = "PM"; + break; + case "PM": + this.ampm = "AM"; + break; + } + break; + } + }; + + private onHourKeyDown = (event: KeyboardEvent) => { + // TODO: support arrowup and arrowdown + // TODO: support number constraints + if (numberKeys.includes(event.key)) { + if (this.hour.length === 2) { + this.hour = event.key; + } else { + this.hour = `${this.hour}${event.key}`; + } + } + if (event.key === "Backspace") { + this.hour = "--"; + } + }; + + private onMinuteKeyDown = (event: KeyboardEvent) => { + // TODO: support arrowup and arrowdown + // TODO: support number constraints + if (numberKeys.includes(event.key)) { + if (this.minute.length === 2) { + this.minute = event.key; + } else { + this.minute = `${this.minute}${event.key}`; + } + } + if (event.key === "Backspace") { + this.minute = "--"; + } + }; + + //-------------------------------------------------------------------------- + // + // Event Listeners + // + //-------------------------------------------------------------------------- + //-------------------------------------------------------------------------- // // Lifecycle @@ -106,56 +191,56 @@ export class CalciteTime {
    - - + - - + {this.hour} + +
    :
    - - + - - + {this.minute} + +
    - - + - - + {this.ampm} + +
    diff --git a/src/demos/calcite-time.html b/src/demos/calcite-time.html index f74f5dac784..3e1155bfda5 100644 --- a/src/demos/calcite-time.html +++ b/src/demos/calcite-time.html @@ -37,42 +37,51 @@ - 05 -
    - - -
    -
    - - -
    -
    - - -
    -     - + \ No newline at end of file From 502d43f5c1faa77b2d9a1708d8aeb959f00fe3fc Mon Sep 17 00:00:00 2001 From: Erik Harper Date: Thu, 15 Oct 2020 15:05:45 -0700 Subject: [PATCH 004/188] typing am and pm completes --- src/components/calcite-time/calcite-time.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/calcite-time/calcite-time.tsx b/src/components/calcite-time/calcite-time.tsx index 88912773b33..80370cbe12b 100644 --- a/src/components/calcite-time/calcite-time.tsx +++ b/src/components/calcite-time/calcite-time.tsx @@ -80,8 +80,13 @@ export class CalciteTime { // -------------------------------------------------------------------------- private onAmPmKeyDown = (event: KeyboardEvent) => { - // TODO: Support typing am and pm switch (event.key) { + case "a": + this.ampm = "AM"; + break; + case "p": + this.ampm = "PM"; + break; case "Backspace": this.ampm = "--"; break; From 4667b05b2a3aa1bbd3e8a638bcd9dd4fa85080f4 Mon Sep 17 00:00:00 2001 From: Erik Harper Date: Thu, 15 Oct 2020 15:41:42 -0700 Subject: [PATCH 005/188] feat(calcite-time): up and down arrows and zero padding of single-digit hour values --- src/components/calcite-time/calcite-time.tsx | 45 ++++++++++++++++---- 1 file changed, 37 insertions(+), 8 deletions(-) diff --git a/src/components/calcite-time/calcite-time.tsx b/src/components/calcite-time/calcite-time.tsx index 80370cbe12b..17efc55f0d1 100644 --- a/src/components/calcite-time/calcite-time.tsx +++ b/src/components/calcite-time/calcite-time.tsx @@ -120,17 +120,46 @@ export class CalciteTime { }; private onHourKeyDown = (event: KeyboardEvent) => { - // TODO: support arrowup and arrowdown - // TODO: support number constraints + event.preventDefault(); if (numberKeys.includes(event.key)) { - if (this.hour.length === 2) { - this.hour = event.key; + const keyAsNumber = parseInt(event.key); + if (this.hour === "01" && keyAsNumber >= 0 && keyAsNumber <= 2) { + this.hour = `1${event.key}`; } else { - this.hour = `${this.hour}${event.key}`; + this.hour = `0${event.key}`; + } + } else { + switch (event.key) { + case "Backspace": + this.hour = "--"; + break; + case "ArrowDown": + if (this.hour === "--") { + this.hour = "12"; + } else { + const hourAsNumber = parseInt(this.hour); + if (hourAsNumber === 0) { + this.hour = "12"; + } else { + const newHour = hourAsNumber - 1; + this.hour = newHour >= 10 && newHour <= 12 ? newHour.toString() : `0${newHour}`; + } + } + break; + case "ArrowUp": + if (this.hour === "--") { + this.hour = "01"; + } else { + const hourAsNumber = parseInt(this.hour); + if (hourAsNumber === 12) { + this.hour = "00"; + } else { + const newHour = hourAsNumber + 1; + this.hour = newHour >= 10 && newHour <= 12 ? newHour.toString() : `0${newHour}`; + } + } + break; } - } - if (event.key === "Backspace") { - this.hour = "--"; } }; From 2f57c8f36b47693ad48062dabeb0e5edd1517b56 Mon Sep 17 00:00:00 2001 From: Erik Harper Date: Thu, 15 Oct 2020 17:01:16 -0700 Subject: [PATCH 006/188] feat(calcite-time): up and down buttons function for hour and am/pm --- src/components/calcite-time/calcite-time.scss | 1 + src/components/calcite-time/calcite-time.tsx | 137 +++++++++++------- 2 files changed, 82 insertions(+), 56 deletions(-) diff --git a/src/components/calcite-time/calcite-time.scss b/src/components/calcite-time/calcite-time.scss index fd66f8a575c..f84aadd64dc 100644 --- a/src/components/calcite-time/calcite-time.scss +++ b/src/components/calcite-time/calcite-time.scss @@ -4,6 +4,7 @@ :host { display: inline-block; + user-select: none; } :host([scale="s"]) { font-size: 12px; diff --git a/src/components/calcite-time/calcite-time.tsx b/src/components/calcite-time/calcite-time.tsx index 17efc55f0d1..89bcfa84358 100644 --- a/src/components/calcite-time/calcite-time.tsx +++ b/src/components/calcite-time/calcite-time.tsx @@ -65,6 +65,8 @@ export class CalciteTime { // //-------------------------------------------------------------------------- + private hourEl: HTMLSpanElement; + private input: HTMLCalciteInputElement; @State() hour?: string = "--"; @@ -79,7 +81,7 @@ export class CalciteTime { // // -------------------------------------------------------------------------- - private onAmPmKeyDown = (event: KeyboardEvent) => { + private amPmKeyDownHandler = (event: KeyboardEvent): void => { switch (event.key) { case "a": this.ampm = "AM"; @@ -91,36 +93,49 @@ export class CalciteTime { this.ampm = "--"; break; case "ArrowUp": - switch (this.ampm) { - case "--": - this.ampm = "AM"; - break; - case "AM": - this.ampm = "PM"; - break; - case "PM": - this.ampm = "AM"; - break; - } + this.incrementAmPm(); break; case "ArrowDown": - switch (this.ampm) { - case "--": - this.ampm = "PM"; - break; - case "AM": - this.ampm = "PM"; - break; - case "PM": - this.ampm = "AM"; - break; - } + this.decrementAmPm(); break; + case "Tab": + return; } + event.preventDefault(); }; - private onHourKeyDown = (event: KeyboardEvent) => { - event.preventDefault(); + private decrementAmPm = (): void => { + switch (this.ampm) { + case "--": + this.ampm = "PM"; + break; + case "AM": + this.ampm = "PM"; + break; + case "PM": + this.ampm = "AM"; + break; + } + }; + + private decrementHour = (): void => { + if (this.hour === "--") { + this.hour = "12"; + } else { + const hourAsNumber = parseInt(this.hour); + if (hourAsNumber === 0) { + this.hour = "12"; + } else { + const newHour = hourAsNumber - 1; + this.hour = newHour >= 10 && newHour <= 12 ? newHour.toString() : `0${newHour}`; + } + } + }; + + private hourKeyDownHandler = (event: KeyboardEvent): void => { + if (event.key === "Tab") { + return; + } if (numberKeys.includes(event.key)) { const keyAsNumber = parseInt(event.key); if (this.hour === "01" && keyAsNumber >= 0 && keyAsNumber <= 2) { @@ -134,36 +149,45 @@ export class CalciteTime { this.hour = "--"; break; case "ArrowDown": - if (this.hour === "--") { - this.hour = "12"; - } else { - const hourAsNumber = parseInt(this.hour); - if (hourAsNumber === 0) { - this.hour = "12"; - } else { - const newHour = hourAsNumber - 1; - this.hour = newHour >= 10 && newHour <= 12 ? newHour.toString() : `0${newHour}`; - } - } + this.decrementHour(); break; case "ArrowUp": - if (this.hour === "--") { - this.hour = "01"; - } else { - const hourAsNumber = parseInt(this.hour); - if (hourAsNumber === 12) { - this.hour = "00"; - } else { - const newHour = hourAsNumber + 1; - this.hour = newHour >= 10 && newHour <= 12 ? newHour.toString() : `0${newHour}`; - } - } + this.incrementHour(); break; } } + event.preventDefault(); }; - private onMinuteKeyDown = (event: KeyboardEvent) => { + private incrementAmPm = (): void => { + switch (this.ampm) { + case "--": + this.ampm = "AM"; + break; + case "AM": + this.ampm = "PM"; + break; + case "PM": + this.ampm = "AM"; + break; + } + }; + + private incrementHour = (): void => { + if (this.hour === "--") { + this.hour = "01"; + } else { + const hourAsNumber = parseInt(this.hour); + if (hourAsNumber === 12) { + this.hour = "00"; + } else { + const newHour = hourAsNumber + 1; + this.hour = newHour >= 10 && newHour <= 12 ? newHour.toString() : `0${newHour}`; + } + } + }; + + private minuteKeyDownHandler = (event: KeyboardEvent): void => { // TODO: support arrowup and arrowdown // TODO: support number constraints if (numberKeys.includes(event.key)) { @@ -225,7 +249,7 @@ export class CalciteTime {
    - + (this.hourEl = el)} role="spinbutton" tabIndex={0} > {this.hour} - +
    -
    :
    +
    :
    @@ -260,7 +285,7 @@ export class CalciteTime {
    - + {this.ampm} - +
    From e7152260caa0ae87c88bac3da5e0703bacc4b2e0 Mon Sep 17 00:00:00 2001 From: Erik Harper Date: Wed, 30 Dec 2020 11:42:20 -0800 Subject: [PATCH 007/188] adding guid support --- src/components/calcite-time/calcite-time.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/calcite-time/calcite-time.tsx b/src/components/calcite-time/calcite-time.tsx index 89bcfa84358..30085d5bbf5 100644 --- a/src/components/calcite-time/calcite-time.tsx +++ b/src/components/calcite-time/calcite-time.tsx @@ -1,4 +1,5 @@ import { Component, Element, Host, h, Prop, Watch, VNode, State } from "@stencil/core"; +import { guid } from "../../utils/guid"; const numberKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]; @@ -45,6 +46,9 @@ export class CalciteTime { } } + /** The id attribute. When omitted, a globally unique identifier is used. */ + @Prop({ reflect: true }) guid: string; + /** The name of the time input */ @Prop({ reflect: true }) name?: string = ""; @@ -215,6 +219,7 @@ export class CalciteTime { //-------------------------------------------------------------------------- connectedCallback(): void { + this.guid = this.el.id || `calcite-time-${guid()}`; this.renderInput(); } @@ -232,7 +237,7 @@ export class CalciteTime { this.input = document.createElement("calcite-input"); this.input.disabled = this.disabled; this.input.icon = "clock"; - this.input.id = `${this.el.id}-input`; + this.input.id = `${this.guid}-input`; this.input.name = this.name; this.input.onblur = () => (this.focused = false); this.input.onfocus = () => (this.focused = true); From cb1ae8a18d1de6a7a8bbd8f0e0f50f1f61a4e740 Mon Sep 17 00:00:00 2001 From: Erik Harper Date: Wed, 30 Dec 2020 16:45:49 -0800 Subject: [PATCH 008/188] renaming to calcite-time-picker --- .../calcite-inline-editable.e2e.ts | 4 ++-- .../calcite-time-picker.e2e.ts} | 12 ++++++------ .../calcite-time-picker.scss} | 0 .../calcite-time-picker.stories.ts} | 4 ++-- .../calcite-time-picker.tsx} | 10 +++++----- .../{calcite-time.html => calcite-time-picker.html} | 12 ++++++------ src/index.html | 4 ++-- 7 files changed, 23 insertions(+), 23 deletions(-) rename src/components/{calcite-time/calcite-time.e2e.ts => calcite-time-picker/calcite-time-picker.e2e.ts} (74%) rename src/components/{calcite-time/calcite-time.scss => calcite-time-picker/calcite-time-picker.scss} (100%) rename src/components/{calcite-time/calcite-time.stories.ts => calcite-time-picker/calcite-time-picker.stories.ts} (91%) rename src/components/{calcite-time/calcite-time.tsx => calcite-time-picker/calcite-time-picker.tsx} (97%) rename src/demos/{calcite-time.html => calcite-time-picker.html} (81%) diff --git a/src/components/calcite-inline-editable/calcite-inline-editable.e2e.ts b/src/components/calcite-inline-editable/calcite-inline-editable.e2e.ts index d73c032d565..bb585ed77a9 100644 --- a/src/components/calcite-inline-editable/calcite-inline-editable.e2e.ts +++ b/src/components/calcite-inline-editable/calcite-inline-editable.e2e.ts @@ -253,7 +253,7 @@ describe("calcite-inline-editable", () => { it("disables editing when afterConfirm resolves successfully", async () => { const element = await page.find("calcite-inline-editable"); - const afterConfirm = () => new Promise((resolve) => setTimeout(resolve, 100)); + const afterConfirm: () => Promise = () => new Promise((resolve) => setTimeout(resolve, 100)); // https://github.com/ionic-team/stencil/issues/1174 await page.exposeFunction("afterConfirm", afterConfirm); await page.$eval("calcite-inline-editable", (el: HTMLCalciteInlineEditableElement) => { @@ -274,7 +274,7 @@ describe("calcite-inline-editable", () => { it("does not disable editing when afterConfirm resolves unsuccessfully", async () => { const element = await page.find("calcite-inline-editable"); - const afterConfirm = () => new Promise((_resolve, reject) => setTimeout(reject, 100)); + const afterConfirm: () => Promise = () => new Promise((_resolve, reject) => setTimeout(reject, 100)); // https://github.com/ionic-team/stencil/issues/1174 await page.exposeFunction("afterConfirm", afterConfirm); await page.$eval("calcite-inline-editable", (el: HTMLCalciteInlineEditableElement) => { diff --git a/src/components/calcite-time/calcite-time.e2e.ts b/src/components/calcite-time-picker/calcite-time-picker.e2e.ts similarity index 74% rename from src/components/calcite-time/calcite-time.e2e.ts rename to src/components/calcite-time-picker/calcite-time-picker.e2e.ts index 02ab970e9a3..f3a778e7b67 100644 --- a/src/components/calcite-time/calcite-time.e2e.ts +++ b/src/components/calcite-time-picker/calcite-time-picker.e2e.ts @@ -1,13 +1,13 @@ // import { newE2EPage } from "@stencil/core/testing"; import { accessible, defaults, hidden, reflects, renders } from "../../tests/commonTests"; -describe("calcite-time", () => { - it("renders", async () => renders("calcite-time")); +describe("calcite-time-picker", () => { + it("renders", async () => renders("calcite-time-picker")); - it("is accessible", async () => accessible(``)); + it("is accessible", async () => accessible(``)); it("has defaults", async () => - defaults("calcite-time", [ + defaults("calcite-time-picker", [ { propertyName: "embed", defaultValue: false }, { propertyName: "focused", defaultValue: false }, { propertyName: "hidden", defaultValue: false }, @@ -15,7 +15,7 @@ describe("calcite-time", () => { ])); it("reflects", async () => - reflects("calcite-time", [ + reflects("calcite-time-picker", [ { propertyName: "active", value: true }, { propertyName: "embed", value: true }, { propertyName: "focused", value: true }, @@ -24,5 +24,5 @@ describe("calcite-time", () => { { propertyName: "theme", value: "light" } ])); - it("honors hidden attribute", async () => hidden("calcite-time")); + it("honors hidden attribute", async () => hidden("calcite-time-picker")); }); diff --git a/src/components/calcite-time/calcite-time.scss b/src/components/calcite-time-picker/calcite-time-picker.scss similarity index 100% rename from src/components/calcite-time/calcite-time.scss rename to src/components/calcite-time-picker/calcite-time-picker.scss diff --git a/src/components/calcite-time/calcite-time.stories.ts b/src/components/calcite-time-picker/calcite-time-picker.stories.ts similarity index 91% rename from src/components/calcite-time/calcite-time.stories.ts rename to src/components/calcite-time-picker/calcite-time-picker.stories.ts index e90f4f3c9da..97eeb9ff16c 100644 --- a/src/components/calcite-time/calcite-time.stories.ts +++ b/src/components/calcite-time-picker/calcite-time-picker.stories.ts @@ -8,7 +8,7 @@ storiesOf("Components/Time", module) .add( "Basic", () => ` - - + ` ); diff --git a/src/components/calcite-time/calcite-time.tsx b/src/components/calcite-time-picker/calcite-time-picker.tsx similarity index 97% rename from src/components/calcite-time/calcite-time.tsx rename to src/components/calcite-time-picker/calcite-time-picker.tsx index 30085d5bbf5..d160573cfb7 100644 --- a/src/components/calcite-time/calcite-time.tsx +++ b/src/components/calcite-time-picker/calcite-time-picker.tsx @@ -4,18 +4,18 @@ import { guid } from "../../utils/guid"; const numberKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]; @Component({ - tag: "calcite-time", - styleUrl: "calcite-time.scss", + tag: "calcite-time-picker", + styleUrl: "calcite-time-picker.scss", shadow: true }) -export class CalciteTime { +export class CalciteTimePicker { //-------------------------------------------------------------------------- // // Element // //-------------------------------------------------------------------------- - @Element() el: HTMLCalciteTimeElement; + @Element() el: HTMLCalciteTimePickerElement; //-------------------------------------------------------------------------- // @@ -219,7 +219,7 @@ export class CalciteTime { //-------------------------------------------------------------------------- connectedCallback(): void { - this.guid = this.el.id || `calcite-time-${guid()}`; + this.guid = this.el.id || `calcite-time-picker-${guid()}`; this.renderInput(); } diff --git a/src/demos/calcite-time.html b/src/demos/calcite-time-picker.html similarity index 81% rename from src/demos/calcite-time.html rename to src/demos/calcite-time-picker.html index 3e1155bfda5..608d08863c8 100644 --- a/src/demos/calcite-time.html +++ b/src/demos/calcite-time-picker.html @@ -48,15 +48,15 @@

    Calcite Time

    - +
    - +
    - +
    @@ -64,15 +64,15 @@

    Calcite Time

    - +
    - +
    - +
    diff --git a/src/index.html b/src/index.html index ae9323635c4..13e118373ac 100644 --- a/src/index.html +++ b/src/index.html @@ -170,8 +170,8 @@

    Calcite Component Examples - WIP !

    >
  • - calcite-timecalcite-time-picker
  • From 4be659f7b52647a42ef355d3dfeaa7d9b6fe3fb0 Mon Sep 17 00:00:00 2001 From: Erik Harper Date: Thu, 31 Dec 2020 15:03:57 -0800 Subject: [PATCH 009/188] refactor: splitting calcite-time into calcite-time-picker and calcite-input-time-picker --- .../calcite-input-time-picker.scss | 11 ++ .../calcite-input-time-picker.tsx | 109 ++++++++++++++++++ .../calcite-time-picker.scss | 8 +- .../calcite-time-picker.tsx | 81 +------------ src/demos/calcite-input-time-picker.html | 87 ++++++++++++++ src/demos/calcite-time-picker.html | 58 +++------- src/index.html | 3 + 7 files changed, 233 insertions(+), 124 deletions(-) create mode 100644 src/components/calcite-input-time-picker/calcite-input-time-picker.scss create mode 100644 src/components/calcite-input-time-picker/calcite-input-time-picker.tsx create mode 100644 src/demos/calcite-input-time-picker.html diff --git a/src/components/calcite-input-time-picker/calcite-input-time-picker.scss b/src/components/calcite-input-time-picker/calcite-input-time-picker.scss new file mode 100644 index 00000000000..78bc1ac732b --- /dev/null +++ b/src/components/calcite-input-time-picker/calcite-input-time-picker.scss @@ -0,0 +1,11 @@ +:host-context([theme="dark"]) { + @include calcite-theme-dark(); +} +:host { + display: inline-block; + user-select: none; +} +calcite-input { + position: relative; + z-index: 200; +} diff --git a/src/components/calcite-input-time-picker/calcite-input-time-picker.tsx b/src/components/calcite-input-time-picker/calcite-input-time-picker.tsx new file mode 100644 index 00000000000..7139d35b2e5 --- /dev/null +++ b/src/components/calcite-input-time-picker/calcite-input-time-picker.tsx @@ -0,0 +1,109 @@ +import { Component, Element, Host, VNode, h, Prop, Watch } from "@stencil/core"; + +@Component({ + tag: "calcite-input-time-picker", + styleUrl: "calcite-input-time-picker.scss", + scoped: true +}) +export class CalciteInputTimePicker { + //-------------------------------------------------------------------------- + // + // Element + // + //-------------------------------------------------------------------------- + + @Element() el: HTMLCalciteInputTimePickerElement; + + //-------------------------------------------------------------------------- + // + // Properties + // + //-------------------------------------------------------------------------- + + /** The active state of the time input. When true, the time input popup is displayed. */ + @Prop({ reflect: true }) active = false; + + /** The disabled state of the time input */ + @Prop({ reflect: true }) disabled?: boolean = false; + + @Watch("disabled") + disabledChanged(disabled: boolean): void { + this.input.disabled = disabled; + } + + /** The focused state of the time input */ + @Prop({ mutable: true, reflect: true }) focused = false; + + @Watch("focused") + focusedChanged(focused: boolean): void { + if (focused && !this.el.hasAttribute("hidden")) { + this.input.focus(); + } else { + this.input.blur(); + } + } + + /** The id attribute. When omitted, a globally unique identifier is used. */ + @Prop({ reflect: true }) guid: string; + + /** The name of the time input */ + @Prop({ reflect: true }) name?: string = ""; + + @Watch("name") + nameChanged(newName: string): void { + this.input.name = newName; + } + + /** The scale (size) of the time input */ + @Prop({ reflect: true }) scale: "s" | "m" | "l" = "m"; + + /** The selected time */ + @Prop({ reflect: true }) value?: string; + + //-------------------------------------------------------------------------- + // + // Private Properties + // + //-------------------------------------------------------------------------- + + private input: HTMLCalciteInputElement; + + // -------------------------------------------------------------------------- + // + // Private Methods + // + // -------------------------------------------------------------------------- + + private onCalciteInputBlur = (): void => { + this.focused = false; + }; + + private onCalciteInputFocus = (): void => { + this.focused = true; + }; + + // -------------------------------------------------------------------------- + // + // Render Methods + // + // -------------------------------------------------------------------------- + + render(): VNode { + return ( + + (this.input = el)} + type="time" + value={this.value} + /> + + + ); + } +} diff --git a/src/components/calcite-time-picker/calcite-time-picker.scss b/src/components/calcite-time-picker/calcite-time-picker.scss index f84aadd64dc..3a438961251 100644 --- a/src/components/calcite-time-picker/calcite-time-picker.scss +++ b/src/components/calcite-time-picker/calcite-time-picker.scss @@ -1,23 +1,21 @@ :host-context([theme="dark"]) { @include calcite-theme-dark(); } - :host { display: inline-block; user-select: none; } :host([scale="s"]) { + width: 120px; font-size: 12px; } :host([scale="m"]) { font-size: 16px; + width: 140px; } :host([scale="l"]) { font-size: 20px; -} -::slotted(calcite-input) { - position: relative; - z-index: 200; + width: 180px; } .time-picker { align-items: center; diff --git a/src/components/calcite-time-picker/calcite-time-picker.tsx b/src/components/calcite-time-picker/calcite-time-picker.tsx index d160573cfb7..df5680c2c61 100644 --- a/src/components/calcite-time-picker/calcite-time-picker.tsx +++ b/src/components/calcite-time-picker/calcite-time-picker.tsx @@ -1,5 +1,4 @@ -import { Component, Element, Host, h, Prop, Watch, VNode, State } from "@stencil/core"; -import { guid } from "../../utils/guid"; +import { Component, Element, Host, h, Prop, VNode, State } from "@stencil/core"; const numberKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]; @@ -23,46 +22,12 @@ export class CalciteTimePicker { // //-------------------------------------------------------------------------- - /** The active state of the time input. When true, the time input popup is displayed. */ - @Prop({ reflect: true }) active = false; + /** The focused state of the time picker */ + @Prop({ reflect: true }) focused = false; - /** The disabled state of the time input */ - @Prop({ reflect: true }) disabled?: boolean = false; - - @Watch("disabled") - disabledChanged(disabled: boolean): void { - this.input.disabled = disabled; - } - - /** The focused state of the time input */ - @Prop({ mutable: true, reflect: true }) focused = false; - - @Watch("focused") - focusedChanged(focused: boolean): void { - if (focused && !this.el.hasAttribute("hidden")) { - this.input.focus(); - } else { - this.input.blur(); - } - } - - /** The id attribute. When omitted, a globally unique identifier is used. */ - @Prop({ reflect: true }) guid: string; - - /** The name of the time input */ - @Prop({ reflect: true }) name?: string = ""; - - @Watch("name") - nameChanged(newName: string): void { - this.input.name = newName; - } - - /** The scale (size) of the time input */ + /** The scale (size) of the time picker */ @Prop({ reflect: true }) scale: "s" | "m" | "l" = "m"; - /** The selected time */ - @Prop({ reflect: true }) value?: string; - //-------------------------------------------------------------------------- // // Private Properties @@ -71,8 +36,6 @@ export class CalciteTimePicker { private hourEl: HTMLSpanElement; - private input: HTMLCalciteInputElement; - @State() hour?: string = "--"; @State() minute?: string = "--"; @@ -206,48 +169,12 @@ export class CalciteTimePicker { } }; - //-------------------------------------------------------------------------- - // - // Event Listeners - // - //-------------------------------------------------------------------------- - - //-------------------------------------------------------------------------- - // - // Lifecycle - // - //-------------------------------------------------------------------------- - - connectedCallback(): void { - this.guid = this.el.id || `calcite-time-picker-${guid()}`; - this.renderInput(); - } - - disconnectedCallback(): void { - this.input.parentNode.removeChild(this.input); - } - // -------------------------------------------------------------------------- // // Render Methods // // -------------------------------------------------------------------------- - private renderInput() { - this.input = document.createElement("calcite-input"); - this.input.disabled = this.disabled; - this.input.icon = "clock"; - this.input.id = `${this.guid}-input`; - this.input.name = this.name; - this.input.onblur = () => (this.focused = false); - this.input.onfocus = () => (this.focused = true); - this.input.type = "time"; - if (this.value) { - this.input.value = this.value; - } - this.el.insertAdjacentElement("beforeend", this.input); - } - render(): VNode { return ( diff --git a/src/demos/calcite-input-time-picker.html b/src/demos/calcite-input-time-picker.html new file mode 100644 index 00000000000..0520dc1abc6 --- /dev/null +++ b/src/demos/calcite-input-time-picker.html @@ -0,0 +1,87 @@ + + + + + + + + Calcite Input Time Picker + + + + + + + + + + + + + < Home +

    Calcite Input Time Picker

    + +
    + +
    + +
    + + +
    +
    + + +
    +
    + + +
    +     +
    +
    + +
    + + +
    +
    + + +
    +
    + + +
    +     +
    + Submit + +     +
    +     +     + + + \ No newline at end of file diff --git a/src/demos/calcite-time-picker.html b/src/demos/calcite-time-picker.html index 608d08863c8..ae5d867f18e 100644 --- a/src/demos/calcite-time-picker.html +++ b/src/demos/calcite-time-picker.html @@ -5,7 +5,7 @@ - Calcite Time + Calcite Time Picker - - - - - - - - - - - - < Home -

    Calcite Time Picker

    - - - - - - - -
    - -

    Small

    - - - - - - - -

    Medium

    - - - - - - - -

    Large

    - - - - - - -     -
    - -
    - -

    Small

    - - - - - - - -

    Medium

    - - - - - - - -

    Large

    - - - - - - -     -
    -     - - - - \ No newline at end of file diff --git a/src/index.html b/src/index.html index 670f8d75a8d..eb21b4cb88d 100644 --- a/src/index.html +++ b/src/index.html @@ -166,9 +166,6 @@

    Calcite Component Examples - WIP !

  • calcite-tile-select
    • -
  • - calcite-time-picker -
  • calcite-tooltip
    • From e3f97ea533ca4e69b4912e0a590228c0b3bfdd59 Mon Sep 17 00:00:00 2001 From: Erik Harper Date: Mon, 7 Jun 2021 16:04:56 -0700 Subject: [PATCH 188/188] fixing dark theme usage --- .../calcite-input-time-picker.stories.ts | 2 +- .../calcite-time-picker.stories.ts | 47 ------------------- src/demos/calcite-input-time-picker.html | 14 +++--- 3 files changed, 8 insertions(+), 55 deletions(-) delete mode 100644 src/components/calcite-time-picker/calcite-time-picker.stories.ts diff --git a/src/components/calcite-input-time-picker/calcite-input-time-picker.stories.ts b/src/components/calcite-input-time-picker/calcite-input-time-picker.stories.ts index 1bec2b33aa2..ab2e6ebeff8 100644 --- a/src/components/calcite-input-time-picker/calcite-input-time-picker.stories.ts +++ b/src/components/calcite-input-time-picker/calcite-input-time-picker.stories.ts @@ -29,11 +29,11 @@ export const DarkTheme = (): string => html` diff --git a/src/components/calcite-time-picker/calcite-time-picker.stories.ts b/src/components/calcite-time-picker/calcite-time-picker.stories.ts deleted file mode 100644 index 57c512ee578..00000000000 --- a/src/components/calcite-time-picker/calcite-time-picker.stories.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { number, select, text } from "@storybook/addon-knobs"; -import { boolean } from "../../../.storybook/helpers"; -import { darkBackground } from "../../../.storybook/utils"; -import readme from "./readme.md"; -import { html } from "../../tests/utils"; - -export default { - title: "Components/Controls/Time/Time Picker", - - parameters: { - notes: readme - } -}; - -export const LightTheme = (): string => html` - - -`; - -export const DarkTheme = (): string => html` - - -`; - -DarkTheme.story = { - parameters: { backgrounds: darkBackground } -}; diff --git a/src/demos/calcite-input-time-picker.html b/src/demos/calcite-input-time-picker.html index c9dc0502d89..4af6a846b45 100644 --- a/src/demos/calcite-input-time-picker.html +++ b/src/demos/calcite-input-time-picker.html @@ -110,33 +110,33 @@

    Calcite Input Time Picker

    -
    +
    Small - +
    Small with seconds - +
    Medium - +
    Medium with seconds - +
    Large - +
    Large with seconds - +