Breakpoints are set from sharedTokens#2602
Conversation
|
matyasf
force-pushed
the
unify_breakpoints
branch
2 times, most recently
from
cddecab to
d72271d
Compare
Visual regression report
Diff images (1)button-and-derivatives.png — 98193 pixels differBaselines come from the |
| private navFocusRegion: FocusRegion | null = null | ||
|
|
||
| static defaultProps = { | ||
| trayWidth: 300 |
There was a problem hiding this comment.
For some reason from ancient times, the App component had this prop. It's now hardcoded
| @@ -696,6 +696,7 @@ type: embed | |||
| {name:"spacing",note:""}, | |||
| {name:"inlinePadding",note:""}, | |||
| {name:"asteriskColor",note:""} | |||
There was a problem hiding this comment.
A missing trailing comma breaks the rendering.
| {name:"largeMin",note:"value is read from sharedTokens.breakpoints.lg"}, | ||
| {name:"xLargeMin",note:"value is read from sharedTokens.breakpoints.xl"} |
There was a problem hiding this comment.
These largeMin/xLargeMin notes only say the value now comes from sharedTokens, but the actual breakpoints also shift (large 62em → 64em, xLarge 75em → 80em) for Grid, Grid.Col and Grid.Row — might be worth mention the value change.
| // if there's room for the tray + 700px, load with the tray open (unless it's the homepage) | ||
| const smallerScreen = window.matchMedia( | ||
| `(max-width: ${props.trayWidth + 700}px)` | ||
| ).matches | ||
| // if there's room for the tray + 724px, load with the tray open (unless it's the homepage) | ||
| const smallerScreen = window.matchMedia(`(max-width: 1024px)`).matches |
There was a problem hiding this comment.
Since this is now a hardcoded 1024px rather than a calculation based on trayWidth, the "tray + 724px" comment is a bit confusing
There was a problem hiding this comment.
Actually this was a weird logic. Now we only hide the side navigation if the user is on smaller screens (we always show it on the homepage, I have no idea why this way not the case before)
matyasf
force-pushed
the
unify_breakpoints
branch
from
d72271d to
73e1c85
Compare
FormFieldLayout and Grid now uses design tokens from sharedTokens to set breakpoint values. Document app has fewer CSS breakpoints and their value are the same as the breakpoints in SharedTokens. update button example in regression test with more valuers INSTUI-5074
matyasf
force-pushed
the
unify_breakpoints
branch
from
73e1c85 to
ae761e5
Compare
4 participants
To test:
INSTUI-5074