Pagination results do not have font size specified

[gregtyler]

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

Originally reported on Slack.

On large screens, the pagination component sets its font-size to 0. This fixes some browser-rendering bugs which put unnecessary spaces between elements.

When using this technique, you need to give the child elements an explicit font-size. Otherwise they will default to 0 and not be visible. This is what happens with moj-pagination__results.

This bug is masked in the documentation, because the element is a p tag and gets a font-size from the GOV.UK Design System's CSS. But some services don't get this rule because of how they've configured the GOV.UK Design System.

Steps to Reproduce

1. Recreate the example in the documentation but remove the default p {} rule from GOV.UK CSS, or use a <div> for the moj-pagination__results element.

You can also emulate the above with browser dev tools.

Expected behaviour: It should say "Showing 10 to 20 of 30 results"

Actual behaviour: The results text is hidden

Reproduces how often: 100%

Versions

Version v0.0.17-alpha in every browser

Additional Information

I've made a PR to fix this.

[gregtyler]

Fixed by #89