From 7eb55df2eccc77a5aeea7e2066ca9eb2e4b7415d Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Mon, 2 Jun 2025 14:43:24 -0400 Subject: [PATCH 1/4] docs(about-patternfly): Updating with more details. --- .../content/get-started/about-patternfly.md | 220 ++---------------- 1 file changed, 23 insertions(+), 197 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md b/packages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md index bb2d409957..11e153924d 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md @@ -9,194 +9,28 @@ import { Button, Card, CardHeader, CardTitle, CardBody, CardFooter, Divider, Ico import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon'; import { Link } from '@patternfly/documentation-framework/components'; -## What is PatternFly? - -PatternFly is an open source design system that enables designers and developers to create consistent and usable software products. - -A **design system** is a collection of software design standards and resources that facilitate more consistent and productive design processes. When you design and develop with a design system, you can reduce redundancy and enable a unified language between cross-functional teams. This means that products will be visually consistent, and will use patterns that support better usability and efficiency. - -The PatternFly design system is created and maintained by Red Hat, and is used across Red Hat's product catalog, but it's open for anyone to use. Across our website, we provide code samples, clear standards, and additional resources to help designers and developers work together more efficiently. Together, we can build better user experiences. - -## What does PatternFly include? - -### Foundations - -PatternFly's foundations create a strong base for the rest of the design system to be built with. - - - - - - **Design foundations** - - The most foundational elements of our design system, like color, typography, icons, and spacing. - - - - - - - **Design tokens** - - Semantically named variables that represent visual attributes and design styles. - - - +## What is PatternFly? +PatternFly is an **open source design system**, built to support consistent, usable enterprise software. We're founded on principles of transparency and community contribution, making PatternFly accessible to everyone. Our goal is to empower designers and developers to work more efficiently and build better user experiences together. -### Elements - -PatternFly’s core elements are what you will work directly with when building a UI. - - - - - - **Components** - - Flexible, modular, building blocks that you can mix and match to create UIs. - - - - - - - **Layouts** - - Different methods for arranging components for different screen sizes and content presentations. - - - - - - - **Charts** - - Different methods to present data visualizations. - - - - - - - **Extensions** - - Reusable solutions that utilize multiple PatternFly components for cross-project use cases. - - - +Like most design systems, we provide standards and resources that guide and streamline your design process. These resources are designed to reduce redundancy and create a unified language for cross-functional teams, ensuring your products are visually consistent, accessible, and easy to use. -### Guidance - -We provide extensive guidelines to help you create UIs following best practices. - - - - - - **Patterns** - - Recommendations and solutions for common design problems that involve multiple components. - - - - - - - **Accessibility** - - Guidelines to follow in order to create products that are usable and accessible by all users. - - - - - - - **UX writing** - - Content guidelines that provide principles and best practices around writing for user experience. - - +While PatternFly is used extensively across Red Hat products, anyone can use or contribute to PatternFly. On this website, you'll find code samples, clear guidelines, and additional tools and resources. - +## Why does Red Hat use PatternFly? +PatternFly is Red Hat's design system of choice because we directly enable their commitment to open source, robust enterprise experiences, and developer empowerment. We are purpose-built for their complex enterprise demands, offering highly customized components and a design kit that translate quickly to code. As an MIT-licensed open source project, our philosophy aligns with Red Hat's foundation, fostering transparency and direct contribution. This enables us to deliver tailored solutions for critical enterprise workflows, while building a unified "open source" brand across Red Hat products. -### Additional developer resources - -We offer more complex resources to assist with the development process. - - - - - - **Topology** - - A method for modeling the arrangement of elements in a network. - - - - - - - **Utility classes** - - Additional CSS classes that allow you to further customize and modify UI elements, like alignment, spacing, and shadows. - - +Our independent operation means we set priorities based directly on Red Hat product needs, avoiding external roadmaps. This control allows us to rapidly deliver custom solutions, ensure strong security and compliance, and predictably manage breaking changes, providing stability and confidence. We empower all front-end developers, from novices to experts, with comprehensive documentation and native accessibility support, and offer multiple libraries (React and HTML) to streamline development. + +Red Hat UX designers can use PatternFly alongside the [UXD Hub](https://www.uxd-hub.com/), which documents additional product-specific design patterns. + +## Where do I start? +Now that you've been introduced to PatternFly, you're ready to start designing or start developing your product. Looking to get involved in the behind-the-scenes work? Check out our contribution guidelines for more instruction. + + + + + ## Join the community @@ -279,19 +113,11 @@ Sometimes Flyers branch out and build groups of their own, creating new communit - **[PatternFly for Yew](https://github.com/patternfly-yew/patternfly-yew)**: Provides PatternFly components for Yew—a Rust based framework for creating web applications that can 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.](https://github.com/patternfly-yew/patternfly-yew-quickstart) -## Where do I start? - -Now that you've been introduced to PatternFly, you're ready to start designing or start developing your product. Looking to get involved in the behind-the-scenes work? Check out our contribution guidelines for more instruction. - - - - - - +## Learn about our design system -## Release cadence +### Release cadence -### Major releases +#### Major releases A major release is one that sees the version of PatternFly increase, for example PatternFly 5 to PatternFly 6. Major releases are the only releases with planned "breaking changes" that alter the way your product's code interacts with PatternFly's code. @@ -299,11 +125,11 @@ Along with each major release, we will provide detailed upgrade guides and codem A major version of PatternFly will only be supported through the subsequent version. This means, with the release of PatternFly 6, we no longer offer support PatternFly 4. -### Minor and patch releases +#### Minor and patch releases Minor feature releases will be available quarterly to introduce non-breaking changes, like new features and enhancements. We will also share interim patch releases to fix any bugs that we find. -## Beta components +### Beta components New PatternFly components are first released in beta. To help you identify beta components, we add a blue label beside the component in the PatternFly.org navigation menu and an informational alert at the top of the component’s documentation pages. @@ -318,7 +144,7 @@ If you are considering using a beta component, make sure to: 1. Play with the examples in the component's documentation on the PatternFly website to determine if the current implementation meets your needs. Open issues for any missing features, enhancement requests, or bugs. 2. Check the [PatternFly Issues GitHub Project board](https://github.com/orgs/patternfly/projects/7/views/1). Browse any open issues for the beta component to determine how much more the beta component could evolve in the near future. -## Deprecated components +### Deprecated components Deprecated components are components that are no longer recommended for use in PatternFly, either due to significant design or code changes. Once deprecated, a component is replaced with a newer implementation, and the previous implementation is no longer maintained or enhanced. From dede55451c5c342a969b77ad7e43b2b6eaf54e23 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Fri, 13 Jun 2025 12:33:23 -0400 Subject: [PATCH 2/4] Finish drafting new content for about page. --- .../content/get-started/about-patternfly.md | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md b/packages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md index 11e153924d..41c5120883 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md @@ -10,16 +10,23 @@ import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external import { Link } from '@patternfly/documentation-framework/components'; ## What is PatternFly? -PatternFly is an **open source design system**, built to support consistent, usable enterprise software. We're founded on principles of transparency and community contribution, making PatternFly accessible to everyone. Our goal is to empower designers and developers to work more efficiently and build better user experiences together. +PatternFly is an **open source design system**, dedicated to building consistent, usable enterprise software. We operate on principles of transparency and community contribution, making PatternFly accessible to everyone. Our primary goal is to empower designers and developers, enabling them to work more efficiently and build better user experiences together. -Like most design systems, we provide standards and resources that guide and streamline your design process. These resources are designed to reduce redundancy and create a unified language for cross-functional teams, ensuring your products are visually consistent, accessible, and easy to use. +Like most design systems, we provide a comprehensive set of standards and resources to guide and streamline the design process. These resources are designed to reduce redundancy and establish a unified language for cross-functional teams, ultimately ensuring that products are visually consistent, accessible, and easy to use. -While PatternFly is used extensively across Red Hat products, anyone can use or contribute to PatternFly. On this website, you'll find code samples, clear guidelines, and additional tools and resources. +While PatternFly is used extensively across Red Hat products, anyone can use or contribute to PatternFly. On our website, you'll find ready-to-use code samples, clear guidelines, and a variety of additional tools and resources. ## Why does Red Hat use PatternFly? -PatternFly is Red Hat's design system of choice because we directly enable their commitment to open source, robust enterprise experiences, and developer empowerment. We are purpose-built for their complex enterprise demands, offering highly customized components and a design kit that translate quickly to code. As an MIT-licensed open source project, our philosophy aligns with Red Hat's foundation, fostering transparency and direct contribution. This enables us to deliver tailored solutions for critical enterprise workflows, while building a unified "open source" brand across Red Hat products. +Red Hat prefers PatternFly as its design system due to our shared commitment to open source and robust enterprise experiences. We're specifically designed to meet Red Hat's complex needs, offering customizable components and a design kit that easily translates to code. -Our independent operation means we set priorities based directly on Red Hat product needs, avoiding external roadmaps. This control allows us to rapidly deliver custom solutions, ensure strong security and compliance, and predictably manage breaking changes, providing stability and confidence. We empower all front-end developers, from novices to experts, with comprehensive documentation and native accessibility support, and offer multiple libraries (React and HTML) to streamline development. +PatternFly's development is guided by Red Hat's product requirements, allowing us to deliver custom solutions quickly, ensure strong security and compliance, and manage changes predictably. This provides better stability and confidence for Red Hat's designers and developers. + +As an MIT-licensed open source project, PatternFly aligns with Red Hat's core values of transparency and direct contribution. This enables us to create tailored solutions for critical enterprise workflows and build a unified open source brand across all Red Hat products. + +### Benefits for developers and designers +PatternFly empowers front-end developers with comprehensive documentation, native accessibility support, and flexibility through React and HTML libraries. Even new developers can create effective and inclusive interfaces. + +Both designers and developers benefit from our extensive design guidelines, which offer well-documented shortcuts for simple components and complex UI solutions. Our open source approach encourages product teams to contribute or request changes, fostering a collaborative environment where they can actively shape the system they use. Red Hat UX designers can use PatternFly alongside the [UXD Hub](https://www.uxd-hub.com/), which documents additional product-specific design patterns. From aed38dc195812fa42a56194ae45cde8540ac5315 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Tue, 17 Jun 2025 14:03:46 -0400 Subject: [PATCH 3/4] Update Ansible link in community section. --- .../patternfly-docs/content/get-started/about-patternfly.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md b/packages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md index 41c5120883..f232299c91 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md @@ -116,7 +116,7 @@ Sometimes Flyers branch out and build groups of their own, creating new communit - **[PatternFly Kotlin](https://github.com/patternfly-kotlin/patternfly-kotlin):** 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, [view the PatternFly Kotlin showcase.](https://patternfly-kotlin.github.io/patternfly-kotlin-showcase/#home) -- **[Ansible Component Guide and Sketch Library](https://www.sketch.com/s/6ccbd710-267d-4b69-9dae-bc19e1551056):** 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. This is specific to Ansible, but many of the components are generalized and can fit many product use cases. +- **[Ansible Component Guide and Sketch Library](https://www.figma.com/design/dOVzoCFCRlPXifj2WstR79/AAP-PF6-Style---Component-Guide?node-id=3-10950&t=PBFhyMs7gUxzGRH2-1):** 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. This is specific to Ansible, but many of the components are generalized and can fit many product use cases. - **[PatternFly for Yew](https://github.com/patternfly-yew/patternfly-yew)**: Provides PatternFly components for Yew—a Rust based framework for creating web applications that can 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.](https://github.com/patternfly-yew/patternfly-yew-quickstart) From ac1024eccb592f4ab3fdd5efbdf62af057b56b1a Mon Sep 17 00:00:00 2001 From: Andrew Ronaldson Date: Wed, 18 Jun 2025 09:22:43 -0300 Subject: [PATCH 4/4] Update about-patternfly.md Changed text from Sketch to Figma --- .../patternfly-docs/content/get-started/about-patternfly.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md b/packages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md index f232299c91..4dbea7debb 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/about-patternfly.md @@ -116,7 +116,7 @@ Sometimes Flyers branch out and build groups of their own, creating new communit - **[PatternFly Kotlin](https://github.com/patternfly-kotlin/patternfly-kotlin):** 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, [view the PatternFly Kotlin showcase.](https://patternfly-kotlin.github.io/patternfly-kotlin-showcase/#home) -- **[Ansible Component Guide and Sketch Library](https://www.figma.com/design/dOVzoCFCRlPXifj2WstR79/AAP-PF6-Style---Component-Guide?node-id=3-10950&t=PBFhyMs7gUxzGRH2-1):** 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. This is specific to Ansible, but many of the components are generalized and can fit many product use cases. +- **[Ansible Component Guide and Figma Library](https://www.figma.com/design/dOVzoCFCRlPXifj2WstR79/AAP-PF6-Style---Component-Guide?node-id=3-10950&t=PBFhyMs7gUxzGRH2-1):** 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. This is specific to Ansible, but many of the components are generalized and can fit many product use cases. - **[PatternFly for Yew](https://github.com/patternfly-yew/patternfly-yew)**: Provides PatternFly components for Yew—a Rust based framework for creating web applications that can 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.](https://github.com/patternfly-yew/patternfly-yew-quickstart)