fix: #3610645 Style the listing exposed filters by the form, not by the view ID.

Rajab Natshahrequested to merge
issue/vartheme_bs5_educare-3610645:issue/vartheme_bs5_educare-3610645-exposed-filters into 1.0.x

The theme's exposed filter row - the horizontal keyword + facets layout with the ghost Apply Filter and Reset actions - was keyed to #views-exposed-form-blog-all. Educare no longer has a Blog listing: News now comes from Varbase News Base and Events from Varbase Events Base, so nothing matched and the filters fell back to the browser default (full-width stacked fields, a stock Bootstrap button).

The rule is now a single selector on the exposed form itself, .views-exposed-form.bef-exposed-form, matching the widget (> .js-form-type-select, > [class*="form-item-search"]) rather than the field names. Every listing gets the design - News, Events, and whatever a site template adds next - and renaming a listing or a field no longer breaks the theme. No view-ID-specific rule remains in the stylesheet.

Only scss/base/vartheme.base.scss and its compiled css/base/vartheme.base.css (via yarn theme:build) are included. Unrelated work-in-progress in the working tree (components/organisms/views-exposed-filters/, webpack.config.components.js, yarn.lock) is intentionally left out of this MR.

Issue

https://www.drupal.org/project/vartheme_bs5_educare/issues/3610645

Related

One change split across three projects, cross-linked:

Verified together on a fresh drush site:install of the Educare site template: 0 errors, the events listing exposes Search by + Type, the grid renders through vartheme_bs5_educare:views-view-grid, and /events, /events/upcoming and /events/past all return HTTP 200. The filter row was checked in a real browser.

AI-Generated: Yes (Used Claude Code to rewrite the exposed-filter styling rule from a view-ID selector to a form/widget selector, and rebuilt the compiled CSS.)

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