Phase 4.3: Study Guides UI Migration (Remaining Components)

[OpenStaxClaude]

Summary

This PR completes the study guides migration by converting the remaining study guides components from styled-components to plain CSS, continuing the work from Phase 4.2 (PR #2936).

Related Jira Ticket

CORE-1830: Phase 4.3: Study Guides UI Migration (Remaining Components)

• https://openstax.atlassian.net/browse/CORE-1830

Components Migrated

1. Filters.tsx ✅

• Migrated StyledColorFilter (min-width styling)
• Migrated RightButtonsWrapper (flexbox layout)
• Created Filters.css with plain CSS classes

2. StudyGuides.tsx ✅

• Migrated nested component styling (HighlightsChapterWrapper, HighlightSection, HighlightWrapper)
• Used CSS descendant selectors with :has() to target styled-components by data-testid
• Bound theme.color.neutral.darkest as CSS variable for print styles
• Preserved mobile breakpoint styles (max-width: 75em)
• Preserved print styles
• Created StudyGuides.css with comprehensive comments

3. StudyGuidesPopUp.tsx ✅

• No migration needed - Only uses shared PopupStyles components
• These will be migrated in a future phase when ALL popup components are migrated together

4. StudyGuidesToasts.tsx ✅

• No migration needed - Just a Redux connector with no styling

Migration Approach

Following the hybrid approach from PLAIN_CSS_MIGRATION_GUIDE.md:

• Theme remains in JavaScript for type safety and dynamic access
• CSS variables bound from theme values when needed
• Plain CSS files imported for side effects
• Descendant selectors used to style nested components

Key Technical Notes

StudyGuides.tsx Nested Styling Challenge

The most complex part of this migration was handling StudyGuides.tsx, which previously used styled-components' component interpolation feature to style imported components:

// Before: styled-components interpolation
export default styled(StudyGuides)`
  ${HighlightsChapterWrapper} {
    // styles...
  }
`

Since the nested components (HighlightsChapterWrapper, HighlightSection, HighlightWrapper) are styled-components that generate dynamic class names, we can't target them by class name. Instead, we use CSS descendant selectors with :has() pseudo-class to target elements by their structure and data-testid attributes:

/* Target: div containing h2[data-testid="chapter-title"] */
.study-guides-wrapper > div:has(h2[data-testid="chapter-title"]) {
  /* styles for HighlightsChapterWrapper */
}

/* Target: h3 elements with data-testid="section-title" */
.study-guides-wrapper h3[data-testid="section-title"] {
  /* styles for HighlightSection */
}

This approach:

• ✅ Works with existing styled-components without modifying shared components
• ✅ Uses stable data-testid attributes already in the DOM
• ✅ Maintains all original styling behavior
• ⚠️ Requires browser support for :has() pseudo-class (all modern browsers)

Testing

Due to Node version incompatibility in the environment, automated tests couldn't be run. Manual verification recommended:

Areas to Test

1. Filters
   • Color filter dropdown min-width (29rem)
   • Print button alignment (right side with auto margin)
2. Study Guides List
   • Mobile chapter title truncation (max-width: 90%, ellipsis)
   • Mobile section padding (padding-left: 2rem)
   • Print styles (no padding, no margins, correct background color)

Test Steps

Follow the Testing Guide from Phase 4.2 (CORE-1704):

1. Navigate to any REX textbook
2. Sign in and create highlights
3. Open "My Highlights & Study Guides"
4. Verify filters layout and functionality
5. Test mobile responsive behavior
6. Test print preview

Success Criteria

• ✅ All study guides component styled-components removed (Filters.tsx, StudyGuides.tsx)
• ⏳ All tests passing (pending environment fix)
• ⏳ No visual regressions (pending manual testing)
• ✅ Mobile responsive behavior maintained (CSS preserved)
• ✅ Print styles preserved (CSS with variable binding)

Notes

• This PR is based on PR Phase 4.2: Study Guides UI Migration to Plain CSS #2936 (Phase 4.2) which is not yet merged
• The shared components (PopupStyles, ToastNotifications) will be migrated in future phases
• CSS comments document the migration approach and selector rationale

🤖 Generated with Claude Code

Co-Authored-By: Claude Sonnet 4.5 noreply@anthropic.com