Phase 7.4b: Migrate Remaining Consumers & Remove Final .legacy Files

[OpenStaxClaude]

Summary

This PR builds on #3113 (Phase 7.4a) by migrating the remaining styled-components consumers and removing the final .legacy.ts files from the codebase.

Base branch: phase-7.4a-remove-legacy-files (PR #3113)
Related Jira ticket: CORE-2285

Background

PR #3113 removed most .legacy files but kept 2 files (Typography.legacy.ts and disablePrint.legacy.ts) because several components were still importing from them. This PR completes the migration by:

1. Migrating the remaining consumers to plain CSS
2. Removing the final .legacy files

Changes

Migrated Components (6 files)

PopUp Filter Components

All filter components were using textStyle (a styled-components css fragment that set color: ${theme.color.text.default}) and/or disablePrint (css fragment for @media print { display: none; }).

• ChapterFilter.tsx

  • Removed textStyle import
  • Replaced ${textStyle} with direct color: ${theme.color.text.default}
  • Updated 2 styled components

• ColorFilter.tsx

  • Removed textStyle import
  • Replaced ${textStyle} with direct color styling
  • Updated 1 styled component

• Filters.tsx

  • Removed textStyle and disablePrint imports
  • Replaced ${textStyle} with direct color
  • Replaced ${disablePrint} with inline @media print { display: none; }
  • Updated 2 usages

• FiltersList.tsx

  • Removed textStyle and disablePrint imports
  • Replaced both with direct CSS
  • Updated 3 styled components

Deleted Files (2 files)

• Removed src/app/components/Typography/Typography.legacy.ts

  • Contained only the textStyle css fragment
  • All consumers migrated

• Removed src/app/content/components/utils/disablePrint.legacy.ts

  • Contained only the disablePrint css fragment
  • All consumers migrated

Updated Module Exports (2 files)

• Typography/index.ts

  • Removed textStyle re-export
  • Module now only exports plain CSS components and constants

• disablePrint.ts

  • Removed disablePrint re-export
  • Module now only exports disablePrintClass constant

Code Statistics

• Files deleted: 2 (.legacy files)
• Files modified: 6 (consumer migrations)
• Net lines removed: ~58 lines

Verification

• ✅ Zero .legacy.ts files remain in codebase
• ✅ All textStyle usages replaced with direct color styling
• ✅ All disablePrint usages replaced with inline CSS
• ⏳ CI will verify TypeScript compilation passes
• ⏳ CI will run full test suite (unit, browser, screenshot tests)

Merge Order

This PR must be merged after #3113 since it's based on the phase-7.4a-remove-legacy-files branch.

🤖 Generated with Claude Code

[RoyEJohnson]

Can you migrate popUp/FiltersList.tsx away from using styled-components?

[RoyEJohnson]

Can you migrate popUp/FiltersList.tsx off of styled-components?

[OpenStaxClaude]

I've migrated FiltersList.tsx away from styled-components to plain CSS, addressing the code review feedback.

Changes Made

New File

• FiltersList.css - Contains all component styles that were previously in styled-components

Modified File

• FiltersList.tsx - Migrated from styled-components to plain CSS classes

Migration Details

All styled-components have been replaced with plain React components using CSS classes:

• StyledPlainButton → .filters-list-close-button
• ItemLabel → .filters-list-item-label
• FilterListItem → .filters-list-item
• StatusDiv → .filters-list-status
• FiltersList → .filters-list

The component now uses the same pattern as other migrated components in the codebase:

• Plain React functional components with CSS classes
• Empty styled() wrappers for backward compatibility with component selectors in Filters.tsx
• All styles defined in separate .css file

Removed Imports

• css from styled-components (no longer needed)
• theme (colors are now hardcoded in CSS)
• hiddenButAccessible (CSS directly in .filters-list-status class)

CI will verify TypeScript compilation and all tests pass.

🤖 Generated with Claude Code

[Copilot]

Pull request overview

This PR completes the Phase 7.4b migration by removing the last styled-components “legacy” CSS-fragment exports (textStyle, disablePrint) and updating remaining popup filter consumers to use plain CSS (including adding a dedicated FiltersList.css).

Changes:

• Migrates FiltersList styling from styled-components fragments to a plain CSS file and class-based styling.
• Removes deprecated legacy exports and deletes the final .legacy.ts files (Typography.legacy.ts, disablePrint.legacy.ts).
• Updates Jest snapshots across multiple popup/filter consumers to reflect new class names and generated styled-component identifiers.

Reviewed changes

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

Show a summary per file

File	Description
src/app/content/studyGuides/components/snapshots/Filters.spec.tsx.snap	Snapshot updates reflecting new FiltersList markup/classes and CSS output.
src/app/content/practiceQuestions/components/snapshots/PracticeQuestionsPopup.spec.tsx.snap	Snapshot updates for updated print selector / styled-components identifiers.
src/app/content/practiceQuestions/components/snapshots/Filters.spec.tsx.snap	Snapshot updates for updated print selector / styled-components identifiers.
src/app/content/highlights/components/SummaryPopup/snapshots/Filters.spec.tsx.snap	Snapshot updates reflecting new FiltersList markup/classes and CSS output.
src/app/content/components/utils/disablePrint.ts	Removes deprecated re-export; leaves only disablePrintClass.
src/app/content/components/utils/disablePrint.legacy.ts	Deletes legacy styled-components disablePrint fragment.
src/app/content/components/Topbar/snapshots/index.spec.tsx.snap	Snapshot updates due to CSS output changes.
src/app/content/components/popUp/FiltersList.tsx	Refactors FiltersList to plain React + class-based styling, keeping a styled wrapper for selector compatibility.
src/app/content/components/popUp/FiltersList.css	New CSS stylesheet for FiltersList classes (close button, labels, container, etc.).
src/app/content/components/popUp/Filters.tsx	Replaces textStyle and disablePrint fragment usage with direct color and inline print media CSS.
src/app/content/components/popUp/ColorFilter.tsx	Replaces textStyle usage with direct color styling.
src/app/content/components/popUp/ChapterFilter.tsx	Replaces textStyle usage with direct color styling.
src/app/content/components/popUp/snapshots/Filters.spec.tsx.snap	Snapshot updates reflecting new FiltersList markup/classes and CSS output.
src/app/content/components/snapshots/AssignedTopBar.spec.tsx.snap	Snapshot updates due to CSS output changes.
src/app/content/snapshots/routes.spec.tsx.snap	Snapshot updates due to CSS output changes.
src/app/components/Typography/Typography.legacy.ts	Deletes legacy styled-components textStyle fragment.
src/app/components/Typography/index.ts	Removes legacy textStyle re-export and related guidance.

---

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

[Copilot]

Pull request overview

Copilot reviewed 17 out of 17 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

src/app/content/components/popUp/FiltersList.tsx:160

• FiltersListBase always prepends the filters-list class, but at least one consumer already passes className="filters-list" (e.g. studyGuides/components/Filters.tsx), which results in duplicated class tokens like "filters-list … filters-list" in the DOM/snapshots. This is harmless but noisy and can complicate class-based selectors.

    <ul
      className={classNames('filters-list', className)}
      aria-live='polite'
      aria-atomic='true'