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 animates visibility, 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.bootstrap is 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-lg rule 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-rtlcss flipped the measured physical left offset; that rule is now rtl: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
Edited by Rajab Natshah

Merge request reports

Loading
Loading