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
- 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
contentslot. - 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.
- 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
panelandexpand_in_editorprops and depends onvartheme_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.
Issue fork vartheme_bs5_educare-3617500
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
Comment #6
rajab natshah✅ Released vartheme_bs5_educare-1.0.0-alpha3
Comment #7
rajab natshahComment #8
rajab natshah