Skip to content

Story 2406: Update Search Bar with No-JS design #2433

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
julhoang merged 3 commits into from
May 20, 2026
+65 −14
Merged

Story 2406: Update Search Bar with No-JS design #2433

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
283d7f0
chore: add no-JS state for search button and refactor into a component
julhoang May 14, 2026
2c61fc5
style: update no-JS UI of the search bar
julhoang May 19, 2026
20f191b
fix: fix icon getting shrinked on mobile
julhoang May 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 2 additions & 14 deletions templates/v3/includes/_header_v3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@

Note: Subcomponents inherit the full parent context. Specifically:
_header_nav_link.html uses: url, label, nav_id, is_unread, active_nav_item
_header_search_bar.html uses: current_version
_header_utilities.html uses: disable_theme_switcher, request, avatar_id, version_menu_id

Usage:
Expand Down Expand Up @@ -69,20 +70,7 @@
</div>

{% comment %} Search — responsive: full bar on desktop, button on mobile {% endcomment %}
<search class="header__search-bar">
<button type="button"
id="gecko-search-button"
class="header__search-input-trigger"
data-current-boost-version="{{ current_version.stripped_boost_url_slug }}"
data-theme-mode="light"
data-font-family="var(--font-sans)">
<span class="header__search-icon" aria-hidden="true">
{% include "includes/icon.html" with icon_name="search" icon_class="header__icon" icon_size=16 %}
</span>
Search
</button>
<span class="header__search-kbd" aria-hidden="true">CTRL+K</span>
</search>
{% include "v3/includes/header/_header_search_bar.html" %}
{% comment %} Desktop & tablet utilities (hidden on mobile) {% endcomment %}
<div class="header__right">
{% include "v3/includes/header/_header_utilities.html" with avatar_id="desktop-user-menu" version_menu_id="desktop-version-menu" %}
Expand Down
43 changes: 43 additions & 0 deletions templates/v3/includes/header/_header_search_bar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
{% comment %}
Header Search Bar — Gecko-powered search trigger with JS-disabled fallback.

The search modal is imported from static/js/boost-gecko/.

When JavaScript is enabled, the button opens the Gecko search overlay (wired
in static/js/search-shortcut.js; Ctrl/Cmd+K shortcut). When JavaScript is
disabled, the button and keyboard hint are hidden via an inline <style> in
<noscript>, and a non-interactive span explains that search is unavailable.

Variables:
current_version (object, required) — current Boost release (from context processor)

Usage:
{% include "v3/includes/header/_header_search_bar.html" %}
{% endcomment %}
<search class="header__search-bar">
<button type="button"
id="gecko-search-button"
class="header__search-input-trigger"
data-current-boost-version="{{ current_version.stripped_boost_url_slug }}"
data-theme-mode="light"
data-font-family="var(--font-sans)">
<span class="header__search-icon" aria-hidden="true">
{% include "includes/icon.html" with icon_name="search" icon_class="header__icon" icon_size=16 %}
</span>
Search
</button>
<span class="header__search-kbd" aria-hidden="true">CTRL+K</span>
<noscript>
<style>
#gecko-search-button,
.header__search-kbd { display: none; }
.header__search-bar > noscript { display: contents; }
</style>
<span class="header__search-input-trigger" aria-disabled="true">
<span class="header__search-icon" aria-hidden="true">
{% include "includes/icon.html" with icon_name="search" icon_class="header__icon" icon_size=16 %}
</span>
Search is not available with JS disabled
</span>
</noscript>
</search>
Loading