ministryofjustice / moj-frontend

Use the MoJ Design System to design, build, and deliver accessible and consistent services.
https://design-patterns.service.justice.gov.uk/
MIT License
30 stars 18 forks source link

Filter component's apply button should allow extra classes to be applied #616

Open timothy-ness opened 2 weeks ago

timothy-ness commented 2 weeks ago

Summary

Similar to this issue, the Apply Filters button in the Filter component should be able to have custom classes applied to it.

Motivation

Most other components offer the ability to add extra classes by providing a classes parameter when instantiating including the govUkButton component which is being used under the hood in the moj filter component. This is useful for extending styling without overwriting default implementation (for instance, by providing a modifier class to create a bespoke theme).

The Filter component does not allow a custom button class to be passed through to the govUkButton component used to apply the filter.

Describe alternatives you've considered

At the moment, it seems the only way would be to tweak the styling of the gov uk button on the page it is used:

App css:

.govuk-button {
  custom styles
}

which is very undesirable as it would affect all buttons on the page and could be hidden from future developers working on the page.

Otherwise we would have to avoid using nunjucks and simply write the HTML with custom classes ourselves.

Additional context

Happy to provide the PR for this!