search

nhsuk / nhsuk-frontend

NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.
https://nhsuk.github.io/nhsuk-frontend/
MIT License
606 stars 106 forks source link

Order of imports affects styling for checkboxes and radio labels #949

Open mikemonteith opened 2 months ago

mikemonteith commented 2 months ago

Bug Report

What is the issue?

We found an issue recently which was caused by <label class="nhsuk-label nhsuk-radios__label"> having display: block style. It turns out that when importing individual sass components, the order of imports matters.

Correct styles:

@import 'node_modules/nhsuk-frontend/packages/components/label/label';
@import 'node_modules/nhsuk-frontend/packages/components/radios/radios';

Incorrect styles:

@import 'node_modules/nhsuk-frontend/packages/components/radios/radios';
@import 'node_modules/nhsuk-frontend/packages/components/label/label';

This is because the display rules in label.scss and radios.scss (and also checkboxes.scss) have the same specificity.

Solution

I think the specificity of the display rule for the label in radios.scss and checkboxes.scss should be increased so that it always takes precedence over the rule in labels.scss.

edwardhorsford commented 1 month ago

Any idea what govuk-frontend does in this situation?