moj-frontend icon indicating copy to clipboard operation
moj-frontend copied to clipboard

Filter component should allow extra classes

Open froddd opened this issue 1 year ago • 0 comments

Summary

The Filter component should provide a way of specifying custom classes.

Motivation

Most (all?) other components offer the ability to add extra classes by providing a classes parameter when instantiating. 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 is currently missing this feature.

Describe alternatives you've considered

At the moment, it seems the only way to tweak the styling of this component is to override the default styles:

App css:

.moj-filter__header {
  background: govuk-colour("light-grey");
}

When allowing extra classes, the modifier could be used to ensure original styles are not touched:

Template:

{{ mojFilter({
  heading: {
    text: 'Filter'
  },
  classes: "moj-filter--light-header",
  optionsHtml: filterOptionsHtml
}) }}
.moj-filter--light-header .moj-filter__header {
  background: govuk-colour("light-grey");
}

Additional context

Happy to provide the PR for this!

froddd avatar Aug 05 '24 15:08 froddd