Skip to content

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

Open
tlabaj wants to merge 1 commit intopatternfly:mainfrom
tlabaj:label_status
Open

chore(Label): Added enums for LabelColor and LabelStatus#12338
tlabaj wants to merge 1 commit 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

Release Notes

  • Improvements
    • Label component now exports type-safe LabelColor and LabelStatus enums for improved development experience with full backward compatibility for string literal props.

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 10, 2026

Walkthrough

This PR adds exported TypeScript enums (LabelStatus and LabelColor) to the Label component for semantic typing of the status and color props while maintaining backward compatibility with string literals. Internal type mappings are refactored to use these enums, and example files are updated to use enum values.

Changes

Cohort / File(s) Summary
Label Component Type Definitions
packages/react-core/src/components/Label/Label.tsx
Exports LabelStatus enum (success, warning, danger, info, custom) and LabelColor enum (blue, teal, green, orange, purple, red, orangered, grey, yellow). Updates LabelProps to accept both enum values and string literals for color and status props. Refactors internal colorStyles and statusIcons mappings to use typed Record<LabelColor, ...> and Record<LabelStatus, ...> keyed by enum members. Changes default color from 'grey' string to LabelColor.grey.
Basic Label Examples
packages/react-core/src/components/Label/examples/LabelCompact.tsx, LabelCustomRender.tsx, LabelEditable.tsx, LabelFilled.tsx, LabelOutline.tsx
Import LabelColor and/or LabelStatus enums and update Label component props to use enum values (e.g., color={LabelColor.blue}, status={LabelStatus.success}) instead of string literals across various label variants and configurations.
Label Group Examples
packages/react-core/src/components/Label/examples/LabelGroup*.tsx
Import LabelColor enum and update Label instances within label group examples to use LabelColor.<value> enum constants instead of string literals for the color prop; some examples also update type assertions from LabelProps['color'] to LabelColor.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • PR #12291: Also modifies the Label.tsx component's statusIcons mapping, which was refactored in this PR to use the new LabelStatus enum.

Suggested reviewers

  • thatblindgeye
  • nicolethoen
  • lboehling
🚥 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: adding LabelColor and LabelStatus enums to the Label component.
Linked Issues check ✅ Passed The PR fully satisfies issue #11835 by exporting LabelColor and LabelStatus enums, improving TypeScript developer experience for Label component typing.
Out of Scope Changes check ✅ Passed All changes are directly scoped to the Label component and its examples, implementing the enum exports and updating usage consistently throughout.
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 on lines +25 to +36
/** Label palette color when not using the `status` prop. */
export enum LabelColor {
blue = 'blue',
teal = 'teal',
green = 'green',
orange = 'orange',
purple = 'purple',
red = 'red',
orangered = 'orangered',
grey = 'grey',
yellow = 'yellow'
}
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Keep Label color tests in sync with the exported enum.

Now that LabelColor is a public source of truth, tests should derive cases from it (or include all members) so new values like orangered are always covered. The current hardcoded array in packages/react-core/src/components/Label/__tests__/Label.test.tsx can drift.

Suggested test alignment
-const labelColors = ['blue', 'teal', 'green', 'orange', 'purple', 'red', 'grey', 'yellow'];
+import { LabelColor } from '../Label';
+const labelColors = Object.values(LabelColor);
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/react-core/src/components/Label/Label.tsx` around lines 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.

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

2 participants