.form-group-year overridden by .form-group
Closed this issue · 4 comments
the .form-group rule comes after the .form-group-year rule in the scss, so the width is overridden. This means one can't use this to implement the standard gov date pattern.
Problem/Feature
The year form group is set to the same width as the day and month, so the visual hint that it is 4 chars as opposed to 2 is lost.
Here is the code:
Expected behaviour
I would expect the year field group to be 70px width, not 56px
Proposed solution
Swap the rules in the scss file, so that the .form-group-year width rule overrides the .form-group one. Or, better still use BEM and the ordering / specificity won't matter.
Explain the steps to reproduce the bug
Attempt to implement the gov date pattern
Tell us about your environment
- Version used: 2.241.0
- Browser Name and version: All
- Operating System and version (desktop or mobile): All
@paul-request.
Agreed with BEMing this. But that feels like something we would be doing when refactoring this work via the Design Language, due to having to update frontend services.
I also suspect there may be some knock on affects of just moving rules to change specificity. Can you run the Visual Regression tests against a change to see the impact and then add that to the issue.
https://github.com/hmrc/assets-frontend#visual-regression-testing
Re-ordering the rules passes visual regression:
Assets Frontend Visual Regression Tests Report
Passed 279 Failed 0
@paul-request could you provide a screenshot of the issue, please?
The date pattern is covered in GOV.UK elements and The Service Manual
This should be updated to match the GOV.UK pattern.