Skip to content

chore(demos): update various react demos#12586

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

chore(demos): update various react demos#12586
andrew-ronaldson wants to merge 2 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

Summary by CodeRabbit

  • Bug Fixes

    • Updated table status labels to use PatternFly standardized LabelStatus styling (success/warning/info/danger) instead of legacy label color mappings.
    • Improved consistency for “Running”, “Stopped”, “Needs Maintenance”, and “Down” across multiple table demos.
  • Chores

    • Updated header notifications badges in demos to use the NotificationBadgeVariant.plain variant for consistent visual/semantic styling.

@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: fc8ad02b-a400-4038-a897-57dc55d4a2e2

📥 Commits

Reviewing files that changed from the base of the PR and between 8d43f4d and 8088eb3.

📒 Files selected for processing (7)
  • packages/react-core/src/demos/DashboardHeader.tsx
  • packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
  • packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
  • packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
  • packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
  • packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
  • packages/react-core/src/demos/examples/Nav/NavManual.tsx

Walkthrough

React Table demos now use PatternFly LabelStatus values for status labels. React Core dashboard, masthead, and navigation demos now use the plain notification badge variant.

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.

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/*
Toolbar notification badges now use NotificationBadgeVariant.plain instead of read, with existing labels and click handlers retained.

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

Possibly related PRs

Suggested reviewers: thatblindgeye, kmcfaul, rebeccaalpert

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Out of Scope Changes check ⚠️ Warning The NotificationBadge variant changes in react-core demos are unrelated to #12528's Table label updates. Move the notification badge variant updates to a separate PR or link them to an issue covering those demos.
Title check ❓ Inconclusive The title is too generic and does not clearly describe the main demo change. Use a title that names the primary update, such as replacing table demo labels with status labels.
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check ✅ Passed The Table demo changes replace non-status labels with status labels as required by #12528.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing Touches
🧪 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 on lines +117 to +123
return <Label status={LabelStatus.success}>{labelText}</Label>;
case 'Stopped':
return <Label color="orange">{labelText}</Label>;
return <Label status={LabelStatus.warning}>{labelText}</Label>;
case 'Needs Maintenance':
return <Label color="blue">{labelText}</Label>;
return <Label status={LabelStatus.info}>{labelText}</Label>;
case 'Down':
return <Label color="red">{labelText}</Label>;
return <Label status={LabelStatus.danger}>{labelText}</Label>;

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "Locate demo files and searches:"
for f in \
  packages/react-table/src/demos/examples/TableCompact.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
do
  echo "===== $f ($(wc -l < "$f") lines) ====="
  ast-grep outline "$f" --view compact 2>/dev/null || true
  printf "\n"
  sed -n '1,180p' "$f"
  printf "\n"
done

echo "Search for row.status/status data values:"
rg -n "status|Needs Maintenance|Needs maintenance|Down|Stopped" packages/react-table/src/demos/examples packages -g '*.tsx' -g '*.ts' | head -n 200

Repository: patternfly/patternfly-react

Length of output: 42910


Normalize the Needs maintenance status key across these demos.

These renderers receive row.status from packages/react-table/src/demos/sampleData.tsx, where the status value is Needs maintenance with a lowercase m. The Needs Maintenance switch cases fall through to the empty default/result and won’t render the label in these examples.

  • packages/react-table/src/demos/examples/TableCompact.tsx#L120
  • packages/react-table/src/demos/examples/TableSortableResponsive.tsx#L127
  • packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx#L83
  • packages/react-table/src/demos/examples/TableStickyHeader.tsx#L13
📍 Affects 4 files
  • packages/react-table/src/demos/examples/TableCompact.tsx#L117-L123 (this comment)
  • packages/react-table/src/demos/examples/TableSortableResponsive.tsx#L124-L130
  • packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx#L71-L89
  • packages/react-table/src/demos/examples/TableStickyHeader.tsx#L10-L16
🤖 Prompt for 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.

In `@packages/react-table/src/demos/examples/TableCompact.tsx` around lines 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.

@andrew-ronaldson andrew-ronaldson changed the title chore(table): add status labels to table demos chore(demos): update various react demos Jul 23, 2026
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

1 participant