Skip to content

feat(label): add link variant#3095

Open
bennypowers wants to merge 9 commits intomainfrom
feat/label-link-variant
Open

feat(label): add link variant#3095
bennypowers wants to merge 9 commits intomainfrom
feat/label-link-variant

Conversation

@bennypowers
Copy link
Copy Markdown
Member

Summary

Added href property to pf-label. When set, the label text renders
inside an <a> element with transparent background, no border, and
underlined text inheriting the label's color.

Closes #2499

Test plan

  • Verify <pf-label href="https://example.com">Link</pf-label> renders an anchor
  • Verify transparent background and no visible border on link labels
  • Verify labels without href are unchanged

Closes #2499

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Apr 15, 2026

🦋 Changeset detected

Latest commit: 61e23cf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@patternfly/elements Minor

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

@netlify
Copy link
Copy Markdown

netlify bot commented Apr 15, 2026

Deploy Preview for patternfly-elements ready!

Name Link
🔨 Latest commit cdde627
😎 Deploy Preview https://deploy-preview-3095--patternfly-elements.netlify.app/

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

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 15, 2026

✅ Commitlint tests passed!

More Info
{
  "valid": true,
  "errors": [],
  "warnings": [],
  "input": "feat(label): add link variant"
}

@github-actions github-actions bot added the AT passed Automated testing has passed label Apr 15, 2026
@github-actions
Copy link
Copy Markdown
Contributor

SSR Test Run for 207deae: Report

@github-actions

This comment has been minimized.

@bennypowers bennypowers enabled auto-merge (squash) April 15, 2026 13:13
@markcaron markcaron self-requested a review April 15, 2026 13:51
@github-actions
Copy link
Copy Markdown
Contributor

SSR Test Run for af3f799: Report

@zeroedin
Copy link
Copy Markdown
Collaborator

zeroedin commented Apr 15, 2026

Verify transparent background and no visible border on link labels

v4 label links look like normal labels. Was this transparent background and no visible border coming from somewhere else? https://v4-archive.patternfly.org/v4/components/label#router-link

I added a link demo

Copy link
Copy Markdown
Collaborator

@zeroedin zeroedin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

label link styles need adjusted

@github-actions
Copy link
Copy Markdown
Contributor

SSR Test Run for e4c94b4: Report

@github-actions
Copy link
Copy Markdown
Contributor

SSR Test Run for c0e7667: Report

Match PFv4 link label behavior: on hover/focus the border thickens
to 2px and changes to the primary color. Labels keep their normal
background and border styling.

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-actions
Copy link
Copy Markdown
Contributor

SSR Test Run for 46fb32c: Report

@github-actions
Copy link
Copy Markdown
Contributor

SSR Test Run for 134496d: Report

@markcaron markcaron removed their request for review April 15, 2026 18:43
@github-actions
Copy link
Copy Markdown
Contributor

SSR Test Run for c09db78: Report

@zeroedin
Copy link
Copy Markdown
Collaborator

Heads up I improved the CSS around the border colors with link. Also improved icons css by removing duplication of selectors.

@markcaron I'll remove my blocker review and allow to do the final approval.

@zeroedin zeroedin requested review from markcaron and zeroedin and removed request for zeroedin April 15, 2026 19:10
@github-actions
Copy link
Copy Markdown
Contributor

SSR Test Run for cdde627: Report

@zeroedin zeroedin self-requested a review April 15, 2026 19:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

AT passed Automated testing has passed

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add the link variant on pf-label

3 participants