Skip to content

feat(tabs): update to unified design icons and tokens#8216

Merged
mcoker merged 7 commits intopatternfly:mainfrom
srambach:3134-unified-tabs
Mar 26, 2026
Merged

feat(tabs): update to unified design icons and tokens#8216
mcoker merged 7 commits intopatternfly:mainfrom
srambach:3134-unified-tabs

Conversation

@srambach
Copy link
Copy Markdown
Member

@srambach srambach commented Mar 12, 2026 •
edited by coderabbitai bot
Loading

Fixes #8015

I picked a lot of tokens to replace ones that weren't exactly mapped into the UI tokens.
I did not change the overflow buttons - they are regular plain buttons per design.

Figma

Summary by CodeRabbit

  • Style
    • Updated tab icons to the new rh-ui design-system icons everywhere, including help/action icons.
    • Refined tab backgrounds, current-item visuals, after-border rendering, and box current-item border behavior for a more consistent appearance.
    • Adjusted disabled tab colors, link border-radius, and vertical box border handling for clearer, more accessible states.
    • Removed legacy expandable-toggle layout tweaks for cleaner tab layouts.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Mar 12, 2026 •
edited
Loading

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro

Run ID: 741034e7-2957-4f65-9c7a-b4b8c35ce6d8

📥 Commits

Reviewing files that changed from the base of the PR and between febf3f8 and 297fd87.

📒 Files selected for processing (1)
  • src/patternfly/components/Tabs/tabs.scss

Walkthrough

Replaced Font Awesome icon literals with rh-ui-* identifiers and switched icon rendering to the pfIcon helper in Tabs templates; updated tabs SCSS tokens for backgrounds, disabled colors, border-radius, and current-item border styling. No API or exported entity changes.

Changes

Cohort / File(s) Summary
Icon migration — primary/secondary lists
src/patternfly/components/Tabs/__tabs-list.hbs, src/patternfly/components/Tabs/__tabs-list-secondary.hbs		 Replaced icon-name strings from Font Awesome identifiers to rh-ui-* variants across tab items and conditional branches.
Icon rendering helper
src/patternfly/components/Tabs/tabs-item-action.hbs, src/patternfly/components/Tabs/tabs-item-icon.hbs		 Replaced inline <i> icon markup with {{pfIcon ...}} helper calls (e.g., rh-ui-question-mark-circle) for item icons and help/action icons.
Styling / tokens
src/patternfly/components/Tabs/tabs.scss		 Adjusted box current/secondary backgrounds to transparent, updated disabled link color/background tokens, changed link/box border-radius tokens, added after-border-radius tokens, updated current-state border color sourcing, and removed an expandable toggle rule.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested labels

Needs design review

Suggested reviewers

  • bekah-stephens
  • srambach
🚥 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 title follows conventional commit format with 'feat' type prefix and includes a descriptive summary of the changes.
Linked Issues check ✅ Passed The PR successfully updates Tabs component with unified design tokens and brand icons [#8015], replacing Font Awesome icons with rh-ui prefixed icons and updating SCSS token mappings.
Out of Scope Changes check ✅ Passed All changes are scoped to updating tokens and brand icons in the existing default Tabs component as specified in #8015, with no new Large tab variants created.

✏️ 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
Copy link
Copy Markdown
Collaborator

patternfly-build commented Mar 12, 2026 •
edited
Loading

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

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

@andrew-ronaldson
Copy link
Copy Markdown
Collaborator

andrew-ronaldson commented Mar 15, 2026 •
edited
Loading

Looks good.
One thing I noticed was the boxed tabs example. The Tab container underline runs under the selected tab when it should not.

Current
Screenshot 2026-03-15 at 1 22 51 PM

PR
Screenshot 2026-03-15 at 1 21 41 PM

@srambach
Copy link
Copy Markdown
Member Author

srambach commented Mar 23, 2026

Visual regression test

mcoker
mcoker reviewed Mar 26, 2026
View reviewed changes
@mcoker mcoker merged commit 354e786 into patternfly:main Mar 26, 2026
3 of 4 checks passed
@patternfly-build
Copy link
Copy Markdown
Collaborator

patternfly-build commented Mar 26, 2026

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

The release is available on:

Your semantic-release bot 📦🚀

This was referenced Mar 31, 2026
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mcoker mcoker mcoker left review comments

@bekah-stephens bekah-stephens bekah-stephens approved these changes

Assignees

No one assigned

Labels

released on @prerelease

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Tabs - Unified theme updates (Core)

5 participants

@srambach @patternfly-build @andrew-ronaldson @mcoker @bekah-stephens