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:47Run 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>
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>
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
deleted the
denys/fa-v4-to-v7-codemod-output
branch
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, 2026The 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, 2026These 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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters