Responsive design | Breakpoints + TopBar#72
Merged
Conversation
Dependency Compatibility Matrix
|
coldlink
force-pushed
the
mm/responsive-top-bar
branch
4 times, most recently
from
a129c79 to
5fa8ec9
Compare
coldlink
force-pushed
the
mm/responsive-top-bar
branch
from
5fa8ec9 to
ec94a3d
Compare
There was a problem hiding this comment.
Pull request overview
Adds semantic breakpoint tokens + a media-query helper API, and updates the TopBar component to support responsive “collapsed” behavior with a hamburger menu + updated token-driven styling.
Changes:
- Introduces
semanticBreakpointstokens (TS + CSS vars) andfrom/until/betweenmedia query helpers (with tests and Storybook docs). - Updates TopBar tokens + component implementation to support collapsing tool name + left container into a popover menu below a breakpoint.
- Expands Storybook/MDX documentation and examples for breakpoints and the responsive TopBar behavior.
Reviewed changes
Copilot reviewed 34 out of 34 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils.ts | Re-exports the new media-query helpers from the public utils entrypoint. |
| src/util/useRezise.ts | Adds a debounced resize hook used to close the collapsed TopBar menu on viewport changes. |
| src/styleD/utils/semantic/mq.ts | Implements from/until/between breakpoint-to-media-query helpers. |
| src/styleD/utils/semantic/mq.test.ts | Adds unit tests validating generated query strings. |
| src/styleD/tokens/foundations/local.json | Adds semantic breakpoint tokens to Style Dictionary source. |
| src/styleD/tokens/component/topBarToolName.json | Adds “collapsed” styling tokens for the tool name hover link. |
| src/styleD/tokens/component/topBarNavigation.json | Adds _menuOpen styling tokens for navigation items when rendered in the collapsed menu. |
| src/styleD/tokens/component/topBar.json | Adjusts TopBar layout tokens and adds collapsed menu/spacer tokens. |
| src/styleD/stories/semantic/Breakpoints.tsx | Adds a Storybook demo page for breakpoint tokens and the mq helper API. |
| src/styleD/stories/semantic/Breakpoints.stories.tsx | Registers Breakpoints stories (tokens + demos). |
| src/styleD/stories/semantic/Breakpoints.mdx | Documents how to use from/until/between and raw breakpoint tokens. |
| src/styleD/config.js | Adds the breakpoints semantic token group to the build config. |
| src/styleD/build/typescript/semantic/breakpoints.ts | Generated TS artifact exporting semanticBreakpoints. |
| src/styleD/build/typescript/component/TopBar.ts | Generated TS artifact reflecting new TopBar token structure. |
| src/styleD/build/css/semantic/breakpoints.css | Generated CSS vars for semantic breakpoints. |
| src/styleD/build/css/component/TopBar.css | Generated CSS vars for updated TopBar tokens. |
| src/index.ts | Exports semanticBreakpoints from the package root. |
| src/components/topbar/types.ts | Adds collapseBelow prop to configure TopBar responsive collapse behavior. |
| src/components/topbar/topBarToolName/types.ts | Adds collapseBelow + collapsedHoverText props for tool-name collapsing behavior. |
| src/components/topbar/topBarToolName/styles.ts | Applies breakpoint-driven styles for collapsed tool-name layout/label behavior. |
| src/components/topbar/topBarToolName/TopBarToolName.tsx | Implements collapsed rendering of hover text and hides expanded content below breakpoint. |
| src/components/topbar/topBarToolName/TopBarToolName.stories.tsx | Updates story to demonstrate collapsedHoverText. |
| src/components/topbar/topBarNavigation/types.ts | Adds internal _menuOpen prop to drive collapsed-menu styling. |
| src/components/topbar/topBarNavigation/styles.ts | Adds alternate styling for _menuOpen navigation rendering. |
| src/components/topbar/topBarNavigation/TopBarNavigation.tsx | Plumbs _menuOpen through and tweaks Menu popover placement/size for collapsed menu. |
| src/components/topbar/topBarNavigation/TopBarNavigation.stories.tsx | Adds story rows for _menuOpen styling states. |
| src/components/topbar/topBarItem/types.ts | Allows passing HTML div attributes through and adds internal _menuOpen prop. |
| src/components/topbar/topBarItem/styles.ts | Adds alternate _menuOpen styling for collapsed-menu rendering. |
| src/components/topbar/topBarItem/TopBarItem.tsx | Plumbs _menuOpen through to styling. |
| src/components/topbar/styles.ts | Adds breakpoint-driven container styles and collapsed menu button/popover styles. |
| src/components/topbar/TopBar.tsx | Implements responsive collapse for left container into a popover menu; supports more avatar types. |
| src/components/topbar/TopBar.stories.tsx | Adds a more complex responsive TopBar example including menu navigation. |
| src/components/topbar/TopBar.mdx | Documents new collapseBelow prop and responsive collapsed-menu behavior. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
coldlink
force-pushed
the
mm/responsive-top-bar
branch
from
53a6344 to
a38cd01
Compare
| * Making this value much smaller than `1px` prevents | ||
| * media queries falling between entire pixel values. | ||
| */ | ||
| const smidgen = 0.1; |
Contributor
There was a problem hiding this comment.
Love this choice of name
Member
Author
There was a problem hiding this comment.
andrewHEguardian
approved these changes
Apr 23, 2026
Contributor
andrewHEguardian
left a comment
andrewHEguardian
left a comment
There was a problem hiding this comment.
This is brilliant 👏 the top bar looks great
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What does this change?
Adds breakpoints to semantic tokens based on those from Figma
sm-> 0 - 671pxmd-> 672px - 1055pxlg-> 1056px - 1311pxxl-> 1312px - 1583pxmax-> 1584px - 1783pxmaxplus-> 1784px+These breakpoints will serve as the basis for responsive design, layout and the grid system within stand and it's consuming applications.
We've added in utilities in
mq.tsto help work with the breakpoint system. Specifically afrom,until,betweenmethods used to create css media queries based on a given breakpoint. AuseResizecallback hook is also created to determine at runtime when a resize event happens.This PR also applies these to the
TopBarcomponent, thereby creating a responsiveTopBar.We now collapse the items in the left hand side of the top bar at a given breakpoint. See Figma for designs.
The
TopBarToolNamehas now been configured to only show the Favicon when below the givencollapseBelowprop, and addedcollapsedHoverTextfor scenarios where we need a shorter hover text.The
TopBarContainerLeftitems now collapse into a hamburger menu automatically, with the items retaining similar syling as previous, achieved by updatingTopBarItemandTopBarNavigationto account for menu open styles. TheTopBarContainerRightnever collapses, so a developer should be careful about what goes there.We also update
topBarContainerStylesto account for which breakpoint we should show/hide a given element/componet at.The hamburger menu is implemented directly within the
TopBarcomponent based on thePopovercomponent and API.Screen.Recording.2026-04-22.at.17.05.36.mov