Skip to content

chore(docs): update docs scaffolding for v6 element names #3133

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zeroedin wants to merge 1 commit into
base: staging/pfv6
Choose a base branch
from
Open

chore(docs): update docs scaffolding for v6 element names #3133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions docs/_includes/_nav.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,24 +15,24 @@
</picture>
</a>
</div>
<pf-v5-dropdown id="docs-versions-dropdown">
<pf-v5-button slot="toggle"
<pf-v6-dropdown id="docs-versions-dropdown">
<pf-v6-button slot="toggle"
variant="control"
icon="caret-down"
icon-set="fas">Versions</pf-v5-button>
<pf-v5-dropdown-menu slot="menu">
icon-set="fas">Versions</pf-v6-button>
<pf-v6-dropdown-menu slot="menu">
{% for version in versions %}
{%- if version.current -%}
{%- set prefix = '' -%}
{%- else -%}
{%- set prefix = '/' + version.slug -%}
{%- endif %}
<pf-v5-dropdown-item href="{{ prefix }}{{ page.url }}" {{ 'disabled' if version.current }}>
<pf-v6-dropdown-item href="{{ prefix }}{{ page.url }}" {{ 'disabled' if version.current }}>
{{ version.label }}
</pf-v5-dropdown-item>
</pf-v6-dropdown-item>
{% endfor %}
</pf-v5-dropdown-menu>
</pf-v5-dropdown>
</pf-v6-dropdown-menu>
</pf-v6-dropdown>
</div>
</div>

Expand Down
6 changes: 3 additions & 3 deletions docs/_includes/layout-blog-index.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ layout: layout-base.njk

<div class="posts">
{% for post in collections.blog | reverse %}
<pf-v5-card>
<pf-v6-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 %}
Expand All @@ -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-v5-card>
</pf-v6-card>
{% endfor %}
</div>
</main>
Expand All @@ -34,7 +34,7 @@ layout: layout-base.njk
gap: 2rem;
}

pf-v5-card::part(footer) {
pf-v6-card::part(footer) {
justify-content: space-between;
align-items: center;
}
Expand Down
4 changes: 2 additions & 2 deletions docs/_includes/layout-blog.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,13 @@ layout: layout-base.njk
{{ content | safe }}
</section>

<pf-v5-back-to-top id="back-to-top-link">Back to Top</pf-v5-back-to-top>
<pf-v6-back-to-top id="back-to-top-link">Back to Top</pf-v6-back-to-top>
</main>

{% include '_foot.njk' %}

<script type="module">
import '@patternfly/elements/pf-v5-back-to-top/pf-v5-back-to-top.js';
import '@patternfly/elements/pf-v6-back-to-top/pf-v6-back-to-top.js';
const allTocLinks = document.querySelectorAll('nav.toc [href^="#"]')

const activeLinks = document.querySelectorAll('nav.toc li.active');
Expand Down
22 changes: 11 additions & 11 deletions docs/_snippets/accordion-html.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
```html

<script type="module">
import '@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js';
import '@patternfly/elements/pf-v6-accordion/pf-v6-accordion.js';
</script>

<pf-v5-accordion>
<pf-v5-accordion-header expanded>
<pf-v6-accordion>
<pf-v6-accordion-header expanded>
<h3>Getting Started</h3>
</pf-v5-accordion-header>
<pf-v5-accordion-panel>
</pf-v6-accordion-header>
<pf-v6-accordion-panel>
<p>Read our <a href="/get-started/">Getting started</a> page to learn how to install and use PatternFly Elements.</p>
</pf-v5-accordion-panel>
<pf-v5-accordion-header>
</pf-v6-accordion-panel>
<pf-v6-accordion-header>
<h3>HTML APIs</h3>
</pf-v5-accordion-header>
<pf-v5-accordion-panel>
</pf-v6-accordion-header>
<pf-v6-accordion-panel>
<p>For more information on how to use each PatternFly element, read the <a href="/components/">component docs</a>.</p>
</pf-v5-accordion-panel>
</pf-v5-accordion>
</pf-v6-accordion-panel>
</pf-v6-accordion>
```
2 changes: 1 addition & 1 deletion docs/_snippets/accordion-jsx.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {
Accordion,
AccordionPanel,
AccordionHeader,
} from "@patternfly/elements/react/pf-v5-accordion/pf-v5-accordion.js";
} from "@patternfly/elements/react/pf-v6-accordion/pf-v6-accordion.js";

export default function App() {
const data = [
Expand Down
14 changes: 7 additions & 7 deletions docs/_snippets/accordion-ng.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
{%raw%}
```ts
import "@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js";
import "@patternfly/elements/pf-v6-accordion/pf-v6-accordion.js";

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

@Component({
selector: "app-root",
template: `
<pf-v5-accordion>
<pf-v6-accordion>
<ng-template ngFor let-item [ngForOf]="data">
<pf-v5-accordion-header>
<pf-v6-accordion-header>
<h3>{{ item.header }}</h3>
</pf-v5-accordion-header>
<pf-v5-accordion-panel>
</pf-v6-accordion-header>
<pf-v6-accordion-panel>
<p>{{ item.panel }}</p>
</pf-v5-accordion-panel>
</pf-v6-accordion-panel>
</ng-template>
</pf-v5-accordion>
</pf-v6-accordion>
`,
})
export class AppComponent {
Expand Down
14 changes: 7 additions & 7 deletions docs/_snippets/accordion-svelte.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
{%raw%}
```html
<pf-v5-accordion>
<pf-v6-accordion>
{#each data as item}
<pf-v5-accordion-header>
<pf-v6-accordion-header>
<h3>{item.header}</h3>
</pf-v5-accordion-header>
<pf-v5-accordion-panel>
</pf-v6-accordion-header>
<pf-v6-accordion-panel>
<p>{item.panel}</p>
</pf-v5-accordion-panel>
</pf-v6-accordion-panel>
{/each}
</pf-v5-accordion>
</pf-v6-accordion>

<script>
import "@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js";
import "@patternfly/elements/pf-v6-accordion/pf-v6-accordion.js";
let data = [
{ header: 'Heading 1', panel: 'Here is some content' },
{ header: 'Heading 2', panel: 'Here is some more content' },
Expand Down
14 changes: 7 additions & 7 deletions docs/_snippets/accordion-vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
{%raw%}
```html
<template>
<pf-v5-accordion>
<pf-v6-accordion>
<template v-for="{ header, panel } in data">
<pf-v5-accordion-header>
<pf-v6-accordion-header>
<h3>{{ header }}</h3>
</pf-v5-accordion-header>
<pf-v5-accordion-panel>
</pf-v6-accordion-header>
<pf-v6-accordion-panel>
<p>{{ panel }}</p>
</pf-v5-accordion-panel>
</pf-v6-accordion-panel>
</template>
</pf-v5-accordion>
</pf-v6-accordion>
</template>
{%endraw%}

<script>
import "@patternfly/elements/pf-v5-accordion/pf-v5-accordion.js";
import "@patternfly/elements/pf-v6-accordion/pf-v6-accordion.js";
export default {
name: 'App',
data() {
Expand Down
8 changes: 4 additions & 4 deletions docs/_snippets/card-html.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
```html
<script type="module" src="https://esm.sh/@patternfly/elements/pf-v5-card/pf-v5-card.js"></script>
<script type="module" src="https://esm.sh/@patternfly/elements/pf-v6-card/pf-v6-card.js"></script>

<pf-v5-card border>
<pf-v6-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-v5-card</code></a>
</pf-v5-card>
<a class="cta" slot="footer" href="components/card">More about <code>pf-v6-card</code></a>
</pf-v6-card>
```
2 changes: 1 addition & 1 deletion docs/_snippets/pf-bar-html.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
PatternFly.org
</a>
<a href="https://github.com/patternfly/patternfly-elements" class="cta">
<pf-v5-icon size="md" icon="github" set="fab" aria-hidden="true"></pf-v5-icon>
<pf-v6-icon size="md" icon="github" set="fab" aria-hidden="true"></pf-v6-icon>
Contribute on Github
</a>
</div>
8 changes: 4 additions & 4 deletions docs/components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
const CLASS_KEY = 'html-lit-react-snippets';
const LS_KEY = `${CLASS_KEY}-index`;
document.addEventListener('expand', async function(event) {
const PfV5Tabs = await customElements.whenDefined('pf-v5-tabs');
if (PfV5Tabs.isExpandEvent(event)) {
const tabs = event.tab.closest('pf-v5-tabs');
const PfV6Tabs = await customElements.whenDefined('pf-v6-tabs');
if (PfV6Tabs.isExpandEvent(event)) {
const tabs = event.tab.closest('pf-v6-tabs');
if (tabs.classList.contains(CLASS_KEY)) {
await tabs.updateComplete;
localStorage.setItem(LS_KEY, tabs.activeIndex);
Expand All @@ -13,7 +13,7 @@
}
});
async function update() {
for (const tabs of document.querySelectorAll(`pf-v5-tabs.${CLASS_KEY}`)) {
for (const tabs of document.querySelectorAll(`pf-v6-tabs.${CLASS_KEY}`)) {
await tabs.updateComplete;
tabs.activeIndex = parseInt(localStorage.getItem(LS_KEY) ?? '0');
}
Expand Down
12 changes: 6 additions & 6 deletions docs/docs/develop/create.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-v5-cool-element`.
* PatternFly Elements should be prefixed with `pf-v5-`. However, prefix your
* As an example, we'll create `pf-v6-cool-element`.
* PatternFly Elements should be prefixed with `pf-v6-`. However, prefix your
elements with whatever fits your project if you are using the generator outside of this project.


Expand All @@ -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-v5-cool-element` directory.
`cd` into the `pf-v6-cool-element` directory.

```bash
cd elements/pf-v5-cool-element
cd elements/pf-v6-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-v5-cool-element.ts` - The element class declaration
* `pf-v5-cool-element.css` - The element's CSS style module
* `pf-v6-cool-element.ts` - The element class declaration
* `pf-v6-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.
Expand Down
10 changes: 5 additions & 5 deletions docs/docs/develop/css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@ tags:

{% band %}

We want the `pf-v5-cool-element` to have a profile photo, a username, and a follow button.
We want the `pf-v6-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-v5-cool-element.css` file.
We'll be working in the `pf-v6-cool-element.css` file.

The boilerplate stylesheet has a `:host` selector that makes our element display
as a block element.
Expand Down Expand Up @@ -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-v5-cool-element>`.
1. The `:host` selector sets the styles of the container element `<pf-v6-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-v5-cool-element` is more appealing, we'll add the follow button's interaction
Now that our `pf-v6-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-v5-cool-element.ts` file.
We can accomplish both of these tasks by updating the `pf-v6-cool-element.ts` file.

<a class="cta" href="{{ '../javascript' | url }}">Next up: Write your JavaScript</a>

Expand Down
14 changes: 7 additions & 7 deletions docs/docs/develop/html.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,17 @@ If you are unfamiliar with TypeScript, read their getting-started documentation,
and feel free to reach out to the PatternFly Elements team on our social media
channels.

We'll edit the `pf-v5-cool-element.ts` file to add some HTML to our element's
We'll edit the `pf-v6-cool-element.ts` file to add some HTML to our element's
template. LitElements define their template in the `render()` method.
The `render()` method can return a string, a number, a DOM node, etc, but
usually it returns a `TemplateResult`, which is an `html`
[tagged template
literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates).

Let's turn `pf-v5-cool-element` into a profile element that has a profile photo, a
Let's turn `pf-v6-cool-element` into a profile element that has a profile photo, a
username, and a button to follow the user.

Here's the updated `render()` method in `pf-v5-cool-element.ts`:
Here's the updated `render()` method in `pf-v6-cool-element.ts`:

```ts
render() {
Expand All @@ -50,15 +50,15 @@ render() {
```

We'll also need to update `/demo/index.html`
so that the user's name is passed into the slot that we added in `pf-v5-cool-element.ts`:
so that the user's name is passed into the slot that we added in `pf-v6-cool-element.ts`:

```html
<link rel="stylesheet" href="demo.css">
<script type="module" src="pf-v5-cool-element.js"></script>
<script type="module" src="pf-v6-cool-element.js"></script>

<pf-v5-cool-element>
<pf-v6-cool-element>
Kyle Buchanan
</pf-v5-cool-element>
</pf-v6-cool-element>
```

Slots take the HTML from the light DOM and project it into the shadow DOM at a given location.
Expand Down
8 changes: 4 additions & 4 deletions docs/docs/develop/import-maps.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,14 @@ Example:
<script type="importmap">
{
"imports": {
"@patternfly/elements/pf-v5-card/pf-v5-card.js": "path/to/pf-card.js"
"@patternfly/elements/pf-v6-card/pf-v6-card.js": "path/to/pf-card.js"
}
}
</script>

<!-- // Bare module import specifier -->
<script type="module">
import '@patternfly/elements/pf-v5-card/pf-v5-card.js';
import '@patternfly/elements/pf-v6-card/pf-v6-card.js';
</script>
```

Expand All @@ -65,7 +65,7 @@ Once you've generated your import map and added it to your project, you can use
<script type="importmap">
{
"imports": {
"@patternfly/elements/pf-v5-card/pf-v5-card.js": "https://ga.jspm.io/npm:@patternfly/elements@2.5.0/pf-card/pf-card.js"
"@patternfly/elements/pf-v6-card/pf-v6-card.js": "https://ga.jspm.io/npm:@patternfly/elements@2.5.0/pf-card/pf-card.js"
},
"scopes": {
"https://ga.jspm.io/": {
Expand All @@ -87,7 +87,7 @@ Once you've generated your import map and added it to your project, you can use
```javascript
<script type="module">
// resolves to https://ga.jspm.io/npm:@patternfly/elements@2.5.0/pf-card/pf-card.js
import '@patternfly/elements/pf-v5-card/pf-v5-card.js';
import '@patternfly/elements/pf-v6-card/pf-v6-card.js';
</script>
```

Expand Down
Loading
Loading