Skip to content

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

Open
tlabaj wants to merge 4 commits intopatternfly:mainfrom
tlabaj:label_status
Open

chore(Label): Added enums for LabelColor and LabelStatus#12338
tlabaj wants to merge 4 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 now provides type-safe color and status constants while remaining backward compatible, improving reliability and developer experience with no runtime behavior changes.
  • Examples
    • Storybook and demo examples updated to use the new color/status constants so sample code matches the improved types.
  • Tests
    • Tests updated to source colors/statuses from the exported constants.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 10, 2026

Walkthrough

Adds exported TypeScript enums LabelStatus and LabelColor, updates Label prop types and default color to use the enums (while retaining string literal compatibility), and updates examples/tests/demos to consume the new enum values.

Changes

Cohort / File(s) Summary
Label core
packages/react-core/src/components/Label/Label.tsx
Adds exported LabelStatus and LabelColor enums. Changes colorStyles and statusIcons to Record<...> keyed by enums. Updates LabelProps.color/LabelProps.status types to accept enums (still allow string literals). Default color now LabelColor.grey.
Examples — Label (multiple)
packages/react-core/src/components/Label/examples/LabelCompact.tsx, .../LabelCustomRender.tsx, .../LabelEditable.tsx, .../LabelFilled.tsx, .../LabelOutline.tsx
Imports LabelColor and/or LabelStatus; replaces string literal color/status props with LabelColor.* / LabelStatus.* enum values. No runtime behavior changes.
Examples — Label Group
packages/react-core/src/components/Label/examples/LabelGroupBasic.tsx, .../LabelGroupCategory.tsx, .../LabelGroupCategoryRemovable.tsx, .../LabelGroupEditableAdd.tsx, .../LabelGroupEditableAddDropdown.tsx, .../LabelGroupEditableAddModal.tsx, .../LabelGroupEditableLabels.tsx, .../LabelGroupOverflow.tsx, .../LabelGroupVerticalCategoryOverflowRemovable.tsx
Adds LabelColor import and converts group label color props to LabelColor.*. Some files tighten type assertions to LabelColor. No runtime changes.
Tests
packages/react-core/src/components/Label/__tests__/Label.test.tsx
Test now iterates colors via Object.values(LabelColor) and passes enum values directly; removed unsafe casts.
Demos / Other examples
packages/react-core/src/demos/.../PaginatedTable.tsx, packages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsx, .../Card/CardStatus.tsx, .../Tabs/TabsOpen.tsx, .../Tabs/TabsOpenWithSecondaryTabs.tsx
Replaced literal Label color/status props with LabelColor.* / LabelStatus.* and added corresponding imports. No behavioral changes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Suggested reviewers

  • dlabaj
  • nicolethoen
🚥 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 accurately describes the main change: introducing exported enums for LabelColor and LabelStatus, which is the primary objective of this PR.
Linked Issues check ✅ Passed The PR fully addresses issue #11835 by exporting LabelColor and LabelStatus enums and using them throughout the Label component and examples, improving TypeScript developer experience as requested.
Out of Scope Changes check ✅ Passed All changes are directly related to the stated objectives: adding/exporting enums and updating examples to use them. No unrelated modifications were introduced.
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

Title,
Icon
} from '@patternfly/react-core';
import { LabelStatus } from '../../../components/Label/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.

🛠️ Refactor suggestion | 🟠 Major

Import LabelStatus from @patternfly/react-core for consistency.

Label is already imported from @patternfly/react-core on line 12, and this PR exports LabelStatus from the package. Using a deep relative path here (../../../components/Label/Label) is inconsistent with the rest of the example and bypasses the public entry point consumers will use.

♻️ Proposed fix
 import {
   Alert,
   Card,
   CardBody,
   CardHeader,
   Divider,
   Flex,
   FlexItem,
   Grid,
   GridItem,
   Label,
+  LabelStatus,
   NotificationDrawer,
   NotificationDrawerBody,
   NotificationDrawerGroup,
   NotificationDrawerList,
   NotificationDrawerListItem,
   NotificationDrawerListItemBody,
   NotificationDrawerListItemHeader,
   Popover,
   Title,
   Icon
 } from '@patternfly/react-core';
-import { LabelStatus } from '../../../components/Label/Label';
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/react-core/src/demos/examples/Card/CardStatus.tsx` at 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.

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

3 participants