Add Input Message to form components for form validation

[benelan]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

We are in the process of improving our form validation story. One of the items is to replace the native validation message UI with calcite-input-message (#8000). First wee need to add an Input Message to our form components.

Acceptance Criteria

• Add a calcite-input-message to our form components, which will display under the internal element.
• Add validation-message and validation-icon properties so users can change the message's values on their end.
• Investigate adding a way to adjust spacing between the internal form element and the input-message via a CSS variable.

Relevant Info

No response

Which Component

The following input components need an internal input-message, and a status property if they don't have one.

• combobox
• input-time-zone
• input-date-picker
• input-number
• input-text
• input-time-picker
• input
• text-area

The following have the required property, which means they will need a validation message displayed via #8000.

• select
• checkbox [2]
• radio-button-group [1]
• slider [1]
• rating [1] [3]
• segmented-control [1] [3]

[1]: needs design for status prop due to different UI than the "input components" listed above.
[2]: needs design for internal input-message due to potential spacing issues
[3]: required prop is marked as internal in #2777 pending design. Can be made public as part of this issue.

The following don't need an internal input-message for #8000 because they don't have any constraint validation properties. Should they receive an internal input-message anyway? If so, do they need a status property as well?

• switch
• meter

Example Use Case

Form validation and other help messages.

Priority impact

p3 - want for upcoming milestone

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

N/A

[benelan]

@ashetland, @SkyeSeitz - I updated the issue body, but TLDR; the following components needs designs for the status property:

• slider
• radio-button-group
• rating
• segmented-control

Not sure where the invalid coloring should be applied for slider. Just the handle? Or the whole slider?

And then the other three all have child elements and I'm not sure how design wants the invalid styling, especially with focus.

checkbox needs design for the internal input message. Should the input-message be under the component, or inline? I feel like either would potentially break existing apps.

And then switch and meter do not need the status property and internal input-message for the validation work in #8000, but I'd like design feedback on whether they should be added anyway for consistency across all form components.

[benelan]

@ashetland, @SkyeSeitz - I updated the issue body, but TLDR; the following components needs designs for the status property:

• slider
• radio-button-group
• rating
• segmented-control

Not sure where the invalid coloring should be applied for slider. Just the handle? Or the whole slider?

And then the other three all have child elements and I'm not sure how design wants the invalid styling, especially with focus.

checkbox needs design for the internal input message. Should the input-message be under the component, or inline? I feel like either would potentially break existing apps.

And then switch and meter do not need the status property and internal input-message for the validation work in #8000, but I'd like design feedback on whether they should be added anyway for consistency across all form components.

Added the design label to this issue and assigned designers for the above items. Let me know if I can answer any questions from my end. Thanks!

cc @geospatialem @brittneytewks

[jcfranco]

Segmented Control

...
Q: Is the required prop applicable since it should always have a selected item?

Segmented control follows the radio group pattern, which does allow for none of the items to be selected initially (we have a test for this use case as well), so I think required is applicable from that perspective.

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified in 2.2.0-next.22 via https://codepen.io/geospatialem/pen/dyrvmPy for:

• checkbox (and label) with the status="invalid" and required
• status="invalid" + validation-icon+validation-message` for:
  • combobox
  • input-date-picker
  • input-time-picker
  • segmented-control
  • select

[driskull]

The latest comment says that rating and slider should have a validationMessage property? is that still the case? should there be an issue?

[SkyeSeitz]

From my memory, they should have a validationMessage prop to go with its required prop. Since invalid styling is not really effective on these components, the validationMessage prop would serve as the only visual invalid affordance.

[driskull]

Should we reopen this one or create a new one? @geospatialem @DitwanP

[geospatialem]

Since invalid styling is not really effective on these components, the validationMessage prop would serve as the only visual invalid affordance.

Apologies this was missed when I was verifying - we had multiple issues that were related to form validation closing at once, and I didn't verify the effort for rating and slider. Created a new issue and added to October: #9999. If there's an associated Figma file, can add it to the issue as well. cc @driskull @SkyeSeitz