From a398aea827d4f5cb4827eedc21d867738f9c935b Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Fri, 8 May 2026 14:06:13 -0400 Subject: [PATCH 1/9] feat(badge): add pf-v6-badge element 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 --- elements/package.json | 1 + elements/pf-v6-badge/demo/disabled.html | 12 ++ elements/pf-v6-badge/demo/index.html | 12 ++ elements/pf-v6-badge/demo/read.html | 12 ++ elements/pf-v6-badge/demo/threshold.html | 10 ++ elements/pf-v6-badge/demo/unread.html | 12 ++ elements/pf-v6-badge/pf-v6-badge.css | 58 ++++++++ elements/pf-v6-badge/pf-v6-badge.ts | 72 +++++++++ elements/test/pf-v6-badge.spec.ts | 181 +++++++++++++++++++++++ 9 files changed, 370 insertions(+) create mode 100644 elements/pf-v6-badge/demo/disabled.html create mode 100644 elements/pf-v6-badge/demo/index.html create mode 100644 elements/pf-v6-badge/demo/read.html create mode 100644 elements/pf-v6-badge/demo/threshold.html create mode 100644 elements/pf-v6-badge/demo/unread.html create mode 100644 elements/pf-v6-badge/pf-v6-badge.css create mode 100644 elements/pf-v6-badge/pf-v6-badge.ts create mode 100644 elements/test/pf-v6-badge.spec.ts diff --git a/elements/package.json b/elements/package.json index fe8dda2080..11d9359e77 100644 --- a/elements/package.json +++ b/elements/package.json @@ -18,6 +18,7 @@ "./pf-v5-back-to-top/pf-v5-back-to-top.js": "./pf-v5-back-to-top/pf-v5-back-to-top.js", "./pf-v5-background-image/pf-v5-background-image.js": "./pf-v5-background-image/pf-v5-background-image.js", "./pf-v5-badge/pf-v5-badge.js": "./pf-v5-badge/pf-v5-badge.js", + "./pf-v6-badge/pf-v6-badge.js": "./pf-v6-badge/pf-v6-badge.js", "./pf-v5-banner/pf-v5-banner.js": "./pf-v5-banner/pf-v5-banner.js", "./pf-v5-button/pf-v5-button.js": "./pf-v5-button/pf-v5-button.js", "./pf-v5-card/pf-v5-card.js": "./pf-v5-card/pf-v5-card.js", diff --git a/elements/pf-v6-badge/demo/disabled.html b/elements/pf-v6-badge/demo/disabled.html new file mode 100644 index 0000000000..3e57ccf9e2 --- /dev/null +++ b/elements/pf-v6-badge/demo/disabled.html @@ -0,0 +1,12 @@ +--- +name: Disabled +description: Disabled badges indicate that the associated content or action is currently unavailable. +--- +7 +24 +240 +999+ + + diff --git a/elements/pf-v6-badge/demo/index.html b/elements/pf-v6-badge/demo/index.html new file mode 100644 index 0000000000..b0239ac479 --- /dev/null +++ b/elements/pf-v6-badge/demo/index.html @@ -0,0 +1,12 @@ +--- +name: Read +description: Read badges display a numeric value with read state styling, indicating the content has been viewed. +--- +7 +24 +240 +999+ + + diff --git a/elements/pf-v6-badge/demo/read.html b/elements/pf-v6-badge/demo/read.html new file mode 100644 index 0000000000..b0239ac479 --- /dev/null +++ b/elements/pf-v6-badge/demo/read.html @@ -0,0 +1,12 @@ +--- +name: Read +description: Read badges display a numeric value with read state styling, indicating the content has been viewed. +--- +7 +24 +240 +999+ + + diff --git a/elements/pf-v6-badge/demo/threshold.html b/elements/pf-v6-badge/demo/threshold.html new file mode 100644 index 0000000000..b27ea00fca --- /dev/null +++ b/elements/pf-v6-badge/demo/threshold.html @@ -0,0 +1,10 @@ +--- +name: Threshold +description: A threshold appends a "+" when the numeric value exceeds a set maximum. +--- +400 +900 + + diff --git a/elements/pf-v6-badge/demo/unread.html b/elements/pf-v6-badge/demo/unread.html new file mode 100644 index 0000000000..7e16b908e2 --- /dev/null +++ b/elements/pf-v6-badge/demo/unread.html @@ -0,0 +1,12 @@ +--- +name: Unread +description: Unread badges use a bold, branded style to indicate content that has not yet been viewed. +--- +7 +24 +240 +999+ + + diff --git a/elements/pf-v6-badge/pf-v6-badge.css b/elements/pf-v6-badge/pf-v6-badge.css new file mode 100644 index 0000000000..e158aedfcd --- /dev/null +++ b/elements/pf-v6-badge/pf-v6-badge.css @@ -0,0 +1,58 @@ +:host { + position: relative; + display: inline-block; + min-width: var(--pf-v6-c-badge--MinWidth, + var(--pf-t--global--spacer--xl, 2rem)); + padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart, + var(--pf-t--global--spacer--sm, 0.5rem)); + padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd, + var(--pf-t--global--spacer--sm, 0.5rem)); + font-size: var(--pf-v6-c-badge--FontSize, + var(--pf-t--global--font--size--body--sm, 0.75rem)); + font-weight: var(--pf-v6-c-badge--FontWeight, + var(--pf-t--global--font--weight--body--bold, 700)); + color: var(--pf-v6-c-badge--Color, + var(--pf-t--global--text--color--nonstatus--on-gray--default, #151515)); + text-align: center; + white-space: nowrap; + background-color: var(--pf-v6-c-badge--BackgroundColor, + var(--pf-t--global--color--nonstatus--gray--default, #f0f0f0)); + border-radius: var(--pf-v6-c-badge--BorderRadius, + var(--pf-t--global--border--radius--pill, 180em)); +} + +:host::after { + position: absolute; + inset: 0; + pointer-events: none; + content: ""; + border: var(--pf-v6-c-badge--BorderWidth, + var(--pf-t--global--border--width--regular, 1px)) solid var(--pf-v6-c-badge--BorderColor, transparent); + border-radius: inherit; +} + +:host([state="read"]) { + --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color, + var(--pf-t--global--text--color--nonstatus--on-gray--default, #151515)); + --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor, + var(--pf-t--global--color--nonstatus--gray--default, #f0f0f0)); + --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor, + var(--pf-t--global--border--color--high-contrast, #151515)); +} + +:host([state="unread"]) { + --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color, + var(--pf-t--global--text--color--on-brand--default, #fff)); + --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor, + var(--pf-t--global--color--brand--default, #06c)); +} + +:host([disabled]) { + --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color, + var(--pf-t--global--text--color--on-disabled, #6a6e73)); + --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor, + var(--pf-t--global--background--color--disabled--default, #d2d2d2)); + --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-disabled--BorderColor, + var(--pf-t--global--border--color--disabled, #d2d2d2)); + pointer-events: none; +} diff --git a/elements/pf-v6-badge/pf-v6-badge.ts b/elements/pf-v6-badge/pf-v6-badge.ts new file mode 100644 index 0000000000..2492456c14 --- /dev/null +++ b/elements/pf-v6-badge/pf-v6-badge.ts @@ -0,0 +1,72 @@ +import { LitElement, html, type TemplateResult } from 'lit'; +import { customElement } from 'lit/decorators/custom-element.js'; +import { property } from 'lit/decorators/property.js'; + +import styles from './pf-v6-badge.css'; + +export type BadgeState = 'unread' | 'read'; + +/** + * 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 {} --pf-v6-c-badge--Color - Text color of the badge + * @cssprop {} --pf-v6-c-badge--BackgroundColor - Background color of the badge + * @cssprop {} --pf-v6-c-badge--BorderColor - Border color of the badge + * @cssprop {} --pf-v6-c-badge--BorderWidth - Border width of the badge + * @cssprop {} --pf-v6-c-badge--BorderRadius - Border radius of the badge + * @cssprop {} --pf-v6-c-badge--MinWidth - Minimum width of the badge + * @cssprop {} --pf-v6-c-badge--PaddingInlineStart - Inline start padding + * @cssprop {} --pf-v6-c-badge--PaddingInlineEnd - Inline end padding + * @cssprop {} --pf-v6-c-badge--FontSize - Font size of the badge text + * @cssprop {} --pf-v6-c-badge--FontWeight - Font weight of the badge text + * @cssprop {} --pf-v6-c-badge--m-read--Color - Text color in read state + * @cssprop {} --pf-v6-c-badge--m-read--BackgroundColor - Background color in read state + * @cssprop {} --pf-v6-c-badge--m-read--BorderColor - Border color in read state + * @cssprop {} --pf-v6-c-badge--m-unread--Color - Text color in unread state + * @cssprop {} --pf-v6-c-badge--m-unread--BackgroundColor - Background color in unread state + * @cssprop {} --pf-v6-c-badge--m-disabled--Color - Text color when disabled + * @cssprop {} --pf-v6-c-badge--m-disabled--BackgroundColor - Background color when disabled + * @cssprop {} --pf-v6-c-badge--m-disabled--BorderColor - Border color when disabled + */ +@customElement('pf-v6-badge') +export class PfV6Badge extends LitElement { + static readonly styles = [styles]; + + /** + * Denotes the state-of-affairs this badge represents. + */ + @property({ reflect: true }) state?: BadgeState; + + /** + * Sets a numeric value for a badge. + * + * You can pair it with `threshold` attribute to add a `+` sign + * if the number exceeds the threshold value. + */ + @property({ reflect: true, type: Number }) number?: number; + + /** + * Sets a threshold for the numeric value and adds `+` sign if + * the numeric value exceeds the threshold value. + */ + @property({ reflect: true, type: Number }) threshold?: number; + + /** Disables the badge */ + @property({ type: Boolean, reflect: true }) disabled = false; + + override render(): TemplateResult<1> { + const { threshold, number } = this; + const displayText = + (threshold && number && (threshold < number)) ? `${threshold.toString()}+` + : (number != null) ? number.toString() + : ''; + return html`${!displayText ? html`` : displayText}`; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'pf-v6-badge': PfV6Badge; + } +} diff --git a/elements/test/pf-v6-badge.spec.ts b/elements/test/pf-v6-badge.spec.ts new file mode 100644 index 0000000000..ad2dee0e5b --- /dev/null +++ b/elements/test/pf-v6-badge.spec.ts @@ -0,0 +1,181 @@ +import { expect, html } from '@open-wc/testing'; +import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js'; +import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js'; +import { getColor, hexToRgb } from '@patternfly/pfe-tools/test/hex-to-rgb.js'; +import { PfV6Badge } from '@patternfly/elements/pf-v6-badge/pf-v6-badge.js'; + +describe('', function() { + it('imperatively instantiates', function() { + expect(document.createElement('pf-v6-badge')).to.be.an.instanceof(PfV6Badge); + }); + + it('should upgrade', async function() { + const el = await createFixture(html`10`); + expect(el) + .to.be.an.instanceOf(customElements.get('pf-v6-badge')) + .and + .to.be.an.instanceOf(PfV6Badge); + }); + + describe('with number attribute', function() { + let element: PfV6Badge; + + beforeEach(async function() { + element = await createFixture(html` + 100 + `); + await element.updateComplete; + }); + + it('should have the number property set', function() { + expect(element.number).to.equal(100); + }); + + it('should be visible in the accessibility tree', async function() { + const snapshot = await a11ySnapshot(); + expect(snapshot.children?.length).to.be.greaterThan(0); + const badgeNode = snapshot.children?.find( + (child: { name?: string }) => child.name?.includes('100') + ); + expect(badgeNode).to.exist; + }); + }); + + describe('with number exceeding threshold', function() { + let element: PfV6Badge; + + beforeEach(async function() { + element = await createFixture(html` + 900 + `); + await element.updateComplete; + }); + + it('should display threshold with "+" in the accessibility tree', async function() { + const snapshot = await a11ySnapshot(); + const badgeNode = snapshot.children?.find( + (child: { name?: string }) => child.name?.includes('100+') + ); + expect(badgeNode).to.exist; + }); + }); + + describe('with number below threshold', function() { + let element: PfV6Badge; + + beforeEach(async function() { + element = await createFixture(html` + 50 + `); + await element.updateComplete; + }); + + it('should display the number without "+" in the accessibility tree', async function() { + const snapshot = await a11ySnapshot(); + const badgeNode = snapshot.children?.find( + (child: { name?: string }) => + child.name?.includes('50') && !child.name?.includes('+') + ); + expect(badgeNode).to.exist; + }); + }); + + describe('without state attribute', function() { + let element: PfV6Badge; + + beforeEach(async function() { + element = await createFixture(html` + 10 + `); + await element.updateComplete; + }); + + it('should display default background color', function() { + const [r, g, b] = getColor(element, 'background-color'); + expect([r, g, b]).to.deep.equal(hexToRgb('#f0f0f0')); + }); + }); + + describe('with state="read"', function() { + let element: PfV6Badge; + + beforeEach(async function() { + element = await createFixture(html` + 10 + `); + await element.updateComplete; + }); + + it('should display read background color', function() { + const [r, g, b] = getColor(element, 'background-color'); + expect([r, g, b]).to.deep.equal(hexToRgb('#f0f0f0')); + }); + }); + + describe('with state="unread"', function() { + let element: PfV6Badge; + + beforeEach(async function() { + element = await createFixture(html` + 10 + `); + await element.updateComplete; + }); + + it('should display unread background color', function() { + const [r, g, b] = getColor(element, 'background-color'); + expect([r, g, b]).to.deep.equal(hexToRgb('#0066cc')); + }); + + it('should display unread text color', function() { + const [r, g, b] = getColor(element, 'color'); + expect([r, g, b]).to.deep.equal(hexToRgb('#ffffff')); + }); + }); + + describe('with disabled attribute', function() { + let element: PfV6Badge; + + beforeEach(async function() { + element = await createFixture(html` + 10 + `); + await element.updateComplete; + }); + + it('should display disabled background color', function() { + const [r, g, b] = getColor(element, 'background-color'); + expect([r, g, b]).to.deep.equal(hexToRgb('#d2d2d2')); + }); + + it('should have pointer-events: none', function() { + const styles = getComputedStyle(element); + expect(styles.pointerEvents).to.equal('none'); + }); + }); + + describe('accessibility', function() { + it('should contain text in the accessibility tree', async function() { + await createFixture(html` + 10 + `); + const snapshot = await a11ySnapshot(); + expect(snapshot.children?.length).to.be.greaterThan(0); + }); + }); + + describe('slot content', function() { + let element: PfV6Badge; + + beforeEach(async function() { + element = await createFixture(html` + Custom Text + `); + await element.updateComplete; + }); + + it('should display slotted text content when no number is set', function() { + expect(element.textContent?.trim()).to.equal('Custom Text'); + }); + }); +}); From 4b6f72826973cc640289af87ce60ee1d4f63db54 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Fri, 8 May 2026 15:28:56 -0400 Subject: [PATCH 2/9] fix(badge): apply review fixes - 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 --- .config/cem.yaml | 1 + elements/pf-v6-badge/pf-v6-badge.ts | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/.config/cem.yaml b/.config/cem.yaml index febc90fcec..86f5f070a6 100644 --- a/.config/cem.yaml +++ b/.config/cem.yaml @@ -1,5 +1,6 @@ sourceControlRootUrl: https://github.com/patternfly/patternfly-elements/tree/main/ generate: + output: ./elements/custom-elements.json files: - ./elements/*/*.ts - ./core/*/*.ts diff --git a/elements/pf-v6-badge/pf-v6-badge.ts b/elements/pf-v6-badge/pf-v6-badge.ts index 2492456c14..50bcd55173 100644 --- a/elements/pf-v6-badge/pf-v6-badge.ts +++ b/elements/pf-v6-badge/pf-v6-badge.ts @@ -44,21 +44,21 @@ export class PfV6Badge extends LitElement { * You can pair it with `threshold` attribute to add a `+` sign * if the number exceeds the threshold value. */ - @property({ reflect: true, type: Number }) number?: number; + @property({ type: Number }) number?: number; /** * Sets a threshold for the numeric value and adds `+` sign if * the numeric value exceeds the threshold value. */ - @property({ reflect: true, type: Number }) threshold?: number; + @property({ type: Number }) threshold?: number; /** Disables the badge */ @property({ type: Boolean, reflect: true }) disabled = false; - override render(): TemplateResult<1> { + override render(): TemplateResult { const { threshold, number } = this; const displayText = - (threshold && number && (threshold < number)) ? `${threshold.toString()}+` + (threshold && number && (threshold <= number)) ? `${threshold.toString()}+` : (number != null) ? number.toString() : ''; return html`${!displayText ? html`` : displayText}`; From 4253b926e62542166f42e1c2ef718e5fe3687574 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Fri, 8 May 2026 15:49:23 -0400 Subject: [PATCH 3/9] test(badge): move test to element directory --- elements/pf-v6-badge/pf-v6-badge.ts | 2 +- elements/{ => pf-v6-badge}/test/pf-v6-badge.spec.ts | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename elements/{ => pf-v6-badge}/test/pf-v6-badge.spec.ts (100%) diff --git a/elements/pf-v6-badge/pf-v6-badge.ts b/elements/pf-v6-badge/pf-v6-badge.ts index 50bcd55173..e22a11ee9c 100644 --- a/elements/pf-v6-badge/pf-v6-badge.ts +++ b/elements/pf-v6-badge/pf-v6-badge.ts @@ -31,7 +31,7 @@ export type BadgeState = 'unread' | 'read'; */ @customElement('pf-v6-badge') export class PfV6Badge extends LitElement { - static readonly styles = [styles]; + static readonly styles: CSSStyleSheet[] = [styles]; /** * Denotes the state-of-affairs this badge represents. diff --git a/elements/test/pf-v6-badge.spec.ts b/elements/pf-v6-badge/test/pf-v6-badge.spec.ts similarity index 100% rename from elements/test/pf-v6-badge.spec.ts rename to elements/pf-v6-badge/test/pf-v6-badge.spec.ts From 3a4af73fbece2c80b62ceb051aa70c9d5aa8a99b Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Fri, 8 May 2026 16:01:27 -0400 Subject: [PATCH 4/9] docs(badge): correct index demo to simplest --- elements/pf-v6-badge/demo/index.html | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/elements/pf-v6-badge/demo/index.html b/elements/pf-v6-badge/demo/index.html index b0239ac479..418d93581a 100644 --- a/elements/pf-v6-badge/demo/index.html +++ b/elements/pf-v6-badge/demo/index.html @@ -1,11 +1,8 @@ --- -name: Read -description: Read badges display a numeric value with read state styling, indicating the content has been viewed. +name: Basic +description: A basic badge displays a numeric value. --- -7 -24 -240 -999+ +7 -``` - -Or, if you are using [NPM](https://npm.im), install it - -```bash -npm install @patternfly/elements -``` - -Then once installed, import it to your application: - -```js -import '@patternfly/elements/pf-v5-badge/pf-v5-badge.js'; -``` - -## Usage - -```html -
- 2 -
-``` - -Please refer to the [specification](https://www.w3.org/TR/wai-aria/#aria-label) for additional details. - -With the `threshold` attribute: - -```html -
- 1 - 17 - 900 -
-``` - -With two state options for the `state` attribute: - -```html -
- 10 - 20 -
-``` - diff --git a/elements/pf-v5-badge/demo/index.html b/elements/pf-v5-badge/demo/index.html deleted file mode 100644 index 0976ef0f30..0000000000 --- a/elements/pf-v5-badge/demo/index.html +++ /dev/null @@ -1,12 +0,0 @@ -
- 613 -
- - - diff --git a/elements/pf-v5-badge/demo/read.html b/elements/pf-v5-badge/demo/read.html deleted file mode 100644 index d8f5029bcc..0000000000 --- a/elements/pf-v5-badge/demo/read.html +++ /dev/null @@ -1,15 +0,0 @@ -
- 7 - 24 - 240 - 999 -
- - - diff --git a/elements/pf-v5-badge/demo/threshold.html b/elements/pf-v5-badge/demo/threshold.html deleted file mode 100644 index 2132e3679a..0000000000 --- a/elements/pf-v5-badge/demo/threshold.html +++ /dev/null @@ -1,16 +0,0 @@ -
- 400 - 900 -

In this demo, the threshold is set to 500. - It should add '+' sign if the value exceeds the threshold. - It shouldn't add a '+' sign if the value doesn't exceed the threshold

-
- - - diff --git a/elements/pf-v5-badge/demo/unread.html b/elements/pf-v5-badge/demo/unread.html deleted file mode 100644 index 826b244593..0000000000 --- a/elements/pf-v5-badge/demo/unread.html +++ /dev/null @@ -1,15 +0,0 @@ -
- 7 - 24 - 240 - 999 -
- - - diff --git a/elements/pf-v5-badge/docs/CHANGELOG.old.md b/elements/pf-v5-badge/docs/CHANGELOG.old.md deleted file mode 100644 index e3d18c1936..0000000000 --- a/elements/pf-v5-badge/docs/CHANGELOG.old.md +++ /dev/null @@ -1,62 +0,0 @@ -# @patternfly/pfe-badge - -## 2.0.0-next.4 - -### Patch Changes - -- 5bc0a5ad: Made `state` property on `BaseBadge` abstract. - -## 2.0.0-next.3 - -### Major Changes - -- 686c01e2: Rewrote `` to more closely implement the PatternFly v4 spec. This includes component API changes, but HTML implementation remains the same. - - ```html - 7 - ``` - - ```html - 7 - ``` - - #### Updates - - - Options for the `state` attribute have changed to `read` and `unread`. - - `pfe` Sass variables were replaced by `--pf-*` css variables. - -## 2.0.0-next.2 - -### Patch Changes - -- bfad8b4b: Updates dependencies -- Updated dependencies [bfad8b4b] - - @patternfly/pfe-core@2.0.0-next.8 - -## 2.0.0-next.1 - -### Patch Changes - -- 447b2d75: Remove `esbuild` export condition, as this anyways was a runtime error -- Updated dependencies [447b2d75] - - @patternfly/pfe-core@2.0.0-next.3 - -## 2.0.0-next.0 - -### Major Changes - -- e4a76fb2: ## 🔥 Migrate to Lit - - This release migrates `` to LitElement. - - ### Breaking Changes - - - Initial render is now [asynchronous](https://lit.dev/docs/components/lifecycle/#reactive-update-cycle). - If your code assumes that shadow DOM is ready once the element is constructed, update it to `await element.updateComplete`; - - See [docs](https://patternflyelements.org/components/badge/) for more info - -### Patch Changes - -- Updated dependencies [e8788c72] - - @patternfly/pfe-core@2.0.0-next.0 diff --git a/elements/pf-v5-badge/docs/pf-v5-badge.md b/elements/pf-v5-badge/docs/pf-v5-badge.md deleted file mode 100644 index 02d5080fdc..0000000000 --- a/elements/pf-v5-badge/docs/pf-v5-badge.md +++ /dev/null @@ -1,43 +0,0 @@ -{% renderInstallation %} {% endrenderInstallation %} - -{% renderOverview %} - 17 - 900 - 10 -{% endrenderOverview %} - -{% band header="Usage" %} - To provide context to your badge, it is highly encouraged that you also include an `aria-label` attribute in your markup. - - ### Default - {% htmlexample %} - 2 - {% endhtmlexample %} - - ### With a threshold - This adds a "+" next to the number once the threshold value has been passed. - - {% htmlexample %} - 20 - {% endhtmlexample %} - - ### With a state - This adds a background color to the badge based on the state. - - {% htmlexample %} - 10 - 20 - {% endhtmlexample %} -{% endband %} - -{% renderSlots %}{% endrenderSlots %} - -{% renderAttributes %}{% endrenderAttributes %} - -{% renderMethods %}{% endrenderMethods %} - -{% renderEvents %}{% endrenderEvents %} - -{% renderCssCustomProperties %}{% endrenderCssCustomProperties %} - -{% renderCssParts %}{% endrenderCssParts %} diff --git a/elements/pf-v5-badge/docs/screenshot.png b/elements/pf-v5-badge/docs/screenshot.png deleted file mode 100644 index 0d28220ba3c95a379141e134d7438e9f2c31a405..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8955 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 WHjY~ujl$p|Nam%&i(+vDzyAVX1UD1_ diff --git a/elements/pf-v5-badge/pf-v5-badge.css b/elements/pf-v5-badge/pf-v5-badge.css deleted file mode 100644 index 732ed346ca..0000000000 --- a/elements/pf-v5-badge/pf-v5-badge.css +++ /dev/null @@ -1,51 +0,0 @@ -:host { - position: relative; - white-space: nowrap; - text-align: center; - display: inline-block; - /** Border radius for badge */ - border-radius: var(--pf-v5-c-badge--BorderRadius, - var(--pf-global--BorderRadius--lg, 180em)); - /** Minimum width for badge */ - min-width: var(--pf-v5-c-badge--MinWidth, - var(--pf-global--spacer--xl, 2rem)); - /** Left padding for badge */ - padding-left: var(--pf-v5-c-badge--PaddingLeft, - var(--pf-global--spacer--sm, 0.5rem)); - /** Right padding for badge */ - padding-right: var(--pf-v5-c-badge--PaddingRight, - var(--pf-global--spacer--sm, 0.5rem)); - /** Font size for badge */ - font-size: var(--pf-v5-c-badge--FontSize, - var(--pf-v5-theme--font-size, 0.75em)); - /** Font weight for badge */ - font-weight: var(--pf-v5-c-badge--FontWeight, - var(--pf-v5-theme--font-weight--bold, 700)); - /** Line height for badge */ - line-height: var(--pf-v5-c-badge--LineHeight, - var(--pf-global--LineHeight--md, 1.5)); - /** Color for badge */ - color: var(--pf-v5-c-badge--Color, - var(--pf-global--palette--black-900, #151515)); - /** Background color for badge */ - background-color: var(--pf-v5-c-badge--BackgroundColor, - var(--pf-global--palette--black-200, #f0f0f0)); -} - -:host([state="read"]) { - /** Color for read badge */ - --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-read--Color, - var(--pf-global--palette--black-900, #151515)); - /** Background color for read badge */ - --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor, - var(--pf-global--palette--black-200, #f0f0f0)); -} - -:host([state="unread"]) { - /** Color for unread badge */ - --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-unread--Color, - var(--pf-global--palette--white, #fff)); - /** Background color for unread badge */ - --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-unread--BackgroundColor, - var(--pf-global--palette--blue-400, #06c)); -} diff --git a/elements/pf-v5-badge/pf-v5-badge.ts b/elements/pf-v5-badge/pf-v5-badge.ts deleted file mode 100644 index b2fd42a183..0000000000 --- a/elements/pf-v5-badge/pf-v5-badge.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { LitElement, html, type TemplateResult } from 'lit'; -import { customElement } from 'lit/decorators/custom-element.js'; -import { property } from 'lit/decorators/property.js'; - -import styles from './pf-v5-badge.css'; - -/** - * A **badge** is used to annotate other information like a label or an object name. - * @alias Badge - */ - - -@customElement('pf-v5-badge') -export class PfV5Badge extends LitElement { - static readonly styles: CSSStyleSheet[] = [styles]; - - /** - * Denotes the state-of-affairs this badge represents - * Options include read and unread - */ - @property({ reflect: true }) state?: 'unread' | 'read'; - - /** - * Sets a numeric value for a badge. - * - * You can pair it with `threshold` attribute to add a `+` sign - * if the number exceeds the threshold value. - */ - @property({ reflect: true, type: Number }) number?: number; - - /** - * Sets a threshold for the numeric value and adds `+` sign if - * the numeric value exceeds the threshold value. - */ - @property({ reflect: true, type: Number }) threshold?: number; - - override render(): TemplateResult<1> { - const { threshold, number, textContent } = this; - const displayText = - (threshold && number && (threshold < number)) ? `${threshold.toString()}+` - : (number != null) ? number.toString() - : textContent ?? ''; - return html` - ${displayText} - `; - } -} - -declare global { - interface HTMLElementTagNameMap { - 'pf-v5-badge': PfV5Badge; - } -} diff --git a/elements/pf-v5-badge/test/pf-badge.e2e.ts b/elements/pf-v5-badge/test/pf-badge.e2e.ts deleted file mode 100644 index cbf4e4d311..0000000000 --- a/elements/pf-v5-badge/test/pf-badge.e2e.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { test } from '@playwright/test'; -import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js'; -import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js'; - -const tagName = 'pf-v5-badge'; - -test.describe(tagName, () => { - test('snapshot', async ({ page }) => { - const componentPage = new PfeDemoPage(page, tagName); - await componentPage.navigate(); - await componentPage.snapshot(); - }); - - test('ssr', async ({ browser }) => { - const fixture = new SSRPage({ - tagName, - browser, - demoDir: new URL('../demo/', import.meta.url), - importSpecifiers: [ - `@patternfly/elements/${tagName}/${tagName}.js`, - ], - }); - await fixture.snapshots(); - }); -}); diff --git a/elements/pf-v5-badge/test/pf-badge.spec.ts b/elements/pf-v5-badge/test/pf-badge.spec.ts deleted file mode 100644 index 5eb0726cb2..0000000000 --- a/elements/pf-v5-badge/test/pf-badge.spec.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { expect, html, nextFrame } from '@open-wc/testing'; -import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js'; -import { hexToRgb, getColor } from '@patternfly/pfe-tools/test/hex-to-rgb.js'; -import { PfV5Badge } from '@patternfly/elements/pf-v5-badge/pf-v5-badge.js'; - -// Background colors for the various states -const states = { - default: '#f0f0f0', - read: '#f0f0f0', - unread: '#0066cc', -}; - -const element = html`10`; - -describe('', function() { - it('imperatively instantiates', function() { - expect(document.createElement('pf-v5-badge')).to.be.an.instanceof(PfV5Badge); - }); - - it('should upgrade', async function() { - const el = await createFixture(element); - expect(el, 'pf-v5-badge should be an instance of PfV5Badge') - .to.be.an - .instanceOf(customElements.get('pf-v5-badge')) - .and - .to.be.an.instanceof(PfV5Badge); - }); - - it('should display text equivalent to the number attribute', async function() { - const el = await createFixture(html`10`); - await nextFrame(); - expect(el.shadowRoot!.querySelector('span')!.textContent).to.equal('100'); - }); - - it('should add \'+\' sign if the value exceeds the threshold', async function() { - const el = await createFixture(html`900`); - await nextFrame(); - expect(el.shadowRoot!.querySelector('span')!.textContent).to.equal('100+'); - }); - - it('shouldn\'t add a \'+\' sign if the value doesn\'t exceed the threshold', async function() { - const el = await createFixture(html`900`); - await el.updateComplete; - expect(el.textContent).to.equal('900'); - expect(el.shadowRoot!.querySelector('span')!.textContent).to.equal('900'); - }); - - // This is the one that created an error: - Object.entries(states).forEach(([state, color]) => { - it(`should have a background color of '${color}' when state is ${state}`, async function() { - const el = await createFixture(element); - - if (state !== 'default') { - el.setAttribute('state', state); - } - - const [r, g, b] = getColor(el, 'background-color'); - expect([r, g, b]).to.deep.equal(hexToRgb(color)); - }); - }); -}); From c9a849a68c5adde36040fbfcbb3674361c1a3782 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Wed, 13 May 2026 13:13:50 -0400 Subject: [PATCH 6/9] chore: replace pf-v5-badge refs with pf-v6-badge refs --- elements/pf-v5-select/pf-v5-select.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/elements/pf-v5-select/pf-v5-select.ts b/elements/pf-v5-select/pf-v5-select.ts index eda637b4c6..b7fafc5559 100644 --- a/elements/pf-v5-select/pf-v5-select.ts +++ b/elements/pf-v5-select/pf-v5-select.ts @@ -216,7 +216,7 @@ export class PfV5Select extends LitElement { ${this.#buttonLabel}${!hasBadge ? '' : html` - ${selectedOptions.length} + ${selectedOptions.length} `} Date: Wed, 13 May 2026 13:14:40 -0400 Subject: [PATCH 7/9] fix(badge): correct jsdoc to cem format documentation --- elements/pf-v6-badge/pf-v6-badge.css | 105 ++++++++++++++++++--------- elements/pf-v6-badge/pf-v6-badge.ts | 21 +----- 2 files changed, 72 insertions(+), 54 deletions(-) diff --git a/elements/pf-v6-badge/pf-v6-badge.css b/elements/pf-v6-badge/pf-v6-badge.css index e158aedfcd..5acc5dad8b 100644 --- a/elements/pf-v6-badge/pf-v6-badge.css +++ b/elements/pf-v6-badge/pf-v6-badge.css @@ -1,24 +1,40 @@ :host { position: relative; display: inline-block; - min-width: var(--pf-v6-c-badge--MinWidth, - var(--pf-t--global--spacer--xl, 2rem)); - padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart, - var(--pf-t--global--spacer--sm, 0.5rem)); - padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd, - var(--pf-t--global--spacer--sm, 0.5rem)); - font-size: var(--pf-v6-c-badge--FontSize, - var(--pf-t--global--font--size--body--sm, 0.75rem)); - font-weight: var(--pf-v6-c-badge--FontWeight, - var(--pf-t--global--font--weight--body--bold, 700)); - color: var(--pf-v6-c-badge--Color, - var(--pf-t--global--text--color--nonstatus--on-gray--default, #151515)); + min-width: + /** Minimum width of the badge */ + var(--pf-v6-c-badge--MinWidth, + var(--pf-t--global--spacer--xl, 2rem)); + padding-inline-start: + /** Inline start padding */ + var(--pf-v6-c-badge--PaddingInlineStart, + var(--pf-t--global--spacer--sm, 0.5rem)); + padding-inline-end: + /** Inline end padding */ + var(--pf-v6-c-badge--PaddingInlineEnd, + var(--pf-t--global--spacer--sm, 0.5rem)); + font-size: + /** Font size of the badge text */ + var(--pf-v6-c-badge--FontSize, + var(--pf-t--global--font--size--body--sm, 0.75rem)); + font-weight: + /** Font weight of the badge text */ + var(--pf-v6-c-badge--FontWeight, + var(--pf-t--global--font--weight--body--bold, 700)); + color: + /** Text color of the badge */ + var(--pf-v6-c-badge--Color, + var(--pf-t--global--text--color--nonstatus--on-gray--default, #151515)); text-align: center; white-space: nowrap; - background-color: var(--pf-v6-c-badge--BackgroundColor, - var(--pf-t--global--color--nonstatus--gray--default, #f0f0f0)); - border-radius: var(--pf-v6-c-badge--BorderRadius, - var(--pf-t--global--border--radius--pill, 180em)); + background-color: + /** Background color of the badge */ + var(--pf-v6-c-badge--BackgroundColor, + var(--pf-t--global--color--nonstatus--gray--default, #f0f0f0)); + border-radius: + /** Border radius of the badge */ + var(--pf-v6-c-badge--BorderRadius, + var(--pf-t--global--border--radius--pill, 180em)); } :host::after { @@ -26,33 +42,54 @@ inset: 0; pointer-events: none; content: ""; - border: var(--pf-v6-c-badge--BorderWidth, - var(--pf-t--global--border--width--regular, 1px)) solid var(--pf-v6-c-badge--BorderColor, transparent); + border: + /** Border width of the badge */ + var(--pf-v6-c-badge--BorderWidth, + var(--pf-t--global--border--width--regular, 1px)) + solid + /** Border color of the badge */ + var(--pf-v6-c-badge--BorderColor, transparent); border-radius: inherit; } :host([state="read"]) { - --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color, - var(--pf-t--global--text--color--nonstatus--on-gray--default, #151515)); - --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor, - var(--pf-t--global--color--nonstatus--gray--default, #f0f0f0)); - --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor, - var(--pf-t--global--border--color--high-contrast, #151515)); + --pf-v6-c-badge--Color: + /** Text color in read state */ + var(--pf-v6-c-badge--m-read--Color, + var(--pf-t--global--text--color--nonstatus--on-gray--default, #151515)); + --pf-v6-c-badge--BackgroundColor: + /** Background color in read state */ + var(--pf-v6-c-badge--m-read--BackgroundColor, + var(--pf-t--global--color--nonstatus--gray--default, #f0f0f0)); + --pf-v6-c-badge--BorderColor: + /** Border color in read state */ + var(--pf-v6-c-badge--m-read--BorderColor, + var(--pf-t--global--border--color--high-contrast, #151515)); } :host([state="unread"]) { - --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color, - var(--pf-t--global--text--color--on-brand--default, #fff)); - --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor, - var(--pf-t--global--color--brand--default, #06c)); + --pf-v6-c-badge--Color: + /** Text color in unread state */ + var(--pf-v6-c-badge--m-unread--Color, + var(--pf-t--global--text--color--on-brand--default, #fff)); + --pf-v6-c-badge--BackgroundColor: + /** Background color in unread state */ + var(--pf-v6-c-badge--m-unread--BackgroundColor, + var(--pf-t--global--color--brand--default, #06c)); } :host([disabled]) { - --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color, - var(--pf-t--global--text--color--on-disabled, #6a6e73)); - --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor, - var(--pf-t--global--background--color--disabled--default, #d2d2d2)); - --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-disabled--BorderColor, - var(--pf-t--global--border--color--disabled, #d2d2d2)); + --pf-v6-c-badge--Color: + /** Text color when disabled */ + var(--pf-v6-c-badge--m-disabled--Color, + var(--pf-t--global--text--color--on-disabled, #6a6e73)); + --pf-v6-c-badge--BackgroundColor: + /** Background color when disabled */ + var(--pf-v6-c-badge--m-disabled--BackgroundColor, + var(--pf-t--global--background--color--disabled--default, #d2d2d2)); + --pf-v6-c-badge--BorderColor: + /** Border color when disabled */ + var(--pf-v6-c-badge--m-disabled--BorderColor, + var(--pf-t--global--border--color--disabled, #d2d2d2)); pointer-events: none; } diff --git a/elements/pf-v6-badge/pf-v6-badge.ts b/elements/pf-v6-badge/pf-v6-badge.ts index e22a11ee9c..34742a9d2c 100644 --- a/elements/pf-v6-badge/pf-v6-badge.ts +++ b/elements/pf-v6-badge/pf-v6-badge.ts @@ -9,25 +9,6 @@ export type BadgeState = 'unread' | 'read'; /** * 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 {} --pf-v6-c-badge--Color - Text color of the badge - * @cssprop {} --pf-v6-c-badge--BackgroundColor - Background color of the badge - * @cssprop {} --pf-v6-c-badge--BorderColor - Border color of the badge - * @cssprop {} --pf-v6-c-badge--BorderWidth - Border width of the badge - * @cssprop {} --pf-v6-c-badge--BorderRadius - Border radius of the badge - * @cssprop {} --pf-v6-c-badge--MinWidth - Minimum width of the badge - * @cssprop {} --pf-v6-c-badge--PaddingInlineStart - Inline start padding - * @cssprop {} --pf-v6-c-badge--PaddingInlineEnd - Inline end padding - * @cssprop {} --pf-v6-c-badge--FontSize - Font size of the badge text - * @cssprop {} --pf-v6-c-badge--FontWeight - Font weight of the badge text - * @cssprop {} --pf-v6-c-badge--m-read--Color - Text color in read state - * @cssprop {} --pf-v6-c-badge--m-read--BackgroundColor - Background color in read state - * @cssprop {} --pf-v6-c-badge--m-read--BorderColor - Border color in read state - * @cssprop {} --pf-v6-c-badge--m-unread--Color - Text color in unread state - * @cssprop {} --pf-v6-c-badge--m-unread--BackgroundColor - Background color in unread state - * @cssprop {} --pf-v6-c-badge--m-disabled--Color - Text color when disabled - * @cssprop {} --pf-v6-c-badge--m-disabled--BackgroundColor - Background color when disabled - * @cssprop {} --pf-v6-c-badge--m-disabled--BorderColor - Border color when disabled */ @customElement('pf-v6-badge') export class PfV6Badge extends LitElement { @@ -61,7 +42,7 @@ export class PfV6Badge extends LitElement { (threshold && number && (threshold <= number)) ? `${threshold.toString()}+` : (number != null) ? number.toString() : ''; - return html`${!displayText ? html`` : displayText}`; + return html`${!displayText ? html`` : displayText}`; } } From 54dd0e88b787ad4b20255b24334a8fd513aae2d8 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Wed, 13 May 2026 14:00:51 -0400 Subject: [PATCH 8/9] chore: add changeset --- .changeset/forty-ties-crash.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 .changeset/forty-ties-crash.md diff --git a/.changeset/forty-ties-crash.md b/.changeset/forty-ties-crash.md new file mode 100644 index 0000000000..1e46cebaa8 --- /dev/null +++ b/.changeset/forty-ties-crash.md @@ -0,0 +1,20 @@ +--- +"@patternfly/elements": major +--- + +✨ Added `` replacing ``. Badge now follows +PatternFly v6 design specs. + +```html +7 +``` + +** Breaking Changes from v5 ** + +- Renamed tag from `` to `` +- ✨ Added `disabled` attribute +- ✨ Added v6 design tokens and `color-scheme` support via `light-dark()` +- CSS custom properties renamed from `--pf-v5-c-badge--*` to `--pf-v6-c-badge--*` +- `threshold` comparison changed from < to <= (now shows + when number equals +threshold) +- `number` and `threshold` no longer reflect to attributes From deb4a0fe584dd163720edb524eb9c279a3168836 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Thu, 14 May 2026 12:16:54 -0400 Subject: [PATCH 9/9] docs(badge): add README.md --- elements/pf-v6-badge/README.md | 54 ++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 elements/pf-v6-badge/README.md diff --git a/elements/pf-v6-badge/README.md b/elements/pf-v6-badge/README.md new file mode 100644 index 0000000000..99cf9cf053 --- /dev/null +++ b/elements/pf-v6-badge/README.md @@ -0,0 +1,54 @@ +# Badge + +A badge is used to annotate other information like a label or an object name. + +## Usage + +### Basic badge with a number + +```html + +``` + +### Read badge with threshold + +```html + +``` + +### Badge with slotted content + +```html +New +``` + +## Divergences from React `Badge` + +### Not implemented + +| React prop | Notes | +| --- | --- | +| `screenReaderText` | No built-in screen reader text span. Authors should provide their own visually-hidden text adjacent to the badge. | + +### Changed API + +| React prop | Web component | Difference | +| --- | --- | --- | +| `isRead` | `state` attribute | Boolean replaced with `'read' \| 'unread'` enum. Omitting `state` gives neutral styling (no read/unread indication). | + +### Added + +| Web component API | Notes | +| --- | --- | +| `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. | +| `--pf-v6-c-badge--PaddingInlineStart` | Inline start padding. | +| `--pf-v6-c-badge--PaddingInlineEnd` | Inline end padding. | +| `--pf-v6-c-badge--FontSize` | Font size of the badge text. | +| `--pf-v6-c-badge--FontWeight` | Font weight of the badge text. | +| `--pf-v6-c-badge--Color` | Text color of the badge. | +| `--pf-v6-c-badge--BackgroundColor` | Background color of the badge. | +| `--pf-v6-c-badge--BorderRadius` | Border radius of the badge. | +| `--pf-v6-c-badge--BorderWidth` | Border width of the badge. | +| `--pf-v6-c-badge--BorderColor` | Border color of the badge. |