Skip to content

feat!: rename all elements to pf-v5-* prefix#3088

Open
bennypowers wants to merge 30 commits intostaging/pfe5from
rename/all-elements
Open

feat!: rename all elements to pf-v5-* prefix#3088
bennypowers wants to merge 30 commits intostaging/pfe5from
rename/all-elements

Conversation

@bennypowers
Copy link
Copy Markdown
Member

Summary

Rename all 35 elements and their sub-components from pf-* to pf-v5-*:

  • Element tags: <pf-button> becomes <pf-v5-button>
  • CSS custom properties: --pf-c-button--* becomes --pf-v5-c-button--*
  • Class names: PfButton becomes PfV5Button
  • Global tokens (--pf-global--*) are unchanged

Elements renamed

pf-accordion, pf-alert, pf-avatar, pf-back-to-top, pf-background-image,
pf-badge, pf-banner, pf-button, pf-card, pf-chip, pf-clipboard-copy,
pf-code-block, pf-dropdown, pf-helper-text, pf-hint, pf-icon,
pf-jump-links, pf-label, pf-label-group, pf-modal, pf-panel, pf-popover,
pf-progress, pf-progress-stepper, pf-search-input, pf-select, pf-spinner,
pf-switch, pf-table, pf-tabs, pf-text-area, pf-text-input, pf-tile,
pf-timestamp, pf-tooltip

Closes #3052, #3053, #3054, #3055, #3056, #3057, #3058, #3059,
#3060, #3061, #3062, #3063, #3064, #3065, #3066, #3067,
#3068, #3069, #3070, #3071, #3072, #3073, #3074, #3075,
#3076, #3077, #3078, #3079, #3080, #3081, #3082, #3083,
#3084, #3085, #3086

Test plan

  • Verify all element tags are registered with pf-v5-* names
  • Verify CSS custom properties use --pf-v5-c-* prefix
  • Verify global tokens (--pf-global--*) are unchanged
  • Verify sub-components (e.g. pf-v5-accordion-header) are properly renamed

Rename all 35 elements and their sub-components from pf-* to pf-v5-*.
CSS custom properties renamed from --pf-c-* to --pf-v5-c-*.
Global tokens (--pf-global--*) are unchanged.

Closes #3052, closes #3053, closes #3054, closes #3055,
closes #3056, closes #3057, closes #3058, closes #3059,
closes #3060, closes #3061, closes #3062, closes #3063,
closes #3064, closes #3065, closes #3066, closes #3067,
closes #3068, closes #3069, closes #3070, closes #3071,
closes #3072, closes #3073, closes #3074, closes #3075,
closes #3076, closes #3077, closes #3078, closes #3079,
closes #3080, closes #3081, closes #3082, closes #3083,
closes #3084, closes #3085, closes #3086

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: 6b48a57

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 Major

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

* fix(table): fix accessibility audit failures

- Correct ARIA role for column headers (`colheader` -> `columnheader`)
- Add accessible label to the row expand/collapse toggle button
- Add `aria-controls` linking the toggle button to its expansion content

Closes #2813

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* docs: changeset

Fix accessibility features for the pf-table component, including column header role and accessible label for the row toggle button.

---------

Co-authored-by: Benny Powers <web@bennypowers.com>
Co-authored-by: Benny Powers <bennypowers@users.noreply.github.com>
@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!: rename all elements to pf-v5-* prefix"
}

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 15, 2026

Deploy Preview for patternfly-elements ready!

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

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

@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 f0dd3b2: Report

bennypowers and others added 23 commits April 15, 2026 15:42
Closes #2499

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…shed package (#2970)

Closes #2967

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Exclude build outputs (.js, .d.ts, .js.map) from the esbuild tsconfig
so TypeScript doesn't try to overwrite them.

Closes #2712

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Closes #2967

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* fix(back-to-top): change background color on hover and focus

Apply hover/focus colors directly rather than through CSS custom
property overrides that don't cascade into shadow DOM.

Closes #2743

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* docs: changeset
Add fallback in getSlotted() to query slot elements directly when
async slot record initialization hasn't completed yet.

Closes #2946

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* perf(tabs): add passive scroll event listeners

Closes #2600

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* docs: changeset
* fix(select): replace RH color tokens with PF v4 global tokens

Closes #2954

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* docs: changeset
Closes #2771

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…#3101)

* fix(popover): outsideClick should not fire on already-hidden popovers

Guard the outsideClick handler to skip popovers that are already
hidden, preventing spurious hide/hidden events on closed popovers
when clicking anywhere on the page.

Closes #2513

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* docs: changeset
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>
* fix(jump-links): landmark label

Closes #2860

* fix(jump-links): add default label

* fix(jump-links): update default label

* feat(jump-links): add part to label

---------

Co-authored-by: Adam Johnson <adam.b.johnson1@gmail.com>
* fix(switch): add static accessible label

Rename `label` property to `accessibleLabel` (attribute:
`accessible-label`) for consistency. Wire it to set `ariaLabel`
on element internals for a proper static accessible name.

Closes #2754

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* docs: changeset

* fix(switch): keep label as deprecated, add accessible-label

Keep the existing `label` property as deprecated and fall back
to it when `accessible-label` is not set. JSDoc advises updating
the accessible label based on checked state.

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Use #container:has(#link:hover) instead of :host(:hover) so the
border only thickens when hovering the link text itself, not when
hovering the close button. Matches PFv4 behavior.

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
…3105)

* docs: adding LGTM tradition to README and storing full list of LGTMs in root of repo

* docs: adding README updates

* docs: lgtms

---------

Co-authored-by: Benny Powers <web@bennypowers.com>
Update all docs site references to use the new pf-v5-* element names,
including HTML tags, CSS selectors, import paths, and code examples.

Blog posts and changelogs left unchanged as historical records.
PF4 core CSS tokens (--pf-c-content/title/text) left unchanged as
they reference the PF CSS framework, not pf-elements components.

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

SSR Test Run for f624b6f: Report

- Update main.mjs to import PfV5Icon from renamed path
- Update pfe-assets.cjs regex and JSDoc for pf-v5-* paths
- Pass prefix option to PfeAssetsPlugin in eleventy config
- Replace broken generateImportMap shortcodes with static import
  maps (jspm.io can't resolve unpublished pf-v5-* paths)
- Fix pre-existing TS build errors: use Router.Middleware instead
  of non-existent RouterMiddleware export, remove stale
  @ts-expect-error directive
- Fix pre-existing slug function call using deprecated
  eleventyConfig.javascript.functions API

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@bennypowers bennypowers requested a review from zeroedin April 23, 2026 14:57
- Use koa Middleware type instead of Router.Middleware namespace
  (namespace not available with Node moduleResolution)
- Use @ts-ignore instead of @ts-expect-error for colorjs.io import
  (error occurs on CI but not locally due to moduleResolution)

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Apply pf-v5-* rename rules to all incoming changes from main:
- label: link variant, hover borders, icon colors, link.html demo
- switch: accessible-label property and tests
- popover: outsideClick guard for hidden popovers
- table: columnheader role fix, toggle button a11y
- tabs: passive scroll event listeners
- jump-links: landmark label with part attribute
- select: replace rh-color tokens with pf-global tokens
- back-to-top: hover/focus background color, pf-button selectors
- core: SlotController fix

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
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.

4 participants