Skip to content

Commit e7ba695

Browse files
authored
Merge pull request #3088 from patternfly/rename/all-elements
feat!: rename all elements to pf-v5-* prefix
2 parents 853c5f0 + fe3f83c commit e7ba695

761 files changed

Lines changed: 15777 additions & 15756 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

.changeset/rename-all-elements.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
"@patternfly/elements": major
3+
---
4+
5+
All elements are now versioned with a `pf-v5-` prefix.
6+
7+
This is a breaking change. Update your HTML to use the new element names,
8+
e.g. `<pf-button>` becomes `<pf-v5-button>`, `<pf-accordion>` becomes
9+
`<pf-v5-accordion>`, etc.
10+
11+
CSS custom properties are also renamed from `--pf-c-*` to `--pf-v5-c-*`.
12+
Global tokens (`--pf-global--*`) are unchanged.

README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,10 @@ npm start
6363
npm run test:watch
6464

6565
# Run a single test in watch mode.
66-
npm run test:watch -- --files elements/pf-accordion/test/pf-accordion.spec.ts
66+
npm run test:watch -- --files elements/pf-v5-accordion/test/pf-v5-accordion.spec.ts
6767

6868
# Or multiple:
69-
npm run test:watch -- --files 'elements/pf-{select,card}/test/*.spec.ts'
69+
npm run test:watch -- --files 'elements/pf-v5-{select,card}/test/*.spec.ts'
7070

7171
# Run all tests excluding react and vue tests.
7272
npm run test:watch

docs/_includes/_nav.njk

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,24 +15,24 @@
1515
</picture>
1616
</a>
1717
</div>
18-
<pf-dropdown id="docs-versions-dropdown">
19-
<pf-button slot="toggle"
18+
<pf-v5-dropdown id="docs-versions-dropdown">
19+
<pf-v5-button slot="toggle"
2020
variant="control"
2121
icon="caret-down"
22-
icon-set="fas">Versions</pf-button>
23-
<pf-dropdown-menu slot="menu">
22+
icon-set="fas">Versions</pf-v5-button>
23+
<pf-v5-dropdown-menu slot="menu">
2424
{% for version in versions %}
2525
{%- if version.current -%}
2626
{%- set prefix = '' -%}
2727
{%- else -%}
2828
{%- set prefix = '/' + version.slug -%}
2929
{%- endif %}
30-
<pf-dropdown-item href="{{ prefix }}{{ page.url }}" {{ 'disabled' if version.current }}>
30+
<pf-v5-dropdown-item href="{{ prefix }}{{ page.url }}" {{ 'disabled' if version.current }}>
3131
{{ version.label }}
32-
</pf-dropdown-item>
32+
</pf-v5-dropdown-item>
3333
{% endfor %}
34-
</pf-dropdown-menu>
35-
</pf-dropdown>
34+
</pf-v5-dropdown-menu>
35+
</pf-v5-dropdown>
3636
</div>
3737
</div>
3838

docs/_includes/layout-blog-index.njk

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ layout: layout-base.njk
99

1010
<div class="posts">
1111
{% for post in collections.blog | reverse %}
12-
<pf-card>
12+
<pf-v5-card>
1313
<h2 slot="header">{{ post.data.title }}</h2>
1414
{% if post.data.tagline %}
1515
<p class="tagline"><a href="{{ post.data.page.url }}">{{ post.data.tagline }}</a></p>{% endif %}
@@ -18,7 +18,7 @@ layout: layout-base.njk
1818
{% endif %}
1919
<a slot="footer" class="cta" href="{{ post.data.page.url }}">Read Post</a>
2020
<time slot="footer" datetime="{{ post.data.page.date }}">{{ post.data.page.date | prettyDate }}</time>
21-
</pf-card>
21+
</pf-v5-card>
2222
{% endfor %}
2323
</div>
2424
</main>
@@ -34,7 +34,7 @@ layout: layout-base.njk
3434
gap: 2rem;
3535
}
3636
37-
pf-card::part(footer) {
37+
pf-v5-card::part(footer) {
3838
justify-content: space-between;
3939
align-items: center;
4040
}

docs/_includes/layout-blog.njk

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,13 @@ layout: layout-base.njk
2828
{{ content | safe }}
2929
</section>
3030

31-
<pf-back-to-top id="back-to-top-link">Back to Top</pf-back-to-top>
31+
<pf-v5-back-to-top id="back-to-top-link">Back to Top</pf-v5-back-to-top>
3232
</main>
3333

3434
{% include '_foot.njk' %}
3535

3636
<script type="module">
37-
import '@patternfly/elements/pf-back-to-top/pf-back-to-top.js';
37+
import '@patternfly/elements/pf-v5-back-to-top/pf-v5-back-to-top.js';
3838
const allTocLinks = document.querySelectorAll('nav.toc [href^="#"]')
3939
4040
const activeLinks = document.querySelectorAll('nav.toc li.active');

docs/_plugins/pfe-assets.cjs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const path = require('path');
44
/**
55
* Generate a map of files per package which should be copied to the site dir
66
* @param {object} [options]
7-
* @param {string} [options.prefix='pfe'] element prefix e.g. 'pfe' for 'pf-button'
7+
* @param {string} [options.prefix='pf-v5'] element prefix e.g. 'pf-v5' for 'pf-v5-button'
88
*/
99
function getFilesToCopy(options) {
1010
const cwd = process.cwd();
@@ -46,7 +46,7 @@ function getFilesToCopy(options) {
4646

4747
const DEMO_PATHS_RE =
4848
// eslint-disable-next-line @stylistic/max-len
49-
/(?<attr>href|src)="\/(?<workspace>elements|core)\/pf-(?<unprefixed>.*)\/(?<filename>.*)\.(?<extension>[.\w]+)"/g;
49+
/(?<attr>href|src)="\/(?<workspace>elements|core)\/pf-v5-(?<unprefixed>.*)\/(?<filename>.*)\.(?<extension>[.\w]+)"/g;
5050

5151
/**
5252
* Replace paths in demo files from the dev SPA's format to 11ty's format

docs/_snippets/accordion-html.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
```html
22

33
<script type="module">
4-
import '@patternfly/elements/pf-accordion/pf-accordion.js';
4+
import '@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js';
55
</script>
66

7-
<pf-accordion>
8-
<pf-accordion-header expanded>
7+
<pf-v5-accordion>
8+
<pf-v5-accordion-header expanded>
99
<h3>Getting Started</h3>
10-
</pf-accordion-header>
11-
<pf-accordion-panel>
10+
</pf-v5-accordion-header>
11+
<pf-v5-accordion-panel>
1212
<p>Read our <a href="/get-started/">Getting started</a> page to learn how to install and use PatternFly Elements.</p>
13-
</pf-accordion-panel>
14-
<pf-accordion-header>
13+
</pf-v5-accordion-panel>
14+
<pf-v5-accordion-header>
1515
<h3>HTML APIs</h3>
16-
</pf-accordion-header>
17-
<pf-accordion-panel>
16+
</pf-v5-accordion-header>
17+
<pf-v5-accordion-panel>
1818
<p>For more information on how to use each PatternFly element, read the <a href="/components/">component docs</a>.</p>
19-
</pf-accordion-panel>
20-
</pf-accordion>
19+
</pf-v5-accordion-panel>
20+
</pf-v5-accordion>
2121
```

docs/_snippets/accordion-jsx.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
Accordion,
44
AccordionPanel,
55
AccordionHeader,
6-
} from "@patternfly/elements/react/pf-accordion/pf-accordion.js";
6+
} from "@patternfly/elements/react/pf-v5-accordion/pf-v5-accordion.js";
77

88
export default function App() {
99
const data = [

docs/_snippets/accordion-ng.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
{%raw%}
22
```ts
3-
import "@patternfly/elements/pf-accordion/pf-accordion.js";
3+
import "@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js";
44

55
import { Component } from "@angular/core";
66

77
@Component({
88
selector: "app-root",
99
template: `
10-
<pf-accordion>
10+
<pf-v5-accordion>
1111
<ng-template ngFor let-item [ngForOf]="data">
12-
<pf-accordion-header>
12+
<pf-v5-accordion-header>
1313
<h3>{{ item.header }}</h3>
14-
</pf-accordion-header>
15-
<pf-accordion-panel>
14+
</pf-v5-accordion-header>
15+
<pf-v5-accordion-panel>
1616
<p>{{ item.panel }}</p>
17-
</pf-accordion-panel>
17+
</pf-v5-accordion-panel>
1818
</ng-template>
19-
</pf-accordion>
19+
</pf-v5-accordion>
2020
`,
2121
})
2222
export class AppComponent {

docs/_snippets/accordion-svelte.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
{%raw%}
22
```html
3-
<pf-accordion>
3+
<pf-v5-accordion>
44
{#each data as item}
5-
<pf-accordion-header>
5+
<pf-v5-accordion-header>
66
<h3>{item.header}</h3>
7-
</pf-accordion-header>
8-
<pf-accordion-panel>
7+
</pf-v5-accordion-header>
8+
<pf-v5-accordion-panel>
99
<p>{item.panel}</p>
10-
</pf-accordion-panel>
10+
</pf-v5-accordion-panel>
1111
{/each}
12-
</pf-accordion>
12+
</pf-v5-accordion>
1313

1414
<script>
15-
import "@patternfly/elements/pf-accordion/pf-accordion.js";
15+
import "@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js";
1616
let data = [
1717
{ header: 'Heading 1', panel: 'Here is some content' },
1818
{ header: 'Heading 2', panel: 'Here is some more content' },

0 commit comments

Comments
 (0)