Phase 7.2a: Migrate Page Components from styled-components to plain CSS by OpenStaxClaude · Pull Request #3054 · openstax/rex-web

OpenStaxClaude · 2026-06-30T18:36:40Z

Summary

This PR migrates Page component files and BookBanner from styled-components to plain CSS as part of Phase 7.2 of the CSS migration effort (CORE-2283).

Scope

Migrated 6 component files:

Page/ components:*

✅ MediaModal.tsx - Full-screen modal for displaying enlarged media
✅ MinPageHeight.tsx - Minimum page height container accounting for header elements
✅ PageNotFound.tsx - 404 error page display
✅ PageToasts.tsx - Toast notification container with complex responsive positioning
✅ RedoPadding.tsx - Wrapper padding component for content pages

Migration Approach

Following the hybrid approach documented in PLAIN_CSS_MIGRATION_LEARNINGS.md:

Direct in-place migration - Replaced styled-component content directly in main .tsx files
Created accompanying .css files with plain CSS styles
Used CSS variables for dynamic values (theme colors, z-indices, spacing calculations, gradients)
Maintained all existing functionality - No breaking changes to component APIs

Key Changes

Component Updates

Replaced styled-components with classNames utility for className composition
Migrated from React.FC to normal function declarations (following best practices)
Added React.forwardRef for components that receive refs (MinPageHeight, RedoPadding, BarWrapper)
Filtered transient props and colorSchema prop to prevent DOM attribute leakage

CSS Implementation

Created 6 new CSS files with comprehensive styles
Used CSS variables for all dynamic values with appropriate fallbacks
Documented media query breakpoints with step-by-step calculations
Ensured all @media queries are at top level (not nested)
BookBanner.css: Complex gradient backgrounds, scroll transitions, two responsive variants

Type Updates

Updated connector.ts to use React.ComponentType instead of StyledComponent type
Removed styled-components imports where no longer needed

Testing Checklist

TypeScript compilation succeeds
Unit tests pass for migrated components
Visual regression tests pass (screenshot comparisons)
No console warnings about invalid DOM attributes
Modal functionality works correctly (MediaModal)
Toast positioning is correct at all breakpoints (PageToasts)
Page layout maintains proper spacing and min-height
404 page displays correctly

Related Jira Ticket

CORE-2283: Phase 7.2: Migrate Page & Toolbar Components

Notes

PageContent.tsx was already migrated in a previous phase and has an existing CSS file
This PR includes the Page/* directory
Toolbar/* components and other content components will be addressed in follow-up PRs

🤖 Generated with Claude Code

Migrated 5 Page/* component files to use plain CSS instead of styled-components: - MediaModal.tsx - Full-screen modal for enlarged media - MinPageHeight.tsx - Minimum page height container - PageNotFound.tsx - 404 error page display - PageToasts.tsx - Toast notification container with complex positioning - RedoPadding.tsx - Wrapper padding component Changes: - Created accompanying .css files for each migrated component - Replaced styled-components with plain CSS classes and CSS variables - Updated components to use classNames utility for className composition - Migrated from React.FC to normal function declarations - Added React.forwardRef where components receive refs - Updated connector.ts to use React.ComponentType instead of StyledComponent Following hybrid migration approach from PLAIN_CSS_MIGRATION_LEARNINGS.md: - Used CSS variables for dynamic values (theme colors, z-indices, spacing) - Documented media query breakpoints with calculations - Maintained all existing functionality and styling - No breaking changes to component APIs 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Copilot

Pull request overview

Migrates several src/app/content/components/Page/* components from styled-components to plain CSS, introducing co-located .css files and CSS-variable-based dynamic values while keeping component APIs largely intact.

Changes:

Replaced styled-components wrappers with plain elements + className composition and new .css files for Page-level UI components (modal, padding/min-height containers, 404 page, toast container).
Introduced CSS variables (via inline style) to preserve dynamic theme/constants-driven values (z-indexes, breakpoints, spacing, computed offsets).
Updated typing in the Page connector and refreshed Jest snapshots impacted by the styling migration.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/app/content/components/Page/RedoPadding.tsx	Replaces styled wrapper with `forwardRef` div + CSS variables and className.
src/app/content/components/Page/RedoPadding.css	Adds plain CSS equivalent of wrapper padding + responsive rules.
src/app/content/components/Page/PageToasts.tsx	Replaces styled toast container with plain div + CSS variables and className.
src/app/content/components/Page/PageToasts.css	Adds plain CSS for sticky toast positioning and responsive calculations.
src/app/content/components/Page/PageNotFound.tsx	Replaces styled 404 layout with class-based markup + CSS variable for text color.
src/app/content/components/Page/PageNotFound.css	Adds plain CSS for 404 layout + mobile margin adjustment.
src/app/content/components/Page/MinPageHeight.tsx	Replaces styled min-height wrapper with `forwardRef` div + CSS variables.
src/app/content/components/Page/MinPageHeight.css	Adds plain CSS for min-height calculation (desktop/mobile).
src/app/content/components/Page/MediaModal.tsx	Replaces styled modal structure with class-based markup + CSS variables for computed sizing.
src/app/content/components/Page/MediaModal.css	Adds plain CSS for modal layout, close button positioning, and scrollable content.
src/app/content/components/Page/connector.ts	Adjusts `ToastOverride` typing away from styled-components-specific types.
src/app/content/components/Page/snapshots/PageToasts.spec.tsx.snap	Snapshot updates reflecting className/CSS-variable rendering.
src/app/content/components/Page/snapshots/MediaModal.spec.tsx.snap	Snapshot updates reflecting className/CSS-variable rendering.
src/app/content/snapshots/routes.spec.tsx.snap	Snapshot updates reflecting downstream rendered markup changes.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated 5 comments.

Update routes.spec.tsx.snap Co-Authored-By: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Migrated BookBanner.tsx (~350 lines) from styled-components to plain CSS: - Converted 8 styled-components to plain CSS + React components - Inlined applyBookTextColor utility (only used in BookBanner) - Maintained gradient backgrounds, scroll animations, and two variants (big/mini) - Preserved all responsive behavior and accessibility features Key Changes: - Created BookBanner.css with comprehensive styles for both variants - Replaced styled-components with functional components using classNames - Used CSS variables for dynamic values (gradients, colors, z-indices, heights) - Maintained scroll-based transition behavior between big/mini variants - Added React.forwardRef to BarWrapper for proper ref forwarding Technical Details: - Gradient backgrounds computed dynamically from theme and colorSchema prop - Text colors applied via CSS variables from theme.color.primary[colorSchema].foreground - Responsive breakpoints documented with calculations - Preserved disabled print styling via CSS @media print rules - ChevronLeftIcon migrated to plain SVG component Following patterns from PLAIN_CSS_MIGRATION_LEARNINGS.md 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

jivey

Is it possible something is passing down an ariaLabel prop? Locally I see this in the console - it's not in production, so if not introduced here, maybe in a different PR?

Warning: Invalid ARIA attribute `ariaLabel`. Did you mean `aria-label`?
    in div (at PopupStyles.tsx:94)

TomWoodward temporarily deployed to rex-web-phase-7-2-migra-bw7dus June 30, 2026 18:37 Inactive

Snaps & lint

102f4ec

TomWoodward temporarily deployed to rex-web-phase-7-2-migra-bw7dus June 30, 2026 19:08 Inactive

RoyEJohnson assigned RoyEJohnson and OpenStaxClaude Jun 30, 2026

RoyEJohnson requested a review from Copilot June 30, 2026 19:11

Copilot started reviewing on behalf of RoyEJohnson June 30, 2026 19:12 View session

Copilot AI reviewed Jun 30, 2026

View reviewed changes

Comment thread src/app/content/components/Page/PageToasts.tsx

Comment thread src/app/content/components/Page/connector.ts Outdated

Comment thread src/app/content/components/Page/connector.ts Outdated

TomWoodward temporarily deployed to rex-web-phase-7-2-migra-bw7dus June 30, 2026 20:49 Inactive

RoyEJohnson force-pushed the phase-7.2-migrate-page-components branch from 87d7f56 to e4fcbdf Compare June 30, 2026 20:53

RoyEJohnson requested a review from Copilot June 30, 2026 20:54

TomWoodward temporarily deployed to rex-web-phase-7-2-migra-bw7dus June 30, 2026 20:54 Inactive

Copilot started reviewing on behalf of RoyEJohnson June 30, 2026 20:54 View session

Copilot AI reviewed Jun 30, 2026

View reviewed changes

TomWoodward temporarily deployed to rex-web-phase-7-2-migra-bw7dus June 30, 2026 21:06 Inactive

RoyEJohnson force-pushed the phase-7.2-migrate-page-components branch from b90f5e4 to bf3d4a9 Compare June 30, 2026 21:06

TomWoodward temporarily deployed to rex-web-phase-7-2-migra-bw7dus June 30, 2026 21:06 Inactive

This comment was marked as outdated.

Sign in to view

RoyEJohnson force-pushed the phase-7.2-migrate-page-components branch from bf3d4a9 to a0cd43c Compare June 30, 2026 21:39

TomWoodward had a problem deploying to rex-web-phase-7-2-migra-bw7dus June 30, 2026 21:39 Failure

Copilot suggestions

b7f8142

Update routes.spec.tsx.snap Co-Authored-By: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

RoyEJohnson force-pushed the phase-7.2-migrate-page-components branch from a0cd43c to b7f8142 Compare June 30, 2026 21:46

TomWoodward temporarily deployed to rex-web-phase-7-2-migra-bw7dus June 30, 2026 21:47 Inactive

RoyEJohnson requested a review from Copilot June 30, 2026 22:03

Copilot started reviewing on behalf of RoyEJohnson June 30, 2026 22:03 View session

This comment was marked as resolved.

Sign in to view

Clear timeout in useEffect

d51d1ab

TomWoodward deployed to rex-web-phase-7-2-migra-bw7dus June 30, 2026 22:15 View deployment

RoyEJohnson marked this pull request as ready for review June 30, 2026 22:35

RoyEJohnson requested a review from a team as a code owner June 30, 2026 22:35

RoyEJohnson self-requested a review June 30, 2026 22:35

OpenStaxClaude mentioned this pull request Jul 1, 2026

Phase 7.2b: Migrate Toolbar Components from styled-components to plain CSS #3055

Open

10 tasks

RoyEJohnson requested a review from jivey July 1, 2026 20:42

RoyEJohnson changed the title ~~Phase 7.2: Migrate Page Components from styled-components to plain CSS~~ Phase 7.2a: Migrate Page Components from styled-components to plain CSS Jul 2, 2026

TomWoodward had a problem deploying to rex-web-phase-7-2-migra-bw7dus July 2, 2026 15:55 Failure

RoyEJohnson force-pushed the phase-7.2-migrate-page-components branch from 33e0684 to d51d1ab Compare July 2, 2026 16:02

jivey reviewed Jul 3, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Phase 7.2a: Migrate Page Components from styled-components to plain CSS#3054

Phase 7.2a: Migrate Page Components from styled-components to plain CSS#3054
OpenStaxClaude wants to merge 4 commits into
mainfrom
phase-7.2-migrate-page-components

OpenStaxClaude commented Jun 30, 2026 •

edited by RoyEJohnson

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as resolved.

Uh oh!

jivey left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

OpenStaxClaude commented Jun 30, 2026 • edited by RoyEJohnson Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Scope

Migration Approach

Key Changes

Component Updates

CSS Implementation

Type Updates

Testing Checklist

Related Jira Ticket

Notes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as resolved.

Uh oh!

jivey left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

OpenStaxClaude commented Jun 30, 2026 •

edited by RoyEJohnson

Loading