Lb/update languages menu ux behind flag by lilybarrett · Pull Request #3335 · mbta/dotcom

lilybarrett · 2026-07-13T18:17:03Z

Scope

We want to redesign the header with a two-tier menu that, among other things, reimagines what the Languages button/menu looks like. This adds that redesign behind the feature flag that also enables Smartling translations .

Asana Ticket:
https://app.asana.com/1/15492006741476/project/1213994587940653/task/1216081563934501?focus=true

Implementation

Please note that this adds some changes to the Typescript code that handles interactions w/ the headers/menus on Dotcom -- namely to allow Dotcom to handle multiple tiers of headers rather than just one.
Additional CSS classes and design updates behind the feature flag -- You may notice some code duplication here.
Some minor code refactors

Screenshots

How to test

Pull down this branch or navigate to the deployment branch
Ensure nothing in the header UX/functionality looks broken (BEFORE turning on the feature flag)
Navigate to /_flags and turn on the feature flag
Interact with the new two-tiered header -- ensuring that buttons/links on both menu tiers still work as expected, changing the screen size, etc.
Turn on Voiceover and tab around, ensuring that the Languages button adheres to accessibility expectations. (It should behave similarly to the existing buttons on the menu).

Note: Changes to the footer will come in future work, once designs are complete.

Style new header properly

Manually resolve merge conflict Remove unnecessary comments Only make necessary changes Bring code back in that got deleted by accident Restore previous behaviors More styling tweaks

WIP

Bit of styling cleanup

Co-authored-by: Cristen Jones <cjones3@mbta.com>

Some styling cleanup

… distance adjusts automagically

Update margin values Minor cleanup Run prettier

Fix languages order Add max-width to search bar Tweak padding

Whoops

thecristen

🎉 Thanks!!

lilybarrett force-pushed the lb/update-languages-menu-UX-behind-flag branch 4 times, most recently from 0b1dc58 to a743b3c Compare July 15, 2026 14:46

lilybarrett commented Jul 15, 2026

View reviewed changes

Comment thread assets/css/_global-navigation.scss

lilybarrett commented Jul 15, 2026

View reviewed changes

Comment thread assets/css/_header.scss

lilybarrett force-pushed the lb/update-languages-menu-UX-behind-flag branch 3 times, most recently from dba6265 to f9ceaec Compare July 15, 2026 20:07

lilybarrett commented Jul 15, 2026

View reviewed changes

Comment thread assets/ts/app/global-navigation.ts

lilybarrett marked this pull request as ready for review July 15, 2026 20:27

lilybarrett requested a review from a team as a code owner July 15, 2026 20:27

lilybarrett requested a review from joshlarson July 15, 2026 20:27

smartling-github-connector Bot added the Not Ready for Translation Remove this when the PR is approved to trigger a Smartling translation job label Jul 15, 2026

lilybarrett requested a review from thecristen July 15, 2026 20:27

thecristen added the dev-blue Deploy to dev-blue label Jul 16, 2026

thecristen temporarily deployed to dev-blue July 16, 2026 16:36 — with GitHub Actions Inactive

lilybarrett force-pushed the lb/update-languages-menu-UX-behind-flag branch from f9ceaec to f982f18 Compare July 16, 2026 20:25

lilybarrett temporarily deployed to dev-blue July 16, 2026 20:25 — with GitHub Actions Inactive

thecristen temporarily deployed to dev-blue July 17, 2026 14:53 — with GitHub Actions Inactive

This comment was marked as resolved.

Sign in to view

lilybarrett had a problem deploying to dev-blue July 17, 2026 20:38 — with GitHub Actions Error

lilybarrett temporarily deployed to dev-blue July 17, 2026 20:45 — with GitHub Actions Inactive

lilybarrett temporarily deployed to dev-blue July 21, 2026 18:31 — with GitHub Actions Inactive

lilybarrett temporarily deployed to dev-blue July 21, 2026 20:22 — with GitHub Actions Inactive

lilybarrett temporarily deployed to dev-blue July 22, 2026 14:53 — with GitHub Actions Inactive

lilybarrett temporarily deployed to dev-blue July 22, 2026 15:10 — with GitHub Actions Inactive

lilybarrett temporarily deployed to dev-blue July 22, 2026 17:16 — with GitHub Actions Inactive

lilybarrett requested a review from thecristen July 22, 2026 17:25

WIP

90f578d

Style new header properly

Lily Barrett and others added 8 commits July 22, 2026 13:34

Toggle class based on flag

6231728

Manually resolve merge conflict Remove unnecessary comments Only make necessary changes Bring code back in that got deleted by accident Restore previous behaviors More styling tweaks

More styling tweaks

6a5bc12

WIP

Make the TS diff changes easier to grok

f01708c

Fix up issue with top tier menu not appearing at all screen sizes

91b40eb

Bit of styling cleanup

Use padding to match design more closely

f2ac024

Co-authored-by: Cristen Jones <cjones3@mbta.com>

Remove languages menu when JS is disabled

89c82fd

Some styling cleanup

Remove unnecessary class and add position; relative to header so menu…

45277eb

… distance adjusts automagically

Remove darkening of bottom bar on mobile altogether per Chase's blessing

bdc083b

Update margin values Minor cleanup Run prettier

lilybarrett force-pushed the lb/update-languages-menu-UX-behind-flag branch from 5bf0f13 to abe2f77 Compare July 22, 2026 17:35

lilybarrett temporarily deployed to dev-blue July 22, 2026 17:35 — with GitHub Actions Inactive

lilybarrett temporarily deployed to dev-blue July 23, 2026 14:56 — with GitHub Actions Inactive

lilybarrett temporarily deployed to dev-blue July 23, 2026 15:41 — with GitHub Actions Inactive

lilybarrett temporarily deployed to dev-blue July 23, 2026 17:43 — with GitHub Actions Inactive

lilybarrett temporarily deployed to dev-blue July 24, 2026 16:15 — with GitHub Actions Inactive

lilybarrett force-pushed the lb/update-languages-menu-UX-behind-flag branch from c8d3764 to 50b22ce Compare July 24, 2026 17:14

lilybarrett temporarily deployed to dev-blue July 24, 2026 17:14 — with GitHub Actions Inactive

lilybarrett removed the Not Ready for Translation Remove this when the PR is approved to trigger a Smartling translation job label Jul 24, 2026

thecristen requested changes Jul 27, 2026

View reviewed changes

Comment thread lib/dotcom_web/templates/layout/_new_header.html.heex Outdated

lilybarrett had a problem deploying to dev-blue July 27, 2026 17:00 — with GitHub Actions Error

lilybarrett had a problem deploying to dev-blue July 27, 2026 17:01 — with GitHub Actions Error

Lily Barrett added 2 commits July 27, 2026 13:01

Handle veil

2cd27e3

Fix languages order Add max-width to search bar Tweak padding

Clean up nav code

00319d2

Whoops

lilybarrett force-pushed the lb/update-languages-menu-UX-behind-flag branch from 06eadbd to 00319d2 Compare July 27, 2026 17:02

lilybarrett temporarily deployed to dev-blue July 27, 2026 17:02 — with GitHub Actions Inactive

Update localization files

450c5a1

lilybarrett temporarily deployed to dev-blue July 27, 2026 17:17 — with GitHub Actions Inactive

thecristen approved these changes Jul 27, 2026

View reviewed changes

thecristen removed the dev-blue Deploy to dev-blue label Jul 27, 2026

lilybarrett merged commit f4cae04 into main Jul 27, 2026
23 checks passed

lilybarrett deleted the lb/update-languages-menu-UX-behind-flag branch July 27, 2026 18:00

Navigation Menu

Lb/update languages menu ux behind flag - #3335

Lb/update languages menu ux behind flag#3335
lilybarrett merged 14 commits into
mainfrom
lb/update-languages-menu-UX-behind-flag

lilybarrett commented Jul 13, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as resolved.

Uh oh!

Uh oh!

thecristen left a comment

Uh oh!

Uh oh!

This branch was previously deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

lilybarrett commented Jul 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Scope

Implementation

Screenshots

How to test

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as resolved.

Uh oh!

Uh oh!

thecristen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This branch was previously deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

lilybarrett commented Jul 13, 2026 •

edited

Loading