Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Date input component should allow errors on individual text inputs, e.g. just the day field #3510

Open
floehopper opened this issue Jul 20, 2023 · 1 comment

Comments

@floehopper
Copy link

The documentation for error messages on a Date Input says:

If you’re highlighting just one field - either the day, month or year - only style the field that has an error. The error message must say which field has an error, like this:

Screenshot 2023-07-20 at 12 13 26

However, the date_input component doesn't currently support this use case - you can have multiple error items, but they all have to refer to the component as a whole.

I'd be willing to open a PR for this if it's likely to be accepted...

@jon-kirwan
Copy link
Contributor

Hi @floehopper, apologies for taking a while to respond. Thanks for submitting the issue. If you'd like to submit a PR, I'd be happy to review it. Also, there's a few docs in this repository that you may find useful when it comes to making changes, such as the guide on component conventions. Thanks, Jon.

floehopper added a commit that referenced this issue Sep 25, 2023
As suggested in #3510.

This changes the date-input component so it supports errors on
individual input elements, e.g. just the year input element. This usage
is described in the docs for the date-input component [1]:

> If you’re highlighting just one field - either the day, month or year
> - only style the field that has an error. The error message must say
> which field has an error, like this:

However, highlighting just one field like this is not actually currently
supported by the date-input component!

The new behaviour (where individual fields are highlighted as having an
error) is specified by adding values for a `name` key to the
`error_items` with the values matching the values of the `name` key in
the `items`. If none of the `error_items` have a value for the `name`
key, then we fallback to the original behaviour, i.e. all fields are
highlighted as having an error. This should hopefully make this a fairly
backwardly-compatible change.

[1]: https://design-system.service.gov.uk/components/date-input/#error-messages
floehopper added a commit that referenced this issue Sep 25, 2023
As suggested in #3510.

This changes the date-input component so it supports errors on
individual input elements, e.g. just the `year` input element. This
usage is described in the docs for the date-input component [1]:

> If you’re highlighting just one field - either the day, month or year
> - only style the field that has an error. The error message must say
> which field has an error, like this:

However, highlighting just one field like this is not actually currently
supported by the date-input component which is a bit confusing!

The new behaviour (where individual fields are highlighted as having an
error) is specified by adding values for a `name` key to the
`error_items` with the values matching the values of the `name` key in
the `items`. If none of the `error_items` have a value for the `name`
key, then we fallback to the original behaviour, i.e. all fields are
highlighted as having an error. This should hopefully make this a fairly
backwardly-compatible change.

[1]: https://design-system.service.gov.uk/components/date-input/#error-messages
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants