feat(nav): unified theme updates by wise-king-sullyman · Pull Request #8193 · patternfly/patternfly

wise-king-sullyman · 2026-03-02T19:24:48Z

Closes #8014
Closes #8130

Summary by CodeRabbit

Style
- Updated navigation visuals: replaced hard-coded caret icons with the new icon rendering, adjusted accent color for nav items, changed toggle rotation behavior for expanded items, and refined link border radius for a more consistent, polished appearance.

coderabbitai · 2026-03-02T19:25:27Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

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

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8b5cadb and dbedd7a.

📒 Files selected for processing (2)

src/patternfly/components/Nav/nav-toggle-icon.hbs
src/patternfly/components/Nav/nav.scss

Walkthrough

Replaces hard-coded FontAwesome elements with pfIcon helper calls for nav toggle icons and updates three Nav design tokens: accent color, toggle-icon rotation, and link border-radius.

Changes

Cohort / File(s) Summary

Icon template
src/patternfly/components/Nav/nav-toggle-icon.hbs Replace hard-coded <i> icons with pfIcon helper: use rh-microns-caret-left when nav-item--IsDrillup is true, otherwise rh-microns-caret-down.

Design tokens / styles
src/patternfly/components/Nav/nav.scss Update CSS custom properties: --nav__item--accent--color -> var(--pf-t--global--color--brand--accent--default); --nav__item--m-expanded__toggle-icon--Rotate -> -180deg; --nav__link--BorderRadius -> var(--pf-t--global--border--radius--action--plain--default).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related issues

Left navigation - Unified theming updates (Core) #8014: Left navigation unified theming — introduces the same border-radius, accent color, and caret/icon behavior changes described in this PR.
Docked nav: unified theme tokens #8130: Docked nav unified theme tokens — aligns with token updates (border-radius and color) applied to Nav here.
Menu Toggle: update tokens and icons #8139: Matches scope of replacing menu-toggle icons and updating related tokens; directly overlaps this change set.

Possibly related PRs

chore: add helper for react-icons #8147: Adds the pfIcon helper relied upon by the nav-toggle-icon template changes.

Suggested labels

released on @prerelease``

Suggested reviewers

andrew-ronaldson
mcoker
lboehling
kmcfaul

🚥 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 'feat' type and 'nav' scope, and accurately describes unified theme updates to navigation components.
Linked Issues check	✅ Passed	All code changes directly implement requirements from linked issues `#8014` and `#8130`: accent color updates, border-radius changes, icon replacements, and toggle rotation modifications.
Out of Scope Changes check	✅ Passed	All changes are within scope; modifications address only the navigation component styling and icon rendering specified in linked issues without introducing unrelated updates.

_{✏️ 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-02T19:28:19Z

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

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

coderabbitai

Actionable comments posted: 1

🤖 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/Nav/nav.scss`:
- Line 56: The expanded-state rotation is inverted: swap the rotation values
between the base toggle icon variable and the expanded modifier so the
down-caret baseline becomes the collapsed state and expanded points down. Update
--#{$nav}__item__toggle-icon--Rotate (base) to 180deg and set
--#{$nav}__item--m-expanded__toggle-icon--Rotate to 0deg (i.e., swap the two
values) so collapsed/expanded caret directions are correct.

ℹ️ Review info

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

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 66c6d91 and 8b5cadb.

📒 Files selected for processing (2)

src/patternfly/components/Nav/nav-toggle-icon.hbs
src/patternfly/components/Nav/nav.scss

coderabbitai · 2026-03-02T19:30:30Z

  // * Nav item toggle icon
  --#{$nav}__item__toggle-icon--Rotate: 0;
-  --#{$nav}__item--m-expanded__toggle-icon--Rotate: 90deg;
+  --#{$nav}__item--m-expanded__toggle-icon--Rotate: 180deg;


⚠️ Potential issue | 🟠 Major

Expanded rotation currently inverts the intended collapsed/expanded caret states.

With the current down-caret baseline, 180deg on expanded makes expanded point up. That flips the requirement (“collapsed up, expanded rotated 180°”). Swap base and expanded rotation values.

🔧 Proposed fix

- --#{$nav}__item__toggle-icon--Rotate: 0; - --#{$nav}__item--m-expanded__toggle-icon--Rotate: 180deg; + --#{$nav}__item__toggle-icon--Rotate: 180deg; + --#{$nav}__item--m-expanded__toggle-icon--Rotate: 0deg;

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed. In `@src/patternfly/components/Nav/nav.scss` at line 56, The expanded-state rotation is inverted: swap the rotation values between the base toggle icon variable and the expanded modifier so the down-caret baseline becomes the collapsed state and expanded points down. Update --#{$nav}__item__toggle-icon--Rotate (base) to 180deg and set --#{$nav}__item--m-expanded__toggle-icon--Rotate to 0deg (i.e., swap the two values) so collapsed/expanded caret directions are correct.

Looks like there's a conflict here between what was in the issue and what is in the figma, I've reached out to design for clarity.

@wise-king-sullyman, that makes sense! It's good to clarify with the design team to ensure the implementation matches the intended behavior. Once you receive confirmation on the expected direction (whether collapsed should point up or down), I'm happy to help verify that the rotation values align correctly with the icon choice and design spec. Let me know if you need any assistance when you have the clarification! 🐰

🧠 Learnings used

Learnt from: srambach Repo: patternfly/patternfly PR: 8030 File: src/patternfly/components/TreeView/tree-view.scss:441-445 Timestamp: 2025-12-17T15:25:08.994Z Learning: In PatternFly TreeView component (src/patternfly/components/TreeView/tree-view.scss), the `.pf-m-disabled` modifier on list items affects only the visual appearance of node content (text and icons), but intentionally does not change the toggle button color. The toggle remains functional and visually distinct to indicate the item can still be expanded/collapsed.

Per @andrew-ronaldson closed should point down; expanded should point up

Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!

patternfly-build · 2026-03-04T20:26:15Z

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

The release is available on:

Your semantic-release bot 📦🚀

feat(nav): unified theme updates

8b5cadb

coderabbitai Bot requested review from andrew-ronaldson, lboehling and mcoker March 2, 2026 19:25

coderabbitai Bot reviewed Mar 2, 2026

View reviewed changes

Merge branch 'main' into left-nav-unified-token-updates

9db55dc

mcoker mentioned this pull request Mar 2, 2026

fix: Updated to use unified theme token changes for dock navigation. #8192

Closed

Update to use microns and rotate the other way

dbedd7a

coderabbitai Bot requested a review from kmcfaul March 2, 2026 21:59

andrew-ronaldson approved these changes Mar 4, 2026

View reviewed changes

Merge branch 'main' into left-nav-unified-token-updates

96341e1

thatblindgeye approved these changes Mar 4, 2026

View reviewed changes

mcoker approved these changes Mar 4, 2026

View reviewed changes

mcoker merged commit d78a711 into patternfly:main Mar 4, 2026
5 checks passed

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

This was referenced Mar 4, 2026

Menu Update favorite icon & buttons #8201

Open

feat(Wizard): added plain styling #8215

Merged

coderabbitai Bot mentioned this pull request Apr 10, 2026

AgentReady: patternfly (core) — assess + low-hanging fruit #8296

Closed

This was referenced Apr 20, 2026

Button/menu-toggle - remove scale, change icon size #8322

Open

Bug - button/menu-toggle - update icon width for docked nav #8333

Closed

fix(docked-nav): misc followup fixes #8335

Merged

Tree view disabled items follow up #8053

Open

coderabbitai Bot mentioned this pull request Apr 29, 2026

Update "redhat" theme to "project felt" #8346

Closed

This was referenced May 13, 2026

Bug - Panel and docked nav borders #8399

Closed

Horizontal nav - Add accent mark to selected states #8406

Open

File upload - Update onDrag state #8411

Open

coderabbitai Bot mentioned this pull request May 21, 2026

Bug - Create component vars for banded masthead #8429

Open

coderabbitai Bot mentioned this pull request Jun 17, 2026

fix(dual list, pagination, toolbar): caret icon updates #8457

Merged

coderabbitai Bot mentioned this pull request Jun 29, 2026

Docked nav: Add expandable nav items to Docked nav #8478

Closed

This was referenced Jul 22, 2026

The automated release is failing 🚨 #8519

Closed

The automated release is failing 🚨 #8533

Closed

Navigation Menu

feat(nav): unified theme updates - #8193

feat(nav): unified theme updates#8193
mcoker merged 4 commits into
patternfly:mainfrom
wise-king-sullyman:left-nav-unified-token-updates

wise-king-sullyman commented Mar 2, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Mar 2, 2026 •

edited

Loading

Changes

Estimated code review effort

Uh oh!

patternfly-build commented Mar 2, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot Mar 2, 2026 •

edited

Loading

Uh oh!

wise-king-sullyman Mar 2, 2026

Uh oh!

coderabbitai Bot Mar 2, 2026

Uh oh!

wise-king-sullyman Mar 2, 2026

Uh oh!

coderabbitai Bot Mar 2, 2026

Uh oh!

Uh oh!

patternfly-build commented Mar 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

wise-king-sullyman commented Mar 2, 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 2, 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 2, 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!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wise-king-sullyman Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

wise-king-sullyman Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Mar 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

wise-king-sullyman commented Mar 2, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Mar 2, 2026 •

edited

Loading

patternfly-build commented Mar 2, 2026 •

edited

Loading

coderabbitai Bot Mar 2, 2026 •

edited

Loading