fix(progress): apply unified theme and icons by srambach · Pull Request #8241 · patternfly/patternfly

srambach · 2026-03-24T20:02:35Z

Swaps icons to the RH set and adds pill border to the entire bar and the indicator.

Summary by CodeRabbit

Style
- Updated Progress component status icons for improved visual consistency.
- Increased progress bar and indicator border radius for a more rounded appearance.

coderabbitai · 2026-03-24T20:03:03Z

Walkthrough

This PR updates the Progress component's icon rendering and styling: it replaces raw Font Awesome <i> elements with the pfIcon helper function, switches status icon types to use rh-ui-branded variants, and updates border-radius tokens from medium to pill styling.

Changes

Cohort / File(s)	Summary
Icon Rendering `src/patternfly/components/Progress/progress-status-icon.hbs`	Replaced raw Font Awesome `<i>` element with `{{pfIcon progress-status-icon--type}}` helper function while preserving conditional structure.
Status Icon Types `src/patternfly/components/Progress/progress-status.hbs`	Updated progress status icon type values: `check-circle` → `rh-ui-check-circle-fill`, `exclamation-triangle` → `rh-ui-warning-fill`, `exclamation-circle` → `rh-ui-error-fill`.
Border Radius Tokens `src/patternfly/components/Progress/progress.scss`	Changed `--pf-c-progress__bar--BorderRadius` from medium to pill radius; added new `--progress__indicator--BorderRadius` variable set to pill radius and applied to indicator element.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related issues

Updates Progress component icon types to rh-ui-* prefixed variants, directly implementing the token and brand icon updates requested in issue #8188.

Possibly related PRs

fix(Alert): updated icons for unified theme #8170: Both PRs replace raw Font Awesome <i> elements with the {{pfIcon}} helper and switch to rh-ui-* prefixed icon names in templates.
chore: add helper for react-icons #8147: This PR's template changes depend on the pfIcon helper functionality added in that PR.
fix(icons): updated status icons to rh-ui #8179: Both PRs perform identical code-level changes, replacing raw <i> markup with the pfIcon helper and adopting rh-ui-* icon names across component templates.

Suggested labels

Needs design review

Suggested reviewers

kmcfaul
mcoker
lboehling

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title follows conventional commit format with 'fix' type prefix and clearly describes the main changes: applying unified theme and icons to the progress component.
Linked Issues check	✅ Passed	All coding objectives from linked issue `#8188` are met: Red Hat icons implemented, pill border-radius applied to progress bar and indicator, and unified theme tokens applied.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to the progress component and align with the linked issue objectives; no unrelated modifications detected.

_{✏️ 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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

patternfly-build · 2026-03-24T20:05:40Z

Preview: https://pf-pr-8241.surge.sh

A11y report: https://pf-pr-8241-a11y.surge.sh

coderabbitai

🧹 Nitpick comments (1)

src/patternfly/components/Progress/progress.scss (1)

226-226: Keep forced-colors border-radius tied to the indicator token.

Line 226 introduces a dedicated indicator radius token, but forced-colors ::before still reads the bar radius (Line 234). Using the indicator token there too avoids future drift if tokens diverge.

♻️ Suggested follow-up

 .#{$progress}__indicator {
   // for forced colors mode
   &::before {
     position: absolute;
     inset: 0;
     content: "";
     border: var(--#{$progress}__indicator--BorderWidth) solid var(--#{$progress}__indicator--BorderColor);
-    border-radius: var(--#{$progress}__bar--BorderRadius);
+    border-radius: var(--#{$progress}__indicator--BorderRadius);
   }
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/patternfly/components/Progress/progress.scss` at line 226, The
forced-colors pseudo-element is still using the bar radius token instead of the
new indicator radius token, which can cause token drift; update the
forced-colors ::before rule to reference the same CSS custom property used for
the indicator (var(--#{$progress}__indicator--BorderRadius)) so both the
indicator and its forced-colors styling use the identical radius token (look for
the ::before selector in the Progress stylesheet and replace the bar-radius
token with the indicator token).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/patternfly/components/Progress/progress.scss`:
- Line 226: The forced-colors pseudo-element is still using the bar radius token
instead of the new indicator radius token, which can cause token drift; update
the forced-colors ::before rule to reference the same CSS custom property used
for the indicator (var(--#{$progress}__indicator--BorderRadius)) so both the
indicator and its forced-colors styling use the identical radius token (look for
the ::before selector in the Progress stylesheet and replace the bar-radius
token with the indicator token).

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 5f9ec6f6-678f-44fe-ba92-d71142e7a725

📥 Commits

Reviewing files that changed from the base of the PR and between 1bd71e2 and 93cb834.

📒 Files selected for processing (3)

src/patternfly/components/Progress/progress-status-icon.hbs
src/patternfly/components/Progress/progress-status.hbs
src/patternfly/components/Progress/progress.scss

mcoker

SUPER

patternfly-build · 2026-03-25T19:56:53Z

🎉 This PR is included in version 6.5.0-prerelease.59 🎉

The release is available on:

Your semantic-release bot 📦🚀

fix(progress): apply unified theme and icons

93cb834

coderabbitai bot reviewed Mar 24, 2026

View reviewed changes

srambach requested review from bekah-stephens, jcmill and mcoker March 24, 2026 21:00

bekah-stephens approved these changes Mar 25, 2026

View reviewed changes

mcoker approved these changes Mar 25, 2026

View reviewed changes

mcoker merged commit 606acd6 into patternfly:main Mar 25, 2026
5 checks passed

patternfly-build added the released on @prerelease label Mar 25, 2026

This was referenced Mar 27, 2026

Evaluate work needed for Core a11y tool bump violations #8258

Open

Update status icons to RH brand icons [core docs] #8127

Open

Drawer splitter - Update drag handle design on resizable drawer #8126

Closed

fix(breadcrumbs): update tokens and icons #8259

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(progress): apply unified theme and icons#8241

fix(progress): apply unified theme and icons#8241
mcoker merged 1 commit intopatternfly:mainfrom
srambach:3644-unified-progress

srambach commented Mar 24, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Mar 24, 2026 •

edited

Loading

Uh oh!

patternfly-build commented Mar 24, 2026 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

mcoker left a comment

Uh oh!

Uh oh!

patternfly-build commented Mar 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

srambach commented Mar 24, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related issues

Possibly related PRs

Suggested labels

Suggested reviewers

Uh oh!

patternfly-build commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Mar 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

srambach commented Mar 24, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 24, 2026 •

edited

Loading

patternfly-build commented Mar 24, 2026 •

edited

Loading