Skip to content

chore(primary details): Demo updates - #12581

Open
andrew-ronaldson wants to merge 6 commits into
patternfly:mainfrom
andrew-ronaldson:primary-details
Open

chore(primary details): Demo updates#12581
andrew-ronaldson wants to merge 6 commits into
patternfly:mainfrom
andrew-ronaldson:primary-details

Conversation

@andrew-ronaldson

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

Copy link
Copy Markdown
Collaborator

Closes #12544

I updated the following:

  • Inline drawers examples
  • Alert icons use status colours.
  • workspace toast alert drops pf-m-inline class so it appears floating.

Summary by CodeRabbit

  • Enhancements
    • Improved Primary Detail drawer layouts across demos for a more consistent inline experience, with toolbars and dividers integrated into the drawer content.
    • Refined toolbar alignment, spacing, and filter layouts for clearer visual structure.
    • Updated in-card drawer behavior to better support expanded and collapsed states.
    • Refreshed demo icons for improved visual consistency.
  • Documentation
    • Simplified Primary Detail demo navigation by removing three intermediate subsections.

@coderabbitai

coderabbitai Bot commented Jul 21, 2026

Copy link
Copy Markdown

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

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: 178110ca-0554-4cb4-86ed-f2b2aa53df27

📥 Commits

Reviewing files that changed from the base of the PR and between 78af7f5 and b5c5849.

📒 Files selected for processing (3)
  • packages/react-core/src/demos/PrimaryDetail.md
  • packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx
  • packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx
  • packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx

Walkthrough

Primary Detail demos reorganize toolbar placement, move data lists into drawer content, add drawer sections, switch selected drawers to inline rendering, update icons, and remove three demo navigation entries.

Changes

Primary Detail drawer layout

Layer / File(s) Summary
Toolbar composition and drawer sections
packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx, packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx, packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx, packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx
Toolbar controls move into DrawerSection components. The layouts apply centered alignment, inset spacing, and updated drawer placement.
Drawer content and data-list presentation
packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx, packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx, packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx
Drawer content renders selectable data lists separately from toolbar controls. The demos use Red Hat cube icons and status-bearing icons.
Inline drawer variants and navigation
packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx, packages/react-core/src/demos/PrimaryDetail.md
The simple-list drawer changes from static to inline rendering. Three Primary Detail navigation entries are removed.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Possibly related issues

Possibly related PRs

Suggested reviewers: rebeccaalpert

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly identifies the primary change as updates to the Primary Details demos.
Linked Issues check ✅ Passed The changes update the Primary Details React demos as required by issue #12544.
Out of Scope Changes check ✅ Passed The modified files relate to Primary Details demos and documentation, with no unrelated changes identified.
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 💡
  • Fix failing CI checks
🧪 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-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx`:
- Around line 104-105: Move the ineffective alignItems prop from
ToolbarToggleGroup to the appropriate ToolbarGroup or ToolbarContent in all
three sites:
packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx
lines 104-105,
packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx
lines 104-105, and
packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx
lines 103-104. Preserve the intended center alignment by applying it to the
component that handles alignment.
🪄 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

Run ID: 6e4bc4cd-7b6e-458a-a383-8ba3242f7db5

📥 Commits

Reviewing files that changed from the base of the PR and between 7519afe and 325a4e0.

📒 Files selected for processing (6)
  • packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx
  • packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx
  • packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx
  • packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx
  • packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx
  • packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx

@rebeccaalpert
rebeccaalpert self-requested a review July 22, 2026 19:01

@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.

I think we could drop some of the spacers. I also wanted to ask if you want to sub out the CubeIcon. Otherwise it looks fine to me!

Comment thread packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx Outdated
Comment thread packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx Outdated
Comment thread packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx Outdated
Comment thread packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx Outdated
Comment thread packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx Outdated
updates based on feedback from rebecca

@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-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx`:
- Around line 281-296: In the status-count FlexItems of PrimaryDetailFullPage,
add explicit spacing between each Icon component and its numeric count using {'
'}, matching the existing spacing pattern in the corresponding lines 387-402
section.
🪄 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: 853a9cb5-5c47-4073-afde-e746c6c9b7c9

📥 Commits

Reviewing files that changed from the base of the PR and between 0ad8ce5 and 78af7f5.

📒 Files selected for processing (1)
  • packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx

@rebeccaalpert

Copy link
Copy Markdown
Member

Added the extra icon import so it works and cleaned up the spacing a little bit more.

@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.

Approving what I didn't do!

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: Primary details react demo updates

2 participants