Skip to content

chore(demos): update various react demos - #12586

Open
andrew-ronaldson wants to merge 5 commits into
patternfly:mainfrom
andrew-ronaldson:table-labels
Open

chore(demos): update various react demos#12586
andrew-ronaldson wants to merge 5 commits into
patternfly:mainfrom
andrew-ronaldson:table-labels

Conversation

@andrew-ronaldson

@andrew-ronaldson andrew-ronaldson commented Jul 23, 2026

Copy link
Copy Markdown
Collaborator

Closes #12528 AND patternfly/patternfly-design#1683

  • Updates table demos to use status labels instead of nonstatus ones.
  • Notification badge using the plain variant in masthead and navigation demos.

Summary by CodeRabbit

Bug Fixes

  • Updated table status labels to use standardized success, warning, info, and danger styling.
  • Improved consistency for “Running,” “Stopped,” “Needs maintenance,” and “Down” statuses across table demos.

Style

  • Updated notification badges in header and navigation demos to use the plain variant for more consistent presentation and semantics.
  • Applied the plain notification style consistently across dashboard, masthead, navigation, alert, and page examples.

@coderabbitai

coderabbitai Bot commented Jul 23, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: c0d10387-f8d8-4ba0-882a-69afef85c7a3

📥 Commits

Reviewing files that changed from the base of the PR and between d91002e and 1e2eb91.

📒 Files selected for processing (6)
  • packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
  • packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
  • packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
  • packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
  • packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
  • packages/react-table/src/demos/DashboardHeader.tsx

Walkthrough

React Table demos now use PatternFly LabelStatus values for status labels. React Core demos now use the plain notification badge variant in dashboard, masthead, navigation, alert group, page, and table examples.

Changes

Table label status migration

Layer / File(s) Summary
Update table status rendering
packages/react-table/src/demos/examples/Table*.tsx
Status mappings now use LabelStatus.success, warning, info, and danger through the Label status prop instead of color strings. Maintenance status text now uses consistent capitalization.

Notification badge variants

Layer / File(s) Summary
Use plain notification badges
packages/react-core/src/demos/DashboardHeader.tsx, packages/react-core/src/demos/examples/Masthead/*, packages/react-core/src/demos/examples/Nav/*, packages/react-core/src/demos/examples/AlertGroup/*, packages/react-core/src/demos/examples/Page/*, packages/react-table/src/demos/DashboardHeader.tsx
Notification badges now use NotificationBadgeVariant.plain instead of read. Existing labels and click handlers remain unchanged.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

Suggested labels: Needs design review

Suggested reviewers: rebeccaalpert

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Out of Scope Changes check ⚠️ Warning The notification badge changes are unrelated to the linked table-label issue [#12528]. Move the notification badge changes to a separate pull request or link an issue that explicitly requires them.
✅ 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 clearly identifies a demo-focused maintenance change that matches the pull request contents.
Linked Issues check ✅ Passed The table demos replace non-status labels with PatternFly status labels as required by issue [#12528].
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing Touches 💡 1
🛠️ Fix failing CI checks 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/react-table/src/demos/examples/TableCompact.tsx`:
- Around line 117-123: Normalize the Needs Maintenance switch case to the
sample-data key Needs maintenance so the label renders correctly. Apply this
change in the status renderers at
packages/react-table/src/demos/examples/TableCompact.tsx#L117-L123,
TableSortableResponsive.tsx#L124-L130, TableStaticBottomPagination.tsx#L71-L89,
and TableStickyHeader.tsx#L10-L16; leave the associated label statuses
unchanged.
🪄 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: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: cdcbf011-5583-47eb-96c9-2adcf12b81bf

📥 Commits

Reviewing files that changed from the base of the PR and between 7a55868 and 8d43f4d.

📒 Files selected for processing (8)
  • packages/react-table/src/demos/examples/TableColumnManagement.tsx
  • packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx
  • packages/react-table/src/demos/examples/TableCompact.tsx
  • packages/react-table/src/demos/examples/TableExpandCollapseAll.tsx
  • packages/react-table/src/demos/examples/TableFilterable.tsx
  • packages/react-table/src/demos/examples/TableSortableResponsive.tsx
  • packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx
  • packages/react-table/src/demos/examples/TableStickyHeader.tsx

Comment thread packages/react-table/src/demos/examples/TableCompact.tsx
@andrew-ronaldson andrew-ronaldson changed the title chore(table): add status labels to table demos chore(demos): update various react demos Jul 23, 2026
@rebeccaalpert
rebeccaalpert self-requested a review August 3, 2026 15:57

@rebeccaalpert rebeccaalpert left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some demos still seem to need the updated alert icon:

  • patternfly-react/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
  • patternfly-react/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
  • patternfly-react/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
  • patternfly-react/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
  • patternfly-react/packages/react-table/src/demos/DashboardHeader.tsx

I don't mind pushing these.

CodeRabbit also has a good callout worth fixing here. I can push to your PR to get that closed up.

Needs Maintenance was being used rather than the lowercase version in the actual data. This meant some labels were missing after render step.
Left the component-specific examples alone, but replaced remaining nav usage.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Table: Replace non status labels in React demos

4 participants