Skip to content

chore(Label): Added enums for LabelColor and LabelStatus#12338

Merged
wise-king-sullyman merged 5 commits intopatternfly:mainfrom
tlabaj:label_status
May 5, 2026
Merged

chore(Label): Added enums for LabelColor and LabelStatus#12338
wise-king-sullyman merged 5 commits intopatternfly:mainfrom
tlabaj:label_status

Conversation

@tlabaj
Copy link
Copy Markdown
Contributor

@tlabaj tlabaj commented Apr 10, 2026

What: Closes #11835

Adds LabelStatus and LabelColor string enums on Label, exports them from @patternfly/react-core, and uses them inside the component for default color, colorStyles, and statusIcons.

LabelProps keeps an explicit string union for color and status and includes the enum in each union (same idea as ToolbarGroup / Pagination) so generated docs list both literals and the enum.

Docs examples under Label/examples were updated to import and use LabelColor / LabelStatus instead of raw strings, consistent with other components (e.g. ButtonVariant, PaginationVariant). Dynamic color cases use as LabelColor where a string is cast for the color prop.

Summary by CodeRabbit

  • Improvements
    • Label exposes type-safe color and status constants (backward compatible) for more reliable, consistent styling defaults.
  • Examples
    • Storybook and demo examples updated to use the new color/status constants so sample code reflects the improved API.
  • Tests
    • Tests updated to derive colors/statuses from the exported constants, keeping test coverage aligned with the exported API.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 10, 2026

Walkthrough

Adds exported TypeScript enums LabelStatus and LabelColor, extends Label prop types to accept those enums while retaining string-literal compatibility, types internal maps (colorStyles, statusIcons) by enum, changes default color to LabelColor.grey, and updates examples/tests/demos to use the enums.

Changes

Label enums + consumption across examples/tests/demos

Layer / File(s) Summary
Data Shape / Types
packages/react-core/src/components/Label/Label.tsx
Adds exported LabelStatus and LabelColor enums; extends LabelProps.color and LabelProps.status to accept the enums in addition to existing string-literal unions.
Core Implementation
packages/react-core/src/components/Label/Label.tsx
Changes colorStyles to Record<LabelColor, string> and statusIcons to Record<LabelStatus, React.ReactNode>; updates Label default color from 'grey' to LabelColor.grey.
Examples / Usage updates
packages/react-core/src/components/Label/examples/*, packages/react-core/src/demos/.../*, packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
Imports LabelColor and/or LabelStatus and replaces string-literal color/status prop values with LabelColor.* / LabelStatus.* enum members across many example and demo files; some files replace type assertions to use LabelColor.
Tests
packages/react-core/src/components/Label/__tests__/Label.test.tsx
Test iterates available colors via Object.values(LabelColor) and passes enum values directly (removes unsafe casts).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Suggested reviewers

  • dlabaj
  • nicolethoen
  • mcoker
🚥 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 and concisely describes the main change: adding enums for LabelColor and LabelStatus to the Label component.
Linked Issues check ✅ Passed The PR successfully implements the objective from issue #11835 by exporting LabelColor and LabelStatus enums and updating all examples to use them, improving TypeScript developer experience.
Out of Scope Changes check ✅ Passed All changes are directly related to adding and implementing LabelColor and LabelStatus enums across the Label component and its examples, with no unrelated modifications detected.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ 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
Copy link
Copy Markdown
Collaborator

patternfly-build commented Apr 10, 2026

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

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 the current code and only fix it if needed.

Inline comments:
In `@packages/react-core/src/components/Label/Label.tsx`:
- Around line 25-36: Tests for Label currently use a hardcoded color array that
can drift from the exported LabelColor enum; update the tests in Label.test.tsx
to derive test cases from the LabelColor enum by importing LabelColor and using
Object.values(LabelColor) (or Object.keys/values as appropriate) to drive the
color matrix/snapshots so any new member (e.g., orangered) is automatically
covered, and replace the existing hardcoded color list with that derived list in
the relevant test loops/assertions.
🪄 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: 784925fe-fd63-4540-a120-e1b53a16bb93

📥 Commits

Reviewing files that changed from the base of the PR and between 911223a and 3136da8.

📒 Files selected for processing (15)
  • packages/react-core/src/components/Label/Label.tsx
  • packages/react-core/src/components/Label/examples/LabelCompact.tsx
  • packages/react-core/src/components/Label/examples/LabelCustomRender.tsx
  • packages/react-core/src/components/Label/examples/LabelEditable.tsx
  • packages/react-core/src/components/Label/examples/LabelFilled.tsx
  • packages/react-core/src/components/Label/examples/LabelGroupBasic.tsx
  • packages/react-core/src/components/Label/examples/LabelGroupCategory.tsx
  • packages/react-core/src/components/Label/examples/LabelGroupCategoryRemovable.tsx
  • packages/react-core/src/components/Label/examples/LabelGroupEditableAdd.tsx
  • packages/react-core/src/components/Label/examples/LabelGroupEditableAddDropdown.tsx
  • packages/react-core/src/components/Label/examples/LabelGroupEditableAddModal.tsx
  • packages/react-core/src/components/Label/examples/LabelGroupEditableLabels.tsx
  • packages/react-core/src/components/Label/examples/LabelGroupOverflow.tsx
  • packages/react-core/src/components/Label/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx
  • packages/react-core/src/components/Label/examples/LabelOutline.tsx

Comment thread packages/react-core/src/components/Label/Label.tsx
@tlabaj tlabaj requested review from a team, dlabaj and wise-king-sullyman and removed request for a team April 13, 2026 15:28
Copy link
Copy Markdown
Contributor

@thatblindgeye thatblindgeye left a comment

Choose a reason for hiding this comment

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

Following files will need to be updated as well:

Files with color string literals:

  1. demos/RTL/examples/PaginatedTable.tsx
  2. demos/examples/Card/CardHorizontalGrid.tsx
  3. demos/examples/Tabs/TabsOpen.tsx
  4. demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx

Files with status string literals:
5. demos/examples/Card/CardStatus.tsx

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

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 the current code and only fix it if needed.

Inline comments:
In `@packages/react-core/src/demos/examples/Card/CardStatus.tsx`:
- Line 24: The file imports LabelStatus via a deep relative path; update the
imports to use the public package export instead: import Label and LabelStatus
from '@patternfly/react-core' (replace the '../../../components/Label/Label'
import). Locate the import statements in CardStatus.tsx (where Label is already
imported) and change them to a single named import that includes LabelStatus so
the demo uses the public API.
🪄 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: 639d3d8d-c1db-4e62-b4ef-3e173a5c4ca9

📥 Commits

Reviewing files that changed from the base of the PR and between 12e0182 and e203d2a.

⛔ Files ignored due to path filters (3)
  • packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassMainHeader.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassPanel.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap is excluded by !**/*.snap
📒 Files selected for processing (6)
  • packages/react-core/src/components/Label/__tests__/Label.test.tsx
  • packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
  • packages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsx
  • packages/react-core/src/demos/examples/Card/CardStatus.tsx
  • packages/react-core/src/demos/examples/Tabs/TabsOpen.tsx
  • packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx
✅ Files skipped from review due to trivial changes (4)
  • packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx
  • packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
  • packages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsx
  • packages/react-core/src/demos/examples/Tabs/TabsOpen.tsx

Comment thread packages/react-core/src/demos/examples/Card/CardStatus.tsx Outdated
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Do we want to add the enums to the props?

MenuToggle,
MenuToggleElement
} from '@patternfly/react-core';
import { LabelColor } from '../../../components/Label/Label';
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Also +1 to the comment about changing the imports in the demos to be from @patternfly/react-core.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/react-core/src/components/Label/Label.tsx (1)

48-48: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

status prop is missing LabelStatus from its union type.

LabelProps.color (line 44) was updated to include LabelColor in its union, but LabelProps.status was not updated to include LabelStatus. Per the PR objectives, both props should include the enum in their union so generated docs and IDE tooling surface it.

🛠️ Proposed fix
-  status?: 'success' | 'warning' | 'danger' | 'info' | 'custom';
+  status?: 'success' | 'warning' | 'danger' | 'info' | 'custom' | LabelStatus;
🤖 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-core/src/components/Label/Label.tsx` at line 48, The
LabelProps.type for the status prop currently uses a string union ('success' |
'warning' | 'danger' | 'info' | 'custom') but omits the exported LabelStatus
enum type; update the status declaration on the LabelProps interface (the status
prop in Label.tsx / LabelProps) to include LabelStatus in the union (e.g., add |
LabelStatus) so IDEs and generated docs surface the enum values the same way
LabelProps.color does with LabelColor.
🤖 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.

Outside diff comments:
In `@packages/react-core/src/components/Label/Label.tsx`:
- Line 48: The LabelProps.type for the status prop currently uses a string union
('success' | 'warning' | 'danger' | 'info' | 'custom') but omits the exported
LabelStatus enum type; update the status declaration on the LabelProps interface
(the status prop in Label.tsx / LabelProps) to include LabelStatus in the union
(e.g., add | LabelStatus) so IDEs and generated docs surface the enum values the
same way LabelProps.color does with LabelColor.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c3707b45-34ad-4f67-b367-69418847b68c

📥 Commits

Reviewing files that changed from the base of the PR and between e203d2a and ab98a8a.

📒 Files selected for processing (6)
  • packages/react-core/src/components/Label/Label.tsx
  • packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
  • packages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsx
  • packages/react-core/src/demos/examples/Card/CardStatus.tsx
  • packages/react-core/src/demos/examples/Tabs/TabsOpen.tsx
  • packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx
✅ Files skipped from review due to trivial changes (4)
  • packages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsx
  • packages/react-core/src/demos/examples/Card/CardStatus.tsx
  • packages/react-core/src/demos/examples/Tabs/TabsOpen.tsx
  • packages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsx

@wise-king-sullyman wise-king-sullyman merged commit 8f715a4 into patternfly:main May 5, 2026
14 checks passed
@patternfly-build
Copy link
Copy Markdown
Collaborator

Your changes have been released in:

  • @patternfly/react-code-editor@6.5.0-prerelease.69
  • @patternfly/react-core@6.5.0-prerelease.66
  • @patternfly/react-docs@7.5.0-prerelease.77
  • @patternfly/react-drag-drop@6.5.0-prerelease.67
  • demo-app-ts@6.5.0-prerelease.95
  • @patternfly/react-table@6.5.0-prerelease.69
  • @patternfly/react-templates@6.5.0-prerelease.66

Thanks for your contribution! 🎉

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.

Label: Status color type

4 participants