From 005f7de8b90352e56e9ec6a2e3a7b22af6a757ab Mon Sep 17 00:00:00 2001
From: Ben Elan <no-reply@benelan.dev>
Date: Wed, 10 Jan 2024 14:03:40 -0800
Subject: [PATCH 1/2] refactor: reflect validationIcon property

---
 .../src/components/combobox/combobox.e2e.ts   | 20 +++++++++++++
 .../src/components/combobox/combobox.tsx      |  2 +-
 .../input-date-picker.e2e.ts                  | 30 +++++++++++++++++++
 .../input-date-picker/input-date-picker.tsx   |  2 +-
 .../input-number/input-number.e2e.ts          | 12 ++++++++
 .../components/input-number/input-number.tsx  |  2 +-
 .../components/input-text/input-text.e2e.ts   | 12 ++++++++
 .../src/components/input-text/input-text.tsx  |  2 +-
 .../input-time-picker.e2e.ts                  |  5 ++++
 .../input-time-picker/input-time-picker.tsx   |  2 +-
 .../input-time-zone/input-time-zone.e2e.ts    |  5 ++++
 .../input-time-zone/input-time-zone.tsx       |  2 +-
 .../src/components/input/input.e2e.ts         | 12 ++++++++
 .../src/components/input/input.tsx            |  2 +-
 .../src/components/select/select.e2e.ts       | 18 +++++++++++
 .../src/components/select/select.tsx          |  2 +-
 .../src/components/text-area/text-area.e2e.ts | 20 +++++++++++++
 .../src/components/text-area/text-area.tsx    |  2 +-
 18 files changed, 143 insertions(+), 9 deletions(-)

diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
index 5ba9b928311..753d399af8e 100644
--- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts
+++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
@@ -47,6 +47,18 @@ describe("calcite-combobox", () => {
         propertyName: "scale",
         defaultValue: "m",
       },
+      {
+        propertyName: "status",
+        defaultValue: "idle",
+      },
+      {
+        propertyName: "validationIcon",
+        defaultValue: undefined,
+      },
+      {
+        propertyName: "validationMessage",
+        defaultValue: undefined,
+      },
     ]);
   });
 
@@ -101,6 +113,14 @@ describe("calcite-combobox", () => {
         propertyName: "selectionMode",
         value: "single",
       },
+      {
+        propertyName: "status",
+        value: "invalid",
+      },
+      {
+        propertyName: "validationIcon",
+        value: true,
+      },
     ]);
   });
 
diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
index c9b8f7c46ef..e1826a3e363 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -183,7 +183,7 @@ export class Combobox
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop() validationIcon: string | boolean;
+  @Prop({ reflect: true }) validationIcon: string | boolean;
 
   /**
    * Specifies the name of the component.
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
index dd54fd1ce61..1a5a8860bb6 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
@@ -10,6 +10,7 @@ import {
   openClose,
   renders,
   t9n,
+  reflects,
 } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
@@ -35,6 +36,23 @@ describe("calcite-input-date-picker", () => {
     hidden("calcite-input-date-picker");
   });
 
+  describe("reflects", () => {
+    reflects("calcite-input-date-picker ", [
+      {
+        propertyName: "scale",
+        value: "s",
+      },
+      {
+        propertyName: "status",
+        value: "invalid",
+      },
+      {
+        propertyName: "validationIcon",
+        value: true,
+      },
+    ]);
+  });
+
   describe("defaults", () => {
     defaults("calcite-input-date-picker", [
       {
@@ -45,6 +63,18 @@ describe("calcite-input-date-picker", () => {
         propertyName: "flipPlacements",
         defaultValue: undefined,
       },
+      {
+        propertyName: "status",
+        defaultValue: "idle",
+      },
+      {
+        propertyName: "validationIcon",
+        defaultValue: undefined,
+      },
+      {
+        propertyName: "validationMessage",
+        defaultValue: undefined,
+      },
     ]);
   });
 
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
index 0d2062f84af..bb9964539d5 100644
--- 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
@@ -274,7 +274,7 @@ export class InputDatePicker
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop() validationIcon: string | boolean;
+  @Prop({ reflect: true }) validationIcon: string | boolean;
 
   /**
    * Specifies the name of the component.
diff --git a/packages/calcite-components/src/components/input-number/input-number.e2e.ts b/packages/calcite-components/src/components/input-number/input-number.e2e.ts
index 1c8f91bee1e..9d7d5492786 100644
--- a/packages/calcite-components/src/components/input-number/input-number.e2e.ts
+++ b/packages/calcite-components/src/components/input-number/input-number.e2e.ts
@@ -60,6 +60,10 @@ describe("calcite-input-number", () => {
         propertyName: "scale",
         value: "s",
       },
+      {
+        propertyName: "validationIcon",
+        value: true,
+      },
     ]);
   });
 
@@ -85,6 +89,14 @@ describe("calcite-input-number", () => {
         propertyName: "value",
         defaultValue: "",
       },
+      {
+        propertyName: "validationIcon",
+        defaultValue: undefined,
+      },
+      {
+        propertyName: "validationMessage",
+        defaultValue: undefined,
+      },
     ]);
   });
 
diff --git a/packages/calcite-components/src/components/input-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx
index 9ef3505d39e..3b9ea3ef8f1 100644
--- a/packages/calcite-components/src/components/input-number/input-number.tsx
+++ b/packages/calcite-components/src/components/input-number/input-number.tsx
@@ -216,7 +216,7 @@ export class InputNumber
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop() validationIcon: string | boolean;
+  @Prop({ reflect: true }) validationIcon: string | boolean;
 
   /**
    * Specifies the name of the component.
diff --git a/packages/calcite-components/src/components/input-text/input-text.e2e.ts b/packages/calcite-components/src/components/input-text/input-text.e2e.ts
index 9933ca817f3..0840551a35f 100644
--- a/packages/calcite-components/src/components/input-text/input-text.e2e.ts
+++ b/packages/calcite-components/src/components/input-text/input-text.e2e.ts
@@ -41,6 +41,10 @@ describe("calcite-input-text", () => {
         propertyName: "scale",
         value: "s",
       },
+      {
+        propertyName: "validationIcon",
+        value: true,
+      },
     ]);
   });
 
@@ -62,6 +66,14 @@ describe("calcite-input-text", () => {
         propertyName: "value",
         defaultValue: "",
       },
+      {
+        propertyName: "validationIcon",
+        defaultValue: undefined,
+      },
+      {
+        propertyName: "validationMessage",
+        defaultValue: undefined,
+      },
     ]);
   });
 
diff --git a/packages/calcite-components/src/components/input-text/input-text.tsx b/packages/calcite-components/src/components/input-text/input-text.tsx
index 73fa5c9b3d6..26470aef707 100644
--- a/packages/calcite-components/src/components/input-text/input-text.tsx
+++ b/packages/calcite-components/src/components/input-text/input-text.tsx
@@ -151,7 +151,7 @@ export class InputText
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop() validationIcon: string | boolean;
+  @Prop({ reflect: true }) validationIcon: string | boolean;
 
   /**
    * Specifies the name of the component.
diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts b/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts
index aa73e4280ee..e2d3398c050 100644
--- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts
+++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts
@@ -67,6 +67,9 @@ describe("calcite-input-time-picker", () => {
       { propertyName: "scale", defaultValue: "m" },
       { propertyName: "step", defaultValue: 60 },
       { propertyName: "overlayPositioning", defaultValue: "absolute" },
+      { propertyName: "status", defaultValue: "idle" },
+      { propertyName: "validationIcon", defaultValue: undefined },
+      { propertyName: "validationMessage", defaultValue: undefined },
     ]);
   });
 
@@ -75,6 +78,8 @@ describe("calcite-input-time-picker", () => {
       { propertyName: "open", value: true },
       { propertyName: "disabled", value: true },
       { propertyName: "scale", value: "m" },
+      { propertyName: "status", value: "invalid" },
+      { propertyName: "validationIcon", value: true },
     ]);
   });
 
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
index 9a8920b59f9..c0de1239afa 100644
--- 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
@@ -247,7 +247,7 @@ export class InputTimePicker
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop() validationIcon: string | boolean;
+  @Prop({ reflect: true }) validationIcon: string | boolean;
 
   /** Specifies the name of the component on form submission. */
   @Prop() name: string;
diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts b/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts
index 65ea98d79ee..19f1eda91d3 100644
--- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts
+++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts
@@ -82,6 +82,8 @@ describe("calcite-input-time-zone", () => {
       { propertyName: "open", value: true },
       { propertyName: "scale", value: "m" },
       { propertyName: "overlayPositioning", value: "absolute" },
+      { propertyName: "status", value: "invalid" },
+      { propertyName: "validationIcon", value: true },
     ]);
   });
 
@@ -94,6 +96,9 @@ describe("calcite-input-time-zone", () => {
       { propertyName: "open", defaultValue: false },
       { propertyName: "overlayPositioning", defaultValue: "absolute" },
       { propertyName: "scale", defaultValue: "m" },
+      { propertyName: "status", defaultValue: "idle" },
+      { propertyName: "validationIcon", defaultValue: undefined },
+      { propertyName: "validationMessage", defaultValue: undefined },
     ]);
   });
 
diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx
index 59d267b0b61..d9261d264f9 100644
--- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx
+++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx
@@ -128,7 +128,7 @@ export class InputTimeZone
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop() validationIcon: string | boolean;
+  @Prop({ reflect: true }) validationIcon: string | boolean;
 
   /**
    * Specifies the name of the component.
diff --git a/packages/calcite-components/src/components/input/input.e2e.ts b/packages/calcite-components/src/components/input/input.e2e.ts
index 1cc282e4a74..9f02f810ff4 100644
--- a/packages/calcite-components/src/components/input/input.e2e.ts
+++ b/packages/calcite-components/src/components/input/input.e2e.ts
@@ -64,6 +64,10 @@ describe("calcite-input", () => {
         propertyName: "scale",
         value: "s",
       },
+      {
+        propertyName: "validationIcon",
+        value: true,
+      },
     ]);
   });
 
@@ -93,6 +97,14 @@ describe("calcite-input", () => {
         propertyName: "value",
         defaultValue: "",
       },
+      {
+        propertyName: "validationIcon",
+        defaultValue: undefined,
+      },
+      {
+        propertyName: "validationMessage",
+        defaultValue: undefined,
+      },
     ]);
   });
 
diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx
index 2088f5dd8e8..15e63b18dba 100644
--- a/packages/calcite-components/src/components/input/input.tsx
+++ b/packages/calcite-components/src/components/input/input.tsx
@@ -213,7 +213,7 @@ export class Input
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop() validationIcon: string | boolean;
+  @Prop({ reflect: true }) validationIcon: string | boolean;
 
   /**
    * Specifies the name of the component.
diff --git a/packages/calcite-components/src/components/select/select.e2e.ts b/packages/calcite-components/src/components/select/select.e2e.ts
index 20f96b52305..8deac1487ed 100644
--- a/packages/calcite-components/src/components/select/select.e2e.ts
+++ b/packages/calcite-components/src/components/select/select.e2e.ts
@@ -2,6 +2,7 @@ import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
 import {
   accessible,
   disabled,
+  defaults,
   focusable,
   formAssociated,
   labelable,
@@ -37,6 +38,15 @@ describe("calcite-select", () => {
     focusable(simpleTestMarkup);
   });
 
+  describe("defaults", () => {
+    defaults("calcite-select", [
+      { propertyName: "scale", defaultValue: "m" },
+      { propertyName: "status", defaultValue: "idle" },
+      { propertyName: "validationIcon", defaultValue: undefined },
+      { propertyName: "validationMessage", defaultValue: undefined },
+    ]);
+  });
+
   describe("reflects", () => {
     reflects(simpleTestMarkup, [
       {
@@ -47,6 +57,14 @@ describe("calcite-select", () => {
         propertyName: "scale",
         value: "m",
       },
+      {
+        propertyName: "status",
+        value: "invalid",
+      },
+      {
+        propertyName: "validationIcon",
+        value: true,
+      },
     ]);
   });
 
diff --git a/packages/calcite-components/src/components/select/select.tsx b/packages/calcite-components/src/components/select/select.tsx
index 50fe06ea36c..ee0cbb9ccbb 100644
--- a/packages/calcite-components/src/components/select/select.tsx
+++ b/packages/calcite-components/src/components/select/select.tsx
@@ -91,7 +91,7 @@ export class Select
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop() validationIcon: string | boolean;
+  @Prop({ reflect: true }) validationIcon: string | boolean;
 
   /**
    * Specifies the name of the component.
diff --git a/packages/calcite-components/src/components/text-area/text-area.e2e.ts b/packages/calcite-components/src/components/text-area/text-area.e2e.ts
index 07a0cc91906..255cf87f099 100644
--- a/packages/calcite-components/src/components/text-area/text-area.e2e.ts
+++ b/packages/calcite-components/src/components/text-area/text-area.e2e.ts
@@ -29,6 +29,18 @@ describe("calcite-text-area", () => {
         propertyName: "scale",
         defaultValue: "m",
       },
+      {
+        propertyName: "status",
+        defaultValue: "idle",
+      },
+      {
+        propertyName: "validationIcon",
+        defaultValue: undefined,
+      },
+      {
+        propertyName: "validationMessage",
+        defaultValue: undefined,
+      },
     ]);
   });
 
@@ -58,6 +70,14 @@ describe("calcite-text-area", () => {
         propertyName: "scale",
         value: "s",
       },
+      {
+        propertyName: "status",
+        value: "invalid",
+      },
+      {
+        propertyName: "validationIcon",
+        value: true,
+      },
     ]);
   });
 
diff --git a/packages/calcite-components/src/components/text-area/text-area.tsx b/packages/calcite-components/src/components/text-area/text-area.tsx
index d3d39f4f181..f9d0b573cfa 100644
--- a/packages/calcite-components/src/components/text-area/text-area.tsx
+++ b/packages/calcite-components/src/components/text-area/text-area.tsx
@@ -136,7 +136,7 @@ export class TextArea
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop() validationIcon: string | boolean;
+  @Prop({ reflect: true }) validationIcon: string | boolean;
 
   /**
    * Specifies the name of the component.

From 798ed4c39df238532b8668c8d651d68fa4c72ab1 Mon Sep 17 00:00:00 2001
From: Ben Elan <no-reply@benelan.dev>
Date: Wed, 10 Jan 2024 15:23:09 -0800
Subject: [PATCH 2/2] test(input-date-picker): remove reflects commonTest

---
 .../input-date-picker/input-date-picker.e2e.ts | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
index 1a5a8860bb6..e50c14aeb54 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
@@ -10,7 +10,6 @@ import {
   openClose,
   renders,
   t9n,
-  reflects,
 } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
@@ -36,23 +35,6 @@ describe("calcite-input-date-picker", () => {
     hidden("calcite-input-date-picker");
   });
 
-  describe("reflects", () => {
-    reflects("calcite-input-date-picker ", [
-      {
-        propertyName: "scale",
-        value: "s",
-      },
-      {
-        propertyName: "status",
-        value: "invalid",
-      },
-      {
-        propertyName: "validationIcon",
-        value: true,
-      },
-    ]);
-  });
-
   describe("defaults", () => {
     defaults("calcite-input-date-picker", [
       {