feat: #3611876 Add a Views exposed filters Single Directory Component

Rajab Natshahrequested to merge
issue/vartheme_bs5_educare-3611876:3611876-views-exposed-filters-sdc into 1.0.x

Closes #3611876 / https://www.drupal.org/project/vartheme_bs5_educare/issues/3611876

What / why

Drupal SDC components are per-extension — Vartheme BS5 Educare does not inherit Vartheme BS5's components into its own namespace (base theme: false, no drupal/vartheme_bs5 requirement). The Educare recipe repoints view component IDs onto vartheme_bs5_educare:views-exposed-filters via the setViewsComponentStyleTheme config action, so that component name has to exist in this theme.

Adds a components/organisms/views-exposed-filters/ SDC mirroring the contract Vartheme BS5 shipped in #3611865 / MR !189 (merged to the 5.0.x branch): same name, group: Views, noUi, use_in_views, the layout enum (inline/stacked), utility_classes, and the filters slot. No libraryOverrides.css block — SDC auto-attaches views-exposed-filters.css by filename.

The component's own SCSS carries the Educare skin (search icon, input/select styling, labels, ghost Apply Filter / Reset actions) routed through this theme's Bootstrap tokens (var(--bs-*), $spacer, $primary) rather than hard-coded values. views-exposed-filters.css is generated with the theme's real build (yarn components:build) — never hand-written; see the build proof below.

Reconciling the two skin sources

Two sources describe the Educare exposed-filters skin:

  1. A WIP snapshot captured from the working site (views-exposed-filters.scss/.css), which already carried the same component.yml/.twig contract as the base theme.
  2. The theme's existing sitewide .views-exposed-form.bef-exposed-form block in scss/base/vartheme.base.scss (lines 556–676), which currently styles the Events and News listings and carries the rationale: "Each listing names its filters after its own fields ... so match the widget, not the field name."

Both describe the same visual values (1rem gap, 16.4375rem select column, 0.5rem radius, rgba(13, 110, 253, 0.15) focus ring, etc.). Per the task instructions, this component ships the skin only — not a re-copy of the layout the mirrored views-exposed-filters contract already provides — so the SCSS here is a subset of both sources: labels, inputs, the search icon, form-actions, and the submit/reset styling. Visual values are re-expressed through this theme's actual Bootstrap tokens (var(--bs-border-radius) resolves to the same 0.5rem the theme overrides in scss/_bootstrap-variables.scss; rgba($primary, 0.15) resolves to the same rgba(13, 110, 253, ...) already shipped, since $primary is not overridden here). scss/base/vartheme.base.scss is not touched in this MR — deduplicating it against this component is tracked separately in vartheme_bs5#3611875 and touches live views, which is out of scope here.

Build proof

Two independent builds from a pristine copy of this theme (yarn install implied by the existing node_modules, then webpack --config webpack.config.components.js + stylelint "components/**/*.css" --fix, matching yarn components:build) produced byte-identical output:

4adf0f15ecbcfc65d0a84a9b929b2184  components/organisms/views-exposed-filters/views-exposed-filters.css   (build #1)
4adf0f15ecbcfc65d0a84a9b929b2184  components/organisms/views-exposed-filters/views-exposed-filters.css   (build #2, independent scratch copy)

stylelint (no --fix) against the final committed CSS: 0 problems, exit code 0.

Sequencing

Vartheme BS5's views-exposed-filters component (#3611865 / MR !189) has already merged to the 5.0.x branch, so this mirrors an already-shipped contract and does not need to wait on anything further.

AI-Generated: Yes (Used Claude Code to add the views-exposed-filters SDC component, write the Educare skin SCSS/README, run the theme's real build twice to prove reproducibility, and run stylelint; reviewed by Rajab Natshah.)

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