carbon
carbon copied to clipboard
Sage
Bad design on error state for Select
Current behaviour
If you set error status on Select component, just by passing error props to true, the vertical bar is display and take more space than it should, as i did not put any error label.
Expected behaviour
The vertical bar should only take same height as select component when you don't put any error label
CodeSandbox or Storybook URL
https://codesandbox.io/s/unruffled-davinci-5lnb8v?file=/src/index.js
JIRA Ticket (Sage Only)
No response
Suggested Solution
No response
Carbon Version
109.5.2
Design Tokens Version
No response
What browsers are you seeing the problem on?
Chrome
What Operating System are you seeing the problem on?
MacOS
Anything else we should know?
No response
Confidentiality
- [X] I confirm there is no confidential or commercially sensitive information included.
@mkrds If no error message or label is shown, i would expect the validation bar to be the height of the dropdown. However, i wouldn't ever expect an error to be shown without a message. With that in mind, i'm not sure this is a bug that needs fixing. @nicktitchmarsh any thoughts?
@ljemmo
I can see the possible use case that you have a a few grouped fields, e.g. an address with a country drop down, and you might want to indicate the field is in error but the actual error is displayed elsewhere. I think this is a hangover from the old style of error display where you could pass the boolean prop to indicate the error state.
But as there are no DS examples of an input with no error message is this a problem for Accessibility and UX?
Should we fix this to display properly or remove support for triggering error messages in this way?
@nicktitchmarsh Ah yes, i remember working on the fieldset group variation that you're referring to for Client Management. I believe latest accessibility guidance is to move away from patterns such as this and have space between each input row so that error messages can appear below each field. @tempertemper please can you confirm.
Here's the pattern for reference: https://carbon.sage.com/?path=/docs/fieldset-address-fieldset-examples--canada
I can see a use case for not including a label with a select (although I'm not a fan), for example if the labelling is provided with a table header via an aria-labelledby reference, but shouldn't there always be an error message?
The pattern @ljemmo references needs to accommodate individual field's errors, as it can be difficult to know what has gone wrong without them. If they're displayed elsewhere we're relying on the user doing the work to draw the lines between the error message and the input that's in an error state. And where multiple errors are triggered this may not always be easy or even possible.
I don't think we should be doing any work to accommodate a lack of in-place error messaging.
Thanks for this @tempertemper 👍🏼 We are still in the process of updating our components to the new validation designs, so we do still have cases, such as the Fieldset one Luke mentioned, that uses the old validation design. Once we have completed the work for this and updated our docs, this should address issues such as this one where there is a mix up between the old and new styles.
@maduv given Martin's comments I would recommend only passing error messages as strings to the error prop so a message is displayed for each field. However, if this is an integral part of the design you have received, I would feed this back to your designer to see if they can modify the design. If this still is not possible, I would feed to this back to the Design System team so they can consider if they need to modify the validation pattern further.
Hope this helps.
@maduv Feel free to hook me up with your designer – I'm always happy to worth through this kind of challenge with them to find the right direction 🙂
Closing this based on the information provided by @tempertemper and @ljemmo
