Closed benelan closed 8 months ago
@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.
@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
andmeter
do not need thestatus
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
The following components were installed and verified on 2.1.0-next.12
:
The following components are waiting for status
property designs:
The following components are waiting for validation message placement designs:
Figma link to the following specs:
Checkbox
validationMessage
can be part of Checkbox Group if built in the futureSlider
validationMessage
Radio Button Group
validationMessage
Rating
validationMessage
Segmented Control
validationMessage
cc @geospatialem, @brittneytewks
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.
Installed and assigned for verification.
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
segmented-control
select
The latest comment says that rating and slider should have a validationMessage property? is that still the case? should there be an issue?
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.
Should we reopen this one or create a new one? @geospatialem @DitwanP
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: https://github.com/Esri/calcite-design-system/issues/9999. If there's an associated Figma file, can add it to the issue as well. cc @driskull @SkyeSeitz
Check existing issues
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
calcite-input-message
to our form components, which will display under the internal element.validation-message
andvalidation-icon
properties so users can change the message's values on their end.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.The following have the
required
property, which means they will need a validation message displayed via #8000.The following don't need an internal
input-message
for #8000 because they don't have any constraint validation properties. Should they receive an internalinput-message
anyway? If so, do they need astatus
property as well?Example Use Case
Form validation and other help messages.
Priority impact
p3 - want for upcoming milestone
Calcite package
Esri team
N/A