chore(icons): update to rh icons - #8336
Conversation
WalkthroughReplaced hardcoded Font Awesome Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20-25 minutes Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Preview: https://pf-pr-8336.surge.sh A11y report: https://pf-pr-8336-a11y.surge.sh |
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (1)
src/patternfly/components/MultipleFileUpload/multiple-file-upload-status-progress-icon.hbs (1)
5-5: Consider using an animated spinner for active uploads to match FileUpload patterns.Other file upload components in the codebase (e.g.,
file-upload-file-details.hbs) use an animated spinner partial for in-progress states, while this component uses a staticrh-ui-in-progressicon. The ProgressStepper component also maintains this distinction—IsInProgressAnimateuses{{#> spinner}}whileIsInProgressAltuses the static icon. For an actively uploading file, consider whether an animated spinner would better communicate the in-flight state:♻️ Possible alternative using the spinner partial
- {{pfIcon "rh-ui-in-progress"}} + {{#> spinner spinner--modifier="pf-m-md"}}Uploading{{/spinner}}If the static icon is the intended design direction for this component, this can be disregarded.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/patternfly/components/MultipleFileUpload/multiple-file-upload-status-progress-icon.hbs` at line 5, The template MultipleFileUpload/multiple-file-upload-status-progress-icon.hbs currently renders a static icon via {{pfIcon "rh-ui-in-progress"}} for active uploads; to match other components (e.g., file-upload-file-details.hbs) and the ProgressStepper's IsInProgressAnimate, replace the static icon with the animated spinner partial (use the {{#> spinner}} partial or the same spinner invocation used elsewhere) when the file is actively uploading (mirror the logic from IsInProgressAnimate/IsInProgressAlt if needed), or if the static icon is intentional, add a comment documenting that choice so future reviewers know it was deliberate.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/patternfly/components/DualListSelector/dual-list-selector--actions.hbs`:
- Line 6: The template uses a new icon identifier
"rh-ui-sort-down-large-to-small" via the pfIcon helper which isn't defined in
the icon library and migration is incomplete (old "sort-amount-down" still used
elsewhere); confirm the new icon exists or revert to the existing
"sort-amount-down" identifier, and update all templates consistently (search for
pfIcon usages and replace or add the new identifier). If adding the new icon,
register it in the icon definitions/manifest with the
"rh-ui-sort-down-large-to-small" key and ensure build assets include it; if
reverting, replace the pfIcon call in dual-list-selector--actions.hbs to use
"sort-amount-down" and align other templates (e.g., toolbar-template.hbs) to the
same identifier.
In `@src/patternfly/components/FormControl/form-control-icon.hbs`:
- Line 5: Status and generic icons are using non‑RH names and form-control.hbs
contains redundant hardcoded branches; update form-control-template-status.hbs
to use RH names (rh-ui-check-circle-fill, rh-ui-warning-fill, rh-ui-error-fill)
instead of "check-circle"/"exclamation-triangle"/"exclamation-circle"; verify
and replace generic icons passed via form-control--HasIcon (e.g., "calendar",
"clock", "bell" in FormControl.md) with the proper RH/react‑icons equivalents or
change callers to pass RH names so pfIcon can resolve them; remove the hardcoded
clock/calendar-alt checks and routing in form-control.hbs (the branch that
checks form-control--HasIcon == "clock" or "calendar-alt") so pfIcon is the
single source of truth for rendering icons.
In `@src/patternfly/components/InputGroup/input-group-text.hbs`:
- Around line 16-21: The template currently renders raw "$" and "@" text nodes
inside the input-group text (conditionals input-group-text--HasDollarSignIcon
and input-group-text--HasAtIcon), which will be announced by screen readers; to
preserve the previous decorative behavior wrap those glyphs in an element with
aria-hidden="true" (e.g., replace the bare text inside the input-group__text
output with a span or i element that has aria-hidden="true") so AT ignores them,
or alternatively keep them as bare text only if they are semantically
meaningful; update the branches for input-group-text--HasDollarSignIcon and
input-group-text--HasAtIcon to render an aria-hidden wrapper accordingly.
In `@src/patternfly/components/Label/label-icon--map.hbs`:
- Around line 1-2: Demo call sites are still passing legacy icon names into the
label component (it reads label-icon--value and renders via pfIcon) which
bypasses the component's rh-ui-* fallback mapping; update the demo templates
that call this component (e.g., card-demo--notification-drawer.hbs and
card-template-status.hbs) to replace the legacy names with the rh-ui-*
equivalents: "check-circle" → "rh-ui-check-circle-fill", "info-circle" →
"rh-ui-information-fill", "bell" → "rh-ui-notification-fill",
"exclamation-circle" → "rh-ui-error-fill", "exclamation-triangle" →
"rh-ui-warning-fill"; for "cube" verify whether an rh-ui-* counterpart exists
and if not switch that demo to rely on the component's status-based fallback
mapping instead.
In `@src/patternfly/components/Login/examples/Login.md`:
- Line 142: Remove the accidental literal "test" that follows the helper icon
call in the Login example; locate the template fragment containing the
helper/icon invocation {{pfIcon "rh-ui-error"}} in Login.md and delete the stray
"test" text (and any unintended whitespace) so only the icon helper renders in
the example.
In
`@src/patternfly/components/MultipleFileUpload/multiple-file-upload-title-icon.hbs`:
- Line 5: The title icon call using the pfIcon helper is passing a non-existent
icon name "rh-ui-server-upload-fill" which causes the helper to render a
missing-icon comment; update the pfIcon invocation to use a valid icon from
`@patternfly/react-icons` (e.g., find the correct server/upload icon name or an
existing "rh-ui-*" variant) or replace the string with an available icon name,
and optionally add a safe fallback (e.g., a known icon name) where pfIcon is
called so the title always renders; locate the pfIcon usage in the
MultipleFileUpload title (the pfIcon helper call) and correct the icon
identifier accordingly.
In `@src/patternfly/components/Nav/nav-link-icon.hbs`:
- Around line 5-9: Callers still pass Font Awesome suffixes to the
nav-link--icon parameter but pfIcon expects full Red Hat icon identifiers;
update every use of nav-link--icon (e.g., in the Masthead demo and Navigation
examples) to pass the full RH names that pfIcon will resolve (for example
replace "cube", "folder", "cloud", "code", "home" etc. with their corresponding
rh-... identifiers such as
rh-ui-cube/rh-ui-folder/rh-ui-cloud/rh-ui-code/rh-ui-home as appropriate),
ensuring each template/example that calls {{pfIcon nav-link--icon}} provides the
full icon name so pfIcon can load the correct SVG.
---
Nitpick comments:
In
`@src/patternfly/components/MultipleFileUpload/multiple-file-upload-status-progress-icon.hbs`:
- Line 5: The template
MultipleFileUpload/multiple-file-upload-status-progress-icon.hbs currently
renders a static icon via {{pfIcon "rh-ui-in-progress"}} for active uploads; to
match other components (e.g., file-upload-file-details.hbs) and the
ProgressStepper's IsInProgressAnimate, replace the static icon with the animated
spinner partial (use the {{#> spinner}} partial or the same spinner invocation
used elsewhere) when the file is actively uploading (mirror the logic from
IsInProgressAnimate/IsInProgressAlt if needed), or if the static icon is
intentional, add a comment documenting that choice so future reviewers know it
was deliberate.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: 29d26706-289a-4aa8-8291-6735481572d2
📒 Files selected for processing (35)
src/patternfly/components/Badge/badge-icon.hbssrc/patternfly/components/CodeEditor/code-editor-template-no-actions.hbssrc/patternfly/components/CodeEditor/examples/CodeEditor.mdsrc/patternfly/components/DataList/data-list-item-draggable-icon.hbssrc/patternfly/components/DataList/examples/DataList.mdsrc/patternfly/components/DescriptionList/description-list__example-with-icons.hbssrc/patternfly/components/DualListSelector/dual-list-selector--actions.hbssrc/patternfly/components/EmptyState/empty-state-icon.hbssrc/patternfly/components/FormControl/form-control-icon.hbssrc/patternfly/components/FormControl/form-control-select.hbssrc/patternfly/components/HelperText/helper-text-item-icon.hbssrc/patternfly/components/Icon/examples/Icon.mdsrc/patternfly/components/InputGroup/input-group-text.hbssrc/patternfly/components/Label/label-icon--map.hbssrc/patternfly/components/Label/label-icon.hbssrc/patternfly/components/List/examples/List.mdsrc/patternfly/components/Login/examples/Login.mdsrc/patternfly/components/Menu/examples/Menu.mdsrc/patternfly/components/Menu/menu-item-action-icon.hbssrc/patternfly/components/Menu/menu-list-item.hbssrc/patternfly/components/Menu/templates/menu-breadcrumbs--dropdown.hbssrc/patternfly/components/MultipleFileUpload/multiple-file-upload-status-item-icon.hbssrc/patternfly/components/MultipleFileUpload/multiple-file-upload-status-progress-icon.hbssrc/patternfly/components/MultipleFileUpload/multiple-file-upload-title-icon.hbssrc/patternfly/components/Nav/nav-link-icon.hbssrc/patternfly/components/NumberInput/number-input-icon.hbssrc/patternfly/components/ProgressStepper/progress-stepper-step-icon.hbssrc/patternfly/components/Switch/switch-toggle-icon.hbssrc/patternfly/components/Table/Tree-table/table-tr--tree.hbssrc/patternfly/components/Table/examples/Table.mdsrc/patternfly/components/TextInputGroup/text-input-group-icon.hbssrc/patternfly/components/TreeView/tree-view-node-icon.hbssrc/patternfly/components/Wizard/wizard-nav-link-status-icon.hbssrc/patternfly/components/Wizard/wizard-toggle-icon.hbssrc/patternfly/components/Wizard/wizard-toggle-status-icon.hbs
|
I added @bekah-stephens as a reviewer - of all the PF designers, she's been the closest to the process and can probably handle this fairly quickly. |
bekah-stephens
left a comment
There was a problem hiding this comment.
left several comments about icons I noticed still needed to be updated, but if they're being addressed in a separate PR, just disregard!
3259afd to
329da2a
Compare
bekah-stephens
left a comment
There was a problem hiding this comment.
noticed a few things left to update!
|
@bekah-stephens or anyone else, would you like to see a visual regression report that would show the before/after for all of these icon updates? Or is that not necessary? |
it could help in case I missed anything! |
|
@bekah-stephens here's the report. If the PDF is hard to read, you can open the full report and see full size images in your browser.
|
|
🎉 This PR is included in version 6.6.0-prerelease.28 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Closes #8127
Updates/aligns component examples and partials with Red Hat ui icons.
Summary by CodeRabbit