feat: #3593698 Add a bar panel style to the Icon Toggle component for the header search bar
Issue: #3593698 Style the Search in the Header
Adds a panel prop to the Icon Toggle: popover (default, unchanged) or bar, the header
search bar from the approved header design — one hairline-underlined line with the icon, the
field and a close button.
Bootstrap 5.3 does the work. The panel is a dropdown-menu and the root a .dropdown, so
show/hide, aria-expanded, Escape, outside clicks, focus return and Popper's flip/shift all come
from Bootstrap's Dropdown. The component requires vartheme_bs5/bs-dropdown-script, which the
theme ships but leaves out of its global bundle, so SDC attaches it only where the component is
used. No jQuery.
Works in any region. icon-toggle.js measures the region the component sits in — a Drupal
Canvas global header or footer, or page content — and opens the bar towards the side with more
room, so it never runs off an edge. Only a header row lets the bar sit on the trigger's line and
become a full-width band below lg. With nothing to measure (a bare Storybook canvas, or JS off)
it simply drops under the trigger.
The header placement rule lives in the component, not the theme's global base stylesheet.
Bugs fixed along the way:
- The trigger's transition resolved to Bootstrap's
all .2s, which animatesvisibility, so the revealed trigger could not take focus for the transition's duration. - The close button never closed the panel: the theme loads Bootstrap as modules, so
window.bootstrapis undefined. It now closes through the trigger's data API, and restores focus, which Bootstrap only does for keyboard closes. - The panel inherited the theme's below-
lgrule that force-shows header dropdown menus for the collapsed mobile menu, leaving it permanently visible and pushing the component off-screen at 375px. - The stories filled their slot with
set+include, which never reaches an SDC slot, so every content story rendered the empty-slot placeholder. postcss-rtlcssflipped the measured physicalleftoffset; that rule is nowrtl:ignore.
contentinfo added to the theme's cspell dictionary (a valid ARIA landmark role, also clearing a
pre-existing finding).
Verified in a real browser at 375, 390, 768, 992, 1280, 1440 and 1600, anonymous and logged in,
and in Storybook across all five stories: zero console errors. Local pipeline green (build,
eslint, stylelint, cspell). Compiled CSS rebuilt with yarn components:build, never hand-edited.
AI-Generated: Yes
Checkpoints:
- File an issue
- Addition/Change/Update/Fix
- Testing to ensure no regression
- Automated unit testing coverage
- Automated functional testing coverage
- UX/UI designer responsibilities
- Readability
- Accessibility
- Performance
- Security
- Developer Documentation
- User Guide Documentation
- Reviewed by human
- Code review by maintainers
- Full testing and approval
- Credit contributors
- Review with the product owner
- Release notes snippet
- Release