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

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>

Author: bennypowers

.changeset/rename-all-elements.md

@@ -0,0 +1,12 @@
+---
+"@patternfly/elements": major
+---
+
+All elements are now versioned with a `pf-v5-` prefix.
+
+This is a breaking change. Update your HTML to use the new element names,
+e.g. `<pf-button>` becomes `<pf-v5-button>`, `<pf-accordion>` becomes
+`<pf-v5-accordion>`, etc.
+
+CSS custom properties are also renamed from `--pf-c-*` to `--pf-v5-c-*`.
+Global tokens (`--pf-global--*`) are unchanged.

elements/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@patternfly/elements",
   "license": "MIT",
-  "version": "5.0.0",
+  "version": "4.3.1",
   "description": "PatternFly Elements",
   "customElements": "custom-elements.json",
   "type": "module",
+  "main": "./pfe.min.js",
   "module": "./pfe.js",
   "types": "./pfe.d.ts",
   "exports": {
+    ".": "./pfe.min.js",
     "./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",
@@ -33,6 +35,7 @@
     "./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-jazz-hands/pf-jazz-hands.js": "./pf-jazz-hands/pf-jazz-hands.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",
@@ -137,7 +140,7 @@
   "dependencies": {
     "@lit/context": "^1.1.6",
     "@patternfly/icons": "^1.0.3",
-    "@patternfly/pfe-core": "^6.0.0",
+    "@patternfly/pfe-core": "^5.0.6",
     "lit": "^3.3.2",
     "tslib": "^2.8.1"
   }

elements/pf-v5-back-to-top/pf-v5-back-to-top.css

@@ -41,16 +41,14 @@ a {
   gap: var(--pf-v5-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));
 }
 
-a:hover,
-a:focus {
+a:hover {
   --pf-v5-c-button--m-primary--Color: var(--pf-v5-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100, #fff));
   --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080));
 }
 
-[part="trigger"]:is(pf-v5-button):hover,
-[part="trigger"]:is(pf-v5-button):focus-within {
+a:focus {
+  --pf-v5-c-button--m-primary--Color: var(--pf-v5-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100,#fff));
   --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080));
-  --pf-v5-c-button--m-primary--Color: var(--pf-v5-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100, #fff));
 }
 
 [part="trigger"][hidden] {

elements/pf-v5-back-to-top/test/pf-back-to-top.spec.ts

@@ -5,7 +5,10 @@ import { setViewport, sendKeys } from '@web/test-runner-commands';
 import { allUpdates } from '@patternfly/pfe-tools/test/utils.js';
 
 import { PfV5BackToTop } from '../pf-v5-back-to-top.js';
-import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { type A11yTreeSnapshot, a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+
+const takeProps = (props: string[]) => (obj: object) =>
+  Object.fromEntries(Object.entries(obj).filter(([k]) => props.includes(k)));
 
 describe('<pf-v5-back-to-top>', function() {
   it('imperatively instantiates', function() {
@@ -30,6 +33,7 @@ describe('<pf-v5-back-to-top>', function() {
 
   describe('when rendered in a viewport with a height smaller then content length', function() {
     let element: PfV5BackToTop;
+    let snapshot: A11yTreeSnapshot;
 
     beforeEach(async function() {
       await setViewport({ width: 320, height: 640 });
@@ -42,29 +46,30 @@ describe('<pf-v5-back-to-top>', function() {
         </div>
       `);
       element = container.querySelector('pf-v5-back-to-top')!;
+      snapshot = await a11ySnapshot();
+
       await allUpdates(element);
     });
 
-    it('should be hidden on init', async function() {
-      const snapshot = await a11ySnapshot();
-      expect(snapshot).to.not.axContainRole('link');
+    it('should be hidden on init', function() {
+      const { children } = snapshot;
+      expect(children).to.be.undefined;
     });
 
-    it('should not be accessible', async function() {
-      const snapshot = await a11ySnapshot();
-      expect(snapshot).to.not.axContainName('Back to top');
+    it('should not be accessible', function() {
+      expect(snapshot.children).to.be.undefined;
     });
 
     describe('when scrolled 401px', function() {
       beforeEach(async function() {
         window.scrollTo({ top: 401, behavior: 'instant' });
         await nextFrame();
         await allUpdates(element);
+        snapshot = await a11ySnapshot();
       });
 
-      it('should be visible', async function() {
-        expect(await a11ySnapshot())
-            .to.axContainQuery({ role: 'link', name: 'Back to top' });
+      it('should be visible', function() {
+        expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);
       });
 
       it('should be accessible', async function() {
@@ -90,11 +95,11 @@ describe('<pf-v5-back-to-top>', function() {
         await nextFrame();
         element.alwaysVisible = true;
         await allUpdates(element);
+        snapshot = await a11ySnapshot();
       });
 
-      it('should be visible', async function() {
-        expect(await a11ySnapshot())
-            .to.axContainQuery({ role: 'link', name: 'Back to top' });
+      it('should be visible', function() {
+        expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);
       });
 
       it('should be accessible', async function() {
@@ -117,29 +122,32 @@ describe('<pf-v5-back-to-top>', function() {
       beforeEach(async function() {
         element.scrollDistance = 1000;
         await allUpdates(element);
+        snapshot = await a11ySnapshot();
       });
 
-      it('should be hidden', async function() {
-        expect(await a11ySnapshot()).to.not.axContainRole('link');
+      it('should be hidden', function() {
+        const { children } = snapshot;
+        expect(children).to.be.undefined;
       });
 
       describe('when scrolled 1001px', function() {
         beforeEach(async function() {
           window.scrollTo({ top: 1001, behavior: 'instant' });
           await nextFrame();
           await allUpdates(element);
+          snapshot = await a11ySnapshot();
         });
 
-        it('should be visible', async function() {
-          expect(await a11ySnapshot())
-              .to.axContainQuery({ role: 'link', name: 'Back to top' });
+        it('should be visible', function() {
+          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);
         });
       });
     });
   });
 
   describe('when rendered in an element with an overflowed height', function() {
     let element: PfV5BackToTop;
+    let snapshot: A11yTreeSnapshot;
 
     beforeEach(async function() {
       window.scrollTo({ top: 0, behavior: 'instant' });
@@ -152,11 +160,13 @@ describe('<pf-v5-back-to-top>', function() {
       `);
       element = container.querySelector('pf-v5-back-to-top')!;
       await allUpdates(element);
+
+      snapshot = await a11ySnapshot({ selector: 'pf-v5-back-to-top' });
     });
 
-    it('should be hidden on init', async function() {
-      const snapshot = await a11ySnapshot({ selector: 'pf-v5-back-to-top' });
-      expect(snapshot?.children).to.not.be.ok;
+    it('should be hidden on init', function() {
+      const { children } = snapshot;
+      expect(children).to.be.undefined;
     });
 
     describe('when scrolled 401px', function() {
@@ -166,17 +176,18 @@ describe('<pf-v5-back-to-top>', function() {
         scrollableElement.dispatchEvent(new Event('scroll'));
         await nextFrame();
         await allUpdates(element);
+        snapshot = await a11ySnapshot();
       });
 
-      it('should be visible', async function() {
-        expect(await a11ySnapshot())
-            .to.axContainQuery({ role: 'link', name: 'Back to top' });
+      it('should be visible', function() {
+        expect(snapshot.children?.at(0)?.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);
       });
     });
   });
 
   describe('when no text is provided', function() {
     let element: PfV5BackToTop;
+    let snapshot: A11yTreeSnapshot;
 
     describe('as a link', function() {
       beforeEach(async function() {
@@ -198,11 +209,11 @@ describe('<pf-v5-back-to-top>', function() {
           window.scrollTo({ top: 401, behavior: 'instant' });
           await nextFrame();
           await allUpdates(element);
+          snapshot = await a11ySnapshot();
         });
 
-        it('should have a label of "Back to top"', async function() {
-          expect(await a11ySnapshot())
-              .to.axContainQuery({ role: 'link', name: 'Back to top' });
+        it('should have a label of "Back to top"', function() {
+          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Back to top' }]);
         });
       });
     });
@@ -227,18 +238,19 @@ describe('<pf-v5-back-to-top>', function() {
           window.scrollTo({ top: 401, behavior: 'instant' });
           await nextFrame();
           await allUpdates(element);
+          snapshot = await a11ySnapshot();
         });
 
-        it('should have a label of "Back to top"', async function() {
-          expect(await a11ySnapshot())
-              .to.axContainQuery({ role: 'button', name: 'Back to top' });
+        it('should have a label of "Back to top"', function() {
+          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'button', name: 'Back to top' }]);
         });
       });
     });
   });
 
   describe('when a label is provided', function() {
     let element: PfV5BackToTop;
+    let snapshot: A11yTreeSnapshot;
 
     describe('as a link', function() {
       beforeEach(async function() {
@@ -260,11 +272,11 @@ describe('<pf-v5-back-to-top>', function() {
           window.scrollTo({ top: 401, behavior: 'instant' });
           await nextFrame();
           await allUpdates(element);
+          snapshot = await a11ySnapshot();
         });
 
-        it('should have a label of "Return to top"', async function() {
-          expect(await a11ySnapshot())
-              .to.axContainQuery({ role: 'link', name: 'Return to top' });
+        it('should have a label of "Return to top"', function() {
+          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'link', name: 'Return to top' }]);
         });
       });
     });
@@ -289,11 +301,11 @@ describe('<pf-v5-back-to-top>', function() {
           window.scrollTo({ top: 401, behavior: 'instant' });
           await nextFrame();
           await allUpdates(element);
+          snapshot = await a11ySnapshot();
         });
 
-        it('should have a label of "Return to top"', async function() {
-          expect(await a11ySnapshot())
-              .to.axContainQuery({ role: 'button', name: 'Return to top' });
+        it('should have a label of "Return to top"', function() {
+          expect(snapshot.children?.map(takeProps(['name', 'role']))).to.deep.equal([{ role: 'button', name: 'Return to top' }]);
         });
       });
     });

elements/pf-v5-code-block/pf-v5-code-block.ts

@@ -4,16 +4,19 @@ import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './pf-v5-code-block.css';
 
+/**
+ * A **code block** is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.
+ * @alias Code Block
+ * @attr {boolean} [expanded=false]
+ *       Indicates if the code-block has been expanded
+ */
+
 function dedent(str: string): string {
   const stripped = str.replace(/^\n/, '');
   const match = stripped.match(/^\s+/);
   return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;
 }
 
-/**
- * A **code block** is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.
- * @alias Code Block
- */
 @customElement('pf-v5-code-block')
 export class PfV5CodeBlock extends LitElement {
   static readonly styles: CSSStyleSheet[] = [styles];

elements/pf-v5-hint/test/pf-hint.spec.ts

@@ -22,16 +22,16 @@ describe('<pf-v5-hint>', function() {
   });
 
   describe('basic hint', function() {
+    let element: PfV5Hint;
     beforeEach(async function() {
-      await createFixture<PfV5Hint>(html`
+      element = await createFixture<PfV5Hint>(html`
         <pf-v5-hint>Welcome to the new documentation experience.</pf-v5-hint>
       `);
     });
 
     it('should render body content, and not title footer, or actions', async function() {
-      const snapshot = await a11ySnapshot();
-      expect(snapshot).to.axContainName('Welcome to the new documentation experience.');
-      expect(snapshot).to.not.axContainRole('button');
+      const snap = await a11ySnapshot();
+      expect(snap.children?.length).to.equal(1);
     });
   });
 
@@ -48,9 +48,8 @@ describe('<pf-v5-hint>', function() {
     });
 
     it('should render title and body content', async function() {
-      const snapshot = await a11ySnapshot();
-      expect(snapshot).to.axContainName('Do more with Find it Fix it capabilities');
-      expect(snapshot).to.axContainName('Upgrade to Red Hat Smart Management.');
+      const snap = await a11ySnapshot();
+      expect(snap.children?.length).to.equal(2);
     });
   });
 
@@ -87,10 +86,11 @@ describe('<pf-v5-hint>', function() {
     });
 
     it('should render title, body, and actions', async function() {
-      const snapshot = await a11ySnapshot();
-      expect(snapshot).to.axContainQuery({ role: 'button' });
-      expect(snapshot).to.axContainName('Do more with Find it Fix it capabilities');
-      expect(snapshot).to.axContainName('Upgrade to Red Hat Smart Management.');
+      const { children: [actions, title, body, ...rest] = [] } = await a11ySnapshot();
+      expect(actions.role).to.equal('button');
+      expect(title.role).to.equal('text');
+      expect(body.role).to.equal('text');
+      expect(rest.length).to.equal(0);
     });
   });
 });