Skip to content

fix(rtl-demo): update paginated table and status labels#12491

Open
andrew-ronaldson wants to merge 1 commit into
patternfly:mainfrom
andrew-ronaldson:rtl-demo
Open

fix(rtl-demo): update paginated table and status labels#12491
andrew-ronaldson wants to merge 1 commit into
patternfly:mainfrom
andrew-ronaldson:rtl-demo

Conversation

@andrew-ronaldson

@andrew-ronaldson andrew-ronaldson commented Jun 18, 2026

Copy link
Copy Markdown
Collaborator

Fixes #12491

Note: This was vibe coded by PF Design team.

  • Remove Card wrapper so toolbar and table render directly on the page
  • Switch status labels from color variants to semantic LabelStatus props
  • Fix button and label icons to use pf-v6-m-mirror-inline-rtl directly, removing the Icon wrapper that was overriding on-brand icon color tokens

What: Closes #

Additional issues:

Summary by CodeRabbit

  • Bug Fixes

    • Improved right-to-left (RTL) language support for status labels and icons in table examples.
  • Style

    • Refined table section layout structure for better visual organization.

- Remove Card wrapper so toolbar and table render directly on the page
- Switch status labels from color variants to semantic LabelStatus props
- Fix button and label icons to use pf-v6-m-mirror-inline-rtl directly,
  removing the Icon wrapper that was overriding on-brand icon color tokens

Co-authored-by: Cursor <cursoragent@cursor.com>
@coderabbitai

coderabbitai Bot commented Jun 18, 2026

Copy link
Copy Markdown

Review Change Stack

Walkthrough

PaginatedTable.tsx replaces LabelColor with LabelStatus and drops Icon shouldMirrorRTL wrappers in favor of a pf-v6-m-mirror-inline-rtl CSS class applied directly to icons in renderLabel and the RTL toggle button. The Card wrapper around the table section is removed, flattening the page layout.

Changes

RTL Demo: PaginatedTable refactor

Layer / File(s) Summary
RTL mirroring: imports, renderLabel, and toggle button
packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
LabelColor replaced by LabelStatus; Icon helper removed from imports. renderLabel switch cases now set status={LabelStatus.*} on Label and apply className="pf-v6-m-mirror-inline-rtl" to icons directly. The RTL direction toggle button icon adopts the same CSS-based mirror pattern.
Page layout: Card wrapper removal
packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
Card and CardBody wrappers removed from the table section; toolbar, Table, and bottom pagination now render directly inside PageSection.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The pull request title accurately reflects the main changes: updating RTL demo components with paginated table restructuring and status label refactoring.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ 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 and usage tips.

@patternfly-build

patternfly-build commented Jun 18, 2026

Copy link
Copy Markdown
Collaborator

@andrew-ronaldson andrew-ronaldson linked an issue Jun 18, 2026 that may be closed by this pull request
4 tasks
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.

Patterns: Fix table and labels in RTL demo

2 participants