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

Fix ‘backwards compatibility’ for the date input. #908

Merged
merged 4 commits into from
Jul 17, 2018

Conversation

36degrees
Copy link
Member

The previous implementation meant that if your input does not have the name ‘year’ it would always get the class ‘govuk-input--width-2`.

Because this class is defined last – after every other width class – this makes it impossible to make any field that does not have the name ‘year’ use any other width than 2 characters.

This addresses this by:

  • not adding a width class if any other width class is present within the item.classes (it’s relatively a naive check for the string ‘govuk-input--width-‘ but it should do the job)
  • only adding appropriate classes if the input has the name ‘day’, ‘month’ or ‘year’

It also adds tests for this behaviour.

Fixes #907

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-908 July 16, 2018 15:08 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-908 July 16, 2018 15:22 Inactive
Copy link
Contributor

@alex-ju alex-ju left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯 Thanks for fixing this! good use of if not in

The previous implementation meant that if your input _does not_ have the name ‘year’ it would always get the class ‘govuk-input--width-2`.

Because this class is defined last [1] – after every other width class – this makes it impossible to make any field that does not have the name ‘year’ use any other width than 2 characters.

This commit addresses this by:

- not adding a width class if any other width class is present within the `item.classes` (it’s relatively a naive check for the string ‘govuk-input--width-‘ but it should do the job)
- only adding appropriate classes if the input has the name ‘day’, ‘month’ or ‘year’

It also adds tests for this behaviour.

Fixes #907

[1]: https://github.com/alphagov/govuk-frontend/blob/8f2fe567865729716fa4a04b0c6eeb5860da7441/src/components/input/_input.scss#L71-L73
@36degrees 36degrees force-pushed the fix-date-input-backwards-compatibility branch from ac86ff8 to 2ea133f Compare July 17, 2018 10:44
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-908 July 17, 2018 10:44 Inactive
@36degrees 36degrees added this to the [NEXT] milestone Jul 17, 2018
Copy link
Contributor

@NickColley NickColley left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work, the test coverage makes this quite gnarly logic feel less daunting...

Copy link
Member

@hannalaakso hannalaakso left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

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

Successfully merging this pull request may close these issues.

None yet

5 participants