Problem/Motivation

Vartheme BS5 Educare ships an Icon Toggle, but only its first form: a bespoke popover with a hidden panel. It has since gained a second panel style and a different disclosure engine in Vartheme BS5, and Educare has neither. There is also nothing in the theme for a search results page: the shared Views view component prints the view header before the exposed form, so a results page shows the result count above the search box, and the page carries no heading at all because Drupal Canvas owns the content region and no page title block runs there.

Steps to reproduce

  1. Install a site template that uses this theme and place the Icon Toggle in the Canvas Header region with an exposed search form in its content slot.
  2. The panel can only be a boxed popover; there is no inline search bar, and the disclosure is hand-rolled rather than Bootstrap's own Dropdown.
  3. Give the site a search results route. The page renders with no <h1>, the result count above the search box, and an unstyled free-text filter that does not grow to fill the filter row.

Proposed resolution

Three additions, all component-level.

Icon Toggle. Bring the component up to the contract Vartheme BS5 now carries: Bootstrap 5.3's Dropdown owns showing and hiding the panel, aria-expanded, Escape, outside clicks and focus return, so the component asks for vartheme_bs5_educare/bs-dropdown-script and keeps only what Bootstrap does not do — swapping the trigger icon, focusing the panel's field, and the geometry of the new panel style. Two new props:

panel: popover | bar   — a boxed popover under the button, or an inline bar on
                         one hairline-underlined line carrying the icon, the
                         field and its own close button
expand_in_editor: bool — hold the panel open inside the Canvas editor preview so
                         its "content" slot stays reachable for dropping into

The stories file also loses a leaked local Storybook server URL and gets the correct themes/custom/vartheme_bs5_educare path, which every other component in this theme already uses.

Views view search. A new organism that takes the same variables as the Views view component and prints them in the order a results page reads best: the view title as the page <h1>, then the exposed filter bar, then the summary the view header carries, then the rows. An empty result set becomes a quiet notice rather than bare text. templates/views/views-view--search--page.html.twig includes it.

The filter bar is the theme's own Views exposed filters component, so the results page and the listing pages share one exposed-filter skin instead of a second copy of it.

Views exposed filters. The free-text filter is matched on the form item class form-item-search, which is the class a listing produces because the filter is named after its own field. A site search view names its filter keywords and produces form-item-keywords, so the field did not grow to fill the row and did not carry the search icon. Match the free-text widget as well, and let the actions take the full row width below the md breakpoint alongside the other controls.

Remaining tasks

  • ✅ File an issue
  • ✅ Addition/Change/Update/Fix
  • ✅ Testing to ensure no regression
  • ✅ Automated unit/functional testing coverage
  • ➖ Developer Documentation support
  • ➖ User Guide Documentation support
  • ➖ 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

User interface changes

  • The Icon Toggle offers a second panel style, an inline bar that spans the band it sits in and carries its own close button.
  • A search results page prints the view title as its <h1>, then the filter bar, then the result summary.
  • An empty search result set renders as a bordered notice on the theme's subtle surface.

API changes

  • New component vartheme_bs5_educare:views-view-search.
  • Icon Toggle gains the panel and expand_in_editor props and depends on vartheme_bs5_educare/bs-dropdown-script.

Data model changes

  • N/A

Release notes snippet

  • Added an inline search bar panel style to the Icon Toggle component, and a Views view search component that gives a search results page its own heading with the filter bar above the result summary.
Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rajab natshah created an issue. See original summary.

  • rajab natshah committed fefd92c7 on 1.0.x
    feat: #3617500 Add the header search bar and the search results view...

  • rajab natshah committed b1971569 on 1.0.x
    feat: #3617500 Match the header search to the Figma design system
    
rajab natshah’s picture

Assigned: Unassigned » josebc
Issue summary: View changes
Status: Active » Needs review
Issue tags: +vartheme_bs5_educare-1.0.0-alpha3
rajab natshah’s picture

Assigned: josebc » mohammed j. razem
rajab natshah’s picture

Assigned: mohammed j. razem » Unassigned
Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.