feat(badge): add pf-v6-badge element#3138
Open
zeroedin wants to merge 4 commits intostaging/pfv6from
Open
Conversation
Port pf-v5-badge to pf-v6-badge with v6 design tokens, CSS, and API parity with PatternFly v6 React Badge component. Changes from v5: - Updated CSS custom properties to --pf-v6-c-badge--* namespace - Added border overlay via ::after pseudo-element (new in v6) - Added disabled state with pointer-events: none - Switched to CSS logical properties (padding-inline-start/end) - Simplified render: no wrapper span, slot for default content - Added `@cssprop` JSDoc for all public CSS custom properties - Added `@summary` and `@slot` JSDoc annotations - Exported BadgeState type union Demos match patternfly.org: read, unread, disabled, plus WC-specific threshold demo. Tests cover: instantiation, number/threshold display, state colors, disabled styling, accessibility tree, slot content. Closes #2982 Assisted-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove reflect from number and threshold properties (no CSS selectors) - Fix threshold comparison: use <= instead of < so number=threshold shows + - Simplify render return type to TemplateResult - Add cem generate output path to config Assisted-By: Claude Opus 4.6 <noreply@anthropic.com>
|
Contributor
✅ Commitlint tests passed!More Info{
"valid": true,
"errors": [],
"warnings": [],
"input": "feat(badge): add pf-v6-badge element"
} |
Contributor
✅ Deploy Preview for patternfly-elements ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
Contributor
bennypowers
requested changes
May 10, 2026
Member
bennypowers
left a comment
bennypowers
left a comment
There was a problem hiding this comment.
see comments on the other 2 prs
| * A **badge** is used to annotate other information like a label or an object name. | ||
| * @summary Displays a numeric value as an annotation | ||
| * @slot - Badge content, typically a number or short text | ||
| * @cssprop {<color>} --pf-v6-c-badge--Color - Text color of the badge |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
<pf-v6-badge>web component for PatternFly v6thresholdattribute to cap displayed value (e.g., "999+")numberattribute for programmatic value settingdisabledattribute dims the badgeCloses #2982
Depends on #3130
Intentional divergences from React
childrenprop for the numeric valuenumberandthresholdattributes are not reflected (no CSS selectors use them)disabledusesaria-disabledvia ElementInternals rather than a host attributeTest plan
npm run testpasseslocalhost:8000with?rendering=chromelessAssisted-By: Claude noreply@anthropic.com