From bf4d33f04b9dc44c632158a6a5ad2d25d3fd4477 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Fri, 8 May 2026 13:30:40 -0400 Subject: [PATCH 01/11] chore(tools): update tooling config for v6 prefix - Generalize eslint ignore glob for icon demo path to match both pf-v5-icon and pf-v6-icon directories - Update eslint no-missing-package-exports rule to match only pf-v6-* element directories - Remove all pf-v5-* export entries from elements/package.json since v6 release will not ship v5 elements - Bump elements package version to 6.0.0-next.0 Audited and confirmed no changes needed in: - tsconfig files (no v5-specific paths) - web-test-runner.config.js (generic globs) - playwright.config.ts (generic globs) - commitlint.config.js (already handles both prefixes dynamically) Closes #3130 Assisted-By: Claude Opus 4.6 --- elements/package.json | 60 +------------------------------------------ eslint.config.js | 4 +-- 2 files changed, 3 insertions(+), 61 deletions(-) diff --git a/elements/package.json b/elements/package.json index fe8dda2080..0ad3aaefb1 100644 --- a/elements/package.json +++ b/elements/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/elements", "license": "MIT", - "version": "5.0.0", + "version": "6.0.0-next.0", "description": "PatternFly Elements", "customElements": "custom-elements.json", "type": "module", @@ -10,64 +10,6 @@ "exports": { "./form-control.css": "./form-control.css", "./form-control.css.js": "./form-control.css.js", - "./pf-v5-accordion/pf-v5-accordion-header.js": "./pf-v5-accordion/pf-v5-accordion-header.js", - "./pf-v5-accordion/pf-v5-accordion-panel.js": "./pf-v5-accordion/pf-v5-accordion-panel.js", - "./pf-v5-accordion/pf-v5-accordion.js": "./pf-v5-accordion/pf-v5-accordion.js", - "./pf-v5-alert/pf-v5-alert.js": "./pf-v5-alert/pf-v5-alert.js", - "./pf-v5-avatar/pf-v5-avatar.js": "./pf-v5-avatar/pf-v5-avatar.js", - "./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-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", - "./pf-v5-chip/pf-v5-chip.js": "./pf-v5-chip/pf-v5-chip.js", - "./pf-v5-chip/pf-v5-chip-group.js": "./pf-v5-chip/pf-v5-chip-group.js", - "./pf-v5-clipboard-copy/pf-v5-clipboard-copy.js": "./pf-v5-clipboard-copy/pf-v5-clipboard-copy.js", - "./pf-v5-code-block/pf-v5-code-block.js": "./pf-v5-code-block/pf-v5-code-block.js", - "./pf-v5-dropdown/context.js": "./pf-v5-dropdown/context.js", - "./pf-v5-dropdown/pf-v5-dropdown-group.js": "./pf-v5-dropdown/pf-v5-dropdown-group.js", - "./pf-v5-dropdown/pf-v5-dropdown-item.js": "./pf-v5-dropdown/pf-v5-dropdown-item.js", - "./pf-v5-dropdown/pf-v5-dropdown-menu.js": "./pf-v5-dropdown/pf-v5-dropdown-menu.js", - "./pf-v5-dropdown/pf-v5-dropdown.js": "./pf-v5-dropdown/pf-v5-dropdown.js", - "./pf-v5-helper-text/pf-v5-helper-text.js": "./pf-v5-helper-text/pf-v5-helper-text.js", - "./pf-v5-hint/pf-v5-hint.js": "./pf-v5-hint/pf-v5-hint.js", - "./pf-v5-icon/pf-v5-icon.js": "./pf-v5-icon/pf-v5-icon.js", - "./pf-v5-jump-links/pf-v5-jump-links-item.js": "./pf-v5-jump-links/pf-v5-jump-links-item.js", - "./pf-v5-jump-links/pf-v5-jump-links-list.js": "./pf-v5-jump-links/pf-v5-jump-links-list.js", - "./pf-v5-jump-links/pf-v5-jump-links.js": "./pf-v5-jump-links/pf-v5-jump-links.js", - "./pf-v5-label-group/pf-v5-label-group.js": "./pf-v5-label-group/pf-v5-label-group.js", - "./pf-v5-label/pf-v5-label.js": "./pf-v5-label/pf-v5-label.js", - "./pf-v5-select/pf-v5-select.js": "./pf-v5-select/pf-v5-select.js", - "./pf-v5-select/pf-v5-listbox.js": "./pf-v5-select/pf-v5-listbox.js", - "./pf-v5-select/pf-v5-option-group.js": "./pf-v5-select/pf-v5-option-group.js", - "./pf-v5-select/pf-v5-option.js": "./pf-v5-select/pf-v5-option.js", - "./pf-v5-modal/pf-v5-modal.js": "./pf-v5-modal/pf-v5-modal.js", - "./pf-v5-panel/pf-v5-panel.js": "./pf-v5-panel/pf-v5-panel.js", - "./pf-v5-progress-stepper/pf-v5-progress-step.js": "./pf-v5-progress-stepper/pf-v5-progress-step.js", - "./pf-v5-progress-stepper/pf-v5-progress-stepper.js": "./pf-v5-progress-stepper/pf-v5-progress-stepper.js", - "./pf-v5-progress/pf-v5-progress.js": "./pf-v5-progress/pf-v5-progress.js", - "./pf-v5-search-input/pf-v5-search-input.js": "./pf-v5-search-input/pf-v5-search-input.js", - "./pf-v5-spinner/pf-v5-spinner.js": "./pf-v5-spinner/pf-v5-spinner.js", - "./pf-v5-switch/pf-v5-switch.js": "./pf-v5-switch/pf-v5-switch.js", - "./pf-v5-table/context.js": "./pf-v5-table/context.js", - "./pf-v5-table/pf-v5-caption.js": "./pf-v5-table/pf-v5-caption.js", - "./pf-v5-table/pf-v5-table.js": "./pf-v5-table/pf-v5-table.js", - "./pf-v5-table/pf-v5-tbody.js": "./pf-v5-table/pf-v5-tbody.js", - "./pf-v5-table/pf-v5-td.js": "./pf-v5-table/pf-v5-td.js", - "./pf-v5-table/pf-v5-th.js": "./pf-v5-table/pf-v5-th.js", - "./pf-v5-table/pf-v5-thead.js": "./pf-v5-table/pf-v5-thead.js", - "./pf-v5-table/pf-v5-tr.js": "./pf-v5-table/pf-v5-tr.js", - "./pf-v5-tabs/context.js": "./pf-v5-tabs/context.js", - "./pf-v5-tabs/pf-v5-tab-panel.js": "./pf-v5-tabs/pf-v5-tab-panel.js", - "./pf-v5-tabs/pf-v5-tab.js": "./pf-v5-tabs/pf-v5-tab.js", - "./pf-v5-tabs/pf-v5-tabs.js": "./pf-v5-tabs/pf-v5-tabs.js", - "./pf-v5-text-area/pf-v5-text-area.js": "./pf-v5-text-area/pf-v5-text-area.js", - "./pf-v5-text-input/pf-v5-text-input.js": "./pf-v5-text-input/pf-v5-text-input.js", - "./pf-v5-tile/pf-v5-tile.js": "./pf-v5-tile/pf-v5-tile.js", - "./pf-v5-timestamp/pf-v5-timestamp.js": "./pf-v5-timestamp/pf-v5-timestamp.js", - "./pf-v5-tooltip/pf-v5-tooltip.js": "./pf-v5-tooltip/pf-v5-tooltip.js", - "./pf-v5-popover/pf-v5-popover.js": "./pf-v5-popover/pf-v5-popover.js", "./react/*": "./react/*" }, "publishConfig": { diff --git a/eslint.config.js b/eslint.config.js index 9cac24974b..d0f11bc32b 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -13,7 +13,7 @@ export default tseslint.config( { name: 'local/ignores', ignores: [ - 'elements/pf-v5-icon/demo/icons/**/*.js', + 'elements/pf-v*-icon/demo/icons/**/*.js', 'tools/create-element/templates/**/*', 'tools/create-element/**/*.js', 'tools/create-element/templates/**/*', @@ -25,7 +25,7 @@ export default tseslint.config( plugins: { '@patternfly/elements': pfePlugin }, rules: { '@patternfly/elements/no-missing-package-exports': [States.ERROR, { - matches: ['elements/*/pf-*.js'], + matches: ['elements/pf-v6-*/pf-*.js'], }], }, }, From 2d5e4b57010fd094c61dabcded08420dfc6d9b56 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Fri, 8 May 2026 14:31:35 -0400 Subject: [PATCH 02/11] fix: custome-element.json output location --- .config/cem.yaml | 1 + 1 file changed, 1 insertion(+) 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 From 4b8e42690ca86bde939369ad4ad7455ac7f22718 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Fri, 8 May 2026 14:31:58 -0400 Subject: [PATCH 03/11] chore: add settings.local.json to gitignore --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.gitignore b/.gitignore index 71eeaccb62..db944ad73f 100644 --- a/.gitignore +++ b/.gitignore @@ -103,6 +103,9 @@ core/pfe-core/demo/* .sonarlint .history +# AI +.claude/settings.local.json + # Temp files *~ *.swp From 2a5b7ca9e5735b4b8b3b16eaf6b218dc1a34197c Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Fri, 8 May 2026 16:33:27 -0400 Subject: [PATCH 04/11] chore: remove extra cem config --- elements/.config/cem.yaml | 13 ------------- 1 file changed, 13 deletions(-) delete mode 100644 elements/.config/cem.yaml diff --git a/elements/.config/cem.yaml b/elements/.config/cem.yaml deleted file mode 100644 index c563d7290a..0000000000 --- a/elements/.config/cem.yaml +++ /dev/null @@ -1,13 +0,0 @@ -generate: - files: - - ./*/*.ts - exclude: - - './**/*.test.ts' - - './**/*.spec.ts' - - './**/*.e2e.ts' - output: custom-elements.json - noDefaultExcludes: false - demoDiscovery: - fileGlob: '*/demo/*.html' - urlPattern: ':tag/demo/:demo.html' - urlTemplate: https://patternflyelements.org/components/{{.tag | alias | slug}}/demo/{{.demo | slug}}/ From 7555605b006377b29e365515c81badf488b8f95a Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Sun, 10 May 2026 11:08:01 +0300 Subject: [PATCH 05/11] chore: revert package.json version --- elements/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/package.json b/elements/package.json index 0ad3aaefb1..b1d463211d 100644 --- a/elements/package.json +++ b/elements/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/elements", "license": "MIT", - "version": "6.0.0-next.0", + "version": "5.0.0", "description": "PatternFly Elements", "customElements": "custom-elements.json", "type": "module", From 9273bfe5058672597c2221b595003607affed0b9 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Sun, 10 May 2026 11:10:23 +0300 Subject: [PATCH 06/11] chore: revert eslint config --- eslint.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/eslint.config.js b/eslint.config.js index d0f11bc32b..069142f92b 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -25,7 +25,7 @@ export default tseslint.config( plugins: { '@patternfly/elements': pfePlugin }, rules: { '@patternfly/elements/no-missing-package-exports': [States.ERROR, { - matches: ['elements/pf-v6-*/pf-*.js'], + matches: ['elements/*/pf-*.js'], }], }, }, From 0021a8f40eed15dc36f968576c416a79d5f3cc47 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Sun, 10 May 2026 11:10:53 +0300 Subject: [PATCH 07/11] chore: remove no-missing-package-exports altogether --- eslint.config.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/eslint.config.js b/eslint.config.js index 069142f92b..b358dd075b 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -23,11 +23,6 @@ export default tseslint.config( name: 'local/elements/package.json', files: ['elements/package.json'], plugins: { '@patternfly/elements': pfePlugin }, - rules: { - '@patternfly/elements/no-missing-package-exports': [States.ERROR, { - matches: ['elements/*/pf-*.js'], - }], - }, }, { name: 'local/tools/create-element', From 44785d71203ca1a487291063089f71430ed16bc4 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Sun, 10 May 2026 11:11:01 +0300 Subject: [PATCH 08/11] chore: splat exports --- elements/package.json | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/elements/package.json b/elements/package.json index b1d463211d..5319b980b7 100644 --- a/elements/package.json +++ b/elements/package.json @@ -5,12 +5,11 @@ "description": "PatternFly Elements", "customElements": "custom-elements.json", "type": "module", - "module": "./pfe.js", - "types": "./pfe.d.ts", "exports": { "./form-control.css": "./form-control.css", "./form-control.css.js": "./form-control.css.js", - "./react/*": "./react/*" + "./react/*": "./react/*", + "./*": "./*" }, "publishConfig": { "access": "public", From d990f74d1615c404bb375bda84c9b79e5f1b36e9 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Sun, 10 May 2026 13:06:17 +0300 Subject: [PATCH 09/11] docs: delete migration plan it's now in the issue body for epic #3110 --- .claude/V6-MIGRATION-PLAN.md | 198 ----------------------------------- 1 file changed, 198 deletions(-) delete mode 100644 .claude/V6-MIGRATION-PLAN.md diff --git a/.claude/V6-MIGRATION-PLAN.md b/.claude/V6-MIGRATION-PLAN.md deleted file mode 100644 index c9bfd88d3e..0000000000 --- a/.claude/V6-MIGRATION-PLAN.md +++ /dev/null @@ -1,198 +0,0 @@ -# PatternFly Elements v6 Migration Plan - -Ordered PR plan for issue #3110. UPDATE PRs first (rename existing v5 elements -to v6 and port APIs), then CREATE PRs (new elements not in v5). - -**CRITICAL**: All PRs MUST target `staging/pfv6` branch, NOT `main` - -## Phase 0: Infrastructure (do first) - -These PRs unblock everything else. - -### PR 0.1: Remove/replace dev server with `cem serve` -- [Issue #3110](https://github.com/patternfly/patternfly-elements/issues/3110) calls out hardcoded tag names in dev server -- `cem serve` handles import maps, CSS transforms, chromeless testing -- Remove `tools/pfe-tools/dev-server/` and wire up `cem serve` -- Update `npm run dev` / `npm start` scripts - -### PR 0.2: Rename tooling and config for v6 prefix -- Update `eslint.config.js` ignore globs (icon demo path) to include pf-v6 as - well as pf-v5 paths -- Update `commitlint.config.js` to handle `pf-` prefix (no `v5`) -- Audit `elements/package.json` exports for orphaned entries -- Update `tsconfig` paths if needed -- Update `web-test-runner.config.js` and `playwright.config.ts` globs - -Keep v5 prefix until all elements are updated. - -### PR 0.3: Update docs scaffolding -- Update `docs/_snippets/` for v6 element names -- Update `docs/framework-integration/` examples -- Update `docs/components/` templates - ---- - -## Phase 1: UPDATE PRs (rename v5 -> v6, port to v6 API) - -Existing v5 elements renamed to `pf-v6-{name}` and updated to v6 PatternFly -design tokens, CSS, and React API parity. Order by dependency graph: -leaf components first, then composites. - -### Tier 1: Zero-dependency leaf elements - -These elements don't depend on other PF elements. Port first. - -| # | Element | v5 name | Notes | -| ---- | ------------------------ | ------------------------ | ------------------------------------------ | -| 1.1 | `pf-v6-spinner` | `pf-v5-spinner` | Pure CSS animation, simplest possible port | -| 1.2 | `pf-v6-badge` | `pf-v5-badge` | Simple text + count | -| 1.3 | `pf-v6-avatar` | `pf-v5-avatar` | Image with fallback | -| 1.4 | `pf-v6-banner` | `pf-v5-banner` | Simple status bar | -| 1.5 | `pf-v6-icon` | `pf-v5-icon` | Icon loading, used by many others | -| 1.6 | `pf-v6-tooltip` | `pf-v5-tooltip` | Floating UI, no PF deps | -| 1.7 | `pf-v6-progress` | `pf-v5-progress` | Progress bar, ARIA managed internally | -| 1.8 | `pf-v6-switch` | `pf-v5-switch` | FACE element, toggle | -| 1.9 | `pf-v6-text-input` | `pf-v5-text-input` | FACE element | -| 1.10 | `pf-v6-text-area` | `pf-v5-text-area` | FACE element | -| 1.11 | `pf-v6-timestamp` | `pf-v5-timestamp` | Date formatting | -| 1.12 | `pf-v6-back-to-top` | `pf-v5-back-to-top` | Scroll button | -| 1.13 | `pf-v6-background-image` | `pf-v5-background-image` | Background container | -| 1.14 | `pf-v6-helper-text` | `pf-v5-helper-text` | Form helper text | - -### Tier 2: Single-dependency elements - -Depend on one or more Tier 1 elements. - -| # | Element | v5 name | Depends on | -| --- | ------------------------ | ------------------------ | --------------- | -| 2.1 | `pf-v6-button` | `pf-v5-button` | icon, spinner | -| 2.2 | `pf-v6-label` | `pf-v5-label` | icon, button | -| 2.3 | `pf-v6-chip` | `pf-v5-chip` | icon, button | -| 2.4 | `pf-v6-hint` | `pf-v5-hint` | (light deps) | -| 2.5 | `pf-v6-panel` | `pf-v5-panel` | (light deps) | -| 2.6 | `pf-v6-code-block` | `pf-v5-code-block` | button (copy) | -| 2.7 | `pf-v6-clipboard-copy` | `pf-v5-clipboard-copy` | button, tooltip | -| 2.8 | `pf-v6-progress-stepper` | `pf-v5-progress-stepper` | icon | -| 2.9 | `pf-v6-tile` | `pf-v5-tile` | icon | - -### Tier 3: Composite elements - -Depend on multiple Tier 1-2 elements. - -| # | Element | v5 name | Depends on | -| ---- | -------------------- | -------------------- | -------------------------- | -| 3.1 | `pf-v6-alert` | `pf-v5-alert` | icon, button | -| 3.2 | `pf-v6-card` | `pf-v5-card` | (slots-heavy) | -| 3.3 | `pf-v6-accordion` | `pf-v5-accordion` | expandable pattern | -| 3.4 | `pf-v6-tabs` | `pf-v5-tabs` | RTI controller | -| 3.5 | `pf-v6-label-group` | `pf-v5-label-group` | label, chip | -| 3.6 | `pf-v6-popover` | `pf-v5-popover` | floating UI, button | -| 3.7 | `pf-v6-modal` | `pf-v5-modal` | native dialog, button | -| 3.8 | `pf-v6-table` | `pf-v5-table` | complex, many sub-elements | -| 3.9 | `pf-v6-jump-links` | `pf-v5-jump-links` | navigation pattern | -| 3.10 | `pf-v6-search-input` | `pf-v5-search-input` | text-input, button | -| 3.11 | `pf-v6-dropdown` | `pf-v5-dropdown` | floating UI, menu pattern | -| 3.12 | `pf-v6-select` | `pf-v5-select` | floating UI, FACE, menu | - ---- - -## Phase 2: CREATE PRs (new elements not in v5) - -Components that exist in React v6 but have no v5 web component equivalent. -Order by dependency and complexity. - -### Tier 4: Simple new elements - -| # | Element | React source | Notes | -| ---- | ----------------------- | ------------- | --------------------------------- | -| 4.1 | `pf-v6-divider` | Divider | `
` with variants, very simple | -| 4.2 | `pf-v6-skeleton` | Skeleton | Loading placeholder, CSS-only | -| 4.3 | `pf-v6-truncate` | Truncate | Text truncation with tooltip | -| 4.4 | `pf-v6-content` | Content | Typography wrapper | -| 4.5 | `pf-v6-title` | Title | Heading with size variants | -| 4.6 | `pf-v6-radio` | Radio | FACE element | -| 4.7 | `pf-v6-checkbox` | Checkbox | FACE element | -| 4.8 | `pf-v6-skip-to-content` | SkipToContent | A11y skip link | -| 4.9 | `pf-v6-brand` | Brand | Logo/brand image | -| 4.10 | `pf-v6-backdrop` | Backdrop | Modal overlay | - -### Tier 5: Medium complexity new elements - -| # | Element | React source | Notes | -| ---- | -------------------------- | ----------------- | ------------------------------- | -| 5.1 | `pf-v6-expandable-section` | ExpandableSection | `
` based | -| 5.2 | `pf-v6-description-list` | DescriptionList | `
` semantic | -| 5.3 | `pf-v6-breadcrumb` | Breadcrumb | Navigation with `