feat(badge): port pf-v5-badge to pf-v6-badge element#3138
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>
🦋 Changeset detectedLatest commit: 1989002 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Commitlint tests passed!More Info{
"valid": true,
"errors": [],
"warnings": [],
"input": "feat(badge): port pf-v5-badge to pf-v6-badge element"
} |
✅ Deploy Preview for patternfly-elements ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
bennypowers
left a comment
bennypowers
left a comment
There was a problem hiding this comment.
see comments on the other 2 prs
bennypowers
left a comment
bennypowers
left a comment
There was a problem hiding this comment.
Should remove all existing pf-v5-badge references
zeroedin
changed the title
|
Need to update README.md to include divergences still. |
| | --- | --- | | ||
| | `number` property | Numeric value displayed in the badge. | | ||
| | `threshold` property | When `number` exceeds this value, displays `{threshold}+` instead. | | ||
| | `--pf-v6-c-badge--MinWidth` | Minimum width of the badge. | |
There was a problem hiding this comment.
all these css props already exist in the react component
|
|
||
| | React prop | Notes | | ||
| | --- | --- | | ||
| | `screenReaderText` | Authors slot visually-hidden text alongside the badge content for screen reader context, e.g. `<pf-v6-badge>3 <span class="pf-v6-screen-reader">unread messages</span></pf-v6-badge>`. | |
There was a problem hiding this comment.
this is a "changed", not a "not implemented", and should be accessible-label
|
|
||
| | Web component API | Notes | | ||
| | --- | --- | | ||
| | `number` property | Numeric value displayed in the badge. | |
There was a problem hiding this comment.
if i understood the intention here, number is the attr pair for the anonymous slot?
better in that case just to remove it.
I'm not certain we need threshold either - react component treats that as an app concern.
not sure exactly what the point of the sr text is for this either - it's just a pill container around any text content (guidelines: a number).
2 participants
Summary
<pf-v5-badges><pf-v5-badges>to<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