diff --git a/docs/_includes/_nav.njk b/docs/_includes/_nav.njk index aeb39fa129..615809039d 100644 --- a/docs/_includes/_nav.njk +++ b/docs/_includes/_nav.njk @@ -15,24 +15,24 @@ - - + Versions - + icon-set="fas">Versions + {% for version in versions %} {%- if version.current -%} {%- set prefix = '' -%} {%- else -%} {%- set prefix = '/' + version.slug -%} {%- endif %} - + {{ version.label }} - + {% endfor %} - - + + diff --git a/docs/_includes/layout-blog-index.njk b/docs/_includes/layout-blog-index.njk index d6a1305f35..33d705679e 100644 --- a/docs/_includes/layout-blog-index.njk +++ b/docs/_includes/layout-blog-index.njk @@ -9,7 +9,7 @@ layout: layout-base.njk
{% for post in collections.blog | reverse %} - +

{{ post.data.title }}

{% if post.data.tagline %}

{{ post.data.tagline }}

{% endif %} @@ -18,7 +18,7 @@ layout: layout-base.njk {% endif %} Read Post - + {% endfor %}
@@ -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; } diff --git a/docs/_includes/layout-blog.njk b/docs/_includes/layout-blog.njk index 83b11a9212..4d31d6aa0a 100644 --- a/docs/_includes/layout-blog.njk +++ b/docs/_includes/layout-blog.njk @@ -28,13 +28,13 @@ layout: layout-base.njk {{ content | safe }} - Back to Top + Back to Top {% include '_foot.njk' %} - - + +

Getting Started

- - + +

Read our Getting started page to learn how to install and use PatternFly Elements.

- - + +

HTML APIs

- - + +

For more information on how to use each PatternFly element, read the component docs.

- - + + ``` diff --git a/docs/_snippets/accordion-jsx.md b/docs/_snippets/accordion-jsx.md index 6ad0f942f6..37128ed4b0 100644 --- a/docs/_snippets/accordion-jsx.md +++ b/docs/_snippets/accordion-jsx.md @@ -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 = [ diff --git a/docs/_snippets/accordion-ng.md b/docs/_snippets/accordion-ng.md index 5bd0ff0034..6f9d76bcc9 100644 --- a/docs/_snippets/accordion-ng.md +++ b/docs/_snippets/accordion-ng.md @@ -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: ` - + - +

{{ item.header }}

- - + +

{{ item.panel }}

- + - + `, }) export class AppComponent { diff --git a/docs/_snippets/accordion-svelte.md b/docs/_snippets/accordion-svelte.md index 5b78629d8d..2596c5701a 100644 --- a/docs/_snippets/accordion-svelte.md +++ b/docs/_snippets/accordion-svelte.md @@ -1,18 +1,18 @@ {%raw%} ```html - + {#each data as item} - +

{item.header}

- - + +

{item.panel}

- + {/each} - + + - +

Card component

PatternFly Elements are custom HTML elements that work everywhere. The Card element has header and footer slots for things like titles and actions.

- More about pf-v5-card - + More about pf-v6-card + ``` diff --git a/docs/_snippets/pf-bar-html.md b/docs/_snippets/pf-bar-html.md index 5cfc26115f..c8427c8a8e 100644 --- a/docs/_snippets/pf-bar-html.md +++ b/docs/_snippets/pf-bar-html.md @@ -3,7 +3,7 @@ PatternFly.org - + Contribute on Github \ No newline at end of file diff --git a/docs/components.md b/docs/components.md index af41740e87..66c85bcda6 100644 --- a/docs/components.md +++ b/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 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); @@ -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'); } diff --git a/docs/docs/develop/create.md b/docs/docs/develop/create.md index 355653aefe..71f2a45579 100644 --- a/docs/docs/develop/create.md +++ b/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-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. @@ -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. diff --git a/docs/docs/develop/css.md b/docs/docs/develop/css.md index 312f635489..6f1cdf474c 100644 --- a/docs/docs/develop/css.md +++ b/docs/docs/develop/css.md @@ -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. @@ -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 ``. +1. The `:host` selector sets the styles of the container 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. Next up: Write your JavaScript diff --git a/docs/docs/develop/html.md b/docs/docs/develop/html.md index cb2f166518..ce873c16c7 100644 --- a/docs/docs/develop/html.md +++ b/docs/docs/develop/html.md @@ -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() { @@ -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 - + - + Kyle Buchanan - + ``` Slots take the HTML from the light DOM and project it into the shadow DOM at a given location. diff --git a/docs/docs/develop/import-maps.md b/docs/docs/develop/import-maps.md index 48759e584d..ac93cf66d2 100644 --- a/docs/docs/develop/import-maps.md +++ b/docs/docs/develop/import-maps.md @@ -31,14 +31,14 @@ Example: ``` @@ -65,7 +65,7 @@ Once you've generated your import map and added it to your project, you can use ``` diff --git a/docs/docs/develop/javascript.md b/docs/docs/develop/javascript.md index 02f3d25d01..568a92c632 100644 --- a/docs/docs/develop/javascript.md +++ b/docs/docs/develop/javascript.md @@ -48,7 +48,7 @@ Please note the TypeScript `#` character before the handlers' method name. This signals to the custom elements manifest analyzer to list this method as private, and marks it as such in the element's TypeScript definition file. This helps users of your element know which of its features are safe to use with confidence, -and which are likely to change without notice. For example, a user of `` would think twice about directly calling it's +and which are likely to change without notice. For example, a user of `` would think twice about directly calling it's `onClick()` method if it was marked as private. After saving your files, the demo page will refresh and you'll notice the start of your button interactivity. @@ -71,7 +71,7 @@ import { property } from 'lit/decorators/property.js' Then define the `following` boolean attribute on the element. ```ts -export class PfV5CoolElement extends LitElement { +export class PfV6CoolElement extends LitElement { static readonly styles = [style]; /** Whether the user follows this profile */ @@ -168,13 +168,13 @@ render() { Finally, we'll need to update our demo page (`/demo/index.html`) to include the `photo-url` attribute. Pass in an image URL to see that it's working. ```html - + Kyle Buchanan - + ``` -We can also modify `pf-v5-cool-element.css` to adjust the background-size property -on `.pf-v5-cool-element__profile`. +We can also modify `pf-v6-cool-element.css` to adjust the background-size property +on `.pf-v6-cool-element__profile`. The final result should look like this: @@ -186,7 +186,7 @@ That's all it takes, folks! To summarize, we built a web component that extends LitElement, then added an HTML template, custom styles, and interactivity. What's cool is that we've only scratched the surface of what's possible with custom elements and Lit. -For your reference, here's the final Javascript code for `pf-v5-cool-element`: +For your reference, here's the final Javascript code for `pf-v6-cool-element`: ```ts import { LitElement, html } from 'lit'; @@ -194,14 +194,14 @@ import { customElement } from 'lit/decorators/custom-element.js'; import { property } from 'lit/decorators/property.js'; import { styleMap } from 'lit/directives/style-map.js'; -import styles from './pf-v5-cool-element.css'; +import styles from './pf-v6-cool-element.css'; /** * Cool Element * @slot - Place element content here */ -@customElement('pf-v5-cool-element') -export class PfV5CoolElement extends LitElement { +@customElement('pf-v6-cool-element') +export class PfV6CoolElement extends LitElement { static readonly styles = [styles]; /** Whether the user follows this profile */ @@ -230,7 +230,7 @@ export class PfV5CoolElement extends LitElement { declare global { interface HTMLElementTagNameMap { - 'pf-v5-cool-element': PfV5CoolElement; + 'pf-v6-cool-element': PfV6CoolElement; } } ``` diff --git a/docs/docs/develop/setup.md b/docs/docs/develop/setup.md index f16330be1a..a869ff1d80 100644 --- a/docs/docs/develop/setup.md +++ b/docs/docs/develop/setup.md @@ -59,14 +59,14 @@ tags: | --------------------- | ------------------------------------------ | --------------------------------------------------------------- | | `--directory` | Output directory | string [default: "/path/to/patternfly-elements"] | | `--silent` | Do not log anything to stdout | boolean [default: false] | -| `-n`, `--tagName` | Custom element tag name. e.g. `pf-v5-button` | string | +| `-n`, `--tagName` | Custom element tag name. e.g. `pf-v6-button` | string | | `-p`, `--packageName` | NPM package scope. e.g. `@patternfly/elements`| string | | `--overwrite` | Overwrite files without prompting | boolean [default: false] | | `--help` | Show help | boolean | Example ```bash -npm run new -- --tagName pf-v5-cool-element +npm run new -- --tagName pf-v6-cool-element ``` @@ -83,11 +83,11 @@ npm run new -- --tagName pf-v5-cool-element - A file to write your unit tests - An HTML demo where you can show off your element and add examples for your development workflow - You may also add light DOM styles which can be loaded prior to [element defined](https://developer.mozilla.org/en-US/docs/Web/CSS/:defined) `pf-v5-cool-element:not(:defined){...}`. An example use case would be to avoid above the fold layout shift. + You may also add light DOM styles which can be loaded prior to [element defined](https://developer.mozilla.org/en-US/docs/Web/CSS/:defined) `pf-v6-cool-element:not(:defined){...}`. An example use case would be to avoid above the fold layout shift. The light DOM CSS file uses a standard naming convention of: `{scope}-{component-name}--lightdom.css` - Example: `pf-v5-cool-element--lightdom.css`. + Example: `pf-v6-cool-element--lightdom.css`. {% endband %} @@ -107,7 +107,7 @@ npm run new -- --tagName pf-v5-cool-element Running that command launches the demo app in a new browser tab, and refreshes the page on save. From there you can navigate to the demo page of the element you're working on. - For example, if you want to preview the `pf-v5-card` component, then navigate in the browser to `http://localhost:8000/demo/pf-v5-card/`. + For example, if you want to preview the `pf-v6-card` component, then navigate in the browser to `http://localhost:8000/demo/pf-v6-card/`. {% endband %} {% band header="Testing" %} @@ -123,10 +123,10 @@ npm run new -- --tagName pf-v5-cool-element ```bash # Run a single test in watch mode. - npm run test:watch --files "./elements/pf-v5-button/test/pf-v5-button.spec.ts" + npm run test:watch --files "./elements/pf-v6-button/test/pf-v6-button.spec.ts" # Or multiple: - npm run test:watch --files "./elements/pf-v5-{avatar,card,tabs}/test/*.spec.ts" + npm run test:watch --files "./elements/pf-v6-{avatar,card,tabs}/test/*.spec.ts" ``` You can also run tests with a specific framework wrapper using: diff --git a/docs/docs/develop/structure.md b/docs/docs/develop/structure.md index f49d478525..dbba2566cf 100644 --- a/docs/docs/develop/structure.md +++ b/docs/docs/develop/structure.md @@ -44,20 +44,20 @@ Assuming the `npm run start` command started a server on port 8080, navigate to You're off to a good start! You have a new custom element that extends the base LitElement class. -Let's take a look at the `pf-v5-cool-element.ts` file to see what we have. +Let's take a look at the `pf-v6-cool-element.ts` file to see what we have. ```ts import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators/custom-element.js'; -import styles from './pf-v5-cool-element.css'; +import styles from './pf-v6-cool-element.css'; /** * Cool Element * @slot - Place element content here */ -@customElement('pf-v5-cool-element') -export class PfV5CoolElement extends LitElement { +@customElement('pf-v6-cool-element') +export class PfV6CoolElement extends LitElement { static readonly styles = [styles]; render() { @@ -69,7 +69,7 @@ export class PfV5CoolElement extends LitElement { declare global { interface HTMLElementTagNameMap { - 'pf-v5-cool-element': PfV5CoolElement; + 'pf-v6-cool-element': PfV6CoolElement; } } ``` @@ -90,7 +90,7 @@ Unlike PFE 1.0's `PFElement` base class, Lit template updates (i.e. renders) are For example, with `PFElement` we could handle the side-effects of our actions immediately: ```js -const element = document.querySelector('pf-v5-tabs'); +const element = document.querySelector('pf-v6-tabs'); // Select the 2nd Tab element.selectIndex(1); // Side effects happen immediately, @@ -102,7 +102,7 @@ const active = element.querySelector('[aria-selected="true"]'); With `LitElement`, we must wait for our changes to apply before continuing: ```diff-js - const element = document.querySelector('pf-v5-tabs'); + const element = document.querySelector('pf-v6-tabs'); // Select the 2nd Tab element.selectIndex(1); - // Side effects happen immediately, @@ -125,13 +125,13 @@ Decorators are a [proposed JavaScript language feature](https://github.com/tc39/ TypeScript implements an experimental version of the decorator language feature with a slightly different internal API. ```ts -@customElement('pf-v5-cool-element') +@customElement('pf-v6-cool-element') ``` Third, we import an use our component's CSS styles ```ts -import styles from './pf-v5-cool-element.css'; +import styles from './pf-v6-cool-element.css'; ``` ```ts diff --git a/docs/docs/develop/testing.md b/docs/docs/develop/testing.md index 0d99e6d978..f4918d4a6e 100644 --- a/docs/docs/develop/testing.md +++ b/docs/docs/develop/testing.md @@ -14,7 +14,7 @@ tags: {% band %} -Let's write tests for `pf-v5-cool-element`. +Let's write tests for `pf-v6-cool-element`. We rely on a few tools to ensure our element is reliable in production: @@ -27,7 +27,7 @@ If you followed the [Prerequisites](/docs/develop/setup/#prerequisites) in [Setu ### Test Setup -In the root of the element, there's a `/test` directory with an `pf-v5-cool-element.spec.ts` file. This file will be where we add all of our tests. +In the root of the element, there's a `/test` directory with an `pf-v6-cool-element.spec.ts` file. This file will be where we add all of our tests. Let's add four stubs for the functionality we need to test in our test file: @@ -41,26 +41,26 @@ import { expect, html } from '@open-wc/testing/index-no-side-effects.js'; import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js'; // Import the element we're testing. -import { PfV5CoolElement } from '@patternfly/elements/pf-v5-cool-element/pf-v5-cool-element.js'; +import { PfV6CoolElement } from '@patternfly/elements/pf-v6-cool-element/pf-v6-cool-element.js'; // One element template, defined here, is used // in multiple tests. It's torn down and recreated each time. const template = html` - + Kyle Buchanan - + `; -describe('', function() { +describe('', function() { describe('simply instantiating', function() { - let element: PfV5CoolElement; + let element: PfV6CoolElement; it('should upgrade', async function() { - element = await createFixture(html``); - const klass = customElements.get('pf-v5-cool-element'); + element = await createFixture(html``); + const klass = customElements.get('pf-v6-cool-element'); expect(element) .to.be.an.instanceOf(klass) .and - .to.be.an.instanceOf(PfV5CoolElement); + .to.be.an.instanceOf(PfV6CoolElement); }); }); @@ -78,11 +78,11 @@ describe('', function() { }); ``` -You'll notice the `createFixture(element)` function. A [test fixture](https://open-wc.org/docs/testing/helpers/#test-fixtures) +You'll notice the `createFixture(element)` function. A [test fixture](https://open-wc.org/docs/testing/helpers/#test-fixtures) renders a piece of HTML and injects into the DOM so that you can test the behavior of your component. It returns the first DOM element from the template so that you can interact with it if needed. For example you can call functions, look up DOM nodes or inspect the rendered HTML. -The `` part signals to TypeScript that the result of calling this function is an instance of `PfV5CoolElement`; +The `` part signals to TypeScript that the result of calling this function is an instance of `PfV6CoolElement`; Test fixtures are async to ensure rendering is properly completed. @@ -93,38 +93,38 @@ Now that our setup is complete, we can start building our tests. ### Test Cases -Let's build out the 'pf-v5-cool-element' tests. We'll use fixtures and `querySelector` to grab our element and include DOM API methods to interact with what we're testing. +Let's build out the 'pf-v6-cool-element' tests. We'll use fixtures and `querySelector` to grab our element and include DOM API methods to interact with what we're testing. Here is the full JavaScript code: ```ts import { expect, html } from '@open-wc/testing'; import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js'; -import { PfV5CoolElement } from '@patternfly/elements/pf-v5-cool-element/pf-v5-cool-element.js'; +import { PfV6CoolElement } from '@patternfly/elements/pf-v6-cool-element/pf-v6-cool-element.js'; // One element template, defined here, is used // in multiple tests. It's torn down and recreated each time. const template = html` - + Kyle Buchanan - + `; -describe('', function() { +describe('', function() { describe('simply instantiating', function() { - let element: PfV5CoolElement; + let element: PfV6CoolElement; it('should upgrade', async function() { - element = await createFixture(html``); - const klass = customElements.get('pf-v5-cool-element'); + element = await createFixture(html``); + const klass = customElements.get('pf-v6-cool-element'); expect(element) .to.be.an.instanceOf(klass) .and - .to.be.an.instanceOf(PfV5CoolElement); + .to.be.an.instanceOf(PfV6CoolElement); }); it('should allow a user to follow a profile', async function() { - const el = await createFixture(template); + const el = await createFixture(template); const button = el.shadowRoot!.querySelector('button')!; // Click the button. button.click(); @@ -151,7 +151,7 @@ describe('', function() { }); it('should set the state to follow if the following attribute is present', async function() { - const el = await createFixture(template); + const el = await createFixture(template); const button = el.shadowRoot!.querySelector('button')!; // Manually add the follow attribute. @@ -178,7 +178,7 @@ describe('', function() { }); it('should set a profile pic from the photo-url attribute', async function() { - const el = await createFixture(template); + const el = await createFixture(template); // Grab the `photo-url` attribute. const photoUrlAttribute = el.getAttribute('photo-url'); @@ -198,7 +198,7 @@ describe('', function() { You may notice we're accessing the `shadowRoot` here, available to our element by extending `LitElement` in the definition of our element. You can also access content in the `` of your element by using the `assignedNodes()` method. -We use a slot for the username in `pf-v5-cool-element`, making it available to us in the array returned by `assignedNodes()`. +We use a slot for the username in `pf-v6-cool-element`, making it available to us in the array returned by `assignedNodes()`. ```javascript shadowRoot.querySelector('slot').assignedNodes()[0].textContent.trim(); @@ -206,10 +206,10 @@ shadowRoot.querySelector('slot').assignedNodes()[0].textContent.trim(); ### Run the Test -Lastly, we can run the test command below to see how we did. You can focus on this specific test so you're only running the tests for `pf-v5-cool-element`. +Lastly, we can run the test command below to see how we did. You can focus on this specific test so you're only running the tests for `pf-v6-cool-element`. ```bash -npm run test:watch -- --files elements/**/pf-v5-cool-element.spec.ts +npm run test:watch -- --files elements/**/pf-v6-cool-element.spec.ts ``` This command starts up web test runner and allows us to debug our test in the browser. @@ -229,7 +229,7 @@ Debugging the test in the browser should give you the following: Tests can also be run manually in browser by running the following command: ```bash -npm run test:watch -- --files elements/**/pf-v5-cool-element.spec.ts --open``` +npm run test:watch -- --files elements/**/pf-v6-cool-element.spec.ts --open``` ### Testing against Vue and React @@ -238,13 +238,13 @@ Now that our vanilla JavaScript tests are passing, let's use Vue and React wrapp Run the same tests within React by using: ```bash -npm run test:react --files elements/**/pf-v5-cool-element.spec.ts +npm run test:react --files elements/**/pf-v6-cool-element.spec.ts ``` Run the same tests within Vue with: ```bash -npm run test:vue --files elements/**/pf-v5-cool-element.spec.ts +npm run test:vue --files elements/**/pf-v6-cool-element.spec.ts ``` This works exactly the same as the normal `npm run test:watch` command, the only difference is the fixture will be wrapped with React or Vue. @@ -256,7 +256,7 @@ Finally we can run the test "ci" command which will run the following: 3. Those same tests with Vue wrappers. ```bash -npm run test:ci --files elements/**/pf-v5-cool-element.spec.ts +npm run test:ci --files elements/**/pf-v6-cool-element.spec.ts ``` ![Final test output](/images/develop/develop-testing-ci.png) @@ -265,7 +265,7 @@ Nice! All tests are working in Chrome and with React and Vue wrappers. 🎉 A quick note about the framework testing—the Vue and React tests are meant to be an initial first pass in those frameworks just to make sure that the functionality is working and that the component renders properly. -That's it for testing! Now that we've created our `pf-v5-cool-element` and all of our code passes, the final step is to submit a pull request to get this merged. +That's it for testing! Now that we've created our `pf-v6-cool-element` and all of our code passes, the final step is to submit a pull request to get this merged. Next up: Open a pull request diff --git a/docs/docs/develop/troubleshooting.md b/docs/docs/develop/troubleshooting.md index a9c0480b6e..2f56a1307c 100644 --- a/docs/docs/develop/troubleshooting.md +++ b/docs/docs/develop/troubleshooting.md @@ -19,7 +19,7 @@ tags: If you experience issues when using or developing with PatternFly Elements, please open an issue on [GitHub](https://github.com/patternfly/patternfly-elements/issues/new/choose). - + Open an issue diff --git a/docs/framework-integration/index.md b/docs/framework-integration/index.md index f705f12b46..12382a5e60 100644 --- a/docs/framework-integration/index.md +++ b/docs/framework-integration/index.md @@ -24,7 +24,7 @@ title: Framework integration
- +

Using PatternFly Elements in your React App @@ -32,8 +32,8 @@ title: Framework integration

To get web components to work with React it’s pretty easy and straightforward. If you’d like to follow along, go ahead and...

Read on Medium - - + +

Using PatternFly Elements in your Vue App @@ -41,8 +41,8 @@ title: Framework integration

To get web components to work with Vue, it’s pretty easy and straightforward. If you’d like to follow along, go ahead and...

Read on Medium - - + +

Using PatternFly Elements in your Angular App @@ -50,6 +50,6 @@ title: Framework integration

To get web components to work with Angular, there are a few steps that we need to take. If you’d like to follow along, go ahead and...

Read on Medium - +

diff --git a/docs/framework-integration/react.md b/docs/framework-integration/react.md index c6de196478..b2ef790413 100644 --- a/docs/framework-integration/react.md +++ b/docs/framework-integration/react.md @@ -128,16 +128,16 @@ tags: ```js import { useState } from "react"; - import { Button } from "@patternfly/elements/react/pf-v5-button/pf-v5-button.js"; - import { Card } from "@patternfly/elements/react/pf-v5-card/pf-v5-card.js"; - import { Switch } from "@patternfly/elements/react/pf-v5-switch/pf-v5-switch.js"; - import { Popover } from "@patternfly/elements/react/pf-v5-popover/pf-v5-popover.js"; - import { Tooltip } from "@patternfly/elements/react/pf-v5-tooltip/pf-v5-tooltip.js"; + import { Button } from "@patternfly/elements/react/pf-v6-button/pf-v6-button.js"; + import { Card } from "@patternfly/elements/react/pf-v6-card/pf-v6-card.js"; + import { Switch } from "@patternfly/elements/react/pf-v6-switch/pf-v6-switch.js"; + import { Popover } from "@patternfly/elements/react/pf-v6-popover/pf-v6-popover.js"; + import { Tooltip } from "@patternfly/elements/react/pf-v6-tooltip/pf-v6-tooltip.js"; import "./App.css"; ``` - Let’s use [`pf-v5-button`][pf-v5-button] and [`pf-v5-card`][pf-v5-card] component in the + Let’s use [`pf-v6-button`][pf-v6-button] and [`pf-v6-card`][pf-v6-card] component in the `App` function in the `App.tsx` file to see that our Card and Button are working. We are updating the local state and showing it in the UI after clicking the button. @@ -160,7 +160,7 @@ tags: ### Switch - Now we have a card and a button component, let's add [`pf-v5-switch`][pf-v5-switch] + Now we have a card and a button component, let's add [`pf-v6-switch`][pf-v6-switch] web component in our app. We will enable/disable the decrement button by clicking on the Switch button. @@ -208,7 +208,7 @@ tags: ### Tooltip Now we have a card, button, and switch component, let's add - [`pf-v5-tooltip`][pf-v5-tooltip] web component in our app. We will show the tooltip + [`pf-v6-tooltip`][pf-v6-tooltip] web component in our app. We will show the tooltip text on mouseover. ```js @@ -245,10 +245,10 @@ tags:
## Interacting with web components' APIs - Now we will add the [`pf-v5-popover`][pf-v5-popover] web component and open the + Now we will add the [`pf-v6-popover`][pf-v6-popover] web component and open the popover on the mouse over of the button. We will programmatically use the `show()` and `hide()` popover methods to show and hide the popover. **Note** - that these are methods on the `` DOM object. Because React apps do + that these are methods on the `` DOM object. Because React apps do not interact directly with the DOM, we will need to store a ref for the popover element, and call our methods on it's current element. @@ -353,10 +353,10 @@ tags: [ce-lifecycle]: https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks [react-lifecycle]: https://legacy.reactjs.org/docs/state-and-lifecycle.html [vite]: https://vitejs.dev/guide/#scaffolding-your-first-vite-project -[pf-v5-button]: https://patternflyelements.org/components/button/ -[pf-v5-card]: https://patternflyelements.org/components/card/ -[pf-v5-switch]: https://patternflyelements.org/components/switch/ -[pf-v5-tooltip]: https://patternflyelements.org/components/tooltip/ -[pf-v5-popover]: https://patternflyelements.org/components/popover/ +[pf-v6-button]: https://patternflyelements.org/components/button/ +[pf-v6-card]: https://patternflyelements.org/components/card/ +[pf-v6-switch]: https://patternflyelements.org/components/switch/ +[pf-v6-tooltip]: https://patternflyelements.org/components/tooltip/ +[pf-v6-popover]: https://patternflyelements.org/components/popover/ [inng]: https://medium.com/patternfly-elements/using-patternfly-elements-web-components-in-your-angular-app-4b18b1c9c363 [invue]: https://patternflyelements.org/framework-integration/vue/ diff --git a/docs/framework-integration/vue.md b/docs/framework-integration/vue.md index 6f1008b623..6276d3aff6 100644 --- a/docs/framework-integration/vue.md +++ b/docs/framework-integration/vue.md @@ -41,8 +41,8 @@ tags: {% band header="Adding PatternFly Elements" %} With the setup complete, let’s add a couple of PatternFly Elements web components to our application to make sure everything is hooked up properly. - We’re going to add a card ([pf-v5-card](/components/card)). Later, we’ll add an - accordion ([pf-v5-accordion](/components/accordion)) and some CSS to help with + We’re going to add a card ([pf-v6-card](/components/card)). Later, we’ll add an + accordion ([pf-v6-accordion](/components/accordion)) and some CSS to help with our layout. Once again, if we were building this app locally, we’d install our @@ -60,7 +60,7 @@ tags: ```html ``` @@ -65,18 +65,18 @@ title: Get started When you have the import map script loaded on the page, you can add a [card component](/components/card) using html. ```html - +

Card header

-

This is the pf-v5-card body.

- OK - +

This is the pf-v6-card body.

+ OK + ``` - +

Card header

-

This is the pf-v5-card body.

- OK - +

This is the pf-v6-card body.

+ OK + ### Importmap and Markup @@ -91,18 +91,18 @@ Altogether your import map code could look something like this [Lit Playground D component to see which attributes are available. ```html - +

Card header

-

This is the pf-v5-card body.

- OK - +

This is the pf-v6-card body.

+ OK + ``` - +

Card header

-

This is the pf-v5-card body.

- OK - +

This is the pf-v6-card body.

+ OK + {% endband %} {% band header="Use CSS variables to customize or theme your components" %} @@ -116,14 +116,14 @@ Altogether your import map code could look something like this [Lit Playground D ```css /* your-page.css */ :root { - --pf-v5-c-card--BackgroundColor: var(--pf-global--active-color--200, #bee1f4); + --pf-v6-c-card--BackgroundColor: var(--pf-global--active-color--200, #bee1f4); } ``` - +

Card header

-

This is the pf-v5-card body.

- OK - +

This is the pf-v6-card body.

+ OK + {% endband %} {% band header="Avoiding the flash of unstyled content (FOUC)" %} @@ -148,12 +148,12 @@ Altogether your import map code could look something like this [Lit Playground D --reveal-duration: 0.2s; } - pf-v5-card { + pf-v6-card { opacity: 1; transition: opacity var(--reveal-duration) ease var(--reveal-delay); } - pf-v5-card:not(:defined) { + pf-v6-card:not(:defined) { opacity: 0; } @@ -161,18 +161,18 @@ Altogether your import map code could look something like this [Lit Playground D - + - +

No FOUC

Content will remain hidden until component definitions are loaded.

- + ``` diff --git a/docs/index.html b/docs/index.html index 6f5eacfc09..ca83a432ce 100644 --- a/docs/index.html +++ b/docs/index.html @@ -31,27 +31,27 @@

Lightweight

{% renderFile "./docs/_snippets/card-html.md" %} - +

Card component

PatternFly Elements are custom HTML elements that work everywhere. The Card element has header and footer slots for things like titles and actions.

- More about pf-v5-card - + More about pf-v6-card + View the rest of the components - - Install - Build Your UI - + Install + Build Your UI + Ship! - + icon="optimize" icon-set="patternfly">Ship! +
@@ -60,43 +60,43 @@

Universal

Integrate PatternFly Elements with your framework of choice or use them by themselves.

PatternFly Elements integrate seamlessly with multiple frontend frameworks. Just install it - with npm install @patternfly/elements, + with npm install @patternfly/elements, or use PatternFly Elements on their own without a framework. It's up to you and the needs of your project.

- - HTML - {% renderFile "./docs/_snippets/accordion-html.md" %} + + HTML + {% renderFile "./docs/_snippets/accordion-html.md" %} - React - {% renderFile "./docs/_snippets/accordion-jsx.md" %} + React + {% renderFile "./docs/_snippets/accordion-jsx.md" %} - Vue - {% renderFile "./docs/_snippets/accordion-vue.md" %} + Vue + {% renderFile "./docs/_snippets/accordion-vue.md" %} - Angular - {% renderFile "./docs/_snippets/accordion-ng.md" %} + Angular + {% renderFile "./docs/_snippets/accordion-ng.md" %} - Svelte - {% renderFile "./docs/_snippets/accordion-svelte.md" %} - + Svelte + {% renderFile "./docs/_snippets/accordion-svelte.md" %} + - - + +

Getting Started

- - + +

Read our Getting started page to learn how to install and use PatternFly Elements.

- - + +

HTML APIs

- - + +

For more information on how to use each PatternFly element, read the component docs.

- - + + Learn how to integrate PatternFly Elements in your application diff --git a/docs/quick-start.md b/docs/quick-start.md index 8a6eb53376..35b1d877ab 100644 --- a/docs/quick-start.md +++ b/docs/quick-start.md @@ -58,69 +58,69 @@ production.

Card components

- +

Card 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis laboriosam eum saepe eius tempora sequi eligendi repudiandae aspernatur beatae totam voluptatum facere unde, vitae inventore eveniet accusamus nulla recusandae aliquam.

More about PatternFly Elements - - + +

Card 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque necessitatibus sapiente aliquam recusandae maxime consectetur magnam ipsa veniam expedita molestiae. Quis officia minima libero repellat laboriosam sit nemo porro laborum.

Get started - - + +

Card 3

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate iusto laboriosam molestias, quidem ab voluptates nihil earum sed! Esse repellat quo ut numquam mollitia quis saepe aspernatur fuga error in!

About web components - + View all of the components

Accordion component

- - + +

Why do wizards need money if they could just create it?

- - + +

There is legislation that decides what you can conjure and what you can not. Because things that you conjure out of thin air will not last, it is illegal in the wizarding world.

- - + +

Why doesn't Harry have a portrait of his parents?

- - + +

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.

- - + +

Why is Harry considered a half-blood if both of his parents could use magic?

- - + +

Because Harry's grandparents were not able to do magic. This is generally frowned upon by those who consider themselves pure, such as the Malfoy's or other antagonists.

- - + +

Is Hogwarts the only wizarding school?

- - + +

No! It has been revealed that there are actually 11 long established and prestigious schools around the globe. These include Castelobruxo in the rainforest of Brazil, Durmstrang Institute (whereas nobody is certain of it’s whereabouts), and Ilvermorny, right here in the United States.

- - + +

Where do the main characters work as adults?

- - + +

Harry and Hermione are at the Ministry: he ends up leading the Auror department. Ron helps George at the joke shop and does very well. Ginny becomes a professional Quidditch player and then sportswriter for the Daily Prophet.

Read more about the characters

- - + +

Tabs component

- - Users - Users - Containers - Containers - Database - Database - + + Users + Users + Containers + Containers + Database + Database +