Repository navigation
UXE-984: [6/6] Waterfall: Grid and box CSS - #1981
adamrasheed wants to merge 2 commits into
Conversation
|
There is an existing patch(es) for this commit SHA: Please note that the status that is posted is not in the context of this PR but rather the (latest) existing patch and that may affect some tests that may depend on the particular PR. If your tests do not rely on any PR-specific values (like base or head branch name) then your tests will report the same status. If you would like a patch to run in the context of this PR and abort the other(s), comment 'evergreen retry'. |
e57fcc0 to
b1a40f5
Compare
b1a40f5 to
a8475de
Compare
a8475de to
05732a5
Compare
There was a problem hiding this comment.
Copilot review overview
🟢 Approval recommended
The migration is coherent and low-risk, with only minor maintainability improvements suggested around keeping numeric layout constants/tests resilient to token changes.
Review effort: Lite
Findings: 1
Open (3)
What changed in this PR
Migrates the remaining Waterfall grid/layout styling from Emotion to CSS Modules as the final step of the “Waterfall Via” styling migration, removing the old shared styles.ts and updating affected components/tests accordingly.
Changes:
- Replaced Emotion styled components in
WaterfallGridandBuildRowwith CSS module classes (including sticky header, grid group layout, and inactive version column styling). - Removed the shared
styles.tsand introducedstyles.module.css/ component-scoped CSS modules for the extracted styles. - Added a Playwright check to validate sticky header alignment with grid rows.
| File | Description |
|---|---|
| apps/spruce/src/pages/waterfall/WaterfallGrid.tsx | Switches sticky header/grid layout from Emotion components to CSS module classes. |
| apps/spruce/src/pages/waterfall/WaterfallGrid.module.css | New CSS module for WaterfallGrid container, sticky header, and versions row layout. |
| apps/spruce/src/pages/waterfall/styles.ts | Removes old shared Emotion style helpers/components. |
| apps/spruce/src/pages/waterfall/styles.module.css | New shared CSS module replacing the removed styles.ts exports (row/title/inactive column styles). |
| apps/spruce/src/pages/waterfall/index.tsx | Replaces Emotion global/page container styling with a CSS module-backed container. |
| apps/spruce/src/pages/waterfall/index.module.css | New page-level CSS module including scoped global navbar overrides using :has(). |
| apps/spruce/src/pages/waterfall/BuildRow.tsx | Replaces Emotion styles (including static classNameCss) with CSS module classes for row/grid/pin button. |
| apps/spruce/src/pages/waterfall/BuildRow.module.css | New CSS module for build row grid group, build containers, and pin button styling. |
| apps/spruce/playwright/tests/waterfall/waterfall.spec.ts | Adds a grid-layout regression test covering sticky header alignment and page scrolling. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| const padding = 8; | ||
| const border = 1; | ||
| const containerPaddingAndBorder = padding * 2 + border * 2; |
| await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight)); | ||
| expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(0); | ||
| await expect | ||
| .poll(async () => (await stickyHeader.boundingBox())?.y) | ||
| .toBeCloseTo(64, 0); |
| .buildContainer { | ||
| flex-basis: calc(100% / 5); | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fill, 18px); | ||
| align-content: start; | ||
| min-width: 0; | ||
| } |
athammer
left a comment
athammer
left a comment
There was a problem hiding this comment.
looks good, not seeing any style changes!
UXE-984
Description
Part 6 of the Waterfall Via migration, stacked on #1980. This moves the remaining BuildRow, grid, sticky header, and page layout styles from Emotion to CSS modules and removes the old shared
styles.ts.I kept the existing pin control and behavior unchanged.
Screenshots
UXE-988)UXE-984)Testing