Skip to content

chore(patterns): fix status labels in dashboard demo - #8455

Merged
mcoker merged 3 commits into
patternfly:mainfrom
andrew-ronaldson:patterns
Jun 23, 2026
Merged

chore(patterns): fix status labels in dashboard demo#8455
mcoker merged 3 commits into
patternfly:mainfrom
andrew-ronaldson:patterns

Conversation

@andrew-ronaldson

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

Copy link
Copy Markdown
Collaborator

This PR addresses a comment from the 6.5 Staging review where the non-status labels are used for statuses.
The labels on core don't seem to be using the new new icons so that should be done in a separate issue.

Note: This PR was vibe coded with Cursor.

Summary by CodeRabbit

  • Style
    • Updated status-card label presentation to use status-based styling (danger/warning/success/info) instead of color-based variants, including the notification drawer.
    • Refined the “Incident” label and reworked the system reboot messaging so it consistently reflects whether an incident is present.

@coderabbitai

coderabbitai Bot commented Jun 16, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro

Run ID: 532c2f07-7761-4c67-bdbf-40177424b763

📥 Commits

Reviewing files that changed from the base of the PR and between 0efce8e and faa0d21.

📒 Files selected for processing (1)
  • src/patternfly/demos/Card/templates/card-template-expandable-status-card.hbs

Walkthrough

Two card demo Handlebars templates are updated to migrate from color-based labels (label--color, label-icon--value) to status-based labels (label--status). The expandable status card's reboot-status UI is restructured to be driven by incident status rather than a separate reboot condition.

Changes

Label color-to-status migration in Card templates

Layer / File(s) Summary
Expandable status card: label style and incident-driven reboot UI
src/patternfly/demos/Card/templates/card-template-expandable-status-card.hbs
Incident label changed from label--color="red" to label--status="danger". Reboot-status messaging is restructured: when HasIncident is true, displays "System reboot is required" with danger styling; when false, displays "System reboot is not required" with success styling. Previous separate RequiresReboot conditional is removed from this section.
Status card notification drawer label group
src/patternfly/demos/Card/templates/card-template-status.hbs
Five color/icon-based label entries (red/orange/green/blue/teal) removed and replaced with four status-based entries (default-danger, default-warning, default-success, default-info) using label--status and updated label-text--value counts.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

  • patternfly/patternfly#8219: Directly modifies the same RequiresReboot rendering section in card-template-expandable-status-card.hbs.

Suggested labels

released on @prerelease``

Suggested reviewers

  • mcoker
🚥 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 'fix(patterns): fix status labels in dashboard demo' follows conventional commit format with a 'fix' type prefix and a clear, descriptive subject about status labels in the dashboard demo.
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.

✏️ 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

patternfly-build commented Jun 16, 2026

Copy link
Copy Markdown
Collaborator

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

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
`@src/patternfly/demos/Card/templates/card-template-expandable-status-card.hbs`:
- Around line 53-67: The logic in the if-else block for
card-template-expandable-status-card--RequiresReboot is inverted. Currently,
when the condition is truthy, it displays "is not required" with a success icon,
and when falsy, it displays "is required" with a danger icon. Swap the content
of the {{`#if`}} and {{else}} branches so that when RequiresReboot is true, it
shows "is required" with the danger icon, and when RequiresReboot is false, it
shows "is not required" with the success icon. This will align the UI behavior
with the semantic meaning of the flag name.
🪄 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: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: b111bfcb-a994-4f5e-aaa0-ca0ba3d4eb81

📥 Commits

Reviewing files that changed from the base of the PR and between 9c07bb8 and 3fb655c.

📒 Files selected for processing (2)
  • src/patternfly/demos/Card/templates/card-template-expandable-status-card.hbs
  • src/patternfly/demos/Card/templates/card-template-status.hbs

Comment on lines 53 to 67
{{#if card-template-expandable-status-card--RequiresReboot}}
{{#> icon}}
{{#> icon-content icon-content--modifier="pf-m-danger"}}
{{#> icon-content icon-content--modifier="pf-m-success"}}
{{pfIcon "rh-ui-connected"}}
{{/icon-content}}
{{/icon}}
<p class="{{pfv 'u'}}color-200">System reboot <b class="{{pfv 'u'}}color-100">is</b> required</p>
<p class="{{pfv 'u'}}color-200">System reboot <b class="{{pfv 'u'}}color-100">is not</b> required</p>
{{else}}
{{#> icon}}
{{#> icon-content icon-content--modifier="pf-m-success"}}
{{#> icon-content icon-content--modifier="pf-m-danger"}}
{{pfIcon "rh-ui-connected"}}
{{/icon-content}}
{{/icon}}
<p class="{{pfv 'u'}}color-200">System reboot <b class="{{pfv 'u'}}color-100">is not</b> required</p>
<p class="{{pfv 'u'}}color-200">System reboot <b class="{{pfv 'u'}}color-100">is </b> required</p>
{{/if}}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

RequiresReboot condition currently renders the opposite semantic.

Line 53 shows “is not required” when card-template-expandable-status-card--RequiresReboot is truthy, while Line 66 shows “is required” in the falsy branch. That contradicts the flag name and can invert real boolean-driven UI behavior.

💡 Suggested fix
-            {{`#if` card-template-expandable-status-card--RequiresReboot}}
+            {{`#if` card-template-expandable-status-card--RequiresReboot}}
               {{#> icon}}
-                {{#> icon-content icon-content--modifier="pf-m-success"}}
+                {{#> icon-content icon-content--modifier="pf-m-danger"}}
                   {{pfIcon "rh-ui-connected"}}
                 {{/icon-content}}
               {{/icon}}
-              <p class="{{pfv 'u'}}color-200">System reboot <b class="{{pfv 'u'}}color-100">is not</b> required</p>
+              <p class="{{pfv 'u'}}color-200">System reboot <b class="{{pfv 'u'}}color-100">is</b> required</p>
             {{else}}
               {{#> icon}}
-                {{#> icon-content icon-content--modifier="pf-m-danger"}}
+                {{#> icon-content icon-content--modifier="pf-m-success"}}
                   {{pfIcon "rh-ui-connected"}}
                 {{/icon-content}}
               {{/icon}}
-              <p class="{{pfv 'u'}}color-200">System reboot <b class="{{pfv 'u'}}color-100">is </b> required</p>
+              <p class="{{pfv 'u'}}color-200">System reboot <b class="{{pfv 'u'}}color-100">is not</b> required</p>
             {{/if}}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{{#if card-template-expandable-status-card--RequiresReboot}}
{{#> icon}}
{{#> icon-content icon-content--modifier="pf-m-danger"}}
{{#> icon-content icon-content--modifier="pf-m-success"}}
{{pfIcon "rh-ui-connected"}}
{{/icon-content}}
{{/icon}}
<p class="{{pfv 'u'}}color-200">System reboot <b class="{{pfv 'u'}}color-100">is</b> required</p>
<p class="{{pfv 'u'}}color-200">System reboot <b class="{{pfv 'u'}}color-100">is not</b> required</p>
{{else}}
{{#> icon}}
{{#> icon-content icon-content--modifier="pf-m-success"}}
{{#> icon-content icon-content--modifier="pf-m-danger"}}
{{pfIcon "rh-ui-connected"}}
{{/icon-content}}
{{/icon}}
<p class="{{pfv 'u'}}color-200">System reboot <b class="{{pfv 'u'}}color-100">is not</b> required</p>
<p class="{{pfv 'u'}}color-200">System reboot <b class="{{pfv 'u'}}color-100">is </b> required</p>
{{/if}}
{{`#if` card-template-expandable-status-card--RequiresReboot}}
{{#> icon}}
{{#> icon-content icon-content--modifier="pf-m-danger"}}
{{pfIcon "rh-ui-connected"}}
{{/icon-content}}
{{/icon}}
<p class="{{pfv 'u'}}color-200">System reboot <b class="{{pfv 'u'}}color-100">is</b> required</p>
{{else}}
{{#> icon}}
{{#> icon-content icon-content--modifier="pf-m-success"}}
{{pfIcon "rh-ui-connected"}}
{{/icon-content}}
{{/icon}}
<p class="{{pfv 'u'}}color-200">System reboot <b class="{{pfv 'u'}}color-100">is not</b> required</p>
{{/if}}
🤖 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 `@src/patternfly/demos/Card/templates/card-template-expandable-status-card.hbs`
around lines 53 - 67, The logic in the if-else block for
card-template-expandable-status-card--RequiresReboot is inverted. Currently,
when the condition is truthy, it displays "is not required" with a success icon,
and when falsy, it displays "is required" with a danger icon. Swap the content
of the {{`#if`}} and {{else}} branches so that when RequiresReboot is true, it
shows "is required" with the danger icon, and when RequiresReboot is false, it
shows "is not required" with the success icon. This will align the UI behavior
with the semantic meaning of the flag name.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

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
`@src/patternfly/demos/Card/templates/card-template-expandable-status-card.hbs`:
- Around line 53-67: The conditional in the template checks for
`card-template-expandable-status-card--HasIncident`, but the parent template
invokes the second card instance with `RequiresReboot=true` instead, causing the
condition to evaluate as false and display "is not required" when it should show
"is required". Fix by either restoring the conditional to check `RequiresReboot`
instead of `HasIncident`, or updating the parent template's second card
invocation to pass `HasIncident=true` instead of `RequiresReboot=true`. Either
approach will align the variable being checked with the variable being passed.
🪄 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: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: d805221d-0226-4621-9bb4-3444b4732642

📥 Commits

Reviewing files that changed from the base of the PR and between 3fb655c and 0efce8e.

📒 Files selected for processing (1)
  • src/patternfly/demos/Card/templates/card-template-expandable-status-card.hbs

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Caution

Inline review comments failed to post. This is likely due to GitHub's internal server error or limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.

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
`@src/patternfly/demos/Card/templates/card-template-expandable-status-card.hbs`:
- Around line 53-67: The conditional in the template checks for
`card-template-expandable-status-card--HasIncident`, but the parent template
invokes the second card instance with `RequiresReboot=true` instead, causing the
condition to evaluate as false and display "is not required" when it should show
"is required". Fix by either restoring the conditional to check `RequiresReboot`
instead of `HasIncident`, or updating the parent template's second card
invocation to pass `HasIncident=true` instead of `RequiresReboot=true`. Either
approach will align the variable being checked with the variable being passed.
🪄 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: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: d805221d-0226-4621-9bb4-3444b4732642

📥 Commits

Reviewing files that changed from the base of the PR and between 3fb655c and 0efce8e.

📒 Files selected for processing (1)
  • src/patternfly/demos/Card/templates/card-template-expandable-status-card.hbs
🛑 Comments failed to post (1)
src/patternfly/demos/Card/templates/card-template-expandable-status-card.hbs (1)

53-67: ⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Description: Verify how the parent template invokes card-template-expandable-status-card

# Search for all invocations of card-template-expandable-status-card in the parent template
rg -A 10 'card-template-expandable-status-card' src/patternfly/demos/Card/templates/card-template-expandable-status.hbs

Repository: patternfly/patternfly

Length of output: 1538


Condition variable mismatch causes incorrect reboot status for the second card.

The conditional was changed to check card-template-expandable-status-card--HasIncident, but the parent template (card-template-expandable-status.hbs) invokes the second card instance with RequiresReboot=true and no HasIncident parameter. Since HasIncident is undefined, it evaluates to falsy, entering the else block and displaying "System reboot is not required" even though the card should display "is required".

Fix by either:

  1. Restoring the condition to check RequiresReboot, or
  2. Updating the second card invocation to pass HasIncident=true instead of RequiresReboot=true
🤖 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 `@src/patternfly/demos/Card/templates/card-template-expandable-status-card.hbs`
around lines 53 - 67, The conditional in the template checks for
`card-template-expandable-status-card--HasIncident`, but the parent template
invokes the second card instance with `RequiresReboot=true` instead, causing the
condition to evaluate as false and display "is not required" when it should show
"is required". Fix by either restoring the conditional to check `RequiresReboot`
instead of `HasIncident`, or updating the parent template's second card
invocation to pass `HasIncident=true` instead of `RequiresReboot=true`. Either
approach will align the variable being checked with the variable being passed.

Conditions were giving errors so streamlined the process.
@andrew-ronaldson
andrew-ronaldson removed the request for review from wise-king-sullyman June 16, 2026 15:12

@mcoker mcoker left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🚀

@mcoker
mcoker merged commit a834052 into patternfly:main Jun 23, 2026
7 of 8 checks passed
@mcoker mcoker changed the title fix(patterns): fix status labels in dashboard demo chore(patterns): fix status labels in dashboard demo Jun 23, 2026
@patternfly-build

Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 6.6.0-prerelease.12 🎉

The release is available on:

Your semantic-release bot 📦🚀

@patternfly-build

Copy link
Copy Markdown
Collaborator

🎉 This issue has been resolved in version 6.6.0-prerelease.18 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Patterns: Fix labels in Dashboard demo

3 participants