feat(label)!: port to `<pf-v6-label>` by markcaron · Pull Request #3161 · patternfly/patternfly-elements

markcaron · 2026-08-13T14:06:35Z

What I did

Updated <pf-v6-label> element

changeset-bot · 2026-08-13T14:06:40Z

⚠️ No Changeset found

Latest commit: 1151b6e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2026-08-13T14:07:54Z

✅ Commitlint tests passed!

More Info

{
  "valid": true,
  "errors": [],
  "warnings": [],
  "input": "feat(label)!: port to `<pf-v6-label>`"
}

github-actions · 2026-08-13T15:00:22Z

✅ Deploy Preview for patternfly-elements ready!

Name	Link
🔨 Latest commit	`4b9c19f`
😎 Deploy Preview	https://deploy-preview-3161--patternfly-elements.netlify.app/

To edit notification comments on pull requests, go to your Netlify site settings.

github-actions · 2026-08-13T15:01:59Z

SSR Test Run for 7e494ea: Report

zeroedin

Needs:

improved PR description
changeset
tests

zeroedin · 2026-08-18T15:23:12Z

+| `isEditable` / `editableProps` | Complex inline editing pattern; deferred to a future release |
+| `onEditComplete` / `onEditCancel` | Dependent on editable support |
+| `render` | React-specific render prop for router integration; not applicable to web components |
+| `tooltipPosition` | Tooltip integration for truncated labels; will integrate with `<pf-v6-tooltip>` in a future release |


Not sure why this is marked for future release. This PR might just be blocked on #3141

Once that PR merges we can do the integration here.

@zeroedin are you suggesting we wait for Tooltip to merge, before finishing this PR?

Yes. my assumption is that we'd have to import tooltip inside of label to support this, wrapping the tooltip around the label when truncated is set. I haven't looked deeply into how patternfly itself does this internally.

zeroedin · 2026-08-18T15:24:48Z

+| `isEditable` / `editableProps` | Complex inline editing pattern; deferred to a future release |
+| `onEditComplete` / `onEditCancel` | Dependent on editable support |


We should investigate these further instead of defering.

zeroedin · 2026-08-18T15:27:00Z

+| `render` | React-specific render prop for router integration; not applicable to web components |
+| `tooltipPosition` | Tooltip integration for truncated labels; will integrate with `<pf-v6-tooltip>` in a future release |
+| `closeBtn` / `closeBtnProps` | Custom close button node; the web component always renders a native `<button>` |
+| `variant="add"` | Add button styling (used by LabelGroup); will be added with `<pf-v6-label-group>` |


Remove this should be a built in function of label-group not label. while it does render like a label it is itself a button action of label group. It does not need to be listed in these tables.

Suggested change

| `variant="add"` | Add button styling (used by LabelGroup); will be added with `<pf-v6-label-group>` |

zeroedin · 2026-08-18T15:29:10Z

+| `onEditComplete` / `onEditCancel` | Dependent on editable support |
+| `render` | React-specific render prop for router integration; not applicable to web components |
+| `tooltipPosition` | Tooltip integration for truncated labels; will integrate with `<pf-v6-tooltip>` in a future release |
+| `closeBtn` / `closeBtnProps` | Custom close button node; the web component always renders a native `<button>` |


This might need to be slottable if it is customizable instead of just statically always a button.

Suggested change

| `closeBtn` / `closeBtnProps` | Custom close button node; the web component always renders a native `<button>` |

But fix the code so <button id="close"> is wrapped in a <slot name="close-button></slot>

zeroedin · 2026-08-18T15:32:42Z

+        <button id="close"
+                type="button"
+                aria-label="${this.closeButtonLabel ?? 'Close'}"
+                ?disabled="${this.disabled}"
+                @click="${this.#onClose}">
+          <svg viewBox="0 0 384 512" aria-hidden="true">
+            <path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256l105.3-105.4z"/>
+          </svg>
+        </button>`}


In PF React this is customizable, we likely will need to wrap the <button> with a slot. Then we'll have to ensure we can listen for the click event and still trigger the #onClose and properly disable the button when this.disabled is set.

Co-authored-by: Steven Spriggs <steven.spriggs@gmail.com>

github-actions · 2026-08-18T16:15:30Z

SSR Test Run for 2bed786: Report

github-actions · 2026-08-18T16:18:54Z

SSR Test Run for 4b9c19f: Report

github-actions · 2026-08-18T16:19:57Z

SSR Test Run for def563e: Report

feat: update pf-v6-label element

307a169

github-actions Bot added the AT passed Automated testing has passed label Aug 13, 2026

chore: fixing CI issues

2417989

feat: fix icons and hover styles. fix import issue in pfv5-label-group

746e768

This comment has been minimized.

Sign in to view

markcaron marked this pull request as ready for review August 13, 2026 15:58

markcaron requested review from adamjohnson and zeroedin August 13, 2026 15:58

zeroedin changed the title ~~feat: update pf-v6-label element~~ feat(label)!: port to <pf-v6-label> Aug 18, 2026

zeroedin reviewed Aug 18, 2026

View reviewed changes

Comment thread elements/pf-v6-label/README.md Outdated

zeroedin reviewed Aug 18, 2026

View reviewed changes

Comment thread elements/pf-v6-label/README.md Outdated

zeroedin reviewed Aug 18, 2026

View reviewed changes

Comment thread elements/pf-v6-label/README.md Outdated

zeroedin reviewed Aug 18, 2026

View reviewed changes

markcaron and others added 3 commits August 18, 2026 12:11

Update elements/pf-v6-label/README.md

07d2b24

Co-authored-by: Steven Spriggs <steven.spriggs@gmail.com>

Update elements/pf-v6-label/README.md

fd551da

Co-authored-by: Steven Spriggs <steven.spriggs@gmail.com>

Update elements/pf-v6-label/README.md

1151b6e

Co-authored-by: Steven Spriggs <steven.spriggs@gmail.com>

		\| `isEditable` / `editableProps` \| Complex inline editing pattern; deferred to a future release \|
		\| `onEditComplete` / `onEditCancel` \| Dependent on editable support \|

Uh oh!

Conversation

markcaron commented Aug 13, 2026

What I did

Uh oh!

changeset-bot Bot commented Aug 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions Bot commented Aug 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Commitlint tests passed!

Uh oh!

github-actions Bot commented Aug 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for patternfly-elements ready!

Uh oh!

github-actions Bot commented Aug 13, 2026

Uh oh!

This comment has been minimized.

zeroedin left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

zeroedin Aug 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

markcaron Aug 18, 2026

Choose a reason for hiding this comment

Uh oh!

zeroedin Aug 18, 2026

Choose a reason for hiding this comment

Uh oh!

zeroedin Aug 18, 2026

Choose a reason for hiding this comment

Uh oh!

zeroedin Aug 18, 2026

Choose a reason for hiding this comment

Uh oh!

zeroedin Aug 18, 2026

Choose a reason for hiding this comment

Uh oh!

zeroedin Aug 18, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Aug 18, 2026

Uh oh!

github-actions Bot commented Aug 18, 2026

Uh oh!

github-actions Bot commented Aug 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot Bot commented Aug 13, 2026 •

edited

Loading

github-actions Bot commented Aug 13, 2026 •

edited

Loading

github-actions Bot commented Aug 13, 2026 •

edited

Loading

zeroedin Aug 18, 2026 •

edited

Loading