chore: migrate FA v4 icon references to v7 by levadadenys · Pull Request #71308 · code-dot-org/code-dot-org

and others added 4 commits

March 12, 2026 11:47
Run fa-v4-to-v7-codemod to replace all v4 icon names and class patterns
with their v7 equivalents. Covers JSX/TSX/JS components, HAML views,
Ruby models, SCSS, locale JSON, and script_json curriculum files.

Also fixes 3 broken FontAwesomeV6Icon usages in LoginTypeSelection.tsx.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Update test assertions to expect v7 icon names (circle-info, xmark,
  circle-exclamation, triangle-exclamation, up-down, trash-can, etc.)
- Update test CSS selectors for renamed icon classes
- Fix 3 source files with dynamic icon patterns the codemod couldn't
  auto-migrate: Notification.jsx icon mapping, ShowCodeToggle.js
  ternary iconClass, SoundListEntry.jsx class prefix

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Update CSS selectors in Cucumber features and step definitions to match
the v7 icon class names after the codemod renamed them:
- .fa-times/.fa-close → .fa-xmark
- .fa-search → .fa-magnifying-glass
- .fa-ellipsis-h → .fa-ellipsis
- .fa-chevron-circle-up → .fa-circle-chevron-up
- .fa-chevron-circle-down → .fa-circle-chevron-down
- .fa-play-circle → .fa-circle-play
- .fa-facebook → .fa-facebook-f

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

@levadadenys @claude

The codemod incorrectly used `style="brands"` and `style="regular"` on the
legacy FontAwesome component. Since `style` is a reserved React prop (expects
an object), passing a string crashed entire component trees, breaking share
dialogs, library UIs, and cascading into 12 UI test failures.

- Add `iconStyle` prop to legacy FontAwesome component for prefix control
- Change `style="brands/regular"` to `iconStyle="brands/regular"` in callers
- Revert incorrect `.fa-facebook-f` test selector (component renders `.fa-facebook`)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…gressions

Bugs fixed:
- clock-o (outline) was mapped to fa-solid fa-clock → now fa-regular fa-clock
  in CodeWorkspace, WebLabView, DataWorkspace, DesignModeHeaders, JavalabEditorHeader
- thumbs-o-up (outline) now uses iconStyle="regular" in ValidationStep.jsx
- manage_assets.feature selector now matches AssetThumbnail source (both use circle-play)

Canonical v7 renames:
- volume-up → volume-high (InlineAudio)
- play-circle → circle-play, pause-circle → circle-pause (AssetThumbnail, SoundListEntry,
  PauseButton, SoundListEntryTest, manage_assets.feature)
- check-circle → circle-check (Notification, DanceAiModal, DanceAiScore, JavalabEditorHeader)
- pencil → pen (LevelToken, LessonToken)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Adding iconStyle to the destructured params without a default value
caused TypeScript to infer it as required, breaking all existing TSX
callers (EditCondition, EditValidation, Loading, SoundsPanel, PanelsView)
that don't pass iconStyle.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The bare 'fa' prefix only works via v4 shims. Defaulting to 'fa-solid'
makes the component v7-native so it will continue working when v4 shims
are eventually removed.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
These callers were not in the original codemod diff but still used v4
icon names that depend on v4-shims to resolve:

- comments-o → comments (regular) in CodeReviewTimelineReview
- files-o → copy (regular) in AddLevelTableRow
- pencil-square-o → pen-to-square in DataDocEditAll
- pencil → pen in FocusAreaIndicator
- " fa-times-circle" → circle-xmark in SectionActionDropdown (also fixed
  malformed icon name with leading space and fa- prefix)
- arrow-circle-left → circle-arrow-left in DataTableView
- cog → gear in MakerStatusOverlay
- exclamation-triangle → triangle-exclamation in MakerStatusOverlay
- play-circle → circle-play in SoundsPanel

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Tests were still using old v4 CSS class selectors after the codemod
migrated icon names in source files:
- MakerStatusOverlayTest: fa-cog→fa-gear, fa-exclamation-triangle→fa-triangle-exclamation
- LessonTokenTest: fa-pencil→fa-pen, fa-arrows-v→fa-up-down, fa-times→fa-xmark
- script_edit_page.feature: fa-pencil→fa-pen (caused UI test timeout)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
These 7 dynamic/conditional icon usages were skipped by the automated
codemod because they use ternaries or variable lookups. Each has been
manually updated to use v7 icon names and styles:

- BackgroundMusicMuteButton: volume-off → volume-xmark, fa → fa-solid prefix
- LessonGroup: info-circle → circle-info
- ReferenceGuideEditAll: pencil-square-o → pen-to-square (regular)
- ProgressLegend: file-text → file-lines, video-camera → video
- LessonTip: lightbulb-o → lightbulb (regular)
- PreviewPaneHeader: arrows-alt → up-down-left-right (commented code)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The FontAwesomeV6Icon 'close' alias no longer resolves to 'xmark' in
v7. This caused the UI test selector '.fa-xmark' to fail because the
rendered class was 'fa-close'. Update both usages to use the canonical
v7 name 'xmark'.

Fixes failing Cucumber test: ai_evaluate_student_code.feature

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
These were flagged as dynamic icon usages by the codemod (ternaries,
variable lookups) and need manual migration. The UI test selectors
were already updated to v7 names but the source code still used v4
names, causing the tests to fail.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

@levadadenys

The codemod skipped this dynamic ternary usage. The icon names were
already updated to v7 (circle-play/circle-pause) but the class prefix
was still the v4 'fa' instead of 'fa-solid'.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

@levadadenys @claude

The test was still using .fa-chevron-circle-down/up (v4) while the
source was updated to circle-chevron-down/up (v7).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

lfryemason

@lfryemason lfryemason deleted the denys/fa-v4-to-v7-codemod-output branch

March 16, 2026 22:30

lfryemason added a commit that referenced this pull request

Mar 17, 2026

lfryemason added a commit that referenced this pull request

Mar 17, 2026

levadadenys added a commit that referenced this pull request

Mar 17, 2026

levadadenys added a commit that referenced this pull request

Mar 17, 2026

lfryemason added a commit that referenced this pull request

Mar 18, 2026
* Revert "chore: migrate FA v4 icon references to v7 (#71308)"

This reverts commit 956c0f7.

* Reapply "chore: migrate FA v4 icon references to v7 (#71308)"

This reverts commit 7262161.

* fix: update icon references in SendLesson and ItemType components

* feat: migrate Comment component to use FontAwesomeV6Icon

* fix: update icon references in ValidationStep and AssetRowTest for FontAwesome v7

* fix: update icon references in BooleanPropertyRow, submissions_download_form, ControlButtons, HelpTip, and ModalHelpTip for FontAwesome v7

* fix: update icon references from question-circle to circle-question for FontAwesome v7

* fix: update icon references in _single_multi.html.haml for FontAwesome v7

* fix: update BooleanPropertyRow to use FontAwesomeV6Icon for checkbox rendering

* fix: update icon references in LessonProgress.story.jsx for FontAwesome v7

* Revert "Revert "chore: migrate FA v4 icon references to v7 (#71308)" (#71395)"

This reverts commit 316fd74

* fix: update Facebook and Twitter icon styles for FontAwesome v7

* fix: update WireframeButtons and DataDocEditAll to use FontAwesomeV6Icon

* fix: update BubbleBadge to use regular FontAwesome icon style

* fix: update icon usage in UnassignedStudentsPanel and SendLesson for FontAwesome v7

* fix: update Twitter share button label to reflect rebranding to X

* fix: remove bold font weight from header styles

* fix: remove bold font weight from header styles

* fix: update JsDebugger to wrap icon in a div and adjust SCSS for FontAwesome usage

* revert locales updates

* fix unit tests

* fix: add iconStyleProp to Button component for consistent icon styling

* fix: update icon class for toggle button in ec_design.js

---------

Co-authored-by: Liam Frye-Mason <liam.fryemason@code.org>

etaderhold pushed a commit that referenced this pull request

Mar 24, 2026
* Revert "chore: migrate FA v4 icon references to v7 (#71308)"

This reverts commit 956c0f7.

* Reapply "chore: migrate FA v4 icon references to v7 (#71308)"

This reverts commit 7262161.

* fix: update icon references in SendLesson and ItemType components

* feat: migrate Comment component to use FontAwesomeV6Icon

* fix: update icon references in ValidationStep and AssetRowTest for FontAwesome v7

* fix: update icon references in BooleanPropertyRow, submissions_download_form, ControlButtons, HelpTip, and ModalHelpTip for FontAwesome v7

* fix: update icon references from question-circle to circle-question for FontAwesome v7

* fix: update icon references in _single_multi.html.haml for FontAwesome v7

* fix: update BooleanPropertyRow to use FontAwesomeV6Icon for checkbox rendering

* fix: update icon references in LessonProgress.story.jsx for FontAwesome v7

* Revert "Revert "chore: migrate FA v4 icon references to v7 (#71308)" (#71395)"

This reverts commit 316fd74

* fix: update Facebook and Twitter icon styles for FontAwesome v7

* fix: update WireframeButtons and DataDocEditAll to use FontAwesomeV6Icon

* fix: update BubbleBadge to use regular FontAwesome icon style

* fix: update icon usage in UnassignedStudentsPanel and SendLesson for FontAwesome v7

* fix: update Twitter share button label to reflect rebranding to X

* fix: remove bold font weight from header styles

* fix: remove bold font weight from header styles

* fix: update JsDebugger to wrap icon in a div and adjust SCSS for FontAwesome usage

* revert locales updates

* fix unit tests

* fix: add iconStyleProp to Button component for consistent icon styling

* fix: update icon class for toggle button in ec_design.js

---------

Co-authored-by: Liam Frye-Mason <liam.fryemason@code.org>

levadadenys added a commit that referenced this pull request

Mar 25, 2026
The original FA v4→v7 migration (#71308) went through several
revert cycles (#71395, #71402, #71469). PR #71572 intended to
reapply the full migration with fixes but only included 6 files.
This PR applies the remaining ~200 file changes from the codemod.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

levadadenys added a commit that referenced this pull request

Mar 25, 2026
These 16 files were never touched by the original codemod (#71308)
but still had v4 icon names:

- file-text → file-lines (3 files)
- exclamation-triangle → triangle-exclamation (3 files)
- info-circle → circle-info (1 file)
- plus-circle → circle-plus (2 files)
- times-circle → circle-xmark (1 file)
- cog → gear (1 file)
- sign-out → right-from-bracket (1 file)
- fast-backward → backward-fast (1 file)
- pencil → pen (2 files)
- thumbs-o-up → thumbs-up (regular) (1 file)
- thumbs-o-down → thumbs-down (regular) (1 file)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>