Clear filters anchor not visible (font size inherited to be 0)

[commitBlob]

Prerequisites

• 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

Clear filters anchor is not visible as font-size is inherited from the moj-filter__selected-heading class where font-size: 0;. As anchor is wrapped with the paragraph tag it inherits font size from the parent.

Steps to Reproduce

1. Navigate to filter component MoJ Pattern Library

Expected behaviour:
Expected to see Clear filters anchor right of the Selected Filter header

Actual behaviour:
Clear filter anchor is not visible on the page

Reproduces how often:
100%

Versions

Was able to replicate the issue on the MoJ Pattern Library website as well as locally.

Local settings:
OS Version - Windows 10 Enterprise 21H1
Chrome - Version 94.0.4606.81 (Official Build) (64-bit)
@ministryofjustice/frontend package - 0.2.6
Node.js - v14.17.0

Additional Information

Adding a class such as govuk-body to the paragraph wrapping the anchor tag displayed element successfully.

[gregtyler]

Thanks @commitBlob, good spot! I think a slightly cleaner fix would be to add govuk-!-font-size-19 to the <a> element, since govuk-body also adds a margin, which could have a negative effect elsewhere. I'll try and get that done today :)

[commitBlob]

Thanks Greg, agreed setting font size seems like a cleaner fix.
Looking forward to a new release