feat(input-date-picker, input-time-picker): add status property (#7915)

**Related Issues:** #5723, #4276 ## Summary Add `status` property to `calcite-input-date-picker` and `calcite-input-time-picker`. Validation messages will be added in a second pass to ensure consistency with the messages displayed for components with invalid values on form submission.
Esri · Oct 2, 2023 · 4d53346 · 4d53346
1 parent ca611f2
commit 4d53346
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 76 deletions.
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
@@ -18,6 +18,7 @@ export const simple = (): string => html`
   <div style="width: 400px">
     <calcite-input-date-picker
       scale="${select("scale", ["s", "m", "l"], "m")}"
+      status="${select("status", ["idle", "invalid", "valid"], "idle")}"
       value="${text("value", "2020-12-12")}"
       min="${text("min", "2016-08-09")}"
       max="${text("max", "2023-12-18")}"
@@ -31,6 +32,7 @@ export const range = (): string => html`
   <div style="width: 400px">
     <calcite-input-date-picker
       scale="${select("scale", ["s", "m", "l"], "m")}"
+      status="${select("status", ["idle", "invalid", "valid"], "idle")}"
       min="${text("min", "2016-08-09")}"
       max="${text("max", "2023-12-18")}"
       lang="${select("locale", locales, "en")}"
@@ -86,6 +88,12 @@ export const readOnlyHasNoDropdownAffordance_TestOnly = (): string => html`
   </div>
 `;
 
+export const invalidStatus_TestOnly = (): string => html`
+  <div style="width: 400px">
+    <calcite-input-date-picker status="invalid" value="2020-12-12"></calcite-input-date-picker>
+  </div>
+`;
+
 export const darkModeRTL_TestOnly = (): string => html`
   <div style="width: 400px">
     <calcite-input-date-picker

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -80,6 +80,7 @@ import {
 import { FocusTrap } from "focus-trap";
 import { guid } from "../../utils/guid";
 import { normalizeToCurrentCentury, isTwoDigitYear } from "./utils";
+import { Status } from "../interfaces";
 
 @Component({
   tag: "calcite-input-date-picker",
@@ -285,6 +286,9 @@ export class InputDatePicker
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: "s" | "m" | "l" = "m";
 
+  /** Specifies the status of the input field, which determines message and icons. */
+  @Prop({ reflect: true }) status: Status = "idle";
+
   /**
    * Specifies the placement of the `calcite-date-picker` relative to the component.
    *
@@ -542,6 +546,7 @@ export class InputDatePicker
                 readOnly={readOnly}
                 role="combobox"
                 scale={this.scale}
+                status={this.status}
                 type="text"
                 // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
                 ref={this.setStartInput}
@@ -640,6 +645,7 @@ export class InputDatePicker
                   readOnly={readOnly}
                   role="combobox"
                   scale={this.scale}
+                  status={this.status}
                   type="text"
                   // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
                   ref={this.setEndInput}

diff --git a/packages/calcite-components/src/components/input-number/input-number.stories.ts b/packages/calcite-components/src/components/input-number/input-number.stories.ts
@@ -16,7 +16,6 @@ export const simple = (): string => html`
   <div style="width:300px;max-width:100%;text-align:center;">
     <calcite-input-number
       scale="${select("scale", ["s", "m", "l"], "m")}"
-      status="${select("status", ["idle", "valid", "invalid"], "idle")}"
       status="${select("status", ["idle", "invalid", "valid"], "idle")}"
       alignment="${select("alignment", ["start", "end"], "start")}"
       number-button-type="${select("number-button-type", ["none", "horizontal", "vertical"], "horizontal")}"
@@ -152,3 +151,6 @@ export const hebrewNumberingSystemAndMediumIconForLargeInputStyling_TestOnly = (
 
 export const arabicLocaleWithLatinNumberingSystem_TestOnly = (): string =>
   html`<calcite-input-number lang="ar-EG" numbering-system="latn" value="123456"></calcite-input-number>`;
+
+export const invalidStatus_TestOnly = (): string =>
+  html`<calcite-input-number status="invalid" value="54321"></calcite-input-number>`;
diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.stories.ts b/packages/calcite-components/src/components/input-time-picker/input-time-picker.stories.ts
@@ -20,113 +20,51 @@ export const simple = (): string => html`
     name="${text("name", "simple")}"
     placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
+    status="${select("status", ["idle", "invalid", "valid"], "idle")}"
     step="${number("step", 1)}"
     value="${text("value", "10:37")}"
   >
   </calcite-input-time-picker>
 `;
 
 export const deciSeconds_TestOnly = (): string => html`
-  <calcite-input-time-picker
-    ${boolean("disabled", false)}
-    ${boolean("hidden", false)}
-    name="${text("name", "simple")}"
-    ${boolean("open", true)}
-    placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    step="${number("step", 0.1)}"
-    value="${text("value", "10:37:09.5")}"
-  >
-  </calcite-input-time-picker>
+  <calcite-input-time-picker step="0.1" value="10:37:09.5" open> </calcite-input-time-picker>
 `;
 
 export const centiseconds_TestOnly = (): string => html`
-  <calcite-input-time-picker
-    ${boolean("disabled", false)}
-    ${boolean("hidden", false)}
-    name="${text("name", "simple")}"
-    ${boolean("open", true)}
-    placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    step="${number("step", 0.01)}"
-    value="${text("value", "10:37:09.06")}"
-  >
-  </calcite-input-time-picker>
+  <calcite-input-time-picker step="0.01" value="10:37:09.06" open> </calcite-input-time-picker>
 `;
 
 export const milliseconds_TestOnly = (): string => html`
-  <calcite-input-time-picker
-    ${boolean("disabled", false)}
-    ${boolean("hidden", false)}
-    name="${text("name", "simple")}"
-    ${boolean("open", true)}
-    placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    step="${number("step", 0.001)}"
-    value="${text("value", "10:37:09.023")}"
-  >
-  </calcite-input-time-picker>
+  <calcite-input-time-picker step="0.001" value="10:37:09.023" open> </calcite-input-time-picker>
 `;
 
 export const disabled_TestOnly = (): string =>
   html`<calcite-input-time-picker disabled scale="l" icon step="1" value="01:02"></calcite-input-time-picker>`;
 
 export const darkModeRTL_TestOnly = (): string => html`
-  <calcite-input-time-picker
-    ${boolean("disabled", false)}
-    ${boolean("hidden", false)}
-    class="calcite-mode-dark"
-    name="${text("name", "dark")}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    step="${number("step", 1)}"
-    value="${text("value", "22:37")}"
-  >
-  </calcite-input-time-picker>
+  <calcite-input-time-picker class="calcite-mode-dark" value="22:37" step="1"> </calcite-input-time-picker>
 `;
 
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
 
 export const open_TestOnly = (): string => html`
-  <calcite-input-time-picker
-    name="${text("name", "placement-top")}"
-    value="${text("value", "10:37")}"
-    ${boolean("open", true)}
-  >
-  </calcite-input-time-picker>
+  <calcite-input-time-picker value="10:37" open> </calcite-input-time-picker>
 `;
 
 export const koreanLocale_TestOnly = (): string => html`
-  <calcite-input-time-picker
-    id="reference-element"
-    ${boolean("disabled", false)}
-    ${boolean("hidden", false)}
-    name="${text("name", "light")}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    step="${number("step", 1)}"
-    value="${text("value", "10:37")}"
-    lang="ko"
-    open
-  >
-  </calcite-input-time-picker>
+  <calcite-input-time-picker lang="ko" value="10:37" step="1" open> </calcite-input-time-picker>
 `;
 
 export const arabicLocaleNumberingSystem_TestOnly = (): string => html`
-  <calcite-input-time-picker
-    id="reference-element"
-    ${boolean("disabled", false)}
-    ${boolean("hidden", false)}
-    name="${text("name", "light")}"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    step="${number("step", 1)}"
-    value="${text("value", "1:33:7")}"
-    lang="ar"
-    numbering-system="arab"
-    dir="rtl"
-    open
-  >
+  <calcite-input-time-picker dir="rtl" lang="ar" numbering-system="arab" step="1" value="1:33:7" open>
   </calcite-input-time-picker>
 `;
 
 export const readOnlyHasNoDropdownAffordance_TestOnly = (): string => html`
   <calcite-input-time-picker read-only value="10:37"></calcite-input-time-picker>
 `;
+
+export const invalidStatus_TestOnly = (): string => html`
+  <calcite-input-time-picker value="12:34" step="1" status="invalid" open> </calcite-input-time-picker>
+`;
diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
@@ -57,7 +57,7 @@ import {
   localizeTimeString,
   toISOTimeString,
 } from "../../utils/time";
-import { Scale } from "../interfaces";
+import { Scale, Status } from "../interfaces";
 import { TimePickerMessages } from "../time-picker/assets/time-picker/t9n";
 import { connectMessages, disconnectMessages, setUpMessages, T9nComponent } from "../../utils/t9n";
 import { InputTimePickerMessages } from "./assets/input-time-picker/t9n";
@@ -272,6 +272,9 @@ export class InputTimePicker
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
 
+  /** Specifies the status of the input field, which determines message and icons. */
+  @Prop({ reflect: true }) status: Status = "idle";
+
   /**
    * Determines the type of positioning to use for the overlaid content.
    *
@@ -980,6 +983,7 @@ export class InputTimePicker
             readOnly={readOnly}
             role="combobox"
             scale={this.scale}
+            status={this.status}
             step={this.step}
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
             ref={this.setInputAndTransitionEl}