fix: #3612787 Load the exposed-filters SDC styles only on views exposed forms (News, Programs, Events)

Rajab Natshahrequested to merge
issue/vartheme_bs5_educare-3612787:3612787-always-show-the into 1.0.x

Loads the Views exposed filters SDC's compiled styles only where a views exposed form renders, so the plain Better Exposed Filters (BEF) forms on the News and Programs listings match the navy design already applied to the Events filters, without loading that CSS site-wide.

MR !20 relocated the .bef-exposed-form exposed-filter styling from the global scss/base/vartheme.base.scss into the views-exposed-filters component (views-exposed-filters.scss). An SDC's CSS loads only where the component renders: Events render through Varbase Components' components_exposed_form (the SDC), so they kept the navy treatment, while News and Programs use plain BEF (not the SDC), so their Apply Filter / Reset fell back to the raw Bootstrap-blue btn btn-primary.

The component stylesheet already carries both the SDC selector (.views-exposed-filters .views-exposed-form) and the BEF selector (.views-exposed-form.bef-exposed-form). This attaches the component library core/components.vartheme_bs5_educare--views-exposed-filters from the existing hook_form_alter() in vartheme_bs5_educare.theme, gated on $form_id === 'views_exposed_form', so its CSS is attached to every views exposed form (News, Programs, Events) and to no other page. No global-styles / global-styles-rtl dependency, no SCSS/CSS change; the compiled component CSS is unchanged.

Verified on a fresh Educare install, logged out (Varbase functional testing suite): on /news, /programs and /events the Apply Filter action computes to the Educare navy rgb(5, 8, 51), uppercase, weight 700, and Reset computes to rgb(64, 68, 86), uppercase, all identical across the three listings. The component stylesheet views-exposed-filters.css is present in the <head> on /news, /programs and /events, and is absent on pages with no exposed form (homepage and a plain News article), confirming the CSS loads only for exposed filters. Zero serious console errors (only the expected benign drimage image-derivative warnings).

Issue: https://www.drupal.org/project/vartheme_bs5_educare/issues/3612787

AI-Generated: Yes

Checkpoints

  • File an issue about this project
  • Addition/Change/Update/Fix to this project
  • Testing to ensure no regression
  • Automated unit/functional testing coverage
  • Developer Documentation support on feature change/addition
  • User Guide Documentation support on feature change/addition
  • UX/UI designer responsibilities
  • Accessibility and Readability
  • Reviewed by a human
  • Code review by maintainers
  • Full testing and approval
  • Credit contributors
  • Review with the product owner
  • Update Release Notes
  • Release
Edited by Rajab Natshah

Merge request reports