Skip to content

Feat: Search Component V3 #2200

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 15 commits into from
Mar 30, 2026
Merged

Feat: Search Component V3 #2200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
e36ac4d
fix: storybook match on content and post
fromagge Mar 17, 2026
6913f1d
fix: post card carousel no scroll
fromagge Mar 17, 2026
e86ce06
feat: search bar with results
fromagge Mar 17, 2026
6b3d419
fix: nit gap
fromagge Mar 17, 2026
9b9355b
refactor: enhance search modal styles and structure for v3 layout
fromagge Mar 18, 2026
f6414e9
update boost gecko
fromagge Mar 19, 2026
89795c0
fix: minor css update
fromagge Mar 20, 2026
b90401b
style: styling update
julhoang Mar 23, 2026
0994803
style: styling update
julhoang Mar 24, 2026
f8c6878
chore: remove new search component from pages with no redesign
julhoang Mar 24, 2026
50f9a72
chore: update new build from boost-gecko
julhoang Mar 24, 2026
3b3fcce
feat: add the ctrl+k shortcut to open search modal
julhoang Mar 24, 2026
1640c0f
style: load new boost-gecko script with updated height design
julhoang Mar 25, 2026
bb71bf8
style: update hover and mobile stying of the search component in navbar
julhoang Mar 26, 2026
bc72465
fix: add new boost-gecko module with fixes that address QA feedback
julhoang Mar 26, 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
2 changes: 1 addition & 1 deletion static/css/v3/forms.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
}

.field__control:hover .field__input::placeholder {
color: var(--color-text-link-accent, #00778b);
color: var(--color-text-primary, #050816);
}

.field__control:focus-within {
Expand Down
83 changes: 61 additions & 22 deletions static/css/v3/header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,13 +65,15 @@
padding: var(--space-s, 4px) var(--space-default, 8px);
border-radius: var(--header-radius);
white-space: nowrap;
transition: color 0.15s ease, background-color 0.15s ease;
transition:
color 0.15s ease,
background-color 0.15s ease;
}

.header__link:hover {
color: var(--color-text-primary, var(--text-color));
border-radius: var(--border-radius-m, 6px);
background: var(--Navigation-Hover, var(--color-navigation-hover, #D5D6D8));
background: var(--Navigation-Hover, var(--color-navigation-hover, #d5d6d8));
}

.header__link--posts {
Expand Down Expand Up @@ -101,8 +103,8 @@

.header .btn:hover {
border-radius: var(--border-radius-m, 6px);
background: var(--Navigation-Hover, var(--color-navigation-hover, #D5D6D8));
border-color: var(--Navigation-Hover, var(--color-navigation-hover, #D5D6D8));
background: var(--Navigation-Hover, var(--color-navigation-hover, #d5d6d8));
border-color: var(--Navigation-Hover, var(--color-navigation-hover, #d5d6d8));
color: var(--color-text-primary, var(--text-color));
}

Expand All @@ -116,12 +118,14 @@

/* Search: icon, input trigger, kbd */
.header__search-icon {
color: var(--color-text-secondary, var(--color-text-primary));
opacity: 0.8;
color: var(--color-icon-brand-accent);
font-size: var(--Sizes-Small, 14px);
}

.header__search-input-trigger {
display: inline-flex;
align-items: center;
gap: var(--space-default, 8px);
flex: 1;
min-width: 0;
border: none;
Expand All @@ -134,6 +138,10 @@
font-family: var(--Typefaces-Sans, "Mona Sans VF");
}

.header__search-input-trigger:focus-visible {
outline: none;
}

.header__search-kbd {
display: flex;
align-items: center;
Expand All @@ -148,7 +156,7 @@
line-height: 120%;
letter-spacing: -0.12px;
border-radius: var(--border-radius-m, 6px);
background: var(--color-surface-mid, #F7F7F8);
background: var(--color-surface-mid, #f7f7f8);
}

.header__search-btn {
Expand Down Expand Up @@ -182,7 +190,7 @@
align-items: center;
gap: var(--space-s, 4px);
width: 93px;
height: var(--header-height);
height: var(--header-height);
padding: 16px;
color: var(--color-text-primary, var(--text-color));
text-decoration: none;
Expand All @@ -201,8 +209,8 @@

.header__latest-trigger:hover {
border-radius: var(--border-radius-m, 6px);
background: var(--Navigation-Hover, var(--color-navigation-hover, #D5D6D8));
border-color: var(--Navigation-Hover, var(--color-navigation-hover, #D5D6D8));
background: var(--Navigation-Hover, var(--color-navigation-hover, #d5d6d8));
border-color: var(--Navigation-Hover, var(--color-navigation-hover, #d5d6d8));
color: var(--color-text-primary, var(--text-color));
}

Expand Down Expand Up @@ -255,8 +263,8 @@ html.dark .header__icon--theme-moon {

.header__icon-btn:hover {
border-radius: var(--border-radius-m, 6px);
background: var(--Navigation-Hover, var(--color-navigation-hover, #D5D6D8));
border-color: var(--Navigation-Hover, var(--color-navigation-hover, #D5D6D8));
background: var(--Navigation-Hover, var(--color-navigation-hover, #d5d6d8));
border-color: var(--Navigation-Hover, var(--color-navigation-hover, #d5d6d8));
color: var(--color-icon-primary, var(--color-text-primary));
}

Expand All @@ -280,20 +288,22 @@ html.dark .header__icon--theme-moon {
min-height: var(--header-height);
padding: 0;
border-radius: var(--header-control-radius);
border: 1px solid var(--color-stroke-weak, rgba(5, 8, 22, 0.10));
background: var(--color-surface-weak, #FFF);
border: 1px solid var(--color-stroke-weak, rgba(5, 8, 22, 0.1));
background: var(--color-surface-weak, #fff);
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease;
transition:
border-color 0.15s ease,
background-color 0.15s ease;
overflow: hidden;
}
.header__user-trigger:hover {
border-color: var(--color-stroke-strong, rgba(5, 8, 22, 0.25));
background: var(--color-surface-mid, #F7F7F8);
background: var(--color-surface-mid, #f7f7f8);
}
.header__user-trigger--open,
.header__user-trigger[aria-expanded="true"] {
border-color: var(--color-stroke-mid, rgba(5, 8, 22, 0.17));
background: var(--color-surface-mid, #F7F7F8);
background: var(--color-surface-mid, #f7f7f8);
}
.header__user-trigger .header__user-avatar-inner {
width: 100%;
Expand Down Expand Up @@ -406,14 +416,33 @@ html.dark .header__user-trigger .header__user-avatar-inner .fa-user {
align-items: center;
gap: var(--space-default, 8px);
flex: 1;
min-width: 0;
min-width: 360px;
height: var(--header-height);
padding: 0 var(--space-medium, 12px);
border: var(--header-control-border);
border-radius: var(--header-control-radius);
background: var(--header-control-bg);
}

.header__search-bar--full:hover {
background: var(--color-surface-mid);
color: var(--color-text-link-accent);
}

.header__search-bar--full:hover .header__search-input-trigger,
.header__search-bar--full:hover .header__search-icon,
.header__search-bar--full:hover .header__search-kbd {
color: var(--color-text-link-accent);
}

.header__search-bar--full:hover .header__search-kbd {
background: var(--color-surface-strong);
}

.header__search-bar--full:has(:focus-visible) {
outline: 2px solid var(--color-stroke-link-accent);
}

.header__search-compact {
display: none;
}
Expand All @@ -431,7 +460,7 @@ html.dark .header__user-trigger .header__user-avatar-inner .fa-user {
align-items: center;
justify-content: center;
min-height: var(--header-height);
padding: 0 var(--space-default, 8px);
padding: 0 var(--space-large);
border: var(--header-control-border);
border-radius: var(--header-control-radius);
background: var(--header-control-bg);
Expand All @@ -449,7 +478,7 @@ html.dark .header__user-trigger .header__user-avatar-inner .fa-user {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-s, 4px);
gap: var(--space-medium);
flex: 1;
min-width: 0;
min-height: var(--header-height);
Expand All @@ -464,12 +493,22 @@ html.dark .header__user-trigger .header__user-avatar-inner .fa-user {
font-family: var(--Typefaces-Sans, "Mona Sans VF");
}

.header__menu-btn .header__icon,
.header__search-btn--mobile .header__icon {
color: var(--color-icon-brand-accent);
}

.header__menu-btn:hover,
.header__search-btn--mobile:hover {
border-color: var(--color-stroke-link-accent);
color: var(--color-text-link-accent);
}

.header__menu-btn:hover .header__icon,
.header__search-btn--mobile:hover .header__icon {
color: var(--color-text-link-accent);
}

/* ==========================================================================
Desktop (min-width: 992px)
========================================================================== */
Expand All @@ -494,7 +533,6 @@ html.dark .header__user-trigger .header__user-avatar-inner .fa-user {
========================================================================== */

@media (max-width: 991px) {

.header__nav--desktop,
.header__right {
display: none;
Expand All @@ -520,7 +558,8 @@ html.dark .header__user-trigger .header__user-avatar-inner .fa-user {
background: var(--color-bg-secondary, var(--card-color));
border-left: 1px solid var(--color-border);
z-index: 1001;
padding: var(--header-height) var(--space-large, 1rem) var(--space-large, 1rem);
padding: var(--header-height) var(--space-large, 1rem)
var(--space-large, 1rem);
overflow-y: auto;
}

Expand Down
21 changes: 19 additions & 2 deletions static/css/v3/post-cards.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,8 @@

.post-cards--horizontal {
max-width: 100%;
min-width: 960px;
min-width: 0;
overflow: hidden;
}

.post-cards--horizontal .post-cards__list {
Expand All @@ -87,6 +88,7 @@
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
min-width: 0;
}

.post-cards__item {
Expand All @@ -103,14 +105,29 @@
border-top: none;
border-bottom: none;
border-right: 1px solid var(--color-stroke-weak);
flex-shrink: 0;
flex: 0 0 auto;
min-width: 368px;
max-width: 458px;
}

.post-cards--horizontal .post-cards__item:last-child {
border-right: none;
}

/* Carousel variant: horizontal scroll is intentional */
.post-cards--horizontal.post-cards--carousel {
overflow: visible;
}
.post-cards--horizontal.post-cards--carousel .post-cards__list {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.post-cards--horizontal.post-cards--carousel .post-cards__item {
flex: 0 0 auto;
flex-shrink: 0;
}

.post-card {
display: flex;
flex-direction: column;
Expand Down
Loading
Loading