At the core of PatternFly is our community of people—in other words, our Flyers. Together, we celebrate creativity and foster a sense of teamwork and unity.
-
Who we are
+
Who we are
We're made of designers, developers, and other UX professionals with a passion for open source. We each have different ways of working with others and supporting the community—there's no one way to be a Flyer. Whether we're contributing to PatternFly or just staying up to date on new releases, we work together to make PatternFly a vibrant community of passionate people.
-
What we're building
+
What we're building
Our work extends beyond products and apps. We're always exploring new ways we can welcome ideas and build better experiences for the very people who make PatternFly what it is today.
-
+
@@ -70,26 +70,26 @@ import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-alt-ic
- Creating new communities
+ Creating new communities
Sometimes Flyers branch out and build groups of their own, which is how new communities are born. While PatternFly communities are separate from PatternFly and not supported as part of the design system, we still love seeing our Flyers forming new groups and developing their visions into actions.
- <a href="https://patternflyelements.org">PatternFly Elements</a>
+ <a href="https://patternflyelements.org">PatternFly Elements</a>
PatternFly Elements is a community created by Red Hat's web-based developers. It focuses on creating web components for use across Red Hat's sites and SaaS products and features theming options available for your own brand library.
- <a href="https://github.com/patternfly-kotlin/patternfly-kotlin">PatternFly Kotlin</a>
+ <a href="https://github.com/patternfly-kotlin/patternfly-kotlin">PatternFly Kotlin</a>
PatternFly Kotlin is a Kotlin implementation of PatternFly based on fritz2, targeting Kotlin/JS. The goal of this project is to provide all PatternFly components in Kotlin, matching the reactive nature of fritz2. The components use stores, handlers, and other elements from the fritz2 API. For a quick overview, check out the PatternFly Kotlin showcase.
- <a href="https://www.sketch.com/s/6ccbd710-267d-4b69-9dae-bc19e1551056">Ansible Component Guide and Sketch Library</a>
+ <a href="https://www.sketch.com/s/6ccbd710-267d-4b69-9dae-bc19e1551056">Ansible Component Guide and Sketch Library</a>
The Ansible Component Guide and Sketch Library is an additional resource that designers can use that is built on top of existing PatternFly components. It is a rapid mockup prototyping tool that can be used to quickly put together repeatable design patterns and layouts across projects. Although this is specific to Ansible, many of the components are generalized and can fit many product use cases and are easily detachable to update as needed.
- <a href="https://github.com/patternfly-yew/patternfly-yew">PatternFly for Yew</a>
+ <a href="https://github.com/patternfly-yew/patternfly-yew">PatternFly for Yew</a>
PatternFly for Yew provides PatternFly components for the Yew framework. Yew is a Rust based framework for creating web applications, and is also able to run in the browser using WASM. The project aims to create Yew components for all components and concepts found in PatternFly. For a quick demo and starter template, see the PatternFly Yew Quickstart.
- Let's keep growing
+ Let's keep growing
The PatternFly community is never finished growing, and we want to keep it that way. Feel free to reach out whenever — we're always open.
-
+
diff --git a/packages/documentation-site/patternfly-docs/content/get-started/design-with-sketch.md b/packages/documentation-site/patternfly-docs/content/get-started/design-with-sketch.md
index 6f16f0f9bf..cc6e3650d1 100644
--- a/packages/documentation-site/patternfly-docs/content/get-started/design-with-sketch.md
+++ b/packages/documentation-site/patternfly-docs/content/get-started/design-with-sketch.md
@@ -45,23 +45,23 @@ The design kit is a symbol library implemented in Sketch to help designers, like
### Wireframe kit
A PatternFly wireframe kit (implemented in Sketch) is also available for creating low or mid-fidelity mockups that are compatible with PatternFly styles. The wireframe kit is separate from the design kit, but the two can be used together for a comprehensive approach to the design life-cycle.
-[**Learn more about the wireframe kit**](https://github.com/patternfly/patternfly-design-kit/blob/master/PatternFly%204%20-%20Wireframe%20library%20and%20template/Wireframe%20kit%20guideline.md)
+[**Learn more about the wireframe kit**](https://github.com/patternfly/patternfly-design-kit/blob/master/PatternFly%204%20-%20Wireframe%20library%20and%20template/Wireframe%20kit%20guideline.md)
### Style guidelines
What typography should you be using? What about colors? Spacing? Check out styles to learn everything you need to know about our foundational design elements.
-[**View styles**](/design-foundations/colors)
+[**View styles**](/design-foundations/colors)
### Usage and behavior guidelines
Should you use a wizard or a form to solve this problem? How do you write a good button label? Which navigation makes the most sense? Get answers by clicking the Design guidelines tab associated within each component page.
-[**View usage and behavior guidelines**](/components/about-modal/design-guidelines)
+[**View usage and behavior guidelines**](/components/about-modal/design-guidelines)
### Content guidelines
How do you write great microcopy and text for your user interface? Read our content guidelines for general principles, guidance on voice, and a style guide to help you with everything from capitalization to date and time formats.
-[**View content guidelines**](/ux-writing/about)
+[**View content guidelines**](/ux-writing/about)
### Start building with components.
What does a toolbar look like? What about a filter chip? Components are the building blocks of the design system. Check out individual component pages to view examples, understand states and behaviors, and check out the code samples (if you’re into that kind of thing).
@@ -71,7 +71,7 @@ PatternFly currently uses Red Hat Text and Red Hat Display, [which you can downl
### What's in the design kit?
-[**View demos**](/patterns/primary-detail)
+[**View demos**](/patterns/primary-detail)
### What's in the design kit?
@@ -132,7 +132,7 @@ It’s important to understand some specific aspects about the design kit and th
### Sketch design training
There’s a lot to learn when it comes to making smart use of the Sketch template and library. Whether you are new to PatternFly, new to Sketch, or even an experienced Sketch user, just looking to see how other designers use the application, the Sketch design training is a great place to start when using the design kit.
-[**Start Sketch design training**](/training/design)
+[**Start Sketch design training**](/training/design)
### Spacers
The layout for all visual elements in Patternfly is determined by spacers. The spacers are used as padding between elements to ensure consistent layout and placement of components into a design that adheres to PatternFly guidelines. All symbols in the symbol library and templates have been made using spacers which are built-in to ensure correct use of elements.
diff --git a/packages/documentation-site/patternfly-docs/content/get-started/develop.md b/packages/documentation-site/patternfly-docs/content/get-started/develop.md
index 849f90ebb9..877f694892 100644
--- a/packages/documentation-site/patternfly-docs/content/get-started/develop.md
+++ b/packages/documentation-site/patternfly-docs/content/get-started/develop.md
@@ -120,7 +120,7 @@ PatternFly uses [Font Awesome 5](https://fontawesome.com/), which can be utilize
1. Update the ```sass-utilities/scss-variables.scss``` file (from source ```node_modules/@patternfly/patternfly/```) to include:
```scss
- $pf-v5-global--enable-fontawesome-cdn: true !default;
+ $pf-v6-global--enable-fontawesome-cdn: true !default;
```
1. Build PatternFly as part of your build process.
diff --git a/packages/documentation-site/patternfly-docs/content/get-started/release-notes-data.js b/packages/documentation-site/patternfly-docs/content/get-started/release-notes-data.js
index 2931690bd5..5805db6340 100644
--- a/packages/documentation-site/patternfly-docs/content/get-started/release-notes-data.js
+++ b/packages/documentation-site/patternfly-docs/content/get-started/release-notes-data.js
@@ -194,7 +194,7 @@ function handler2(_event, id) {};
component: "Table",
description: "Added unique table component CSS class selectors to all elements of the table that previously did not have a class.",
pullRequestURL: "https://github.com/patternfly/patternfly/pull/5558",
- details: "For example, '' is now '
', 'thead' is now ''",
+ details: "For example, '' is now '
', 'thead' is now ''",
repo: "HTML/CSS",
fixedWithCodeMod: false
}, {
@@ -4963,7 +4963,7 @@ import { Wizard } from '@patternfly/react-core/deprecated';`}
},
{
component: "Charts",
- description: (<>Fixed dark theme chart var prefix from pf-v5-c-chart to pf-v5-chart.),
+ description: (<>Fixed dark theme chart var prefix from pf-v6-c-chart to pf-v5-chart.),
pullRequestURL: "https://github.com/patternfly/patternfly/pull/5673",
repo: "HTML/CSS",
fixedWithCodeMod: false
diff --git a/packages/documentation-site/patternfly-docs/content/training/html-css/css-variables-and-overrides.md b/packages/documentation-site/patternfly-docs/content/training/html-css/css-variables-and-overrides.md
index 1d8c522b02..bb5ecb057f 100644
--- a/packages/documentation-site/patternfly-docs/content/training/html-css/css-variables-and-overrides.md
+++ b/packages/documentation-site/patternfly-docs/content/training/html-css/css-variables-and-overrides.md
@@ -22,7 +22,7 @@ In PatternFly, component-level custom properties follow this general formula:
- `__element` refers to the element inside of the block (for example, `__title`).
- `--modifier` refers to a modifier class such as `.pf-m-danger`, and is prefixed with `m-` in the component variable (for example`--m-danger`).
- `--state` is something like hover or active.
- - `--breakpoint` is a media query breakpoint such as `sm` for `$pf-v5-global--breakpoint--sm`.
+ - `--breakpoint` is a media query breakpoint such as `sm` for `$pf-v6-global--breakpoint--sm`.
- `--pseudo-element` is one of either `before` or `after`.
- `PropertyCamelCase` refers to the property that is being changed.
diff --git a/packages/documentation-site/patternfly-docs/content/training/trainingCard/trainingCard.css b/packages/documentation-site/patternfly-docs/content/training/trainingCard/trainingCard.css
index 4e3b40104a..e22e167a85 100644
--- a/packages/documentation-site/patternfly-docs/content/training/trainingCard/trainingCard.css
+++ b/packages/documentation-site/patternfly-docs/content/training/trainingCard/trainingCard.css
@@ -1,18 +1,18 @@
-.pf-v5-c-card:not(.pf-org__card-small).pf-org__card {
+.pf-v6-c-card:not(.pf-org__card-small).pf-org__card {
border: 2px solid #d2d2d2;
box-shadow: unset;
height: 100%;
}
-.pf-org__card .pf-v5-c-card__header {
+.pf-org__card .pf-v6-c-card__header {
position: relative;
}
-.pf-org__card .pf-v5-c-card__header:first-child {
+.pf-org__card .pf-v6-c-card__header:first-child {
padding-top: 24px !important;
}
-.pf-org__card .pf-v5-c-card__header:not(:last-child) {
+.pf-org__card .pf-v6-c-card__header:not(:last-child) {
padding-bottom: 24px !important;
}
@@ -23,36 +23,36 @@
background-color: #fff;
}
-.pf-org__card .pf-v5-c-card__header .pf-org__level {
+.pf-org__card .pf-v6-c-card__header .pf-org__level {
margin-left: auto;
font-size: 12px;
color: #737679;
}
-.pf-org__card .pf-v5-c-card__header .pf-org__level > svg {
+.pf-org__card .pf-v6-c-card__header .pf-org__level > svg {
margin-right: 8px;
}
-.pf-org__card .pf-v5-c-card__body {
+.pf-org__card .pf-v6-c-card__body {
font-size: 14px;
}
-.pf-org__card .pf-v5-c-card__body .pf-org__time {
+.pf-org__card .pf-v6-c-card__body .pf-org__time {
color: #737679;
font-size: 12px;
padding-bottom: 12px;
}
-.pf-org__card .pf-v5-c-card__body .pf-org__time > svg {
+.pf-org__card .pf-v6-c-card__body .pf-org__time > svg {
margin-right: 8px;
}
-.pf-org__card .pf-v5-c-card__footer .pf-v5-c-button.pf-m-link {
+.pf-org__card .pf-v6-c-card__footer .pf-v6-c-button.pf-m-link {
padding-left: 0;
font-weight: bold;
}
-.pf-org__card .pf-v5-c-card__footer .pf-v5-c-button.pf-m-link > svg {
+.pf-org__card .pf-v6-c-card__footer .pf-v6-c-button.pf-m-link > svg {
margin-left: 8px;
}