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

.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.

README.md

@@ -63,10 +63,10 @@ npm start
 npm run test:watch
 
 # Run a single test in watch mode.
-npm run test:watch -- --files elements/pf-accordion/test/pf-accordion.spec.ts
+npm run test:watch -- --files elements/pf-v5-accordion/test/pf-v5-accordion.spec.ts
 
 # Or multiple:
-npm run test:watch -- --files 'elements/pf-{select,card}/test/*.spec.ts'
+npm run test:watch -- --files 'elements/pf-v5-{select,card}/test/*.spec.ts'
 
 # Run all tests excluding react and vue tests.
 npm run test:watch

docs/_includes/_nav.njk

@@ -15,24 +15,24 @@
           </picture>
         </a>
       </div>
-      <pf-dropdown id="docs-versions-dropdown">
-        <pf-button slot="toggle"
+      <pf-v5-dropdown id="docs-versions-dropdown">
+        <pf-v5-button slot="toggle"
                    variant="control"
                    icon="caret-down"
-                   icon-set="fas">Versions</pf-button>
-        <pf-dropdown-menu slot="menu">
+                   icon-set="fas">Versions</pf-v5-button>
+        <pf-v5-dropdown-menu slot="menu">
           {% for version in versions %}
           {%- if version.current -%}
             {%- set prefix = '' -%}
           {%- else -%}
             {%- set prefix = '/' + version.slug -%}
           {%- endif %}
-          <pf-dropdown-item href="{{ prefix }}{{ page.url }}" {{ 'disabled' if version.current }}>
+          <pf-v5-dropdown-item href="{{ prefix }}{{ page.url }}" {{ 'disabled' if version.current }}>
             {{ version.label }}
-          </pf-dropdown-item>
+          </pf-v5-dropdown-item>
           {% endfor %}
-        </pf-dropdown-menu>
-      </pf-dropdown>
+        </pf-v5-dropdown-menu>
+      </pf-v5-dropdown>
     </div>
   </div>
 

docs/_includes/layout-blog-index.njk

@@ -9,7 +9,7 @@ layout: layout-base.njk
 
   <div class="posts">
     {% for post in collections.blog | reverse %}
-      <pf-card>
+      <pf-v5-card>
         <h2 slot="header">{{ post.data.title }}</h2>
         {% if post.data.tagline %}
           <p class="tagline"><a href="{{ post.data.page.url }}">{{ post.data.tagline }}</a></p>{% endif %}
@@ -18,7 +18,7 @@ layout: layout-base.njk
         {% endif %}
         <a slot="footer" class="cta" href="{{ post.data.page.url }}">Read Post</a>
         <time slot="footer" datetime="{{ post.data.page.date }}">{{ post.data.page.date | prettyDate }}</time>
-      </pf-card>
+      </pf-v5-card>
     {% endfor %}
   </div>
 </main>
@@ -34,7 +34,7 @@ layout: layout-base.njk
     gap: 2rem;
   }
 
-  pf-card::part(footer) {
+  pf-v5-card::part(footer) {
     justify-content: space-between;
     align-items: center;
   }

docs/_includes/layout-blog.njk

@@ -28,13 +28,13 @@ layout: layout-base.njk
     {{ content | safe }}
   </section>
 
-  <pf-back-to-top id="back-to-top-link">Back to Top</pf-back-to-top>
+  <pf-v5-back-to-top id="back-to-top-link">Back to Top</pf-v5-back-to-top>
 </main>
 
 {% include '_foot.njk' %}
 
 <script type="module">
-  import '@patternfly/elements/pf-back-to-top/pf-back-to-top.js';
+  import '@patternfly/elements/pf-v5-back-to-top/pf-v5-back-to-top.js';
   const allTocLinks = document.querySelectorAll('nav.toc [href^="#"]')
 
   const activeLinks = document.querySelectorAll('nav.toc li.active');

docs/_plugins/pfe-assets.cjs

@@ -4,7 +4,7 @@ const path = require('path');
 /**
  * Generate a map of files per package which should be copied to the site dir
  * @param {object} [options]
- * @param {string} [options.prefix='pfe'] element prefix e.g. 'pfe' for 'pf-button'
+ * @param {string} [options.prefix='pf-v5'] element prefix e.g. 'pf-v5' for 'pf-v5-button'
  */
 function getFilesToCopy(options) {
   const cwd = process.cwd();
@@ -46,7 +46,7 @@ function getFilesToCopy(options) {
 
 const DEMO_PATHS_RE =
   // eslint-disable-next-line @stylistic/max-len
-  /(?<attr>href|src)="\/(?<workspace>elements|core)\/pf-(?<unprefixed>.*)\/(?<filename>.*)\.(?<extension>[.\w]+)"/g;
+  /(?<attr>href|src)="\/(?<workspace>elements|core)\/pf-v5-(?<unprefixed>.*)\/(?<filename>.*)\.(?<extension>[.\w]+)"/g;
 
 /**
  * Replace paths in demo files from the dev SPA's format to 11ty's format

docs/_snippets/accordion-html.md

@@ -1,21 +1,21 @@
 ```html
 
 <script type="module">
-  import '@patternfly/elements/pf-accordion/pf-accordion.js';
+  import '@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js';
 </script>
 
-<pf-accordion>
-  <pf-accordion-header expanded>
+<pf-v5-accordion>
+  <pf-v5-accordion-header expanded>
     <h3>Getting Started</h3>
-  </pf-accordion-header>
-  <pf-accordion-panel>
+  </pf-v5-accordion-header>
+  <pf-v5-accordion-panel>
     <p>Read our <a href="/get-started/">Getting started</a> page to learn how to install and use PatternFly Elements.</p>
-  </pf-accordion-panel>
-  <pf-accordion-header>
+  </pf-v5-accordion-panel>
+  <pf-v5-accordion-header>
     <h3>HTML APIs</h3>
-  </pf-accordion-header>
-  <pf-accordion-panel>
+  </pf-v5-accordion-header>
+  <pf-v5-accordion-panel>
     <p>For more information on how to use each PatternFly element, read the <a href="/components/">component docs</a>.</p>
-  </pf-accordion-panel>
-</pf-accordion>
+  </pf-v5-accordion-panel>
+</pf-v5-accordion>
 ```

docs/_snippets/accordion-jsx.md

@@ -3,7 +3,7 @@ import {
   Accordion,
   AccordionPanel,
   AccordionHeader,
-} from "@patternfly/elements/react/pf-accordion/pf-accordion.js";
+} from "@patternfly/elements/react/pf-v5-accordion/pf-v5-accordion.js";
 
 export default function App() {
   const data = [

docs/_snippets/accordion-ng.md

@@ -1,22 +1,22 @@
 {%raw%}
 ```ts
-import "@patternfly/elements/pf-accordion/pf-accordion.js";
+import "@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js";
 
 import { Component } from "@angular/core";
 
 @Component({
   selector: "app-root",
   template: `
-    <pf-accordion>
+    <pf-v5-accordion>
       <ng-template ngFor let-item [ngForOf]="data">
-        <pf-accordion-header>
+        <pf-v5-accordion-header>
           <h3>{{ item.header }}</h3>
-        </pf-accordion-header>
-        <pf-accordion-panel>
+        </pf-v5-accordion-header>
+        <pf-v5-accordion-panel>
           <p>{{ item.panel }}</p>
-        </pf-accordion-panel>
+        </pf-v5-accordion-panel>
       </ng-template>
-    </pf-accordion>
+    </pf-v5-accordion>
   `,
 })
 export class AppComponent {

docs/_snippets/accordion-svelte.md

@@ -1,18 +1,18 @@
 {%raw%}
 ```html
-<pf-accordion>
+<pf-v5-accordion>
   {#each data as item}
-  <pf-accordion-header>
+  <pf-v5-accordion-header>
     <h3>{item.header}</h3>
-  </pf-accordion-header>
-  <pf-accordion-panel>
+  </pf-v5-accordion-header>
+  <pf-v5-accordion-panel>
     <p>{item.panel}</p>
-  </pf-accordion-panel>
+  </pf-v5-accordion-panel>
   {/each}
-</pf-accordion>
+</pf-v5-accordion>
 
 <script>
-  import "@patternfly/elements/pf-accordion/pf-accordion.js";
+  import "@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js";
 	let data = [
     { header: 'Heading 1', panel: 'Here is some content' },
     { header: 'Heading 2', panel: 'Here is some more content' },

docs/_snippets/accordion-vue.md

@@ -1,21 +1,21 @@
 {%raw%}
 ```html
 <template>
-  <pf-accordion>
+  <pf-v5-accordion>
     <template v-for="{ header, panel } in data">
-      <pf-accordion-header>
+      <pf-v5-accordion-header>
         <h3>{{ header }}</h3>
-      </pf-accordion-header>
-      <pf-accordion-panel>
+      </pf-v5-accordion-header>
+      <pf-v5-accordion-panel>
         <p>{{ panel }}</p>
-      </pf-accordion-panel>
+      </pf-v5-accordion-panel>
     </template>
-  </pf-accordion>
+  </pf-v5-accordion>
 </template>
 {%endraw%}
 
 <script>
-import "@patternfly/elements/pf-accordion/pf-accordion.js";
+import "@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js";
 export default {
   name: 'App',
   data() {

docs/_snippets/card-html.md

@@ -1,12 +1,12 @@
 ```html
-<script type="module" src="https://esm.sh/@patternfly/elements/pf-card/pf-card.js"></script>
+<script type="module" src="https://esm.sh/@patternfly/elements/pf-v5-card/pf-v5-card.js"></script>
 
-<pf-card border>
+<pf-v5-card border>
   <h2 slot="header">Card component</h2>
   <p>PatternFly Elements are custom HTML elements that work everywhere.
     The Card element has <code>header</code> and <code>footer</code> slots for things like 
     titles and actions.
   </p>
-  <a class="cta" slot="footer" href="components/card">More about <code>pf-card</code></a>
-</pf-card>
+  <a class="cta" slot="footer" href="components/card">More about <code>pf-v5-card</code></a>
+</pf-v5-card>
 ```

docs/_snippets/pf-bar-html.md

@@ -3,7 +3,7 @@
     PatternFly.org
   </a>
   <a href="https://github.com/patternfly/patternfly-elements" class="cta">
-    <pf-icon size="md" icon="github" set="fab" aria-hidden="true"></pf-icon>
+    <pf-v5-icon size="md" icon="github" set="fab" aria-hidden="true"></pf-v5-icon>
     Contribute on Github
   </a>
 </div>

docs/components.md

@@ -2,9 +2,9 @@
   const CLASS_KEY = 'html-lit-react-snippets';
   const LS_KEY = `${CLASS_KEY}-index`;
   document.addEventListener('expand', async function(event) {
-    const PfTabs = await customElements.whenDefined('pf-tabs');
-    if (PfTabs.isExpandEvent(event)) {
-      const tabs = event.tab.closest('pf-tabs');
+    const PfV5Tabs = await customElements.whenDefined('pf-v5-tabs');
+    if (PfV5Tabs.isExpandEvent(event)) {
+      const tabs = event.tab.closest('pf-v5-tabs');
       if (tabs.classList.contains(CLASS_KEY)) {
         await tabs.updateComplete;
         localStorage.setItem(LS_KEY, tabs.activeIndex);
@@ -13,7 +13,7 @@
     }
   });
   async function update() {
-    for (const tabs of document.querySelectorAll(`pf-tabs.${CLASS_KEY}`)) {
+    for (const tabs of document.querySelectorAll(`pf-v5-tabs.${CLASS_KEY}`)) {
       await tabs.updateComplete;
       tabs.activeIndex = parseInt(localStorage.getItem(LS_KEY) ?? '0');
     }

docs/docs/develop/create.md

@@ -35,8 +35,8 @@ tags:
     * Your element's name should be lowercase and needs to contain at least 
       one hyphen. For rules on naming custom elements, refer to the W3C 
       [Custom Elements Working Draft](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name).
-    * As an example, we'll create `pf-cool-element`.  
-    * PatternFly Elements should be prefixed with `pf-`. However, prefix your 
+    * As an example, we'll create `pf-v5-cool-element`.  
+    * PatternFly Elements should be prefixed with `pf-v5-`. However, prefix your 
       elements with whatever fits your project if you are using the generator outside of this project.
 
 
@@ -45,18 +45,18 @@ tags:
   After answering, your new component will be created and bootstrapped in the repository.
 
   Once that's done, switch directories to the element you just created. We'll 
-  `cd` into the `pf-cool-element` directory.
+  `cd` into the `pf-v5-cool-element` directory.
 
   ```bash
-  cd elements/pf-cool-element
+  cd elements/pf-v5-cool-element
   ```
 
   Open your code editor to view the structure of the element.
   The element's source files are located directly in it's package root, in our 
   case:
 
-  * `pf-cool-element.ts` - The element class declaration
-  * `pf-cool-element.css` - The element's CSS style module
+  * `pf-v5-cool-element.ts` - The element class declaration
+  * `pf-v5-cool-element.css` - The element's CSS style module
 
   The `demo` directory contains an HTML partial that you can edit to provide an 
   interactive demo of your element.

docs/docs/develop/css.md

@@ -15,11 +15,11 @@ tags:
 
 {% band %}
 
-We want the `pf-cool-element` to have a profile photo, a username, and a follow button.
+We want the `pf-v5-cool-element` to have a profile photo, a username, and a follow button.
 Right now, it only contains the HTML structure, but we can style our element by 
 updating our CSS to make it look the way we want.
 
-We'll be working in the `pf-cool-element.css` file.
+We'll be working in the `pf-v5-cool-element.css` file.
 
 The boilerplate stylesheet has a `:host` selector that makes our element display 
 as a block element.
@@ -69,12 +69,12 @@ After saving and viewing our demo page, our profile element looks much better.
 
 A couple of things to note:
 
-1.  The `:host` selector sets the styles of the container element `<pf-cool-element>`.
+1.  The `:host` selector sets the styles of the container element `<pf-v5-cool-element>`.
 2.  The `button` styles are encapsulated within this element and will not bleed out, meaning that there's no chance these styles will affect other buttons on the page. Feeling confident that your element will always look the same when it's distributed is one of the main advantages of the shadow DOM. Check out the Styling section of [Shadow DOM v1: Self-Contained Web Components](https://developers.google.com/web/fundamentals/web-components/shadowdom#styling) to learn what else you can do when applying styles to the shadow DOM.
 
-Now that our `pf-cool-element` is more appealing, we'll add the follow button's interaction
+Now that our `pf-v5-cool-element` is more appealing, we'll add the follow button's interaction
 and fill in the profile photo.
-We can accomplish both of these tasks by updating the `pf-cool-element.ts` file.
+We can accomplish both of these tasks by updating the `pf-v5-cool-element.ts` file.
 
 <a class="cta" href="{{ '../javascript' | url }}">Next up: Write your JavaScript</a>