Add another messes with govuk error message

Nosfistis commented 3 years ago

Prerequisites

[x] Put an X between the brackets on this line if you have done all of the following:
- Reproduced the problem
- Followed all applicable steps in the debugging guide
- Checked the FAQs on the message board for common solutions
- Checked that your issue doesn't exist: https://github.com/ministryofjustice/moj-frontend/issues
- Checked that there is not already a package that provides the described functionality

Description

[Description of the issue]

Steps to Reproduce

Apply the govuk-form-group--error class in the containing form-group if the first input element of the example (https://moj-design-system.herokuapp.com/components/add-another/examples/default)

Expected behaviour: [What you expect to happen] The error should be contained within the confines of the form group.

Actual behaviour: [What happens] The left red border is expanded to cover the legend as well, while also covering it.

Reproduces how often: [What percentage of the time does it reproduce?] 100%

Versions

0.2.2

Additional Information

This is caused because the .moj-add-another__title floats the legend. A clear: both or clear:left on the first govuk-form-group item would be enough to clear the floating legend:

.moj-add-another__item > .govuk-form-group:first-of-type {
  clear: both
}

gregtyler commented 3 years ago

Thanks for reporting Mike! If you're happy and have the time to, please feel free to open a PR to fix this. Otherwise I can pick it up when I have some time.

Might consider this CSS selector to better target the problematic elements (to try and prevent stepping on the toes of other HTML).

.moj-add-another__title + .govuk-form-group {
    clear: left;
}

Nosfistis commented 3 years ago

Even better! I will open a PR then.

gregtyler commented 3 years ago

Thanks! Drop a message here if you've any issues :)

ministryofjustice / moj-frontend