feat(button)!: port to `<pf-v6-button>` by ArathyKumar · Pull Request #3157 · patternfly/patternfly-elements

ArathyKumar · 2026-08-05T15:59:56Z

What I did

Ported the existing pf-v5-button Web Component to a new pf-v6-button Web Component that follows design and provides feature parity with the PatternFly v6 Button React component.

Changes

Ported pf-v5-button to pf-v6-button.
Updated the component to match the PFv6 Button design and styles.
Aligned the Web Component API and behaviour with the PFv6 React component.
Added support for PatternFly v6 button variants:
- primary
- secondary
- tertiary
- danger
- warning
- plain
- link
- control
- stateful
Added support for button sizes and states.
Added support for loading and disabled states.
Added support for block buttons.
Added support for icons and icon positioning.
Added support for href for link-style buttons.
Added support for button, submit, and reset types.
Maintained form-associated behaviour using native Web Component APIs.
Updated tests and demos
Added the required changeset.

Testing Instructions

Run the pf-v6-button Web Component tests and verify that they pass.
Verify the pf-v6-button API and behaviour.
Verify all supported button variants, sizes, and states.
Verify loading and disabled states.
Verify keyboard navigation and focus behaviour.
Verify form submission and reset behaviour for button, submit, and reset types.
Verify accessibility behaviour.
Verify the pf-v6-button demo and confirm that it matches the PatternFly v6 React Button in appearance and behaviour.

Notes to Reviewers

This PR ports the existing pf-v5-button Web Component to pf-v6-button and brings it in line with the PatternFly v6 React Button.

For more details about the requirements and expected behavior, please refer to the related issue #2984.

changeset-bot · 2026-08-05T16:00:06Z

🦋 Changeset detected

Latest commit: f3a83f0

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

This PR includes changesets to release 2 packages

Name	Type
@patternfly/elements	Major
@patternfly/pfe-core	Patch

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

github-actions · 2026-08-05T16:01:11Z

✅ Commitlint tests passed!

More Info

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

github-actions · 2026-08-06T17:41:10Z

SSR Test Run for 10c4b9a: Report

Prevent Chromium Tab-wrap flakiness with a trailing focus sentinel, stop RovingTabindexController from stealing focus after Tab-out, pin timestamp fixtures to en-US, and add the missing major changeset for the v5→v6 button port. Assisted-By: Cursor Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-08-07T11:20:52Z

✅ Deploy Preview for patternfly-elements ready!

Name	Link
🔨 Latest commit	`472d897`
😎 Deploy Preview	https://deploy-preview-3157--patternfly-elements.netlify.app/

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

github-actions · 2026-08-07T11:22:21Z

SSR Test Run for 5244ae5: Report

github-actions · 2026-08-20T18:53:18Z

SSR Test Run for 218ac93: Report

github-actions · 2026-08-20T19:38:22Z

SSR Test Run for e6afc83: Report

…check Co-authored-by: Cursor <cursoragent@cursor.com> # Conflicts: # elements/pf-v5-clipboard-copy/pf-v5-clipboard-copy.ts # elements/pf-v5-tooltip/demo/block-triggers.html # elements/pf-v5-tooltip/demo/flip.html # elements/pf-v5-tooltip/demo/performance.html # elements/pf-v5-tooltip/demo/trigger.html # elements/pf-v5-tooltip/docs/pf-v5-tooltip.md

github-actions · 2026-08-21T20:09:17Z

SSR Test Run for c7f1b89: Report

github-actions · 2026-08-22T19:25:05Z

SSR Test Run for d2df39e: Report

github-actions · 2026-08-23T14:18:12Z

SSR Test Run for 56e2f06: Report

github-actions · 2026-08-23T14:51:42Z

SSR Test Run for cdb0e95: Report

coderabbitai · 2026-08-27T14:21:16Z

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

CodeRabbit commands

These commands are invoked using PR/Issue comments.

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai review --preview-config to test the unmerged CodeRabbit configuration on a draft PR. The requester must have repository write access; preview results are non-authoritative.
@coderabbitai rate limit to show your current review rate limit status.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai evaluate custom pre-merge check --instructions <custom-checks-instructions> --name <custom-checks-title> [--mode <error|warning>] to validate the custom pre-merge checks instructions. Defaults to error when --mode is omitted.
@coderabbitai ignore pre-merge checks to override pre-merge checks and get an approval on PR.
@coderabbitai run pre-merge checks to run pre-merge checks on the pull request.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai generate unit tests to generate unit tests for this PR.
@coderabbitai emit path instructions to emit generated path-specific review instructions for this repository.
@coderabbitai resolve merge conflict to automatically resolve merge conflicts.
@coderabbitai autofix to automatically fix issues in the current review thread, or all unresolved review comments when used in the PR conversation.
@coderabbitai fix-ci to automatically fix failing CI checks in a stacked pull request.
@coderabbitai fix-ci commit to automatically fix failing CI checks by committing fixes to the current branch.
@coderabbitai resolve to resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai generate configuration to create a PR that adds the current resolved configuration as .coderabbit.yaml (or show it if already present).
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore or @coderabbit ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit configuration file (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
You can also validate your configuration using the online YAML validator.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, support, documentation and community

Visit our status page to check the current availability of CodeRabbit.
Create a ticket on our support page for assistance with any issues or questions.
Visit our documentation site for detailed information on how to use CodeRabbit.
Join our Discord community to connect with other users and get help from the community.
Follow us on X/Twitter for updates and announcements.

adamjohnson · 2026-08-27T14:21:45Z

@coderabbitai full review

coderabbitai · 2026-08-27T14:21:55Z

⚠️ Action not completed

Review skipped: 123 files exceed the limit of 100.

coderabbitai · 2026-08-27T14:21:59Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

Run configuration

Source mode: Auto
Repository: Unavailable
Branch: Unavailable
File: No configuration file from this repository applied
Commit: Unavailable
Layers: Organization UI
Review profile: CHILL
Plan: Advanced
Run ID: ade0950d-e6d2-4df8-ab3c-bf7c4b7a2c56

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

Trigger review

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

gildub · 2026-11-03T18:16:52Z

Hi @ArathyKumar,
I'm jumping in, hoping to help.
Did you confirm the AI aforementioned issues.

Hi @adamjohnson, I wonder if setting up sourcery-ai would help ?

A FACE value set with setFormValue() participates in every form submission, unlike a native button whose value is only included when it is the submitter. Expose the value only while a type=submit button is actually submitting, so named type=button/reset controls and unclicked submit buttons cannot contribute spurious entries. Assisted-By: Claude Code <noreply@anthropic.com>

Components that render <pf-v6-button> still set --pf-v5-c-button-* custom properties, which the v6 button does not consume. Map padding, font size, link color, and the dropdown's visual disabled state onto --pf-v6-c-button-* surface and variant tokens. Assisted-By: Claude Code <noreply@anthropic.com>

Hiding an open listbox on focusout removes the focused option mid-Tab. When that happens before the browser finishes moving focus, the focus move is cancelled and focus lands back on the combobox. Defer hiding one animation frame when focus is moving outside the element, and give the select test a deterministic focus target after the fixture. Assisted-By: Claude Code <noreply@anthropic.com>

Add coverage for InternalsController form/shadowRoot getters and submit(submitter) fallback, and for RovingTabindexController not stealing focus when an index update occurs after focus left the widget. Assisted-By: Claude Code <noreply@anthropic.com>

The trailing tabindex=0 sentinel was injected into every test page to give Tab somewhere to go after a fixture, which changed focus behavior for all suites and forced weaker assertions in three specs. Remove it and restore the original assertions; Tab behavior is covered with per-fixture focus targets where needed. Assisted-By: Claude Code <noreply@anthropic.com>

Address code review findings: reflect the name attribute so programmatic name/value participate in FACE submission, classify the deprecated icon-position=right alias as icon-end, add a focus-visible outline, sync the count badge from the computed disabled state so fieldset disabling propagates, and cover these paths. Also correct the changeset migration notes for the v5 warning boolean and React-parity flag names. Assisted-By: Claude Code <noreply@anthropic.com>

…allback Address review findings: cancel the deferred listbox hide on disconnect and generation change, reuse the item list for the re-focus check so slotted options are recognized, add RovingTabindexController.focusItem for documented programmatic focus APIs and use it in chip groups, and rethrow non-TypeError failures from requestSubmit(submitter). Assisted-By: Claude Code <noreply@anthropic.com>

Add type=submit to migrated form controls that relied on the implicit v5 submit behavior, use variant=danger for the tabs demo delete button, and label the icon-only alert close button. These demos and the alert would otherwise render non-submitting controls or unlabeled buttons. Assisted-By: Claude Code <noreply@anthropic.com>

Mirror the pf-v6-spinner e2e pattern so the new element keeps demo snapshot and SSR coverage after the pf-v5-button e2e file was removed. Assisted-By: Claude Code <noreply@anthropic.com>

Stop overwriting tabindex on every update. Capture the first authored value, treat external changes (author or roving-tabindex controller) as the value to preserve, and restore it after link mode or disabled state temporarily removes the attribute. Add regression tests for authored, post-render, and disabled round-trip values. Assisted-By: Claude Code <noreply@anthropic.com>

The browser only performs implicit submission (Enter in a text field) when the form has a native submit button, which a FACE element is not. Render one visually hidden native submit button into each owning form via a WeakMap, shared by all submit buttons in that form, and remove it when the last one disconnects. SSR is gated with isServer; sr-only styles are inlined on the helper. Assisted-By: Claude Code <noreply@anthropic.com>

href renders an anchor on any variant, not only variant=link; narrow the README and changeset wording. Document the implicit-submission helper and the fact that name/value participates only on click. Assisted-By: Claude Code <noreply@anthropic.com>

Sync the helper's disabled state with the registered submit buttons, re-append the helper if the form's children are replaced, and on implicit submission report the default FACE button as SubmitEvent.submitter and expose its name/value for that submission (native default-button parity). Also detect first-render text from light-DOM child nodes so part=text and icon placement are correct before SlotController records populate, including SSR. Assisted-By: Claude Code <noreply@anthropic.com>

Components that rendered pf-v5-button now render pf-v6-button, so page-level --pf-v5-c-button-* overrides no longer apply to them. Assisted-By: Claude Code <noreply@anthropic.com>

The fixture class in the InternalsController spec omitted annotations on its `internals` property and `render` return type, which fails the CI build under --isolatedDeclarations. Assisted-By: Claude Code <noreply@anthropic.com>

ECMAScript static private identifiers are rejected in a class that uses the legacy `@customElement` decorator (TS18036). The implicit-submission handler is now an instance method invoked through a callback stored on the per-form registration. Also annotate the anchor type in the tabindex test so the elements project type-check passes. Assisted-By: Claude Code <noreply@anthropic.com>

ubuntu-latest now resolves to 26.04, which Playwright 1.57 does not support, so `npx playwright install` fails before any test runs. Assisted-By: Claude Code <noreply@anthropic.com>

github-actions · 2026-11-09T19:45:35Z

SSR Test Run for 61c8f54: Report

Lit's server renderer instantiates the element without a DOM, so `this.childNodes` is undefined and rendering threw. Guard the child-node scan with `isServer`; slotted light DOM is not available to inspect on the server anyway. Assisted-By: Claude Code <noreply@anthropic.com>

github-actions · 2026-11-09T19:53:06Z

SSR Test Run for 36add87: Report

The button's name/value participates on implicit (Enter) submissions as well as clicks, matching a native default submit button. The docs claimed otherwise. Assisted-By: Claude Code <noreply@anthropic.com>

github-actions · 2026-11-09T20:24:38Z

SSR Test Run for 472d897: Report

bennypowers · 2026-11-09T20:24:46Z

There remain two spicy issues here

monkey-patching the submit event's submitter property in #submitImplicitly
button value submitted with form? we inject a visually hidden submitter for keyboard enter-to-submit. worth testing this cross browser and comparing to other libraries (e.g. lion)

background: WICG/webcomponents#814

ArathyKumar · 2026-11-10T18:14:51Z

/agentic-review

ArathyKumar added 2 commits August 4, 2026 22:07

chore(button): created pf-v6-button component

942045c

chore(button): added react variants

f21ae79

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

chore(button): replaced pf-v5-button with pf-v6-button

fc7267d

zeroedin changed the title ~~feat(button): port <pf-v5-button> to <pf-v6-button>~~ feat(button)!: port to <pf-v6-button> Aug 20, 2026

fix: style changes

0b7becf

fix: style

e905c19

ArathyKumar added 3 commits August 21, 2026 22:49

chore: updated variant types

38b2134

chore: added pf-v6-button variant demo fixes

e3c5971

chore: updated demo styles

808bef6

fix: accessibility issues

2fb7df3

chore: added test cases

acfbbc3

chore: updated screenshot

72754ed

This comment has been minimized.

Sign in to view

ArathyKumar marked this pull request as ready for review August 24, 2026 14:19

ArathyKumar requested review from adamjohnson and zeroedin August 24, 2026 14:59

bennypowers added 17 commits November 9, 2026 11:54

test(button): add e2e snapshot and SSR coverage

45fa2a2

Mirror the pf-v6-spinner e2e pattern so the new element keeps demo snapshot and SSR coverage after the pf-v5-button e2e file was removed. Assisted-By: Claude Code <noreply@anthropic.com>

docs: note v5 button token overrides on embedding components

49236ed

Components that rendered pf-v5-button now render pf-v6-button, so page-level --pf-v5-c-button-* overrides no longer apply to them. Assisted-By: Claude Code <noreply@anthropic.com>

ci: pin unit test job to ubuntu-24.04

42cf25f

ubuntu-latest now resolves to 26.04, which Playwright 1.57 does not support, so `npx playwright install` fails before any test runs. Assisted-By: Claude Code <noreply@anthropic.com>

docs(button): correct implicit-submission value contract

f3a83f0

The button's name/value participates on implicit (Enter) submissions as well as clicks, matching a native default submit button. The docs claimed otherwise. Assisted-By: Claude Code <noreply@anthropic.com>

zeroedin mentioned this pull request Nov 11, 2026

feat(card)!: add <pf-v6-card> #3167

Draft

13 tasks

Conversation

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

Uh oh!

What I did

Changes

Testing Instructions

Notes to Reviewers

Uh oh!

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

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Aug 5, 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 6, 2026

Uh oh!

github-actions Bot commented Aug 7, 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 7, 2026

Uh oh!

github-actions Bot commented Aug 20, 2026

Uh oh!

github-actions Bot commented Aug 20, 2026

Uh oh!

github-actions Bot commented Aug 21, 2026

Uh oh!

github-actions Bot commented Aug 22, 2026

Uh oh!

github-actions Bot commented Aug 23, 2026

Uh oh!

github-actions Bot commented Aug 23, 2026

Uh oh!

This comment has been minimized.

coderabbitai Bot commented Aug 27, 2026

Chat

CodeRabbit commands

Other keywords and placeholders

CodeRabbit configuration file (.coderabbit.yaml)

Status, support, documentation and community

Uh oh!

adamjohnson commented Aug 27, 2026

Uh oh!

coderabbitai Bot commented Aug 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Aug 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

gildub commented Nov 3, 2026

Uh oh!

github-actions Bot commented Nov 9, 2026

Uh oh!

github-actions Bot commented Nov 9, 2026

Uh oh!

github-actions Bot commented Nov 9, 2026

Uh oh!

bennypowers commented Nov 9, 2026

Uh oh!

ArathyKumar commented Nov 10, 2026

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ArathyKumar commented Aug 5, 2026 •

edited

Loading

changeset-bot Bot commented Aug 5, 2026 •

edited

Loading

github-actions Bot commented Aug 5, 2026 •

edited

Loading

github-actions Bot commented Aug 7, 2026 •

edited

Loading

CodeRabbit configuration file (`.coderabbit.yaml`)

coderabbitai Bot commented Aug 27, 2026 •

edited

Loading

coderabbitai Bot commented Aug 27, 2026 •

edited

Loading