feat: add validation-message and validation-icon attributes to fo…

…rm components for new internal `calcite-input-message` (#8305) **Related Issue:** #8057 ## Summary Add an internal `calcite-input-message` to the following components - combobox - input-date-picker - input-number - input-text - input-time-picker - input-time-zone - input - select - text-area The new properties will be used to replace the browser's popover element that displays validation messages on form submission (#8000).
Esri · Dec 19, 2023 · a554cfd · a554cfd
1 parent f36a90e
commit a554cfd
Show file tree

Hide file tree

Showing 40 changed files with 1,332 additions and 256 deletions.
diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss
@@ -38,6 +38,17 @@
   }
 }
 
+// mixin for the container of validation messages displayed below form-associated components
+@mixin form-validation-message() {
+  .validation-container {
+    padding-block-start: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+  }
+}
+
 // mixin to provide base disabled styles for interactive components
 // additional styling can be passed via @content
 @mixin disabled() {

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
@@ -1151,6 +1151,14 @@ export namespace Components {
           * Specifies the status of the input field, which determines message and icons.
          */
         "status": Status;
+        /**
+          * Specifies the validation icon to display under the component.
+         */
+        "validationIcon": string | boolean;
+        /**
+          * Specifies the validation message to display under the component.
+         */
+        "validationMessage": string;
         /**
           * The component's value(s) from the selected `calcite-combobox-item`(s).
          */
@@ -2033,6 +2041,14 @@ export namespace Components {
     | "time"
     | "url"
     | "week";
+        /**
+          * Specifies the validation icon to display under the component.
+         */
+        "validationIcon": string | boolean;
+        /**
+          * Specifies the validation message to display under the component.
+         */
+        "validationMessage": string;
         /**
           * The component's value.
          */
@@ -2142,6 +2158,14 @@ export namespace Components {
           * Specifies the status of the input field, which determines message and icons.
          */
         "status": Status;
+        /**
+          * Specifies the validation icon to display under the component.
+         */
+        "validationIcon": string | boolean;
+        /**
+          * Specifies the validation message to display under the component.
+         */
+        "validationMessage": string;
         /**
           * Selected date as a string in ISO format (YYYY-MM-DD)
          */
@@ -2326,6 +2350,14 @@ export namespace Components {
           * Adds text to the end of the component.
          */
         "suffixText": string;
+        /**
+          * Specifies the validation icon to display under the component.
+         */
+        "validationIcon": string | boolean;
+        /**
+          * Specifies the validation message to display under the component.
+         */
+        "validationMessage": string;
         /**
           * The component's value.
          */
@@ -2458,6 +2490,14 @@ export namespace Components {
           * Adds text to the end of the component.
          */
         "suffixText": string;
+        /**
+          * Specifies the validation icon to display under the component.
+         */
+        "validationIcon": string | boolean;
+        /**
+          * Specifies the validation message to display under the component.
+         */
+        "validationMessage": string;
         /**
           * The component's value.
          */
@@ -2534,6 +2574,14 @@ export namespace Components {
           * Specifies the granularity the component's `value` must adhere to (in seconds).
          */
         "step": number;
+        /**
+          * Specifies the validation icon to display under the component.
+         */
+        "validationIcon": string | boolean;
+        /**
+          * Specifies the validation message to display under the component.
+         */
+        "validationMessage": string;
         /**
           * The time value in ISO (24-hour) format.
          */
@@ -2595,6 +2643,14 @@ export namespace Components {
           * Specifies the status of the input field, which determines message and icons.
          */
         "status": Status;
+        /**
+          * Specifies the validation icon to display under the component.
+         */
+        "validationIcon": string | boolean;
+        /**
+          * Specifies the validation message to display under the component.
+         */
+        "validationMessage": string;
         /**
           * The component's value, where the value is the time zone offset or the difference, in minutes, between the selected time zone and UTC.  If no value is provided, the user's time zone offset will be selected by default.
           * @see https://www.w3.org/International/core/2005/09/timezone.html#:~:text=What%20is%20a%20%22zone%20offset,or%20%22%2D%22%20from%20UTC.
@@ -3909,6 +3965,14 @@ export namespace Components {
           * Specifies the status of the input field, which determines message and icons.
          */
         "status": Status;
+        /**
+          * Specifies the validation icon to display under the component.
+         */
+        "validationIcon": string | boolean;
+        /**
+          * Specifies the validation message to display under the component.
+         */
+        "validationMessage": string;
         /**
           * The component's `selectedOption` value.
          */
@@ -4577,7 +4641,12 @@ export namespace Components {
          */
         "selectionMode": Extract<"none" | "multiple" | "single", SelectionMode>;
         /**
-          * When `true`, displays zebra styling in the component.
+          * When `true`, displays striped styling in the component.
+         */
+        "striped": boolean;
+        /**
+          * When `true`, displays striped styling in the component.
+          * @deprecated Use the `striped` property instead.
          */
         "zebra": boolean;
     }
@@ -4794,6 +4863,14 @@ export namespace Components {
           * Specifies the status of the input field, which determines message and icons.
          */
         "status": Status;
+        /**
+          * Specifies the validation icon to display under the component.
+         */
+        "validationIcon": string | boolean;
+        /**
+          * Specifies the validation message to display under the component.
+         */
+        "validationMessage": string;
         /**
           * The component's value.
          */
@@ -8334,6 +8411,14 @@ declare namespace LocalJSX {
           * Specifies the status of the input field, which determines message and icons.
          */
         "status"?: Status;
+        /**
+          * Specifies the validation icon to display under the component.
+         */
+        "validationIcon"?: string | boolean;
+        /**
+          * Specifies the validation message to display under the component.
+         */
+        "validationMessage"?: string;
         /**
           * The component's value(s) from the selected `calcite-combobox-item`(s).
          */
@@ -9257,6 +9342,14 @@ declare namespace LocalJSX {
     | "time"
     | "url"
     | "week";
+        /**
+          * Specifies the validation icon to display under the component.
+         */
+        "validationIcon"?: string | boolean;
+        /**
+          * Specifies the validation message to display under the component.
+         */
+        "validationMessage"?: string;
         /**
           * The component's value.
          */
@@ -9377,6 +9470,14 @@ declare namespace LocalJSX {
           * Specifies the status of the input field, which determines message and icons.
          */
         "status"?: Status;
+        /**
+          * Specifies the validation icon to display under the component.
+         */
+        "validationIcon"?: string | boolean;
+        /**
+          * Specifies the validation message to display under the component.
+         */
+        "validationMessage"?: string;
         /**
           * Selected date as a string in ISO format (YYYY-MM-DD)
          */
@@ -9563,6 +9664,14 @@ declare namespace LocalJSX {
           * Adds text to the end of the component.
          */
         "suffixText"?: string;
+        /**
+          * Specifies the validation icon to display under the component.
+         */
+        "validationIcon"?: string | boolean;
+        /**
+          * Specifies the validation message to display under the component.
+         */
+        "validationMessage"?: string;
         /**
           * The component's value.
          */
@@ -9700,6 +9809,14 @@ declare namespace LocalJSX {
           * Adds text to the end of the component.
          */
         "suffixText"?: string;
+        /**
+          * Specifies the validation icon to display under the component.
+         */
+        "validationIcon"?: string | boolean;
+        /**
+          * Specifies the validation message to display under the component.
+         */
+        "validationMessage"?: string;
         /**
           * The component's value.
          */
@@ -9787,6 +9904,14 @@ declare namespace LocalJSX {
           * Specifies the granularity the component's `value` must adhere to (in seconds).
          */
         "step"?: number;
+        /**
+          * Specifies the validation icon to display under the component.
+         */
+        "validationIcon"?: string | boolean;
+        /**
+          * Specifies the validation message to display under the component.
+         */
+        "validationMessage"?: string;
         /**
           * The time value in ISO (24-hour) format.
          */
@@ -9852,6 +9977,14 @@ declare namespace LocalJSX {
           * Specifies the status of the input field, which determines message and icons.
          */
         "status"?: Status;
+        /**
+          * Specifies the validation icon to display under the component.
+         */
+        "validationIcon"?: string | boolean;
+        /**
+          * Specifies the validation message to display under the component.
+         */
+        "validationMessage"?: string;
         /**
           * The component's value, where the value is the time zone offset or the difference, in minutes, between the selected time zone and UTC.  If no value is provided, the user's time zone offset will be selected by default.
           * @see https://www.w3.org/International/core/2005/09/timezone.html#:~:text=What%20is%20a%20%22zone%20offset,or%20%22%2D%22%20from%20UTC.
@@ -11233,6 +11366,14 @@ declare namespace LocalJSX {
           * Specifies the status of the input field, which determines message and icons.
          */
         "status"?: Status;
+        /**
+          * Specifies the validation icon to display under the component.
+         */
+        "validationIcon"?: string | boolean;
+        /**
+          * Specifies the validation message to display under the component.
+         */
+        "validationMessage"?: string;
         /**
           * The component's `selectedOption` value.
          */
@@ -11930,7 +12071,12 @@ declare namespace LocalJSX {
          */
         "selectionMode"?: Extract<"none" | "multiple" | "single", SelectionMode>;
         /**
-          * When `true`, displays zebra styling in the component.
+          * When `true`, displays striped styling in the component.
+         */
+        "striped"?: boolean;
+        /**
+          * When `true`, displays striped styling in the component.
+          * @deprecated Use the `striped` property instead.
          */
         "zebra"?: boolean;
     }
@@ -12144,6 +12290,14 @@ declare namespace LocalJSX {
           * Specifies the status of the input field, which determines message and icons.
          */
         "status"?: Status;
+        /**
+          * Specifies the validation icon to display under the component.
+         */
+        "validationIcon"?: string | boolean;
+        /**
+          * Specifies the validation message to display under the component.
+         */
+        "validationMessage"?: string;
         /**
           * The component's value.
          */

diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss
@@ -242,6 +242,7 @@ calcite-chip {
   @apply block;
 }
 
+@include form-validation-message();
 @include hidden-form-input();
 @include base-component();