Repository navigation
feat(config): add screenBreakpoints config option - #31502
Open
brandyscarney wants to merge 5 commits into
Open
brandyscarney wants to merge 5 commits into
brandyscarney wants to merge 5 commits into
Conversation
brandyscarney
added this pull request to stack #31503
September 29, 2026 20:47
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
brandyscarney
commented
Sep 29, 2026
Member
Author
There was a problem hiding this comment.
matchBreakpoint was moved to breakpoints.ts since that file name makes it more clear, but I can re-add this file if you think it makes more sense here.
ShaneK
approved these changes
Oct 5, 2026
ShaneK
left a comment
ShaneK
left a comment
Member
There was a problem hiding this comment.
Looks good to me, great work! Just a couple of optional nits, no worries if you'd rather leave them.
brandyscarney
force-pushed
the
FW-7285-2-config
branch
from
October 5, 2026 19:51
6c03b65 to
6ac0035
Compare
brandyscarney
force-pushed
the
FW-7285-2-config
branch
from
October 5, 2026 20:10
6ac0035 to
b59c31d
Compare
thetaPC
requested changes
Oct 8, 2026
Comment on lines
+244
to
+255
| export const getScreenBreakpoints = (): ScreenBreakpoints => { | ||
| const configValue = config.get('screenBreakpoints'); | ||
|
|
||
| if (cachedBreakpoints !== undefined && configValue === lastConfigValue) { | ||
| return cachedBreakpoints; | ||
| } | ||
|
|
||
| lastConfigValue = configValue; | ||
| cachedBreakpoints = resolveScreenBreakpoints(configValue); | ||
|
|
||
| return cachedBreakpoints; | ||
| }; |
Contributor
There was a problem hiding this comment.
- Returning the cached object lets any caller change it, so
getScreenBreakpoints().md = 600moves themdbreakpoint for every component on the page - Typing the return as
Readonlyonly covers TypeScript callers, whileObject.freezealso covers plain JS apps
Suggested change
| export const getScreenBreakpoints = (): ScreenBreakpoints => { | |
| const configValue = config.get('screenBreakpoints'); | |
| if (cachedBreakpoints !== undefined && configValue === lastConfigValue) { | |
| return cachedBreakpoints; | |
| } | |
| lastConfigValue = configValue; | |
| cachedBreakpoints = resolveScreenBreakpoints(configValue); | |
| return cachedBreakpoints; | |
| }; | |
| export const getScreenBreakpoints = (): Readonly<ScreenBreakpoints> => { | |
| const configValue = config.get('screenBreakpoints'); | |
| if (cachedBreakpoints !== undefined && configValue === lastConfigValue) { | |
| return cachedBreakpoints; | |
| } | |
| lastConfigValue = configValue; | |
| cachedBreakpoints = Object.freeze(resolveScreenBreakpoints(configValue)); | |
| return cachedBreakpoints; | |
| }; |
Comment on lines
+363
to
+369
| if (breakpointQueries === undefined) { | ||
| breakpointQueries = SCREEN_BREAKPOINT_NAMES.map((breakpoint) => | ||
| window.matchMedia(getScreenBreakpointMediaQuery(breakpoint)!) | ||
| ); | ||
|
|
||
| breakpointQueries.forEach((query) => query.addEventListener('change', notifyBreakpointSubscribers)); | ||
| } |
Contributor
There was a problem hiding this comment.
getScreenBreakpoints picks up a config that arrives late, but these listeners are only built once, so they keep the default widths. With { md: 720 }, a grid that subscribed before the config arrived won't update at 720. Could we rebuild them when getScreenBreakpoints re-resolves and notify subscribers? The spec doesn't catch this because no onBreakpointChange test sets a custom config.
This branch was successfully deployed
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
3 participants
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.
Adds a shared breakpoints utility that resolves the screen breakpoints from config, validating each value and falling back to the default per key.