Skip to content

feat: update pf-v6-label element #3161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
markcaron wants to merge 3 commits into
base: staging/pfv6
Choose a base branch
from
Open

feat: update pf-v6-label element #3161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
307a169
feat: update pf-v6-label element
markcaron Aug 13, 2026
2417989
chore: fixing CI issues
markcaron Aug 13, 2026
746e768
feat: fix icons and hover styles. fix import issue in pfv5-label-group
markcaron Aug 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/main.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import '@patternfly/elements/pf-v5-helper-text/pf-v5-helper-text.js';
import '@patternfly/elements/pf-v5-hint/pf-v5-hint.js';
import '@patternfly/elements/pf-v5-jump-links/pf-v5-jump-links.js';
import '@patternfly/elements/pf-v5-label-group/pf-v5-label-group.js';
import '@patternfly/elements/pf-v5-label/pf-v5-label.js';
import '@patternfly/elements/pf-v6-label/pf-v6-label.js';
import '@patternfly/elements/pf-v5-modal/pf-v5-modal.js';
import '@patternfly/elements/pf-v5-panel/pf-v5-panel.js';
import '@patternfly/elements/pf-v5-popover/pf-v5-popover.js';
Expand Down
10 changes: 5 additions & 5 deletions elements/pf-v5-label-group/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,17 +30,17 @@ import '@patternfly/elements/pf-v5-label-group/pf-v5-label-group.js';

```html
<pf-v5-label-group>
<pf-v5-label color="blue">Security</pf-v5-label>
<pf-v5-label color="green">Performance</pf-v5-label>
<pf-v5-label color="red">Networking</pf-v5-label>
<pf-v6-label color="blue">Security</pf-v6-label>
<pf-v6-label color="green">Performance</pf-v6-label>
<pf-v6-label color="red">Networking</pf-v6-label>
</pf-v5-label-group>
```

With a category:
```html
<pf-v5-label-group>
<span slot="category">Filters</span>
<pf-v5-label removable>Security</pf-v5-label>
<pf-v5-label removable>Performance</pf-v5-label>
<pf-v6-label removable>Security</pf-v6-label>
<pf-v6-label removable>Performance</pf-v6-label>
</pf-v5-label-group>
```
6 changes: 3 additions & 3 deletions elements/pf-v5-label-group/demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<pf-v5-label-group>
<pf-v5-label color="blue">Blue</pf-v5-label>
<pf-v5-label color="green">Green</pf-v5-label>
<pf-v5-label color="orange">Orange</pf-v5-label>
<pf-v6-label color="blue">Blue</pf-v6-label>
<pf-v6-label color="green">Green</pf-v6-label>
<pf-v6-label color="orange">Orange</pf-v6-label>
</pf-v5-label-group>

<script type="module">
Expand Down
6 changes: 3 additions & 3 deletions elements/pf-v5-label-group/demo/label-group-closeable.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<pf-v5-label-group closeable>
<span slot="category">Filters</span>
<pf-v5-label color="blue" removable>Security</pf-v5-label>
<pf-v5-label color="green" removable>Performance</pf-v5-label>
<pf-v5-label color="red" removable>Networking</pf-v5-label>
<pf-v6-label color="blue" removable>Security</pf-v6-label>
<pf-v6-label color="green" removable>Performance</pf-v6-label>
<pf-v6-label color="red" removable>Networking</pf-v6-label>
</pf-v5-label-group>

<script type="module">
Expand Down
6 changes: 3 additions & 3 deletions elements/pf-v5-label-group/demo/label-group-vertical.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<pf-v5-label-group orientation="vertical">
<span slot="category">Group</span>
<pf-v5-label color="red" icon="info-circle" removable>Label 1</pf-v5-label>
<pf-v5-label color="green" icon="info-circle" removable>Label 2</pf-v5-label>
<pf-v5-label color="blue" icon="info-circle" removable>Label 3</pf-v5-label>
<pf-v6-label color="red" removable>Label 1</pf-v6-label>
<pf-v6-label color="green" removable>Label 2</pf-v6-label>
<pf-v6-label color="blue" removable>Label 3</pf-v6-label>
</pf-v5-label-group>

<script type="module">
Expand Down
6 changes: 3 additions & 3 deletions elements/pf-v5-label-group/demo/label-group-with-a-very-long-name.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<pf-v5-label-group>
<span slot="category">Label group with a very long category name</span>
<pf-v5-label color="red" icon="info-circle">Label 1</pf-v5-label>
<pf-v5-label color="blue" icon="info-circle">Label 2</pf-v5-label>
<pf-v5-label color="green" icon="info-circle">Label 3</pf-v5-label>
<pf-v6-label color="red">Label 1</pf-v6-label>
<pf-v6-label color="blue">Label 2</pf-v6-label>
<pf-v6-label color="green">Label 3</pf-v6-label>
</pf-v5-label-group>

<script type="module">
Expand Down
12 changes: 6 additions & 6 deletions elements/pf-v5-label-group/demo/label-group-with-overflow-labels.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<pf-v5-label-group num-labels="3">
<span slot="category">Tags</span>
<pf-v5-label color="orange" icon="info-circle" removable>Label 1</pf-v5-label>
<pf-v5-label color="purple" icon="info-circle" removable>Label 2</pf-v5-label>
<pf-v5-label color="blue" icon="info-circle" removable>Label 3</pf-v5-label>
<pf-v5-label color="red" icon="info-circle" removable>Label 4</pf-v5-label>
<pf-v5-label color="cyan" icon="info-circle" removable>Label 5</pf-v5-label>
<pf-v5-label color="green" icon="info-circle" removable>Label 6</pf-v5-label>
<pf-v6-label color="orange" removable>Label 1</pf-v6-label>
<pf-v6-label color="purple" removable>Label 2</pf-v6-label>
<pf-v6-label color="blue" removable>Label 3</pf-v6-label>
<pf-v6-label color="red" removable>Label 4</pf-v6-label>
<pf-v6-label color="teal" removable>Label 5</pf-v6-label>
<pf-v6-label color="green" removable>Label 6</pf-v6-label>
</pf-v5-label-group>

<script type="module">
Expand Down
2 changes: 1 addition & 1 deletion elements/pf-v5-label-group/pf-v5-label-group.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
line-height: 1.6;
}

#labels ::slotted(pf-v5-label) {
#labels ::slotted(pf-v6-label) {
display: inline-flex;
min-width: 0;
margin-inline-end: var(--pf-v5-c-label-group__list-item--MarginRight);
Expand Down
21 changes: 11 additions & 10 deletions elements/pf-v5-label-group/pf-v5-label-group.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import { classMap } from 'lit/directives/class-map.js';
import { observes } from '@patternfly/pfe-core/decorators/observes.js';
import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';

import { PfV5Label } from '../pf-v5-label/pf-v5-label.js';
import { PfV6Label } from '../pf-v6-label/pf-v6-label.js';
import '@patternfly/elements/pf-v5-button/pf-v5-button.js';

import styles from './pf-v5-label-group.css';

Expand Down Expand Up @@ -46,7 +47,7 @@ const REMAINING_RE = /\$\{\s*remaining\s*\}/g;
* @slot category
* Category name text for label group category.
* If this slot is populated, the label group will have category styling applied.
* @slot - `<pf-v5-label>` elements.
* @slot - `<pf-v6-label>` elements.
*/
@customElement('pf-v5-label-group')
export class PfV5LabelGroup extends LitElement {
Expand Down Expand Up @@ -87,8 +88,8 @@ export class PfV5LabelGroup extends LitElement {
/** Label count tracked during SSR via child events. */
_ssrLabelCount = 0;

get #overflowLabel(): PfV5Label | null {
return this.renderRoot?.querySelector?.<PfV5Label>('#overflow') ?? null;
get #overflowLabel(): PfV6Label | null {
return this.renderRoot?.querySelector?.<PfV6Label>('#overflow') ?? null;
}

get #closeButton(): HTMLButtonElement | null {
Expand All @@ -101,11 +102,11 @@ export class PfV5LabelGroup extends LitElement {
return slot?.assignedNodes({ flatten: true }) ?? [];
}

get #labels(): NodeListOf<PfV5Label> | PfV5Label[] {
get #labels(): NodeListOf<PfV6Label> | PfV6Label[] {
if (isServer) {
return [] as PfV5Label[];
return [] as PfV6Label[];
}
return this.querySelectorAll<PfV5Label>('pf-v5-label:not([slot]):not([overflow-label])');
return this.querySelectorAll<PfV6Label>('pf-v6-label:not([slot]):not([overflow])');
}

get #labelCount(): number {
Expand Down Expand Up @@ -154,14 +155,14 @@ export class PfV5LabelGroup extends LitElement {
?hidden="${!this.accessibleLabel}">${this.accessibleLabel ?? ''}</span>
</slot>
<slot id="labels" @slotchange="${this.#onSlotchange}"></slot>
<pf-v5-label id="overflow"
<pf-v6-label id="overflow"
aria-controls="labels"
overflow-label
overflow
?hidden="${this.#remaining < 1}"
@click="${this.#onMoreClick}"
>${this.#remaining < 1 ? ''
: this.open ? this.expandedText
: this.collapsedText.replace(REMAINING_RE, this.#remaining.toString())}</pf-v5-label>
: this.collapsedText.replace(REMAINING_RE, this.#remaining.toString())}</pf-v6-label>
<pf-v5-button id="close-button"
plain
icon="times-circle"
Expand Down
44 changes: 22 additions & 22 deletions elements/pf-v5-label-group/test/pf-label-group.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,10 @@ describe('<pf-v5-label-group>', function() {
beforeEach(async function() {
element = await createFixture<PfV5LabelGroup>(html`
<pf-v5-label-group>
<pf-v5-label>Label 1</pf-v5-label>
<pf-v5-label>Label 2</pf-v5-label>
<pf-v5-label>Label 3</pf-v5-label>
<pf-v5-label>Label 4</pf-v5-label>
<pf-v6-label>Label 1</pf-v6-label>
<pf-v6-label>Label 2</pf-v6-label>
<pf-v6-label>Label 3</pf-v6-label>
<pf-v6-label>Label 4</pf-v6-label>
</pf-v5-label-group>
`);
});
Expand Down Expand Up @@ -68,10 +68,10 @@ describe('<pf-v5-label-group>', function() {
beforeEach(async function() {
element = await createFixture<PfV5LabelGroup>(html`
<pf-v5-label-group closeable>
<pf-v5-label>Label 1</pf-v5-label>
<pf-v5-label>Label 2</pf-v5-label>
<pf-v5-label>Label 3</pf-v5-label>
<pf-v5-label>Label 4</pf-v5-label>
<pf-v6-label>Label 1</pf-v6-label>
<pf-v6-label>Label 2</pf-v6-label>
<pf-v6-label>Label 3</pf-v6-label>
<pf-v6-label>Label 4</pf-v6-label>
</pf-v5-label-group>
`);
});
Expand Down Expand Up @@ -103,10 +103,10 @@ describe('<pf-v5-label-group>', function() {
<pf-v5-label-group collapsed-text="show $\{remaining} more"
expanded-text="show fewer"
accessible-label="My Label Group">
<pf-v5-label>Label 1</pf-v5-label>
<pf-v5-label>Label 2</pf-v5-label>
<pf-v5-label>Label 3</pf-v5-label>
<pf-v5-label>Label 4</pf-v5-label>
<pf-v6-label>Label 1</pf-v6-label>
<pf-v6-label>Label 2</pf-v6-label>
<pf-v6-label>Label 3</pf-v6-label>
<pf-v6-label>Label 4</pf-v6-label>
</pf-v5-label-group>
`);
});
Expand All @@ -120,10 +120,10 @@ describe('<pf-v5-label-group>', function() {
beforeEach(async function() {
element = await createFixture<PfV5LabelGroup>(html`
<pf-v5-label-group num-labels="2">
<pf-v5-label>Label 1</pf-v5-label>
<pf-v5-label>Label 2</pf-v5-label>
<pf-v5-label>Label 3</pf-v5-label>
<pf-v5-label>Label 4</pf-v5-label>
<pf-v6-label>Label 1</pf-v6-label>
<pf-v6-label>Label 2</pf-v6-label>
<pf-v6-label>Label 3</pf-v6-label>
<pf-v6-label>Label 4</pf-v6-label>
</pf-v5-label-group>
`);
});
Expand All @@ -138,10 +138,10 @@ describe('<pf-v5-label-group>', function() {
beforeEach(async function() {
element = await createFixture<PfV5LabelGroup>(html`
<pf-v5-label-group num-labels="4">
<pf-v5-label>Label 1</pf-v5-label>
<pf-v5-label>Label 2</pf-v5-label>
<pf-v5-label>Label 3</pf-v5-label>
<pf-v5-label>Label 4</pf-v5-label>
<pf-v6-label>Label 1</pf-v6-label>
<pf-v6-label>Label 2</pf-v6-label>
<pf-v6-label>Label 3</pf-v6-label>
<pf-v6-label>Label 4</pf-v6-label>
</pf-v5-label-group>
`);
});
Expand All @@ -157,8 +157,8 @@ describe('<pf-v5-label-group>', function() {
element = await createFixture<PfV5LabelGroup>(html`
<pf-v5-label-group>
<span slot="category">Group</span>
<pf-v5-label>Label 1</pf-v5-label>
<pf-v5-label>Label 2</pf-v5-label>
<pf-v6-label>Label 1</pf-v6-label>
<pf-v6-label>Label 2</pf-v6-label>
</pf-v5-label-group>
`);
});
Expand Down
61 changes: 0 additions & 61 deletions elements/pf-v5-label/README.md
View file
Open in desktop

This file was deleted.

21 changes: 0 additions & 21 deletions elements/pf-v5-label/demo/compact.html
View file
Open in desktop

This file was deleted.

32 changes: 0 additions & 32 deletions elements/pf-v5-label/demo/filled-color.html
View file
Open in desktop

This file was deleted.

Loading
Loading