diff --git a/packages/documentation-framework/components/sectionGallery/sectionGallery.js b/packages/documentation-framework/components/sectionGallery/sectionGallery.js index e435c30b1f..def538fd9a 100644 --- a/packages/documentation-framework/components/sectionGallery/sectionGallery.js +++ b/packages/documentation-framework/components/sectionGallery/sectionGallery.js @@ -35,7 +35,8 @@ export const SectionGallery = ({ hasGridImages = true, hasListText = true, hasListImages = true, - isFullWidth = true + isFullWidth = true, + onlyShowInGalleryData = false }) => ( {(sectionGalleryItems, searchTerm, setSearchTerm, layoutView, setLayoutView) => ( <> diff --git a/packages/documentation-framework/components/sectionGallery/sectionGalleryWrapper.js b/packages/documentation-framework/components/sectionGallery/sectionGalleryWrapper.js index c696554792..d9381dcff0 100644 --- a/packages/documentation-framework/components/sectionGallery/sectionGalleryWrapper.js +++ b/packages/documentation-framework/components/sectionGallery/sectionGalleryWrapper.js @@ -2,6 +2,26 @@ import React from 'react'; import { useLocation } from '@reach/router'; import { groupedRoutes } from '../../routes'; +/** + * Converts a hyphenated or lowercase string to sentence case + * Example: "design-tokens" -> "Design tokens" + * Example: "colors" -> "Colors" + */ +const toSentenceCase = (str) => { + if (!str) return str; + return str + .split('-') + .map((word, index) => { + if (index === 0) { + // Capitalize first letter of first word only + return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(); + } + // Keep all other words lowercase + return word.toLowerCase(); + }) + .join(' '); +}; + export const SectionGalleryWrapper = ({ section, subsection, @@ -11,6 +31,7 @@ export const SectionGalleryWrapper = ({ parseSubsections, initialLayout, isFullWidth, + onlyShowInGalleryData = false, children, }) => { let sectionRoutes = subsection @@ -24,12 +45,50 @@ export const SectionGalleryWrapper = ({ ); } - if (!includeSubsections || parseSubsections) { + + // If includeSubsections is true and we're at the section level (not a specific subsection), + // we need to include subsections themselves as items (not their contents) + if (includeSubsections && !subsection && groupedRoutes[section]) { + const allRoutes = {}; + // First, add top-level items (non-subsections) + Object.entries(sectionRoutes).forEach(([navName, routeData]) => { + if (navName === 'isSubsection' || navName === 'sortValue' || navName === 'subsectionSortValue') { + return; + } + if (typeof routeData !== 'object' || routeData === null) { + return; + } + // Only add if it's not a subsection + if (!routeData.isSubsection) { + allRoutes[navName] = routeData; + } + }); + + // Then, add subsections themselves as single items (not their contents) + Object.entries(groupedRoutes[section]).forEach(([navName, routeData]) => { + if (navName === 'isSubsection' || navName === 'sortValue' || navName === 'subsectionSortValue') { + return; + } + if (typeof routeData !== 'object' || routeData === null) { + return; + } + // If this is a subsection, add the subsection itself as an item + if (routeData.isSubsection) { + allRoutes[navName] = routeData; + } + }); + + sectionRoutes = allRoutes; + } else if (!includeSubsections || parseSubsections) { const sectionRoutesArr = Object.entries(sectionRoutes); // loop through galleryItems object and build new object to handle subsections sectionRoutes = sectionRoutesArr.reduce((acc, [navName, routeData]) => { - // exit immediately if current item is isSubsection flag - if (navName === 'isSubsection') { + // exit immediately if current item is isSubsection flag or other metadata properties + if (navName === 'isSubsection' || navName === 'sortValue' || navName === 'subsectionSortValue') { + return acc; + } + // Skip primitive values (metadata properties like sortValue are numbers) + if (typeof routeData !== 'object' || routeData === null) { return acc; } // add current item @@ -40,8 +99,11 @@ export const SectionGalleryWrapper = ({ if (parseSubsections && routeData.isSubsection) { // loop through each subsection item & add Object.entries(routeData).map(([subitemName, subitemData]) => { - if (subitemName !== 'isSubsection') { - acc[subitemName] = subitemData; + if (subitemName !== 'isSubsection' && subitemName !== 'sortValue' && subitemName !== 'subsectionSortValue') { + // Skip primitive values + if (typeof subitemData === 'object' && subitemData !== null) { + acc[subitemName] = subitemData; + } } }); } @@ -53,11 +115,32 @@ export const SectionGalleryWrapper = ({ const [searchTerm, setSearchTerm] = React.useState(''); const [layoutView, setLayoutView] = React.useState(initialLayout); const filteredItems = Object.entries(sectionRoutes).filter( - ([itemName, { slug }]) => + ([itemName, itemData]) => { + // Skip metadata properties + if (itemName === 'isSubsection' || itemName === 'sortValue' || itemName === 'subsectionSortValue') { + return false; + } + // Skip primitive values (metadata properties) + if (typeof itemData !== 'object' || itemData === null) { + return false; + } + // For subsections, slug will be computed later from first page + // For regular items, they must have a slug + if (!itemData.isSubsection && !itemData.slug) { + return false; + } + const slug = itemData.slug; + // For subsections without slug yet, we'll compute it later, so don't filter by slug + if (!slug) { + return itemName.toLowerCase().includes(searchTerm.toLowerCase()); + } // exclude current gallery page from results - check for trailing / - !location.pathname.endsWith(slug) && - !location.pathname.endsWith(`${slug}/`) && - itemName.toLowerCase().includes(searchTerm.toLowerCase()) + return ( + !location.pathname.endsWith(slug) && + !location.pathname.endsWith(`${slug}/`) && + itemName.toLowerCase().includes(searchTerm.toLowerCase()) + ); + } ); const sectionGalleryItems = filteredItems .sort(([itemName1], [itemName2]) => itemName1.localeCompare(itemName2)) @@ -76,8 +159,35 @@ export const SectionGalleryWrapper = ({ } const { sources, isSubsection = false } = itemData; // Subsections don't have title or id, default to itemName aka sidenav text - const title = itemData.title || itemName; - const id = itemData.id || title; + // Convert itemName to sentence case if no title is provided + let title = itemData.title || toSentenceCase(itemName); + let id = itemData.id || title; + + // For extensions section, try to extract extension name from slug to match JSON keys + // This handles cases where extensions have id: Overview or other IDs but we need to match JSON keys + // The JSON keys are dasherized (e.g., "component-groups"), so we extract from slug + if (section === 'extensions' && itemData.slug && galleryItemsData) { + // Extract extension name from slug like /extensions/topology/overview -> topology + // or /extensions/component-groups/overview -> component-groups + // Also handle /extensions/react-topology/... -> topology (remove react- prefix) + const slugParts = itemData.slug.split('/').filter(Boolean); + if (slugParts.length >= 2 && slugParts[0] === 'extensions') { + let extensionName = slugParts[1]; // e.g., "component-groups" or "react-topology" + // Remove "react-" prefix if present (e.g., "react-topology" -> "topology") + if (extensionName.startsWith('react-')) { + extensionName = extensionName.replace(/^react-/, ''); + } + // Check if this extension name exists in galleryItemsData + if (galleryItemsData[extensionName]) { + // Use extension name as id for JSON lookup (TextSummary converts to dasherized) + id = extensionName; + // Update title to extension name in sentence case if id was "Overview" or matches itemName + if (itemData.id === 'Overview' || itemName === 'Overview' || !itemData.title) { + title = toSentenceCase(extensionName); + } + } + } + } // Display beta label if tab other than a '-next' tab is marked Beta const isDeprecated = !isSubsection && @@ -138,6 +248,23 @@ export const SectionGalleryWrapper = ({ id, galleryItemsData, }; + }) + .filter((item) => { + // If onlyShowInGalleryData is true, filter to only items that exist in galleryItemsData + if (!onlyShowInGalleryData || !galleryItemsData) { + return true; + } + // Try matching by itemName first (already in dasherized format from routes) + if (galleryItemsData[item.itemName]) { + return true; + } + // Convert id to dasherized format to match JSON keys (lowercase, spaces to hyphens) + const dasherizedId = item.id + .split(' ') + .join('-') + .toLowerCase(); + // Check if this item exists in galleryItemsData + return galleryItemsData[dasherizedId] !== undefined; }); return ( diff --git a/packages/documentation-site/patternfly-docs/content/AI/about-generative-ui.md b/packages/documentation-site/patternfly-docs/content/AI/about-generative-ui.md index aacd7f8152..a1b6f17586 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/about-generative-ui.md +++ b/packages/documentation-site/patternfly-docs/content/AI/about-generative-ui.md @@ -10,13 +10,15 @@ import { Alert } from "@patternfly/react-core"; ## What is generative UI? -Generative UI (GenUI) refers to a user interface design approach where AI is leveraged to dynamically create and adapt UI elements based on context, user needs, and data. Unlike traditional, static UIs, GenUI can produce layouts, components, and visual styles in real-time, offering more flexible and personalized user experiences. +**Generative UI (GenUI)** refers to a user interface design approach where AI is leveraged to dynamically create and adapt UI elements based on context, user needs, and data. Unlike traditional, static UIs, GenUI can produce layouts, components, and visual styles in real-time, offering more flexible and personalized user experiences. -## PatternFly's exploration: Compass +--- + +## Compass: PatternFly's GenUI exploration Generative UI represents a significant opportunity for PatternFly to explore new patterns, layouts, and styles that support AI-driven interface generation. PatternFly has been calling this proof of concept Compass. It investigates how the design system can evolve to support generative UI use cases. - +Compass is best suited for use as a POC in other proof-of-concept generative UI use cases. It is not yet production quality code and should be used for exploration and experimentation purposes only. ### AI-enabled seed app diff --git a/packages/documentation-site/patternfly-docs/content/AI/ai-overview.md b/packages/documentation-site/patternfly-docs/content/AI/ai.md similarity index 81% rename from packages/documentation-site/patternfly-docs/content/AI/ai-overview.md rename to packages/documentation-site/patternfly-docs/content/AI/ai.md index 4404de2c4e..877bd966af 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/ai-overview.md +++ b/packages/documentation-site/patternfly-docs/content/AI/ai.md @@ -1,16 +1,32 @@ --- id: Overview +title: AI overview section: AI sortValue: 1 --- import { Alert, AlertActionLink, Accordion, AccordionItem, AccordionContent, AccordionToggle, Button, Card, CardHeader, CardTitle, CardBody, CardFooter, Checkbox, Divider, DescriptionList, DescriptionListTerm, DescriptionListGroup, DescriptionListDescription, Grid, GridItem} from '@patternfly/react-core'; import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon'; -When used thoughtfully, AI can enhance user experiences through personalized interactions, increased efficiency, and innovative designs. **PatternFly AI** provides resources that can help you integrate AI into your design process, balancing a consideration for its potential benefits and unintended consequences. +When used thoughtfully, **AI** can enhance user experiences through personalized interactions, increased efficiency, and innovative designs. -## Red Hat policies +To support your AI practices, we provide a range of AI tools that you can integrate into your workflows, plus guidance for using AI with PatternFly: -When using PatternFly to design Red Hat products, you must adhere to AI-related policies that Red Hat has previously outlined: +- **[Rapid prototyping](/ai/rapid-prototyping):** How to quickly test and iterate on AI features during the early stages of design. +- **[AI-assisted code migration](/ai/ai-assisted-code-migration):** How to quickly test and iterate on AI features during the early stages of design. +- **[Conversational Design Principles](/ai/conversational-design):** Guidance for designing effective and human-centered text-based conversational flows. +- **[Rapid Prototyping Guidelines](/ai/generative-uis/overview):** How to quickly test and iterate on AI features during the early stages of design. + +Regardless of the AI resources or workflow you're using, it's important to ensure that you're aligned with the compliance rules, ethical considerations, and best practies on this page. + +--- + +## How do I ensure compliance? + +There are important compliance rules and ethical considerations that must guide your use of AI with PatternFly. + +### Red hat policies + +When using PatternFly to design Red Hat products, you *must* adhere to AI-related policies that Red Hat has previously outlined. This means you must: - Gain approval before using AI technology for business related to Red Hat. - Gain approval before using certain information as input for AI technology. - Review, test, and validate generative AI model output. @@ -20,9 +36,9 @@ When using PatternFly to design Red Hat products, you must adhere to AI-related View policy details (requires Red Hat login) -## Core principles +## How do I ensure ethical practice? -There are 5 core principles of PatternFly AI: accountability, explainability, transparency, fairness, and human-centeredness. These principles create an ethics-first framework for AI use, and any AI system built with PatternFly should adhere to all 5. +There are 5 core principles of PatternFly AI: accountability, explainability, transparency, fairness, and human-centeredness. These principles create an ethics-first framework for AI use, and any AI system built with PatternFly should adhere to all **five principles**. @@ -31,7 +47,7 @@ There are 5 core principles of PatternFly AI: accountability, explainability, tr Accountability - All people involved in any step of creating AI are **accountable** for considering its impact. There should be clearly defined roles for design, development, and deployment. Decisions and processes​ should be well-documented. + All people involved in any step of creating AI are **accountable** for considering its impact. There should be clearly defined roles for design, development, and deployment. Decisions and processes should be well-documented. @@ -61,7 +77,7 @@ There are 5 core principles of PatternFly AI: accountability, explainability, tr Fairness - AI systems that are **fair** should be intentionally designed to prioritize and promote inclusion. They should focus accessibility for all humans and should minimize—not amplify—bias. + AI systems that are **fair** should be intentionally designed to prioritize and promote inclusion. They should focus **on** accessibility for all humans and should minimize—not amplify—bias. @@ -77,11 +93,11 @@ There are 5 core principles of PatternFly AI: accountability, explainability, tr -## Ethical design checklist +### Ethical design checklist When working on an AI system, you should consciously check that you're in alignment with the core principles of PatternFly AI. While this is an area that will continue to evolve with the rest of the industry, the following checklists outline some of the key areas that you should consider for each principle. -### Accountability +#### Accountability |
Key area
| Rule |
Status
| | --- | --- | --- | @@ -89,7 +105,7 @@ When working on an AI system, you should consciously check that you're in alignm | Legal compliance | All necessary laws, regulations, and ethical guidelines are followed throughout the development process. AI does not enable illegal, unethical, or contract-breaking activities. | | Practices | AI does not answer unsafe questions or access unsecure data. | -### Explainability +#### Explainability |
Key area
| Rule |
Status
| | --- | --- | --- | @@ -97,7 +113,7 @@ When working on an AI system, you should consciously check that you're in alignm | Citations | Any related citations are provided to users. | | | Context | To support troubleshooting, AI gives context to Red Hatters who review its interactions. | | -### Transparency +#### Transparency |
Key area
| Rule |
Status
| | --- | --- | --- | @@ -106,7 +122,7 @@ When working on an AI system, you should consciously check that you're in alignm | Confidence | AI shares when it has low confidence in its response. | | Limitations | AI shares when it believes that it can’t fulfill a request. | -### Fairness +#### Fairness |
Key area
| Rule |
Status
| | --- | --- | --- | @@ -114,7 +130,7 @@ When working on an AI system, you should consciously check that you're in alignm | Inclusion | Designs are inclusive and accommodating of various user demographics. | | Equal access | Access to AI technologies is available and beneficial to as many users and communities as possible. | -### Human-centeredness +#### Human-centeredness |
Key area
| Rule |
Status
| | --- | --- | --- | @@ -125,11 +141,11 @@ When working on an AI system, you should consciously check that you're in alignm | Optional | There is an obvious and simple way for users to opt out of using AI. | | Privacy | Personally identifiable information is protected and used responsibly. | -## Design guidelines +## How do I apply AI design best practices? When designing, developing, and using AI, consider the following ethical and best-practice guidelines. -### 1. Determine if AI adds value +### Determine if AI adds value Not all uses of AI are good for your UX strategy. As much as possible, conduct research to identify real user needs that AI features could help solve @@ -147,9 +163,9 @@ Depending on your users' needs, value-adding features could include: #### When not to use AI - Do not add AI features simply because they are new, trendy, or fun. They need to matter to the user. -### 2. Enhance—don't replace—human abilities +### Enhance—don't replace—human abilities -AI is best when it enhances human abilities, not when it's used to replace humans. It cannot exist in a silo—humans help bring the value of AI to life. +AI is best when it enhances human abilities, not when it's used to replace humans. It cannot exist in a silo—humans help bring the value of AI to life. To ensure that the design of AI systems is human-centered, follow these practices: @@ -157,7 +173,7 @@ To ensure that the design of AI systems is human-centered, follow these practice - Welcome multiple perspectives to encourage creativity and help mitigate bias. - Check AI output for accuracy and identify areas where meaning is lost, language isn't inclusive, or information isn't true. Ask peers to review your AI-generated deliverables to help fact-check and catch mistakes. -### 3. Be transparent with your users +### Be transparent with your users As one of our core pillars, transparency is essential for ethical design with AI. @@ -169,7 +185,7 @@ To help people understand and trust AI features: - Keep users in control and let them decide how they interact with AI. - Be clear and honest when AI fails or hallucinates. -### 4. Be prepared for something to go wrong +### Be prepared for something to go wrong Errors and failure are inevitable when working with AI, so it is essential that you are prepared to handle undesired outcomes. You should understand the risk involved in AI and the impact that an error may have. diff --git a/packages/documentation-site/patternfly-docs/content/about-us.md b/packages/documentation-site/patternfly-docs/content/about-us.md new file mode 100644 index 0000000000..d4c76f6b91 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/about-us.md @@ -0,0 +1,55 @@ +--- +id: About us +title: About us +--- + +import './get-started/get-started.css'; +import { Button, Card, CardHeader, CardTitle, CardBody, CardFooter, Divider, Icon, Grid, GridItem, PageSection, Split, SplitItem, Title, Tooltip, Content, ContentVariants } from '@patternfly/react-core'; +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**, 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 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. + +## Who uses PatternFly? +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? +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. + +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. + +## Why should I use PatternFly? +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. We encourage product teams to shape our design system for their needs by contributing or requesting changes. + +Red Hat UX designers can use PatternFly alongside the [UXD Hub](https://www.uxd-hub.com/), which documents additional product-specific design patterns. + +--- + +## Get started + +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. + + + + + + +## Get help + +- [FAQs:](/get-help/faqs) Answers to some of the initial questions you might have. +- [Contact us:](/get-help/contact-us) Information for getting in touch with the PatternFly team. +- [Report a bug:](/get-help/report-a-bug) Direction for reporting any bugs you find. + +## Get involved + +- [Community:](/get-involved/community) Learn how you can get involved in the PatternFly community and explore other communities that exist. +- [Contribute code:](/get-involved/contribute/contribute-code) Learn how you can contribute to the PatternFly codebase. +- [Contribute designs:](/get-involved/contribute/contribute-designs) Learn how you can share design ideas for PatternFly's evolution. +- [Contribute documentation:](/get-involved/contribute/contribute-documentation) Learn how you can help ensure our documentation is accurate and detailed. \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/accessibility/accessibility-overview.md b/packages/documentation-site/patternfly-docs/content/accessibility/accessibility.md similarity index 71% rename from packages/documentation-site/patternfly-docs/content/accessibility/accessibility-overview.md rename to packages/documentation-site/patternfly-docs/content/accessibility/accessibility.md index 3af7814c0f..4e79188a21 100644 --- a/packages/documentation-site/patternfly-docs/content/accessibility/accessibility-overview.md +++ b/packages/documentation-site/patternfly-docs/content/accessibility/accessibility.md @@ -5,30 +5,94 @@ section: accessibility sortValue: 1 --- -# Accessibility fundamentals - -Accessibility is a foundation of PatternFly, so if you contribute to PatternFly or use it for your products you should first familiarize yourself with our accessibility guidelines and recommendations. +**Accessibility** refers to the ways that your product is set up to support different user needs and abilities, making their experience more comfortable and ensuring that they can easily interact with information. PatternFly prioritizes accessibility, so if you contribute to our design system or use PatternFly for your products, you should first familiarize yourself with our accessibility guidelines and recommendations. No user should feel left behind when using your product. The goal of accessible design is to remove barriers and create inclusive product experiences that work for everyone, regardless of ability. This is best achieved when accessibility is considered early in the design and development process, but it's never too late to start prioritizing accessibility. -There’s always room to improve accessibility. That’s why our guidelines will continually evolve. Your feedback can help support PatternFly's accessibility, so we welcome you to contribute to our documentation or [get involved in our GitHub discussions](https://github.com/orgs/patternfly/discussions). +There’s always room to improve accessibility. That’s why our guidelines will continually evolve. Your feedback can help create a more inclusive design system, so we welcome you to [contribute to our accessibility documentation](/get-involved/contribute/contribute-documentation) or [get involved in our GitHub Discussions](https://github.com/orgs/patternfly/discussions). + +--- + +## What does accessibility look like in PatternFly? + +We are committed to testing our components and checking for accessibility compliance, aligning with [level AA in the Web Content Accessibility Guidelines 2.2](https://www.w3.org/WAI/WCAG22/quickref/?versions=2.2¤tsidebar=%23col_customize&levels=aaa). + +### Component testing and compliance + +To ensure that PatternFly's components prioritize accessibility first, we build accessibility into our codebase. + +As PatternFly is updated and enhanced, we put changes and new features through a combination of automated and manual testing, using [aXe: The Accessibility Engine](https://www.deque.com/axe/) to ensure that all components pass an accessibility audit before they’re added to PatternFly. + +We also regularly audit keyboard accessibility with both manual testing and integration tests. We aim to provide full support for VoiceOver as our main screen reader, but we still test our components through NVDA and JAWS. As part of our manual audit, every component is run through VoiceOver to make sure they’ll be as accessible as possible in your products. + +#### Accessibility standards + +We strive for compliance in accordance to [level AA in the Web Content Accessibility Guidelines 2.2](https://www.w3.org/WAI/WCAG22/quickref/?versions=2.2¤tsidebar=%23col_customize&levels=aaa) across the core PatternFly HTML and React libraries, as well as our extensions. If you use or contribute to PatternFly, the following accessibility guidelines are some that you can expect PatternFly to adhere to (keep in mind this is not an exhaustive list): + +| Guideline | Link | Applies to | Tested | +| :--- | :--- | :--- | :--- | +| Semantic HTML structures are used to accurately communicate the purpose and relationship of UI elements. | [WCAG 1.3.1](//www.w3.org/WAI/WCAG22/quickref#info-and-relationships) | `design` `html` `css` | Automated testing with aXe and manual testing | +| Color is not the only method of communication. Providing meaning with color is supplementary to providing meaning with text. | [WCAG 1.4.1](//www.w3.org/WAI/WCAG22/quickref#use-of-color) | `design` `html` `css` | Manual testing and aXe used | +| Colors used provide sufficient contrast | [WCAG 1.4.3](//www.w3.org/WAI/WCAG22/quickref#contrast-minimum) and [1.4.11](//www.w3.org/WAI/WCAG22/quickref#non-text-contrast) | `css` | Automated testing with aXe | +| Font sizes can scale up to 200% without loss of content or functionality, and up to 400% without needing to scroll in more than one direction. | [WCAG 1.4.4](//www.w3.org/WAI/WCAG22/quickref#resize-text) and [1.4.10](//www.w3.org/WAI/WCAG22/quickref#reflow) | `css` | Manual testing | +| Styles that affect text spacing (line height, space between paragraphs, letter spacing, and word spacing) can be increased without loss of content or functionality. | [WCAG 1.4.12](//www.w3.org/WAI/WCAG22/quickref#text-spacing) | `css` | Manual testing and aXe used | +| Contents that appear on hover and focus are dismissible, hoverable, and persistent. | [WCAG 1.4.13](//www.w3.org/WAI/WCAG22/quickref#content-on-hover-or-focus) | `html` `css` `js` | Manual testing | +| All functionality is keyboard accessible. | [WCAG 2.1.1](//www.w3.org/WAI/WCAG22/quickref#keyboard) and [2.1.2](//www.w3.org/WAI/WCAG22/quickref#no-keyboard-trap) | `html` | Manual testing | +| Elements in the HTML and in the layout follow a logical order. | [WCAG 1.3.2](//www.w3.org/WAI/WCAG22/quickref#meaningful-sequence) and [2.4.3](//www.w3.org/WAI/WCAG22/quickref#focus-order) | `design` `html` `css` | Manual testing | +| Flashing content does not flash more than three times in any one-second period, or the flash is below the general flash and red flash thresholds. | [WCAG 2.3.1](//www.w3.org/WAI/WCAG22/quickref/?showtechniques=231#three-flashes-or-below-threshold) | `css` | Manual testing| +| Elements with focus are clearly visible. | [WCAG 2.4.7](//www.w3.org/WAI/WCAG22/quickref#focus-visible) | `css` | Manual testing | +| Elements that are focusable are not entirely obscured. | [WCAG 2.4.11](//www.w3.org/WAI/WCAG22/quickref#focus-not-obscured-minimum) | `design` | Manual testing | +| Functionality that uses complex gestures can also be operated with a single pointer without a path-based gesture. | [WCAG 2.5.1](//www.w3.org/WAI/WCAG22/quickref#pointer-gestures) | `design` | Manual testing | +| Pointer events can be canceled. | [WCAG 2.5.2](//www.w3.org/WAI/WCAG22/quickref#pointer-cancellation) | `js` | Manual testing | +| Visible labels of UI components are either the same as the accessible name or used in the beginning of the accessible name. | [WCAG 2.5.3](//www.w3.org/WAI/WCAG22/quickref#label-in-name) | `html` | Automated testing with aXe and manual testing | +| Any action that involves dragging has a pointer alternative. | [WCAG 2.5.7](//www.w3.org/WAI/WCAG22/quickref#dragging-movements) | `js` | Manual testing | +| The target area for clickable elements is at least 24 by 24 [CSS pixels](//www.w3.org/TR/WCAG22#dfn-css-pixels), with specific exceptions. | [WCAG 2.5.8](//www.w3.org/WAI/WCAG22/quickref/#target-size-minimum) | `css` | Manual testing | +| An accessible name, role, and value are provided for all user interface elements. | [WCAG 4.1.2](//www.w3.org/WAI/WCAG22/quickref#name-role-value) | `design` `html` | Automated testing with aXe and manual testing with VoiceOver | +| Status messages can be programmatically determined through role or properties. | [WCAG 4.1.3](//www.w3.org/WAI/WCAG22/quickref#status-messages) | `html` | Manual testing | + +--- + +## How to design for accessibility + +### Experience parity + +We believe that all abilities should be treated equally. There should be parity in the experience of all users—one user group shouldn't be prioritized over the other. + +To help you achieve this, consider these guidelines: + +- Content should be optimized for all input types: touch, mouse, and keyboard. + - Don’t optimize the experience for one input type at the expense of another. + - Contents that are mouse-accessible should also be accessible using touch or a keyboard. + - Don’t show interactive elements on hover. + - Interactive elements that display in a pop-up must also display on click, touch, or enter-key events. + +- Screen reader content should match visibly rendered content (refer to the [first note for `aria-hidden` state](https://www.w3.org/TR/wai-aria/#h-note-59), but keep in mind this references an older version of WCAG guidelines). + +- There should be parity between hover and focus events. Any information that’s available on hover for the mouse user should be available on keyboard focus. + - Make content that appears on hover available to a screen reader by using `aria-describedby` (refer to [Tooltips & Toggletips example from Inclusive Components](https://inclusive-components.design/tooltips-toggletips/)). + +When building accessible user experiences, solving for one can extend to many. Humans are diverse and unique, and designing for accessibility takes that into consideration to create truly inclusive products. + +### Understanding users’ needs and assistive technology -## Assistive technologies +#### Assistive technologies -A core consideration for accessibility practices is the assistive technologies that people may use to access your product. While there are many kinds of assistive technologies, PatternFly focuses primarily on accommodating users of keyboards and screen readers. +##### Keyboard -### Keyboard -Some users can’t use a mouse and rely on other methods of navigation instead, like a keyboard. A keyboard allows users to navigate through UI elements in the order that they appear on the page, typically using the Tab key. Keyboard users should be able to do anything that mouse users can, including viewing text that is shown upon hover or in popups. +A keyboard, used by some in place of a mouse, allows users to navigate through UI elements in the order that they appear on the page, typically using the `Tab` key. Keyboard users should be able to do anything that mouse users can, including viewing text that is shown upon hover or in popups. -### Screen readers -When a user has impaired vision (temporary or permanent) that prevents them from viewing a screen, they can use a screen reader that reads visible and non-visible content aloud. Non-visible content includes hidden text, like tooltips, and alternative text (alt text) for icons, images, and links. +##### Screen readers -## Understanding users’ needs -Great user experiences don’t just happen. They’re designed, tested, and refined with users in mind. To develop inclusive products, it’s important to understand the varying needs of all users and consider the assistive tools and methods that they use. +A screen reader reads visible and non-visible content (like tooltips or alt text for icons, images, and linkes) aloud. When a user has impaired vision (temporary or permanent) that prevents them from viewing a screen, they can use a screen reader to access the content of a product or application. + +Often, a user may navigate with a keyboard while using a screen reader. + +#### User needs by impairment This section provides information to help you better understand and address some of the needs of [users with diverse abilities](https://www.a11yproject.com/posts/accessibility-is-blind-people/). It is important to note that some users might fall into multiple groups, and some might use tools created for a different group. -### Motor control +##### Motor control + Users with reduced motor control often use a keyboard or computer mouse to access content. Some users may also have difficulty keeping a mouse steady when trying to interact with content. To design for users with reduced motor control, remember that: @@ -36,9 +100,10 @@ To design for users with reduced motor control, remember that: - Users who rely on a keyboard need elements that are keyboard accessible and highly visible when in focus. - Users who rely on a mouse or touch need target areas that are large enough to be easily clicked and selected. -### Vision +##### Vision + +###### No vision -#### No vision Users with no vision rely on screen readers to access web sites and applications. These users often navigate a page by observing specific elements, like headers, links, or form elements. To design for users with no vision: @@ -46,7 +111,8 @@ To design for users with no vision: - Use [semantic elements](https://www.w3schools.com/html/html5_semantic_elements.asp). - Write labels that are meaningful when pulled out of context. -#### Low vision +###### Low vision + Users with low vision can have different needs depending on the nature of their visual impairment, such as difficulty with color differentiation, blurriness, or lack of vision in central or peripheral areas. To design for users with low vision: @@ -55,7 +121,8 @@ To design for users with low vision: - Palettes must have sufficient contrast. - Layouts should be responsive to font size increases. -### Cognitive processing +##### Cognitive processing + Users who have difficulty processing information benefit from well-written content. To design for users with cognitive processing issues: @@ -64,9 +131,10 @@ To design for users with cognitive processing issues: - Consider visual hierarchy and chunk content into short, related sections. - Avoid long paragraphs. -### Accessibility spectrum +#### Accessibility spectrum + +While there are a few main accessibility needs, it is not an exhaustive list. Often the **“Persona Spectrum”**, coined by Microsoft [(Download the Inclusive Guidebook as a PDF)](https://download.microsoft.com/download/b/0/d/b0d4bf87-09ce-4417-8f28-d60703d672ed/inclusive_toolkit_manual_final.pdf), can be used to understand related mismatches and motivations across a spectrum of permanent, temporary, and situational scenarios. -While there are a few main accessibility needs, it is not an exhaustive list. Often the “Persona Spectrum”, coined by Microsoft [(Download the Inclusive Guidebook as a PDF)](https://download.microsoft.com/download/b/0/d/b0d4bf87-09ce-4417-8f28-d60703d672ed/inclusive_toolkit_manual_final.pdf), can be used to understand related mismatches and motivations across a spectrum of permanent, temporary, and situational scenarios. While accessibility tends to focus on those with permanent disabilities, everyone benefits from accessible products: @@ -74,58 +142,4 @@ While accessibility tends to focus on those with permanent disabilities, everyon - Alternative text (alt text) makes images accessible to users with low bandwidth connections or older technologies that can’t load the images. - Closed captioning benefits those in crowded areas, those learning how to read, and those learning a new language. -Accessibility takes **all users** into account. - - -An accessibility spectrum showing examples of the situational, temporary, and permanent situations for different impairments. - -## Experience parity -We believe that all abilities should be treated equally. There should be parity in the experience of all users—one user group shouldn't be prioritized over the other. -To help you achieve this, consider these guidelines: - -- Content should be optimized for all input types: touch, mouse, and keyboard. - - Don’t optimize the experience for one input type at the expense of another. - - Contents that are mouse-accessible should also be accessible using touch or a keyboard. - - Don’t show interactive elements on hover. - - Interactive elements that display in a pop-up must also display on click, touch, or enter-key events. - -- Screen reader content should match visibly rendered content (refer to the [first note for `aria-hidden` state](https://www.w3.org/TR/wai-aria/#h-note-59), but keep in mind this references an older version of WCAG guidelines). - -- There should be parity between hover and focus events. Any information that’s available on hover for the mouse user should be available on keyboard focus. - - Make content that appears on hover available to a screen reader by using `aria-describedby` (refer to [Tooltips & Toggletips example from Inclusive Components](https://inclusive-components.design/tooltips-toggletips/)). - -When building accessible user experiences, solving for one can extend to many. Humans are diverse and unique, and designing for accessibility takes that into consideration to create truly inclusive products. - - -## PatternFly component accessibility - -We do our best to build accessibility into PatternFly's components to take some of the accessibility work off your hands. - -As PatternFly is updated and enhanced, we check the accessibility of updates through a combination of automated and manual testing. We use [aXe: The Accessibility Engine](https://www.deque.com/axe/) to ensure that all components pass an accessibility audit before they’re added to PatternFly. - -We also regularly audit keyboard accessibility with both manual testing and integration tests. We aim to provide full support for VoiceOver as our main screen reader, but we still test our components through NVDA and JAWS. As part of our manual audit, every component is run through VoiceOver to make sure they’ll be as accessible as possible in your products. - -### Accessibility standards - -We strive for compliance in accordance to [level AA in the Web Content Accessibility Guidelines 2.2](https://www.w3.org/WAI/WCAG22/quickref/?versions=2.2¤tsidebar=%23col_customize&levels=aaa) across the core PatternFly HTML and React libraries, as well as our extensions and component groups. If you use or contribute to PatternFly, the following accessibility guidelines are some that you can expect PatternFly to adhere to (keep in mind this is not an exhaustive list): - -| Guideline | Link | Applies to | Tested | -| --- | --- | --- | --- | -| Semantic HTML structures are used to accurately communicate the purpose and relationship of UI elements. | [WCAG 1.3.1](//www.w3.org/WAI/WCAG22/quickref#info-and-relationships) | `design` `html` `css` | Automated testing with aXe and manual testing | -|Color is not the only method of communication. Providing meaning with color is supplementary to providing meaning with text. | [WCAG 1.4.1](//www.w3.org/WAI/WCAG22/quickref#use-of-color) | `design` `html` `css` | Manual testing and aXe used | -| Colors used provide sufficient contrast | [WCAG 1.4.3](//www.w3.org/WAI/WCAG22/quickref#contrast-minimum) and [1.4.11](//www.w3.org/WAI/WCAG22/quickref#non-text-contrast) | `css` | Automated testing with aXe | -| Font sizes can scale up to 200% without loss of content or functionality, and up to 400% without needing to scroll in more than one direction. | [WCAG 1.4.4](//www.w3.org/WAI/WCAG22/quickref#resize-text) and [1.4.10](//www.w3.org/WAI/WCAG22/quickref#reflow) | `css` | Manual testing | -| Styles that affect text spacing (line height, space between paragraphs, letter spacing, and word spacing) can be increased without loss of content or functionality. | [WCAG 1.4.12](//www.w3.org/WAI/WCAG22/quickref#text-spacing) | `css` | Manual testing and aXe used | -| Contents that appear on hover and focus are dismissible, hoverable, and persistent. | [WCAG 1.4.13](//www.w3.org/WAI/WCAG22/quickref#content-on-hover-or-focus) | `html` `css` `js` | Manual testing | -| All functionality is keyboard accessible. | [WCAG 2.1.1](//www.w3.org/WAI/WCAG22/quickref#keyboard) and [2.1.2](//www.w3.org/WAI/WCAG22/quickref#no-keyboard-trap) | `html` | Manual testing | -| Elements in the HTML and in the layout follow a logical order. | [WCAG 1.3.2](//www.w3.org/WAI/WCAG22/quickref#meaningful-sequence) and [2.4.3](//www.w3.org/WAI/WCAG22/quickref#focus-order) | `design` `html` `css` | Manual testing | -| Flashing content does not flash more than three times in any one-second period, or the flash is below the general flash and red flash thresholds. | [WCAG 2.3.1](//www.w3.org/WAI/WCAG22/quickref/?showtechniques=231#three-flashes-or-below-threshold) | `css` | Manual testing| -| Elements with focus are clearly visible. | [WCAG 2.4.7](//www.w3.org/WAI/WCAG22/quickref#focus-visible) | `css` | Manual testing | -| Elements that are focusable are not entirely obscured. | [WCAG 2.4.11](//www.w3.org/WAI/WCAG22/quickref#focus-not-obscured-minimum) | `design` | Manual testing | -| Functionality that uses complex gestures can also be operated with a single pointer without a path-based gesture. | [WCAG 2.5.1](//www.w3.org/WAI/WCAG22/quickref#pointer-gestures) | `design` | Manual testing | -| Pointer events can be canceled. | [WCAG 2.5.2](//www.w3.org/WAI/WCAG22/quickref#pointer-cancellation) | `js` | Manual testing | -| Visible labels of UI components are either the same as the accessible name or used in the beginning of the accessible name. | [WCAG 2.5.3](//www.w3.org/WAI/WCAG22/quickref#label-in-name) | `html` | Automated testing with aXe and manual testing | -| Any action that involves dragging has a pointer alternative. | [WCAG 2.5.7](//www.w3.org/WAI/WCAG22/quickref#dragging-movements) | `js` | Manual testing | -| The target area for clickable elements is at least 24 by 24 [CSS pixels](//www.w3.org/TR/WCAG22#dfn-css-pixels), with specific exceptions. | [WCAG 2.5.8](//www.w3.org/WAI/WCAG22/quickref/#target-size-minimum) | `css` | Manual testing | -| An accessible name, role, and value are provided for all user interface elements. | [WCAG 4.1.2](//www.w3.org/WAI/WCAG22/quickref#name-role-value) | `design` `html` | Automated testing with aXe and manual testing with VoiceOver -| Status messages can be programmatically determined through role or properties. | [WCAG 4.1.3](//www.w3.org/WAI/WCAG22/quickref#status-messages) | `html` | Manual testing | \ No newline at end of file +Accessibility takes **all users** into account. \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/accessibility/accessibility-design.md b/packages/documentation-site/patternfly-docs/content/accessibility/design.md similarity index 100% rename from packages/documentation-site/patternfly-docs/content/accessibility/accessibility-design.md rename to packages/documentation-site/patternfly-docs/content/accessibility/design.md diff --git a/packages/documentation-site/patternfly-docs/content/accessibility/accessibility-development.md b/packages/documentation-site/patternfly-docs/content/accessibility/develop.md similarity index 100% rename from packages/documentation-site/patternfly-docs/content/accessibility/accessibility-development.md rename to packages/documentation-site/patternfly-docs/content/accessibility/develop.md diff --git a/packages/documentation-site/patternfly-docs/content/accessibility/accessibility-scorecard.md b/packages/documentation-site/patternfly-docs/content/accessibility/product-scorecard.md similarity index 100% rename from packages/documentation-site/patternfly-docs/content/accessibility/accessibility-scorecard.md rename to packages/documentation-site/patternfly-docs/content/accessibility/product-scorecard.md diff --git a/packages/documentation-site/patternfly-docs/content/accessibility/accessibility-testing.md b/packages/documentation-site/patternfly-docs/content/accessibility/test-your-product.md similarity index 100% rename from packages/documentation-site/patternfly-docs/content/accessibility/accessibility-testing.md rename to packages/documentation-site/patternfly-docs/content/accessibility/test-your-product.md diff --git a/packages/documentation-site/patternfly-docs/content/components/charts/about/about.md b/packages/documentation-site/patternfly-docs/content/components/charts/about/charts-guidelines.md similarity index 84% rename from packages/documentation-site/patternfly-docs/content/components/charts/about/about.md rename to packages/documentation-site/patternfly-docs/content/components/charts/about/charts-guidelines.md index 4f5053398b..83ab90137d 100644 --- a/packages/documentation-site/patternfly-docs/content/components/charts/about/about.md +++ b/packages/documentation-site/patternfly-docs/content/components/charts/about/charts-guidelines.md @@ -3,10 +3,11 @@ id: Overview title: Charts overview section: components subsection: charts +source: design-guidelines sortValue: 1 --- -_Charts are only available in React_ +**Note:** Charts are only available in React in their own package [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts). A **chart** visualizes data in an application. The type of chart you use will depend on your use case and the type of data you need to display. @@ -67,15 +68,4 @@ On click Interactive legend hidden 1. **Legend:** When a user clicks on a legend label, it becomes disabled and the color swatch is replaced with an eye-slashed icon. -2. **Chart:** Data corresponding to the clicked legend label is hidden from view. - -## Develop with charts - -Default styles in the [@patternfly/react-charts package](https://www.npmjs.com/package/@patternfly/react-charts) are aligned with our light theme. Charts work with PatternFly's light theme by default—you don't need to import anything else. - -To support dark-themed charts, you must: -1. Import the [@patternfly/patternfly package](https://www.npmjs.com/package/@patternfly/patternfly), so that you can use our global tokens. -1. Import the stylesheet that contains dark theme styles by adding this line before importing your main application component: `import '@patternfly/patternfly/patternfly-charts.css';` - - Once you import this file, you'll have access to [all chart variables](https://www.npmjs.com/package/@patternfly/patternfly?activeTab=code). Beyond dark theme, you could use these variables to match the style of other UI elements to your chart styles. - -To display the list of all available chart tokens, filter for "charts" in [the design tokens table](/foundations-and-styles/design-tokens/all-design-tokens). \ No newline at end of file +2. **Chart:** Data corresponding to the clicked legend label is hidden from view. \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/components/charts/about/charts.md b/packages/documentation-site/patternfly-docs/content/components/charts/about/charts.md new file mode 100644 index 0000000000..8a6152a228 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/charts/about/charts.md @@ -0,0 +1,53 @@ +--- +id: Overview +title: Charts overview +section: components +subsection: charts +source: overview +sortValue: 1 +--- + +**Note:** Charts are only available in React in their own package [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts). + +A **chart** visualizes data in an application, helping users understand large or complex data sets. The type of chart you use will depend on your use case and the data you need to display. Charts are currently **only available in React**. + +The majority of PatternFly charts are based on [the Victory chart library](https://formidable.com/open-source/victory/docs/victory-chart/), with a couple of charts based instead on [the Apache Echarts library](https://echarts.apache.org/). We add functionality, customization, and theming to align charts with our design system. + +--- + +## How do I use charts? + +To get started: + +1. Install the `@patternfly/react-charts` package by following [the README instructions](https://github.com/patternfly/patternfly-react/blob/main/packages/react-charts/README.md). +2. To use a particular chart in your project, import your desired option from the respective charts library: + + - Victory: + ``` + import { Chart, ChartAxis, ChartGroup, ChartLine, ChartVoronoiContainer } from '@patternfly/react-charts/victory'; + ``` + + - Echarts: + ``` + import { Charts } from '@patternfly/react-charts/echarts'; + import { LineChart } from 'echarts/charts'; + ``` + +### Developing with charts + +Default styles in the [@patternfly/react-charts package](https://www.npmjs.com/package/@patternfly/react-charts) are aligned with our light theme. Charts work with PatternFly's light theme by default—you don't need to import anything else. + +To support dark-themed charts, you must: +1. Import the [@patternfly/patternfly package](https://www.npmjs.com/package/@patternfly/patternfly), so that you can use our global tokens. +1. Import the stylesheet that contains dark theme styles by adding this line before importing your main application component: `import '@patternfly/patternfly/patternfly-charts.css';` + - Once you import this file, you'll have access to [all chart variables](https://www.npmjs.com/package/@patternfly/patternfly?activeTab=code). Beyond dark theme, you could use these variables to match the style of other UI elements to your chart styles. + +To display the list of all available chart tokens, filter for "charts" in [the design tokens table](/foundations-and-styles/design-tokens/all-design-tokens). + +### Customizing visuals + +To adjust the visual presentation of your chart, refer to the following guidelines for how to utilize: +- **[Chart design guidelines:](/components/charts/overview/design-guidelines)** General overview of chart elements and types, with guidelines for usage. +- **[Colors:](/components/charts/colors-for-charts)** Examples and guidance for applying themes and combining colors within charts. +- **[Patterns:](/components/charts/patterns)** Examples of using patterns within charts, like stripes and lines. +- **[Tooltips:](/components/charts/tooltips)** Examples and guidance for adding tooltips to charts. \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/components/charts/area-chart/area-chart.md b/packages/documentation-site/patternfly-docs/content/components/charts/area-chart/area-chart.md index 8b5ed337e9..9706ab2074 100644 --- a/packages/documentation-site/patternfly-docs/content/components/charts/area-chart/area-chart.md +++ b/packages/documentation-site/patternfly-docs/content/components/charts/area-chart/area-chart.md @@ -13,5 +13,5 @@ You may stack area charts to compare more than one continuous data sets. Stackin ### Example Area chart  -1. **Data area fill:** The area fill is presented below the data line. Data area fills use colors that conform with the [colors for charts](/components/charts/colors-for-charts). +1. **Data area fill:** The area fill is presented below the data line. Data area fills use colors that conform with the [chart colors](/components/charts/colors-for-charts). 2. **Chart tooltip:** Use the chart tooltip to drill into the data related to any data point provided on your area chart. \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/components/charts/bar-chart/bar-chart.md b/packages/documentation-site/patternfly-docs/content/components/charts/bar-chart/bar-chart.md index 2f9039dffb..50f3b74fe8 100644 --- a/packages/documentation-site/patternfly-docs/content/components/charts/bar-chart/bar-chart.md +++ b/packages/documentation-site/patternfly-docs/content/components/charts/bar-chart/bar-chart.md @@ -21,4 +21,4 @@ The orientation of bar charts is dependent on the data and space at hand. Any ba Vertical bar chart -A bar's height represents its value. All bars should be the same width, and the spacing between them should be equal, mimicking the spacing between axis values. For fill color recommendations, see [colors for charts](/components/charts/colors-for-charts). +A bar's height represents its value. All bars should be the same width, and the spacing between them should be equal, mimicking the spacing between axis values. For fill color recommendations, see [chart colors](/components/charts/colors-for-charts). diff --git a/packages/documentation-site/patternfly-docs/content/components/charts/donut-chart/donut-chart.md b/packages/documentation-site/patternfly-docs/content/components/charts/donut-chart/donut-chart.md index 3f64652c99..a236360a6e 100644 --- a/packages/documentation-site/patternfly-docs/content/components/charts/donut-chart/donut-chart.md +++ b/packages/documentation-site/patternfly-docs/content/components/charts/donut-chart/donut-chart.md @@ -8,7 +8,7 @@ A **donut chart** represents relative amounts that must add up to 100%. ## Usage In donut charts, you can choose to use percentages or integer values to compare parts to the whole. When deciding which to use, consider the information that is most important to your user and what makes the most sense for your use case. For example, if a user knows they have 123 farm animals and they’re interested in knowing how many of those animals are cows, it probably makes more sense to use an integer value. If that same user is interested in knowing how much storage space they have left in their grain silo, a percentage might be better. -Do not try to represent more than six categories in a donut chart. We recommend using the [colors for charts](/components/charts/colors-for-charts) guidelines to represent your data when thresholds are not present. +Do not try to represent more than six categories in a donut chart. We recommend using the [chart colors](/components/charts/colors-for-charts) guidelines to represent your data when thresholds are not present. The most common use cases for donut charts are: - Showing the relationship of a set of values to a whole. @@ -19,7 +19,7 @@ If you need to compare one category to another, consider using a [bar chart](/co ### Example Donut chart -1. **Segment fill:** We recommend using [colors for charts](/components/charts/colors-for-charts) for different items within the donut chart. +1. **Segment fill:** We recommend using [chart colors](/components/charts/colors-for-charts) for different items within the donut chart. 2. **Segment padding:** Always provide 3px of padding between segments. 3. **Chart tooltip:** A tooltip will appear upon hover that states the name of the segment and corresponding value. For example, if the segment represents "Bugs," and the value being represented is 25, your chart tooltip would state, "Bugs: 25." 4. **Label:** When a donut chart is contained within a dashboard card, a label defines what the chart represents. The label may also represent the total value of the data set. If this optional representation is chosen, it should follow the format of **[total numeric value] + [data set label]** (example: "100 Issues"). The total numeric value should be rounded to two decimal places or less (14 characters max) and should be styled using 24px font in standard text color. The data set label cannot contain more than 24 characters and should be styled using 14px font in secondary text color. Center them within the donut and style as shown. If the label exceeds the max character count, place it outside of the donut and leave the center empty. diff --git a/packages/documentation-site/patternfly-docs/content/components/charts/donut-utilization-chart/donut-utilization-chart.md b/packages/documentation-site/patternfly-docs/content/components/charts/donut-utilization-chart/donut-utilization-chart.md index e950028853..b72adf2acc 100644 --- a/packages/documentation-site/patternfly-docs/content/components/charts/donut-utilization-chart/donut-utilization-chart.md +++ b/packages/documentation-site/patternfly-docs/content/components/charts/donut-utilization-chart/donut-utilization-chart.md @@ -14,7 +14,7 @@ A **donut utlization chart** is a donut chart used specifically to show utilizat Donut utilization 2 1. **Unused segment fill:** The unused area of the donut chart will always remain at #EDEDED. -2. **Used segment fill:** We recommend using #0066cc for the used area of the donut chart. See [colors for charts](/components/charts/colors-for-charts) for other recommended color options. +2. **Used segment fill:** We recommend using #0066cc for the used area of the donut chart. See [chart colors](/components/charts/colors-for-charts) for other recommended color options. 3. **Utilization label:** Both percentages and whole numbers can be used to represent the utilization. 4. **Chart tooltip:** Since this is a utilization donut chart, the tooltip will display the percentage of data utilized. Chart tooltips only appear on hover over the utilization segment of the chart. We recommend stating the segment name and the utilization value being captured. For example, if the user is tracking GBps utilization, the chart tooltip would state "GBps utilization: 75%." diff --git a/packages/documentation-site/patternfly-docs/content/components/charts/line-chart/line-chart.md b/packages/documentation-site/patternfly-docs/content/components/charts/line-chart/line-chart.md index eee0c37f42..e44619f4ed 100644 --- a/packages/documentation-site/patternfly-docs/content/components/charts/line-chart/line-chart.md +++ b/packages/documentation-site/patternfly-docs/content/components/charts/line-chart/line-chart.md @@ -13,4 +13,4 @@ Multiple lines on the same chart allow the user to visualize relationships betwe ### Example Line chart -Line charts can optionally represent data points as dots on the line. If so, the same interaction that occurs when hovering over one in an [area chart](/components/charts/area-chart) will occur in line charts. For line colors, we recommend consulting [colors for charts](/components/charts/colors-for-charts). \ No newline at end of file +Line charts can optionally represent data points as dots on the line. If so, the same interaction that occurs when hovering over one in an [area chart](/components/charts/area-chart) will occur in line charts. For line colors, we recommend consulting [chart colors](/components/charts/colors-for-charts). \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/components/charts/pie-chart/pie-chart.md b/packages/documentation-site/patternfly-docs/content/components/charts/pie-chart/pie-chart.md index 154d9732c3..dedfe7fe59 100644 --- a/packages/documentation-site/patternfly-docs/content/components/charts/pie-chart/pie-chart.md +++ b/packages/documentation-site/patternfly-docs/content/components/charts/pie-chart/pie-chart.md @@ -13,5 +13,5 @@ A pie chart may be the wrong choice when you need to compare categories to one a ### Example Pie chart -1. **Pie chart fill:** We recommend fill colors based on the [colors for charts](/components/charts/colors-for-charts). +1. **Pie chart fill:** We recommend fill colors based on the [chart colors](/components/charts/colors-for-charts). 2. **Legend:** Each variable on the legend should report their current value. diff --git a/packages/documentation-site/patternfly-docs/content/components/charts/stacked-chart/stacked-chart.md b/packages/documentation-site/patternfly-docs/content/components/charts/stacked-chart/stacked-chart.md index a199cbfcee..f30b41b1b0 100644 --- a/packages/documentation-site/patternfly-docs/content/components/charts/stacked-chart/stacked-chart.md +++ b/packages/documentation-site/patternfly-docs/content/components/charts/stacked-chart/stacked-chart.md @@ -15,4 +15,4 @@ An advantageous feature of stacked bar charts is the ability to reorder the stac Vertical stacked bar chart -The first series name is represented by the topmost stacked bar, and the last series name is represented by the bottommost stacked bar. For recommendations on series colors, see [colors for charts](/components/charts/colors-for-charts). +The first series name is represented by the topmost stacked bar, and the last series name is represented by the bottommost stacked bar. For recommendations on series colors, see [chart colors](/components/charts/colors-for-charts). diff --git a/packages/documentation-site/patternfly-docs/pages/landing-pages/components/components-data.json b/packages/documentation-site/patternfly-docs/content/components/components-data.json similarity index 69% rename from packages/documentation-site/patternfly-docs/pages/landing-pages/components/components-data.json rename to packages/documentation-site/patternfly-docs/content/components/components-data.json index 0eb572189e..bbd5eee0d0 100644 --- a/packages/documentation-site/patternfly-docs/pages/landing-pages/components/components-data.json +++ b/packages/documentation-site/patternfly-docs/content/components/components-data.json @@ -1,374 +1,375 @@ { "about-modal": { - "illustration": "./images/component-illustrations/about-modal.png", + "illustration": "./img/component-illustrations/about-modal.png", "summary": "An about modal displays information about an application, like product version numbers and any appropriate legal text." }, "accordion": { - "illustration": "./images/component-illustrations/accordion.png", + "illustration": "./img/component-illustrations/accordion.png", "summary": "An accordion is a vertically stacked list that can be expanded and collapsed to reveal and hide nested content." }, "action-list": { - "illustration": "./images/component-illustrations/action-list.png", + "illustration": "./img/component-illustrations/action-list.png", "summary": "An action list is a group of actions, controls, or buttons with built-in spacing." }, "alert": { - "illustration": "./images/component-illustrations/alert.png", + "illustration": "./img/component-illustrations/alert.png", "summary": "An alert is a non-intrusive notification that shares brief, important messages with users." }, "application-launcher": { - "illustration": "./images/component-illustrations/application-launcher.png", + "illustration": "./img/component-illustrations/application-launcher.png", "summary": "An application launcher is a menu that allows users to launch a separate web application in a new browser window." }, "avatar": { - "illustration": "./images/component-illustrations/avatar.png", + "illustration": "./img/component-illustrations/avatar.png", "summary": "An avatar is a visual representation of a user, which can contain an image or placeholder graphic." }, "back-to-top": { - "illustration": "./images/component-illustrations/back-to-top.png", + "illustration": "./img/component-illustrations/back-to-top.png", "summary": "The back to top component is a shortcut that allows users to quickly navigate to the top of a page via a button." }, "backdrop": { - "illustration": "./images/component-illustrations/backdrop.png", + "illustration": "./img/component-illustrations/backdrop.png", "summary": "A backdrop is a screen that covers the main content of a page when a modal is opened, to prevent page interaction until the modal is dismissed." }, "background-image": { - "illustration": "./images/component-illustrations/background-image.png", + "illustration": "./img/component-illustrations/background-image.png", "summary": "A background image is an image that fills the background of a page." }, "badge": { - "illustration": "./images/component-illustrations/badge.png", + "illustration": "./img/component-illustrations/badge.png", "summary": "A badge is an annotation that displays a numeric value." }, "banner": { - "illustration": "./images/component-illustrations/banner.png", + "illustration": "./img/component-illustrations/banner.png", "summary": "A banner is a short message that is shared with users in an unobtrusive, full-width container that cannot be dismissed." }, "brand": { - "illustration": "./images/component-illustrations/brand.png", + "illustration": "./img/component-illustrations/brand.png", "summary": "A brand is a visual representation of a product—typically its logo." }, "breadcrumb": { - "illustration": "./images/component-illustrations/breadcrumb.png", + "illustration": "./img/component-illustrations/breadcrumb.png", "summary": "A breadcrumb is a secondary navigation method that shows where users are in an application, to help them navigate more efficiently." }, "button": { - "illustration": "./images/component-illustrations/button.png", + "illustration": "./img/component-illustrations/button.png", "summary": "A button is an object that communicates and triggers an action when it is clicked or selected." }, "calendar-month": { - "illustration": "./images/component-illustrations/calendar-month.png", + "illustration": "./img/component-illustrations/calendar-month.png", "summary": "A calendar month component allows users to select and navigate between days, months, and years." }, "card": { - "illustration": "./images/component-illustrations/card.png", + "illustration": "./img/component-illustrations/card.png", "summary": "A card is a content container that displays entry-level information—typically within dashboards, galleries, and catalogs." }, "checkbox": { - "illustration": "./images/component-illustrations/checkbox.png", + "illustration": "./img/component-illustrations/checkbox.png", "summary": "A checkbox is an input control that allows users to select a single item or multiple items from a list." }, "chip": { - "illustration": "./images/component-illustrations/chip.png", + "illustration": "./img/component-illustrations/chip.png", "summary": "A chip is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.

Note: The chip component has been deprecated. Our new recommendation is to use the label component instead." }, "clipboard-copy": { - "illustration": "./images/component-illustrations/clipboard-copy.png", + "illustration": "./img/component-illustrations/clipboard-copy.png", "summary": "The clipboard copy component allows users to quickly and easily copy content to their clipboard." }, "code-block": { - "illustration": "./images/component-illustrations/code-block.png", + "illustration": "./img/component-illustrations/code-block.png", "summary": "A code block contains 2 or more lines of read-only code, which can be copied to a user's clipboard." }, "code-editor": { - "illustration": "./images/component-illustrations/code-editor.png", + "illustration": "./img/component-illustrations/code-editor.png", "summary": "A code editor is a versatile Monaco-based text editor that supports various programming languages." }, "content": { - "illustration": "./images/component-illustrations/context-selector.png", + "illustration": "./img/component-illustrations/context-selector.png", "summary": "A content component contains a block of styled HTML content." }, "context-selector": { - "illustration": "./images/component-illustrations/context-selector.png", + "illustration": "./img/component-illustrations/context-selector.png", "summary": "A context selector is a dropdown menu placed in the global navigation, which allows you to switch a user's application context to display relevant data and resources." }, "custom-menus": { - "illustration": "./images/component-illustrations/custom-menus.png", + "illustration": "./img/component-illustrations/custom-menus.png", "summary": "Custom menus can be created to address a variety of unique use cases, by combining menus and menu toggles." }, "data-list": { - "illustration": "./images/component-illustrations/data-list.png", + "illustration": "./img/component-illustrations/data-list.png", "summary": "A data list displays large data sets and interactive content in a flexible layout." }, "date-picker": { - "illustration": "./images/component-illustrations/date-picker.png", + "illustration": "./img/component-illustrations/date-picker.png", "summary": "A date picker allows users to either manually enter a date or select a date from a calendar." }, "date-and-time-picker": { - "illustration": "./images/component-illustrations/date-and-time-picker.png", + "illustration": "./img/component-illustrations/date-and-time-picker.png", "summary": "A date and time picker allows users to select both a specific date and a time, by combining date picker and time picker components." }, "description-list": { - "illustration": "./images/component-illustrations/description-list.png", + "illustration": "./img/component-illustrations/description-list.png", "summary": "A description list displays terms and their corresponding descriptions." }, "divider": { - "illustration": "./images/component-illustrations/divider.png", + "illustration": "./img/component-illustrations/divider.png", "summary": "A divider is a horizontal or vertical line that is placed between screen elements to create visual divisions and content groupings." }, "drag-and-drop": { - "illustration": "./images/component-illustrations/drag-and-drop.png", + "illustration": "./img/component-illustrations/drag-and-drop.png", "summary": "The drag and drop component allows users to reposition, rearrange, and group items into more relevant and appropriate layouts." }, "drawer": { - "illustration": "./images/component-illustrations/drawer.png", + "illustration": "./img/component-illustrations/drawer.png", "summary": "A drawer is a sliding panel that enters from outside of the viewport, which can be configured to either overlay content or create a sidebar by pushing content." }, "dropdown": { - "illustration": "./images/component-illustrations/dropdown.png", + "illustration": "./img/component-illustrations/dropdown.png", "summary": "A dropdown displays a menu of actions that trigger a process and links that navigate to a new location." }, "dual-list-selector": { - "illustration": "./images/component-illustrations/dual-list-selector.png", + "illustration": "./img/component-illustrations/dual-list-selector.png", "summary": "A dual list selector displays 2 interactive lists: a list of selected items and a list of available, selectable items. Users can move items between the lists." }, "empty-state": { - "illustration": "./images/component-illustrations/empty-state.png", + "illustration": "./img/component-illustrations/empty-state.png", "summary": "An empty state is a screen that is not yet populated with data or information—typically containing a short message and next steps for users." }, "expandable-section": { - "illustration": "./images/component-illustrations/expandable-section.png", + "illustration": "./img/component-illustrations/expandable-section.png", "summary": "An expandable section is a content section with a text toggle that reveals content that is hidden by default." }, "multiple-file-upload": { - "illustration": "./images/component-illustrations/file-upload-multiple.png", + "illustration": "./img/component-illustrations/file-upload-multiple.png", "summary": "A multiple file upload component allows users to select and upload multiple files to a specific location." }, "simple-file-upload": { - "illustration": "./images/component-illustrations/file-upload.png", + "illustration": "./img/component-illustrations/file-upload.png", "summary": "A simple file upload component allows users to select and upload a single file to a specific location." }, "form-control": { - "illustration": "./images/component-illustrations/form-control.png", + "illustration": "./img/component-illustrations/form-control.png", "summary": "A form control is a form element that guides users and accepts user input, such as text areas and selection menus." }, "form": { - "illustration": "./images/component-illustrations/form.png", + "illustration": "./img/component-illustrations/form.png", "summary": "A form is a group of related elements that allow users to provide data and configure options in a variety of contexts, such as within modals, wizards, and pages." }, "form-select": { - "illustration": "./images/component-illustrations/form-select.png", + "illustration": "./img/component-illustrations/form-select.png", "summary": "A form select is a form element that embeds browser-native menus." }, "helper-text": { - "illustration": "./images/component-illustrations/helper-text.png", + "illustration": "./img/component-illustrations/helper-text.png", "summary": "Helper text is a text-based support method that adds additional context to field inputs." }, "hint": { - "illustration": "./images/component-illustrations/hint.png", + "illustration": "./img/component-illustrations/hint.png", "summary": "A hint is an in-app message that shares reminders, explanations, or calls to action within a page." }, "icon": { - "illustration": "./images/component-illustrations/icon.png", + "illustration": "./img/component-illustrations/icon.png", "summary": "An icon component is a container that supports icons of varying dimensions and styles, as well as spinners." }, "inline-edit": { - "illustration": "./images/component-illustrations/inline-edit.png", + "illustration": "./img/component-illustrations/inline-edit.png", "summary": "An inline edit component allows users to switch between read-only and edits views of description lists, page text elements, or tables—within the context of their current view." }, "input-group": { - "illustration": "./images/component-illustrations/input-group.png", + "illustration": "./img/component-illustrations/input-group.png", "summary": "An input group combines multiple related controls or inputs to appear as a single control." }, "jump-links": { - "illustration": "./images/component-illustrations/jump-links.png", + "illustration": "./img/component-illustrations/jump-links.png", "summary": "When clicked, jump links allow users to navigate to sections within a page without scrolling." }, "label": { - "illustration": "./images/component-illustrations/label.png", + "illustration": "./img/component-illustrations/label.png", "summary": "A label is a descriptive annotation that adds context to an element for clarity and convenience." }, "list": { - "illustration": "./images/component-illustrations/list.png", + "illustration": "./img/component-illustrations/list.png", "summary": "A list component embeds a formatted list—bulleted or numbered—into page content." }, "login-page": { - "illustration": "./images/component-illustrations/login-page.png", + "illustration": "./img/component-illustrations/login-page.png", "summary": "A login page allows a user to access an application by entering a username and password, or by authenticating using a social media login." }, "masthead": { - "illustration": "./images/component-illustrations/masthead.png", + "illustration": "./img/component-illustrations/masthead.png", "summary": "A masthead contains and organizes global properties like a logo, navigation, and settings for easy and consistent access across all pages of an application." }, "menu-toggle": { - "illustration": "./images/component-illustrations/menu-toggle.png", + "illustration": "./img/component-illustrations/menu-toggle.png", "summary": "A menu toggle is a selectable control that opens and closes a menu." }, "menu": { - "illustration": "./images/component-illustrations/menu.png", + "illustration": "./img/component-illustrations/menu.png", "summary": "A menu is a list of options or actions that users can choose from." }, "modal": { - "illustration": "./images/component-illustrations/modal.png", + "illustration": "./img/component-illustrations/modal.png", "summary": "A modal is a window that overlays a page to display important information, without requiring users to navigate to a new page." }, "navigation": { - "illustration": "./images/component-illustrations/navigation.png", + "illustration": "./img/component-illustrations/navigation.png", "summary": "A navigation component organizes and communicates an application's structure and content in a central location, making it easy to find information and accomplish tasks." }, "notification-badge": { - "illustration": "./images/component-illustrations/notification-badge.png", + "illustration": "./img/component-illustrations/notification-badge.png", "summary": "A notification badge is a visual indicator that alerts users about incoming notifications." }, "notification-drawer": { - "illustration": "./images/component-illustrations/notification-drawer.png", + "illustration": "./img/component-illustrations/notification-drawer.png", "summary": "A notification drawer contains an application's notifications, which users can view and manage without having to navigate to a new screen." }, "number-input": { - "illustration": "./images/component-illustrations/number-input.png", + "illustration": "./img/component-illustrations/number-input.png", "summary": "A number input combines a text input field with buttons to provide users with a quick and effective way to enter and modify a numeric value." }, "options-menu": { - "illustration": "./images/component-illustrations/options-menu.png", + "illustration": "./img/component-illustrations/options-menu.png", "summary": "An options menu contains a set of optional settings." }, "overflow-menu": { - "illustration": "./images/component-illustrations/overflow-menu.png", + "illustration": "./img/component-illustrations/overflow-menu.png", "summary": "An overflow menu groups a set of actions into a responsive horizontal list to help declutter the UI." }, "page": { - "illustration": "./images/component-illustrations/page.png", + "illustration": "./img/component-illustrations/page.png", "summary": "A page component defines the basic layout of a page, with either vertical or horizontal navigation." }, "pagination": { - "illustration": "./images/component-illustrations/pagination.png", + "illustration": "./img/component-illustrations/pagination.png", "summary": "A pagination component allows users to navigate through large content views that have been split across multiple pages." }, "panel": { - "illustration": "./images/component-illustrations/panel.png", + "illustration": "./img/component-illustrations/panel.png", "summary": "A panel is a customizable container that can contain other components in flexible content layouts." }, "password-generator": { - "illustration": "./images/component-illustrations/password-generator.png", + "illustration": "./img/component-illustrations/password-generator.png", "summary": "This demo demonstrates how to create an input field that generates unique passwords." }, "password-strength": { - "illustration": "./images/component-illustrations/password-strength.png", + "illustration": "./img/component-illustrations/password-strength.png", "summary": "This demo demonstrates how to validate and display feedback about password strength." }, "popover": { - "illustration": "./images/component-illustrations/popover.png", + "illustration": "./img/component-illustrations/popover.png", "summary": "A popover is a small overlay window that provides additional information about an on-screen element." }, "progress-stepper": { - "illustration": "./images/component-illustrations/progress-stepper.png", + "illustration": "./img/component-illustrations/progress-stepper.png", "summary": "A progress stepper displays a timeline of tasks in a workflow and tracks a user's progress through the workflow." }, "progress": { - "illustration": "./images/component-illustrations/progress.png", + "illustration": "./img/component-illustrations/progress.png", "summary": "A progress component is a horizontal bar that indicates the completion status of an ongoing process or task." }, "radio": { - "illustration": "./images/component-illustrations/radio.png", + "illustration": "./img/component-illustrations/radio.png", "summary": "A radio is a button that's used to present users with mutually exclusive choices." }, "search-input": { - "illustration": "./images/component-illustrations/search-input.png", + "illustration": "./img/component-illustrations/search-input.png", "summary": "A search input is a type of input field that can be used to search, find, or filter." }, "select": { - "illustration": "./images/component-illustrations/select.png", + "illustration": "./img/component-illustrations/select.png", "summary": "A select component is a menu that enables users to select 1 or more items from a list." }, "sidebar": { - "illustration": "./images/component-illustrations/sidebar.png", + "illustration": "./img/component-illustrations/sidebar.png", "summary": "A sidebar is a panel that splits content into a secondary area within a page." }, "simple-list": { - "illustration": "./images/component-illustrations/simple-list.png", + "illustration": "./img/component-illustrations/simple-list.png", "summary": "A simple list displays selectable items within a page." }, "skeleton": { - "illustration": "./images/component-illustrations/skeleton.png", + "illustration": "./img/component-illustrations/skeleton.png", "summary": "A skeleton is a type of loading state that allows you to expose content incrementally." }, "skip-to-content": { - "illustration": "./images/component-illustrations/skip-to-content.png", + "illustration": "./img/component-illustrations/skip-to-content.png", "summary": "A skip to content component allows users to bypass navigation when using a screen reader or keyboard" }, "slider": { - "illustration": "./images/component-illustrations/slider.png", + "illustration": "./img/component-illustrations/slider.png", "summary": "A slider is an interactive element that allows users to quickly set and adjust a numeric value from a defined range of values." }, "spinner": { - "illustration": "./images/component-illustrations/spinner.png", + "illustration": "./img/component-illustrations/spinner.png", "summary": "A spinner is an animated visual that indicates when a quick action is in progress." }, "switch": { - "illustration": "./images/component-illustrations/switch.png", + "illustration": "./img/component-illustrations/switch.png", "summary": "A switch is a control that toggles the state of a setting between on and off." }, "tab-content": { - "illustration": "./images/component-illustrations/tab-content.png", + "illustration": "./img/component-illustrations/tab-content.png", "summary": "A tab content component is used to contain content within a tab." }, "table": { - "illustration": "./images/component-illustrations/table.png", + "illustration": "./img/component-illustrations/table.png", "summary": "A table displays large data sets in a simple grid with column headers." }, "tabs": { - "illustration": "./images/component-illustrations/tabs.png", + "illustration": "./img/component-illustrations/tabs.png", "summary": "Tabs group similar content within sub-views of a page." }, "text-area": { - "illustration": "./images/component-illustrations/text-area.png", + "illustration": "./img/component-illustrations/text-area.png", "summary": "A text area allows users to enter a longer paragraph of text." }, "text-input-group": { - "illustration": "./images/component-illustrations/text-input-group.png", + "illustration": "./img/component-illustrations/text-input-group.png", "summary": "A text input group is a more custom, flexible, and composable version of a text input that includes elements like icons and buttons." }, "text-input": { - "illustration": "./images/component-illustrations/text-input.png", + "illustration": "./img/component-illustrations/text-input.png", "summary": "A text input components allows users to input short text." }, "tile": { - "illustration": "./images/component-illustrations/tile.png", + "illustration": "./img/component-illustrations/tile.png", "summary": "A tile is a container that allows users to select a static option." }, "time-picker": { - "illustration": "./images/component-illustrations/time-picker.png", + "illustration": "./img/component-illustrations/time-picker.png", "summary": "A time picker component allows users to select a time from a list of options." }, "timestamp": { - "illustration": "./images/component-illustrations/timestamp.png", + "illustration": "./img/component-illustrations/timestamp.png", "summary": "A timestamp is a consistently formatted visual that displays date and time values." }, "title": { - "illustration": "./images/component-illustrations/title.png", + "illustration": "./img/component-illustrations/title.png", "summary": "A title component applies top and bottom margins, font-weight, font-size, and line-height to page and section headings." }, "toggle-group": { - "illustration": "./images/component-illustrations/toggle-group.png", + "illustration": "./img/component-illustrations/toggle-group.png", "summary": "A toggle group is a set of controls that can be used to quickly switch between actions or states." }, "toolbar": { - "illustration": "./images/component-illustrations/toolbar.png", + "illustration": "./img/component-illustrations/toolbar.png", "summary": "A toolbar is a responsive container that displays controls that allow users to manage and manipulate a data set." }, "tooltip": { - "illustration": "./images/component-illustrations/tooltip.png", + "illustration": "./img/component-illustrations/tooltip.png", "summary": "A tooltip is a small, temporary, overlay window that provides additional information about an on-screen element." }, "tree-view": { - "illustration": "./images/component-illustrations/tree-view.png", + "illustration": "./img/component-illustrations/tree-view.png", "summary": "A tree view is a structure that displays data in a hierarchical view." }, "truncate": { - "illustration": "./images/component-illustrations/truncate.png", + "illustration": "./img/component-illustrations/truncate.png", "summary": "A truncate component can be used to shorten character strings—typically when the string overflows its container." }, "wizard": { - "illustration": "./images/component-illustrations/wizard.png", + "illustration": "./img/component-illustrations/wizard.png", "summary": "A wizard is a guided workflow that helps users complete complex tasks, create objects, or follow a series of steps." } -} \ No newline at end of file +} + diff --git a/packages/documentation-site/patternfly-docs/content/components/components.md b/packages/documentation-site/patternfly-docs/content/components/components.md new file mode 100644 index 0000000000..9d8e7e3b0e --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/components.md @@ -0,0 +1,46 @@ +--- +id: Overview +title: Components overview +section: components +sortValue: 1 +--- +import { SectionGallery } from '@patternfly/documentation-framework/components/sectionGallery/sectionGallery'; +import * as illustrations from './img/component-illustrations'; +import componentsData from './components-data.json'; + +**Components** are the foundational building blocks of the PatternFly design system. They are reusable, well-tested UI elements designed to ensure visual and functional consistency across all your products and applications. + +Components integrate with the design system through: +- [Foundations and styles](/foundations-and-styles/overview): Components strictly adhere to our core design tokens and guidelines. +- [Patterns](/patterns/overview): Components are the building blocks that are combined to implement design patterns. +- [Extensions](/extensions/overview): Components are the basis for the complex, pre-built, reusable code solutions offered by extensions. + +--- + +## How do I use components? + +Usage information for specific features, variations, and accessibility details is outlined in each component's design guidelines page. + +### Component lifecycle + +Outside of our standard components, some components are at a different place in their lifecycle: + +- **Beta components:** Under review and open for further evolution. +- **Deprecated components:** Available for use, but no longer recommended or actively maintained. + +For full details on versioning, maintenance, and deprecation timelines, refer to our [Releases overview](/releases/overview). + +--- + +## Explore components + + \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/about-modal.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/about-modal.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/about-modal.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/about-modal.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/accordion.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/accordion.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/accordion.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/accordion.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/action-list.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/action-list.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/action-list.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/action-list.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/alert.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/alert.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/alert.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/alert.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/application-launcher.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/application-launcher.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/application-launcher.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/application-launcher.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/avatar.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/avatar.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/avatar.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/avatar.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/back-to-top.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/back-to-top.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/back-to-top.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/back-to-top.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/backdrop.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/backdrop.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/backdrop.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/backdrop.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/background-image.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/background-image.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/background-image.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/background-image.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/badge.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/badge.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/badge.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/badge.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/banner.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/banner.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/banner.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/banner.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/brand.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/brand.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/brand.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/brand.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/breadcrumb.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/breadcrumb.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/breadcrumb.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/breadcrumb.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/button.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/button.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/button.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/button.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/calendar-month.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/calendar-month.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/calendar-month.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/calendar-month.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/card.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/card.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/card.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/card.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/checkbox.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/checkbox.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/checkbox.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/checkbox.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/chip.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/chip.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/chip.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/chip.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/clipboard-copy.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/clipboard-copy.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/clipboard-copy.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/clipboard-copy.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/code-block.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/code-block.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/code-block.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/code-block.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/code-editor.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/code-editor.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/code-editor.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/code-editor.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/content.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/content.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/content.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/content.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/context-selector.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/context-selector.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/context-selector.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/context-selector.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/custom-menus.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/custom-menus.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/custom-menus.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/custom-menus.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/data-list.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/data-list.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/data-list.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/data-list.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/date-and-time-picker.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/date-and-time-picker.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/date-and-time-picker.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/date-and-time-picker.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/date-picker.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/date-picker.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/date-picker.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/date-picker.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/default-placeholder.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/default-placeholder.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/default-placeholder.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/default-placeholder.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/description-list.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/description-list.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/description-list.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/description-list.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/divider.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/divider.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/divider.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/divider.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/drag-and-drop.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/drag-and-drop.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/drag-and-drop.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/drag-and-drop.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/drawer.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/drawer.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/drawer.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/drawer.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/dropdown.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/dropdown.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/dropdown.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/dropdown.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/dual-list-selector.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/dual-list-selector.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/dual-list-selector.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/dual-list-selector.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/empty-state.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/empty-state.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/empty-state.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/empty-state.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/expandable-section.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/expandable-section.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/expandable-section.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/expandable-section.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/form-control.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/form-control.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/form-control.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/form-control.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/form-select.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/form-select.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/form-select.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/form-select.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/form.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/form.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/form.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/form.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/helper-text.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/helper-text.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/helper-text.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/helper-text.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/hint.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/hint.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/hint.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/hint.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/icon.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/icon.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/icon.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/icon.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/index.js b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/index.js similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/index.js rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/index.js diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/inline-edit.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/inline-edit.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/inline-edit.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/inline-edit.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/input-group.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/input-group.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/input-group.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/input-group.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/jump-links.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/jump-links.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/jump-links.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/jump-links.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/label.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/label.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/label.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/label.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/list.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/list.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/list.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/list.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/login-page.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/login-page.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/login-page.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/login-page.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/masthead.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/masthead.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/masthead.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/masthead.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/menu-toggle.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/menu-toggle.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/menu-toggle.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/menu-toggle.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/menu.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/menu.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/menu.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/menu.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/modal.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/modal.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/modal.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/modal.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/multiple-file-upload.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/multiple-file-upload.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/multiple-file-upload.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/multiple-file-upload.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/navigation.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/navigation.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/navigation.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/navigation.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/notification-badge.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/notification-badge.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/notification-badge.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/notification-badge.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/notification-drawer.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/notification-drawer.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/notification-drawer.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/notification-drawer.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/number-input.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/number-input.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/number-input.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/number-input.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/options-menu.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/options-menu.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/options-menu.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/options-menu.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/overflow-menu.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/overflow-menu.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/overflow-menu.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/overflow-menu.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/page.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/page.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/page.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/page.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/pagination.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/pagination.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/pagination.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/pagination.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/panel.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/panel.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/panel.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/panel.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/password-generator.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/password-generator.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/password-generator.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/password-generator.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/password-strength.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/password-strength.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/password-strength.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/password-strength.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/popover.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/popover.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/popover.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/popover.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/progress-stepper.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/progress-stepper.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/progress-stepper.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/progress-stepper.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/progress.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/progress.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/progress.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/progress.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/radio.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/radio.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/radio.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/radio.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/search-input.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/search-input.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/search-input.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/search-input.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/select.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/select.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/select.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/select.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/sidebar.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/sidebar.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/sidebar.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/sidebar.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/simple-file-upload.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/simple-file-upload.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/simple-file-upload.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/simple-file-upload.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/simple-list.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/simple-list.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/simple-list.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/simple-list.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/skeleton.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/skeleton.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/skeleton.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/skeleton.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/skip-to-content.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/skip-to-content.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/skip-to-content.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/skip-to-content.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/slider.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/slider.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/slider.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/slider.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/spinner.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/spinner.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/spinner.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/spinner.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/switch.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/switch.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/switch.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/switch.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/tab-content.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/tab-content.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/tab-content.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/tab-content.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/table.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/table.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/table.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/table.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/tabs.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/tabs.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/tabs.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/tabs.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/text-area.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/text-area.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/text-area.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/text-area.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/text-input-group.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/text-input-group.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/text-input-group.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/text-input-group.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/text-input.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/text-input.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/text-input.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/text-input.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/text.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/text.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/text.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/text.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/tile.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/tile.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/tile.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/tile.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/time-picker.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/time-picker.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/time-picker.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/time-picker.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/timestamp.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/timestamp.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/timestamp.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/timestamp.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/title.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/title.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/title.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/title.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/toggle-group.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/toggle-group.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/toggle-group.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/toggle-group.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/toolbar.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/toolbar.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/toolbar.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/toolbar.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/tooltip.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/tooltip.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/tooltip.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/tooltip.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/tree-view.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/tree-view.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/tree-view.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/tree-view.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/truncate.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/truncate.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/truncate.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/truncate.png diff --git a/packages/documentation-site/patternfly-docs/images/component-illustrations/wizard.png b/packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/wizard.png similarity index 100% rename from packages/documentation-site/patternfly-docs/images/component-illustrations/wizard.png rename to packages/documentation-site/patternfly-docs/content/components/img/component-illustrations/wizard.png diff --git a/packages/documentation-site/patternfly-docs/content/content-design/about.md b/packages/documentation-site/patternfly-docs/content/content-design/about.md deleted file mode 100644 index 58c67d1f21..0000000000 --- a/packages/documentation-site/patternfly-docs/content/content-design/about.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: Overview -title: Content design overview -section: content-design -sortValue: 1 - ---- -The words in a user interface (UI), commonly referred to as "UX copy" or "microcopy," are just as important as the visual design and layout. UX copy is an essential element of design that can be used strategically to drive better UX decisions and guide users to succeed. - -Our UX writing guidelines provide a place for UX professionals like you to learn about designing with words. - -Anyone involved in UX—researchers, designers, developers, content strategists, and more—can use this guide for building better product experiences with content design and strategy. - -## Style guide goal - -As a PatternFly community, our goal with this style guide is to help UX professionals: -- Create clarity and consistency across products and applications. -- Make products sound more conversational and human. -- Use written content to create unified, on-brand experiences for all users. - -With that said, we recognize that the PatternFly way is not the *only* way. This guide isn’t meant to: -- Overrule another style guide. -- Provide a complete list of all writing rules across all channels. -- Serve as hard requirements that everyone must follow. - -## Additional resources - -We provide thorough guidance across our UX writing guidelines, but you may find the following supplementary resources to also be useful. - -- For component-specific microcopy guidance, see the component's [design guidelines](/components/about-modal/design-guidelines). -- For microcopy guidance that’s not included in this guide, see [IBM Carbon’s UX content guidelines](https://www.carbondesignsystem.com/guidelines/content/overview). -- For Red Hat product terminology and documentation standards, see [Red Hat's supplementary style guide for Red Hat product documentation](https://redhat-documentation.github.io/supplementary-style-guide/#introduction). -- For additional terminology guidance, use [Merriam-Webster’s online dictionary](https://www.merriam-webster.com/). - -If you're writing for Red Hat products and find conflicting information in these resources, default to PatternFly's guidance. - -## Contribute - -In true Flyer fashion, we keep this style guide open. Contribute your ideas through [GitHub](https://github.com/orgs/patternfly/discussions). diff --git a/packages/documentation-site/patternfly-docs/content/content-design/content-design.md b/packages/documentation-site/patternfly-docs/content/content-design/content-design.md new file mode 100644 index 0000000000..a1fbd9dc82 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/content-design/content-design.md @@ -0,0 +1,60 @@ +--- +id: Overview +title: Content design overview +section: content-design +sortValue: 1 +--- + +**Content design** (often called UX copy or microcopy) is a strategic element of design that's just as vital as visual design and layout. By treating words as part of your design process instead of a last minute add-on, you can ensure an effective, intuitive, and human-centric product experience. Our content design guidelines serve as a central resource for all UX roles—including researchers, designers, developers, and content strategists. + +By following our content design guidelines and recommendations, you can design with words more strategically to: +- Create clarity and consistency across products and applications. +- Make products sound more conversational and human. +- Use written content to create unified, on-brand experiences for all users. + +As much as possible, PatternFly components and website resources will already adhere to our content guidelines and our [brand voice and tone](/content-design/brand-voice-and-tone). However, our content design guidelines don't provide a complete list of all writing rules or serve as strict requirements that cannot be deviated from. + +--- + +## Explore content guidelines + +To help you align your UI content with PatternFly's voice and strategic content principles, we offer a variety of writing resources. + +### Foundational principles + +- **[Brand voice and tone](/content-design/brand-voice-and-tone):** Defines the unique voice and tone standards that ensure consistency and humanity across PatternFly products. +- **[Best practices](/content-design/best-practices):** Offers foundational advice for integrating words into your design process, ensuring intuitive and human-centered experiences. +- **[Accessibility and localization](/content-design/accessibility-and-localization):** Guidance on writing for inclusion, supporting screen readers, and adapting content for global audiences through localization. + +### Grammar +Our grammar documentation includes common writing mechanics and style rules. + +- **[Capitalization:](/content-design/grammar/capitalization)** Rules detailing which casing style to use for different UI scenarios. +- **[Numerics:](/content-design/grammar/numerics)** Includes rules for displaying and formatting dates, times, currency, and numerical values. +- **[Punctuation:](/content-design/grammar/punctuation)** Rules for using punctuation properly within UI components and long-form content. +- **[Sentence structure:](./grammar/sentence-structure)** Guidance on point of view and sentence voice to ensure clarity and active, user-focused language. +- **[Terminology:](/content-design/grammar/terminology)** Outlines the preferred terms to use across different UI scenarios, including a list of words and phrases to avoid. +- **[Truncation:](/content-design/grammar/truncation)** Guidance on replacing overflow content with ellipses to manage text when display space is limited. +- **[Units and symbols:](/content-design/grammar/units-and-symbols)** Rules for displaying units of measurement and shorthand symbols. + +### Writing guides +Tactical advice for specific types of content. + +- **[CLI handbook:](/content-design/writing-guides/cli-handbook)** Detailed guidance for designing and writing content for text-based command-line interfaces (CLIs). +- **[Error messages:](/content-design/writing-guides/error-messages)** Best practices for writing effective error messages that are clear, actionable, and empathetic. +- **[PatternFly design guidelines:](/content-design/writing-guides/patternfly-design-guidelines)** Guidance on structuring and writing content specifically for PatternFly's design guidelines on the website. +- **[Product tours:](/content-design/writing-guides/product-tours)** Best practices and tone advice for writing content for product tours and onboarding flows. +- **[Tooltips:](/content-design/writing-guides/tooltips)** Guidance on writing tooltips, including specific rules for certain icons. + +--- + +## Additional resources + +While we provide thorough guidance across our content-design guidelines, the following supplementary resources might also be useful. + +If you're writing for Red Hat products and find conflicting information in these resources, default to PatternFly's guidance. + +- For component-specific microcopy guidance, see the component's **[design guidelines](/components/about-modal/design-guidelines)**. +- For microcopy guidance that’s not included in this guide, see [IBM Carbon’s UX content guidelines](https://www.carbondesignsystem.com/guidelines/content/overview). +- For Red Hat product terminology and documentation standards, see [Red Hat's supplementary style guide](https://redhat-documentation.github.io/supplementary-style-guide/#introduction). +- For additional terminology guidance, use [Merriam-Webster’s online dictionary](https://www.merriam-webster.com/). \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/extensions/extensions-data.json b/packages/documentation-site/patternfly-docs/content/extensions/extensions-data.json new file mode 100644 index 0000000000..7ad82471e8 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/extensions/extensions-data.json @@ -0,0 +1,29 @@ +{ + "catalog-view": { + "summary": "A full-page, interactive layout designed to simplify the browsing and interaction experience for items displayed in a grid of tiles." + }, + "chatbot": { + "summary": "Multiple pre-built layouts and elements to quickly create and support conversational interfaces, such as chatbots." + }, + "component-groups": { + "summary": "Additional React components that combine multiple base PatternFly components to address complex, multi-component UI design scenarios." + }, + "data-view": { + "summary": "A defined structure for displaying datasets in organized layouts. It includes data representations and toolbars with actions that enable users to interact with the data." + }, + "log-viewer": { + "summary": "A specialized interface designed to clearly visualize and monitor a project's log content in real time." + }, + "quick-starts": { + "summary": "Structured product documentation solutions that provide users with embedded, step-by-step guidance directly within the application interface." + }, + "react-console": { + "summary": "Additional React components that enable direct, interactive access to virtual machines or server consoles." + }, + "topology": { + "summary": "A visual map of your application architecture, including all applications, services, and associated components within a project, and their build status." + }, + "user-feedback": { + "summary": "A collection of elements designed to facilitate and collect asynchronous user feedback directly within the application." + } +} diff --git a/packages/documentation-site/patternfly-docs/content/extensions/extensions.md b/packages/documentation-site/patternfly-docs/content/extensions/extensions.md new file mode 100644 index 0000000000..3e28bb1ae3 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/extensions/extensions.md @@ -0,0 +1,43 @@ +--- +id: Overview +title: Extensions overview +section: extensions +sortValue: 1 +--- + +import { SectionGallery } from '@patternfly/documentation-framework/components/sectionGallery/sectionGallery'; +import extensionsData from './extensions-data.json'; + +PatternFly's **extensions** are holistic solutions that utilize multiple PatternFly components, typically addressing specific, cross-project use cases. Extensions accelerate development by providing pre-built, reusable code for common interactions, making it easier to drive consistency throughout a user’s journey across multiple products and platforms. + +--- + +## How does an extension differ from a pattern? + +Extensions differ from [patterns](/patterns/overview) because they provide concrete code solutions for specific, repeated use cases, not just general design guidance and direction. Extensions are built from [components](/components/overview), with customizations that adhere to our core [foundations and styles](/foundations-and-styles/overview) to offer a ready-to-use code solution. + +While extensions are primarily developed for the needs of Red Hat products, anyone in our community can use an extension for their own needs. + +## How do I use extensions? + +Extensions live in their own packages and GitHub repositories, so you will need to import the relevant product for an extension that you'd like to use. From there, refer to the guidance on our website to implement and customize the extension for your use case. + +## How do I contribute a new extension? + +Extensions are a fantastic way to get involved in the PatternFly community. If you have an idea for a new extension, or want to contribute to an existing one, you can: + +- [Start a discussion on GitHub.](https://github.com/orgs/patternfly/discussions/categories/extensions) +- [Reach out to us on Slack.](http://join.slack.com/t/patternfly/shared_invite/zt-1npmqswgk-bF2R1E2rglV8jz5DNTezMQ) + +--- + +## Explore extensions + + \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/.gitignore b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/.gitignore new file mode 100644 index 0000000000..bd75a596b4 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/.gitignore @@ -0,0 +1,3 @@ +**/*.js +**/*.d.ts +**/*.tsbuildinfo \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-foundations-data.json b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-foundations-data.json new file mode 100644 index 0000000000..3015a787bc --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-foundations-data.json @@ -0,0 +1,29 @@ +{ + "colors": { + "summary": "The supported color palettes that all PatternFly features use to ensure accessible contrast and enable flexible, effective visual communication." + }, + "design-tokens": { + "summary": "The semantic variables that store and manage all visual design attributes to ensure consistency across products, including color, typography, and spacing." + }, + "iconography": { + "summary": "The set of simple, visual symbols used to represent common concepts and quickly indicate functionality." + }, + "layouts": { + "summary": "The structural options used to arrange and align components on a page, managing spacing, ordering, and flow to provide support for responsive design." + }, + "motion": { + "summary": "The framework and rules for component animations that ensures motion in PatternFly is intentional, engaging, consistent, and inclusive." + }, + "spacers": { + "summary": "The set of dimension design tokens that define padding and margins between UI elements to ensure that designs are visually balanced." + }, + "theming": { + "summary": "Pre-made combinations of design tokens that adjust the visual appearance of all UI elements at a global level to support different stylistic and accessibility needs." + }, + "typography": { + "summary": "The rules and font choices that define text size, weight, and hierarchy. They ensure consistent legibility and a strong visual hierarchy across screens." + }, + "utility-classes": { + "summary": "A defined set of CSS classes that allow developers to quickly and safely apply further customizations or modifications to UI elements in their product." + } +} \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-tokens/about-tokens.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-tokens/tokens.md similarity index 55% rename from packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-tokens/about-tokens.md rename to packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-tokens/tokens.md index 3a0ec27be8..7512ae592a 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-tokens/about-tokens.md +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-tokens/tokens.md @@ -5,16 +5,15 @@ section: foundations-and-styles subsection: design-tokens sortvalue: 1 --- +import '../../components/components.css'; -**Design tokens** are variables that store visual design attributes like color, typography, and spacing. Tokens have a name and value that conveys their associated design style, making their purpose clear and recognizable. +**Design tokens** are the source of truth for our visual design attributes, storing values for concepts like color, typography, and spacing in semantically-named variables. They provide a predictable name and value that conveys their associated style, making their purpose clear and recognizable across all platforms. -PatternFly's tokens are set up as variables and styles within Figma, and are available as CSS variables for development. Tokens are only available as part of the PatternFly 6 release, so make sure you [upgrade to PatternFly 6](/releases/upgrade-guide) and/or [install our Figma library](/get-started/design#figma-library) in order to take advantage of tokens. PatternFly 6 components, charts, and extensions are all built with tokens. - -[View all design tokens.](/foundations-and-styles/design-tokens/all-patternfly-tokens) +--- -## Why use tokens? +## Why use design tokens? -A token system enables a a shared language for building UIs and helps support better consistency and maintenance across the PatternFly design system. +A token system enables a shared language for building UIs and helps support better consistency and maintenance across the PatternFly design system. ### Consistency Tokens help maintain consistency across product design processes by ensuring that the same colors and styles are always used for the same use cases. By removing the decision making that would otherwise go into choosing the right color, heading level, spacing, and so on, designs can be created more consistently and efficiently. @@ -22,26 +21,39 @@ Tokens help maintain consistency across product design processes by ensuring tha ### Easier maintenance Tokens also enable easier design system maintenance. Whenever a color is changed as part of a redesign or update, all related tokens are automatically updated to reflect this change. This means that developers won't have to make any code changes to ensure that a product is up to date with the latest PatternFly recommendations. Likewise, designers will see that their Figma designs automatically update to reflect any changes made to tokens. -## Token layers -The PatternFly token system has 3 layers: palette tokens, base tokens, and semantic tokens. +## How do I use design tokens? + +To use PatternFly's token system, ensure you have the current version of the library: + +- **Development:** Tokens are available as **CSS variables** as part of the PatternFly 6 release. [Upgrade to PatternFly 6](/releases/upgrade-guide) to implement them. +- **Design:** Tokens are set up as variables and styles within Figma. [Install our Figma library](/get-started/design#figma-library) to use them in your designs. -* **Palette tokens** use [PatternFly color palettes](/foundations-and-styles/colors#patternfly-palettes) to create a color foundation for other token layers to reference. +PatternFly 6 components, charts, and extensions are all built with tokens, but you can also [view all design tokens here.](/foundations-and-styles/design-tokens/all-design-tokens) -* **Base tokens** expand on the palette layer to apply PatternFly colors to concepts. They also introduce additional concepts, like spacing and borders. Base tokens are grouped conceptually and named numerically, with no duplicate values in a concept group. +--- + +## Token structure and naming -* **Semantic tokens** are the top-level tokens that are grouped conceptually and named semantically. They are built with base tokens and are the tokens that you should see and use in most use cases. Semantic naming is intentionally chosen to support the proper and relevant use of a token, which makes design consistency easier for everyone. +### Token layers +The PatternFly token system has 3 distinct layers that build upon each other: +- **Palette tokens** use [PatternFly color palettes](/foundations-and-styles/colors#patternfly-palettes) to create a color foundation for other token layers to reference. +- **Base tokens** expand on the palette layer to apply PatternFly colors to concepts. They also introduce additional concepts, like spacing and borders. Base tokens are grouped conceptually and named numerically, with no duplicate values in a concept group. +- **Semantic tokens** are the top-level tokens that are grouped conceptually and named semantically. They are built with base tokens and are the tokens that you should see and use in most use cases. Semantic naming is intentionally chosen to support the proper and relevant use of a token, which makes design consistency easier for everyone. + +
![PatternFly token layer names for the same color value](./img/token-layers-example.png) +
-## Token names -PatternFly token names are composed of a `--pf-t` prefix and a series of token segments, separated by double hyphens: +### Token names +PatternFly token names follow a clear structure, composed of a `--pf-t` prefix and a series of token segments separated by double hyphens. This structure follows a **general-to-specific pattern** to ensure context is clear: `--pf-t--[scope]--[component]--[property]--[concept]--[variant]--[state]` Each token segment represents a different type of style information: | **Segment** | **Description** | -| --- | --- | +| :--- | :--- | | Scope | The token's range, such as *global* or *chart*. | Component | The component that the token relates to, such as *icon*, *background*, or *text*. | Property | The style property of a component, such as *color*, *size*, *width*, or *radius*. @@ -49,13 +61,15 @@ Each token segment represents a different type of style information: | Variant | The variant of a component or concept, such as *link*, *plain*, *warning*, or *success*. | State | The state that the component is in, such as *default*, *hover*, or *active*. - If a segment isn't relevant for a particular token then it will be skipped in the token's name: | **Segments** | **Example** | -| --- | --- | +| :--- | :--- | | [scope]--[component]--[property]--[concept]--[variant]--[state] | `--pf-t--global--background--color--action--plain--clicked` | | [scope]--[component]--[property]--[variant]--[state] | `--pf-t--global--background--color--backdrop--default` | -| [scope]--[component]--[property]--[variant] | `--pf-t--global--border--width--regular` | +| [scope]--[component]--[property]--[variant] | `--pf-t--global--border--width--regular` | +### Theming +Themes are collections of design tokens that reference specific visual values. These values change when a user switches themes, such as truning on dark mode. Using themes enables us to ship one design system while supporting multiple visual languages that meet different audience or brand requirements. +For more guidance, refer to our [themeing guidelines](/foundations-and-styles/theming). \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/foundations-and-styles.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/foundations-and-styles.md new file mode 100644 index 0000000000..902d9e1eaf --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/foundations-and-styles.md @@ -0,0 +1,35 @@ +--- +id: Overview +title: Foundations and styles overview +section: foundations-and-styles +sortValue: 1 +--- + +import { SectionGallery } from '@patternfly/documentation-framework/components/sectionGallery/sectionGallery'; +import designFoundationsData from './design-foundations-data.json'; + +PatternFly’s **foundations and styles** lay the groundwork for all components and extensions that we offer. These visual and structural frameworks describe how all of our components should be built and designed, with additional standards and guidance to help designers and developers work together more efficiently and create clear and consistent product experiences. + +--- + +## How do I use foundations and styles? +Our foundations and styles are the “atoms” of our design system, so their usage is typically built into PatternFly features. There are a variety of ways that this plays out in PatternFly, some of the most common being: + +- [Design tokens:](/foundations-and-styles/design-tokens/overview) Foundational design choices like color, spacing, and typography are implemented as reusable semantic variables for consistency. +- [Components:](/components/overview) Multiple foundations and styles are built into components to ensure visual and interactive consistency across UI screens. +- [Patterns:](/patterns/overview) Components are combined within foundational layouts to solve common design problems. +- [Accessibility:](/accessibility/overview) Foundations of color contrast, typography, and focus states influence the rules and guidance for building accessible products. + +Although many of these design decisions are already made in PatternFly, there might be instances where you need to adjust some of these smaller, foundational design decisions to better fit your use case. You can find specific guidance for usage and customization in the documentation for each foundation or style. + +--- + +## Explore foundations and styles + \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/landing-page/design-foundations-data.json b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/landing-page/design-foundations-data.json deleted file mode 100644 index f3159e87ed..0000000000 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/landing-page/design-foundations-data.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "colors": { - "summary": "Carefully selected to support flexible and effective visual communication, while creating more accessible and inclusive user experiences." - }, - "icons": { - "summary": "We support a range of icons of different sizes and colors that can help enhance components and indicate functionality to users." - }, - "motion": { - "summary": "Our motion design framework drives the use of component animations that are intentional, engaging, consistent, and inclusive." - }, - "spacers": { - "summary": "Our spacers help lay out components consistently, while simplifying communication between designers and developers." - }, - "typography": { - "summary": "Our typography guidelines specify how you can use different font and text styles to create strong visual hierarchies." - }, - "usage-and-behavior": { - "summary": "Our usage and behavior guidelines help you decide when to use the best component for scenarios where multiple may be relevant." - } -} diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/landing-page/design-foundations.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/landing-page/design-foundations.md deleted file mode 100644 index 296095097d..0000000000 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/landing-page/design-foundations.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -id: Overview -title: Foundations and styles overview -section: foundations-and-styles -sortValue: 1 ---- - -import { SectionGallery } from '@patternfly/documentation-framework/components/sectionGallery/sectionGallery'; -import designFoundationsData from './design-foundations-data.json'; - -# Overview - -Our design foundations provide standards and guidance to help designers and developers work together more efficiently. They describe the visual language upon which all of our components are built and lay the groundwork for clear and consistent product experiences. - - diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/landing-page/layouts-data.json b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/layouts-data.json similarity index 100% rename from packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/landing-page/layouts-data.json rename to packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/layouts-data.json diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/landing-page/layouts.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/layouts.md similarity index 80% rename from packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/landing-page/layouts.md rename to packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/layouts.md index 2df2dc85de..887c0c2dc3 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/landing-page/layouts.md +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/layouts.md @@ -9,9 +9,7 @@ sortValue: 1 import { SectionGallery } from '@patternfly/documentation-framework/components/sectionGallery/sectionGallery'; import layoutsData from './layouts-data.json'; -# Overview - -PatternFly’s layouts are used to place components on a page. They create a fully responsive structure to keep components organized and aligned across screen sizes. +PatternFly’s **layouts** are used to place components on a page. They create a fully responsive structure to keep components organized and aligned across screen sizes. Think of layouts as the scaffolding within which your components will live. When laying out your page, consider the layout pattern that suits your content. Multiple layouts can be used within the same page to create versatile and effective UIs. diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/.gitignore b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/.gitignore index bd75a596b4..582dbc9817 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/.gitignore +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/.gitignore @@ -1,3 +1,3 @@ **/*.js **/*.d.ts -**/*.tsbuildinfo \ No newline at end of file +**/*.tsbuildinfo diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/colors/colors.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/colors/colors.md index 07a31803b7..545f70968f 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/colors/colors.md +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/colors/colors.md @@ -5,8 +5,8 @@ section: foundations-and-styles import { Alert, Grid, GridItem, Banner, Button, Stack } from '@patternfly/react-core'; import { Table, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'; -import { ColorSwatch } from './ColorSwatch'; -import { ColorFamily } from './ColorFamily'; +import { ColorSwatch } from './ColorSwatch.js'; +import { ColorFamily } from './ColorFamily.js'; # PatternFly's palette diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/iconography.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/iconography.md index d1f4bd6c62..effa94daa4 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/iconography.md +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/iconography.md @@ -9,7 +9,7 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/excl import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon'; -import { IconsTable } from './IconsTable'; +import { IconsTable } from './IconsTable.js'; import './icons.css'; If you're a developer, check out our [development onboarding guide](/get-started/develop#using-icons) to learn how to install and use our icon set. diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverview.tsx b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverview.tsx index cf7831f051..1466176058 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverview.tsx +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsOverview.tsx @@ -55,7 +55,7 @@ export const AnimationsOverview: FunctionComponent = ({ , diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/declarations.d.ts b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/declarations.d.ts deleted file mode 100644 index 39b6b2d704..0000000000 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/declarations.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -declare module "*.svg" { - const content: string; - export default content; -} -declare module "*.png" { - const content: string; - export default content; -} -//# sourceMappingURL=declarations.d.ts.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/declarations.js b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/declarations.js deleted file mode 100644 index af74c5824a..0000000000 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/declarations.js +++ /dev/null @@ -1 +0,0 @@ -//# sourceMappingURL=declarations.js.map \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/utility-classes/landing-page/utility-classes.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/utility-classes/landing-page/utility-classes.md index b1f147e687..8875cd7b40 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/utility-classes/landing-page/utility-classes.md +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/utility-classes/landing-page/utility-classes.md @@ -9,18 +9,18 @@ sortValue: 1 import { SectionGallery } from '@patternfly/documentation-framework/components/sectionGallery/sectionGallery'; import utilityClassesData from './utility-classes-data.json'; -# Overview - -PatternFly’s utility classes enable you to further customize and modify elements in your project without having to write any custom CSS. +PatternFly’s **utility classes** enable you to further customize and modify elements in your project without having to write any custom CSS. For example, you might use a utility class to add additional spacing between elements, align content in a layout, or add a box shadow to an element. +--- + diff --git a/packages/documentation-site/patternfly-docs/content/patterns/patterns-data.json b/packages/documentation-site/patternfly-docs/content/patterns/patterns-data.json new file mode 100644 index 0000000000..7c9b7b314b --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/patterns/patterns-data.json @@ -0,0 +1,35 @@ +{ + "actions": { + "summary": "The best practices for designing processes that a user can trigger by clicking or selecting a UI element, such as a button or link." + }, + "bulk-selection": { + "summary": "A defined method for users to select or deselect multiple items within complex content views or data tables." + }, + "card-view": { + "summary": "A structured layout designed to display a grid of cards in a gallery, optimizing for browsing and interaction." + }, + "component-usage-and-behavior": { + "summary": "Guidance on how to choose between similar components and use them appropriately based on specific user contexts and use cases." + }, + "dashboard": { + "summary": "A highly customizable layout that serves as a high-level overview of key metrics or performance indicators." + }, + "filters": { + "summary": "The design rules for implementing filtering mechanisms that allow users to narrow down content from large datasets or complex views." + }, + "password-generator": { + "summary": "A guided process for generating secure passwords, often complementing input fields that require strong credentials." + }, + "password-strength": { + "summary": "A defined visual mechanism for displaying the strength of a password and whether it meets necessary security requirements." + }, + "primary-detail": { + "summary": "A two-pane layout that shows a list of items and corresponding details for the currently selected item." + }, + "right-to-left": { + "summary": "Guidelines for adapting a UI to support right-to-left writing modes for localization." + }, + "status-and-severity": { + "summary": "Guidance on the consistent and accessible use of color and iconography to communicate status and severity across the UI." + } + } \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/patterns/patterns.md b/packages/documentation-site/patternfly-docs/content/patterns/patterns.md new file mode 100644 index 0000000000..4159d2d4e3 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/patterns/patterns.md @@ -0,0 +1,32 @@ +--- +id: Overview +title: Patterns overview +section: patterns +sortValue: 1 +--- + +import { SectionGallery } from '@patternfly/documentation-framework/components/sectionGallery/sectionGallery'; +import patternsData from './patterns-data.json'; + +**Patterns** are reusable, best practices solutions that solve common user problems. They offer complex guidance that often involves the relationship between multiple components. To outline a pattern's conventions, we provide design guidelines that describe a pattern's usage, appearance, features, variations, and more. We also often provide demos to help you visualize the implementation of a pattern. + +--- + +## How do I use patterns? + +Patterns provide design guidance on how you should combine different **[components](/components/all-components)** and foundational styles for recurring design challenges, such as displaying complex data or managing user workflows. While patterns offer abstract guidance, they are distinct from extensions, which provide the actual pre-built coded solutions. + +Our more holistic design patterns, such as our dashboard and card view, are maintained in our separate [Patterns & Extensions Figma library.](https://www.figma.com/community/file/1357062621908564852/patternfly-6-patterns-extensions) + +--- + +## Explore patterns + + diff --git a/packages/documentation-site/patternfly-docs/content/patterns/usage-and-behavior.md b/packages/documentation-site/patternfly-docs/content/patterns/usage-and-behavior.md index a0936eaabd..e4cd0d6465 100644 --- a/packages/documentation-site/patternfly-docs/content/patterns/usage-and-behavior.md +++ b/packages/documentation-site/patternfly-docs/content/patterns/usage-and-behavior.md @@ -1,6 +1,6 @@ --- -id: Usage and behavior -section: design-foundations +id: Component usage and behavior +section: patterns --- # PatternFly component usage and behavior guidelines diff --git a/packages/documentation-site/patternfly-docs/content/releases/img/beta-tooltip.svg b/packages/documentation-site/patternfly-docs/content/releases/img/beta-tooltip.svg new file mode 100644 index 0000000000..815274d5b6 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/releases/img/beta-tooltip.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/releases/img/deprecated-tooltip.svg b/packages/documentation-site/patternfly-docs/content/releases/img/deprecated-tooltip.svg new file mode 100644 index 0000000000..56f25480ed --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/releases/img/deprecated-tooltip.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/releases/releases.md b/packages/documentation-site/patternfly-docs/content/releases/releases.md new file mode 100644 index 0000000000..c579b25fb9 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/releases/releases.md @@ -0,0 +1,58 @@ +--- +id: Overview +title: Releases overview +section: releases +sortValue: 1 +--- +import '../components/components.css'; + +A PatternFly **release** refers to a newly published version of one or more PatternFly libraries, including major, minor, and patch releases. + +| Release type | Description | Versioning | +| :--- | :--- | :--- | +| **Major** | Releases that contain planned breaking changes that alter how your product's code interacts with PatternFly. | X.0.0 (6.0.0) | +| **Minor** | Our standard quarterly feature release that introduces non-breaking changes and enhancements. | X.Y.0 (6.1.0) | +| **Patch** | A minor release published between our quarterly cycles in order to fix critical bugs. | X.Y.Z (6.1.1)| + +--- + +## What is PatternFly's release cadence? + +We release updates or new features to PatternFly every quarter, with details in our [release highlights](/releases/release-highlights/). A PatternFly release can be either major or minor, and will be closely aligned with long-term projects the team is working on. +## How long is a major version supported? + +A major version of PatternFly (like PatternFly 6) is supported only through the subsequent major version. For example, when PatternFly 6 was released, support for PatternFly 4 ceased. + +To support you through major releases, we provide a detailed [upgrade guide](/releases/upgrade-guide), with codemods to speed up your transition work. + +## What is the lifecycle of a PatternFly feature? + +### Beta features + +Significant changes to components and design tokens are first released in beta. These features are marked with a nonstatus blue "Beta" label. + +
+![A black tooltip bubble with white text that provides a defintion of beta, atop a blue, pill-shaped label that says "beta".](./img/beta-tooltip.svg) +
+ +Beta features are subject to change (API, visuals, or underlying code) based on user feedback. They are only promoted to fully-supported status once they are stable and thoroughly tested. + +While a feature is in beta, it can receive breaking changes. Once promoted out of beta, we will not make further breaking changes outside of a planned major release. + +When using a beta feature, refer to its documentation and experiment with provided examples. You can track development status and changes on the [PatternFly GitHub project board](https://github.com/orgs/patternfly/projects/7/views/1) or refer to the [beta component promotion README](https://github.com/patternfly/patternfly-org/tree/main/beta-component-promotion). + +### Deprecated components + +Deprecated components are implementations that*are no longer recommended for use, due to significant design or code changes. These components are marked with a nonstatus gray "Deprecated" label. + +
+![A black tooltip bubble with white text that provides a defintion of deprecated, atop a gray, pill-shaped label that says "deprecated".](./img/deprecated-tooltip.svg) +
+ +Once deprecated, a component is no longer maintained or enhanced. Deprecated component implementations will remain available until the following major release and can be imported from `@patternfly/react-core/deprecated`. After the following major release, a deprecated component and its documentation is removed from PatternFly.org. + +#### Deprecation scenarios + +A component can be deprecated for a couple of reasons: +- **Complete removal:** A component is replaced by a different, newly recommended component. +- **Significant implementation change:** A component receives a new React implementation. The previous implementation documentation is moved to a "React deprecated" tab on the same page, until the following release, when it will be removed. \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/pages/about-us.md b/packages/documentation-site/patternfly-docs/pages/about-us.md deleted file mode 100644 index 547e500931..0000000000 --- a/packages/documentation-site/patternfly-docs/pages/about-us.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: About us -title: About us ---- - -import '../content/get-started/get-started.css'; -import { Button, Card, CardHeader, CardTitle, CardBody, CardFooter, Divider, Icon, Grid, GridItem, PageSection, Split, SplitItem, Title, Tooltip, Content, ContentVariants } from '@patternfly/react-core'; -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**, 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 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 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? -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. - -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. - -## 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 - -At the core of PatternFly is our global community of designers, developers, and other UX professionals with a passion for open source—in other words, our Flyers. 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. Together, we celebrate creativity and foster a sense of teamwork and unity. - -The PatternFly community is never finished growing, and we want to keep it that way, so reach out whenever—we're always open. - - - - Chat with us - - We have a Slack workspace, where you can ask us questions and share any feedback. Just like PatternFly, our Slack channels are open for all and we encourage you to join to connect with the team. - - - - [Join our Slack workspace ](https://patternfly.slack.com/archives/C293LQ36J) - - - - Stay up to date - - Make sure you're in the loop on important updates and discussions by signing up for PatternFly emails. We can send meeting reminders, updates, and other important information right to your inbox. - - - - [Sign up for our mailing list ](https://www.redhat.com/dynamic-form/instance/934b1674-bc8a-4a13-8c9d-d19abcceb263) - - - - Join our meetings - - Flyers may be spread all over the globe, but we make sure to come together to share updates and collect feedback. If you can't make it, all meetings are recorded and published on our YouTube channel. - - - - [View our Google calendar ](https://calendar.google.com/calendar/embed?src=patternflyteam%40gmail.com&ctz=America%2FNew_York) - - - - Read our blog - - Our team is passionate, and we have a lot to say about open source and user experience—too much to fit on our website! Our Medium publication hosts articles about PatternFly projects, industry practices, professional experience, and more. - - - - [Visit our Medium publication ](https://medium.com/patternfly) - - - - Follow us on X - - If you want to keep up with us via social media, you can find us on X. We share meeting reminders, release announcements, community messages, and links to new Medium articles that you can add to your reading list. - - - - [Follow us on X ](https://x.com/patternfly) - - - - Request a new feature - - We welcome all ideas for adding or improving features! We review all requests, taking into account scope and technical constraints. Accepted requests are placed on [our feature roadmap](https://github.com/orgs/patternfly/projects/16/views/2), and we'll work with you to design and develop a solution. - - - - [Visit our GitHub discussions board ](https://github.com/orgs/patternfly/discussions/categories/feature-requests) - - - - -#### New communities -Sometimes Flyers branch out and build groups of their own, creating new communities. While these communities are separate from PatternFly and not supported as part of our design system, we still love seeing our Flyers turning their visions into actions. - -- **[PatternFly Elements](https://patternflyelements.org):** A community created by web-based developers at Red Hat, focused on creating web components for use across Red Hat's sites and SaaS products. It offers theming options for your own brand library. - -- **[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 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) - -## Learn about our design system - -### Release cadence - -#### 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. - -Along with each major release, we will provide detailed upgrade guides and codemods to support the work needed to upgrade your products to the latest version. - -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 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 features - -Significant changes to our components and design tokens are first released in beta. You can identify these features by the blue "beta" label in our site's navigation or in an alert within related documentation. Beta features are subject to change based on user feedback and are only promoted to fully-supported status once they are stable and thoroughly tested. - -
-![Blue, pill-shaped label that says "Beta", with a black text bubble beside the label.](../content/get-started/img/beta-tooltip.svg) -
- -The API, visuals, or underlying code for a beta feature can receive breaking changes as we gather feedback. This includes changes to a component's CSS class names or React properties, as well as changes to specific token values for a visual theme. Once a feature is promoted out of beta, we will not make further breaking changes outside of a planned major release. - -Before using a beta feature, we recommend reading its documentation and experimenting with the provided examples to ensure it meets your needs. You can track the development status and potential future changes for all beta features on the [PatternFly GitHub project board](https://github.com/orgs/patternfly/projects/7/views/1). For more specific information on the component promotion process, you can also refer to this [beta component promotion README](https://github.com/patternfly/patternfly-org/tree/main/beta-component-promotion). - -### 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. - -Occasionally, a component page will contain a "React next" tab, which contains details about planned changes for the implementation of the component. This updated implementation will be promoted to the main component page as part of a major release, and will become the new recommended implementation. When this happens, the previous implementation will be deprecated. Deprecated component implementations will remain available until a following major release, but will no longer be maintained or updated. - -Deprecated components will typically be available to use until the next major release, after which no documentation will be included on the current release website. - -
-![Onsite deprecated component messages](../content/get-started/img/deprecated-component.png) -
- -Deprecation includes: - -1. Components that are removed completely, in favor of a different component. - - The newly recommended component will be mentioned and linked on the deprecated component's page. -1. Components that still exist, but have significant implementation changes. - - The new implementation will populate the "React tab," while documentation for the deprecated implementation will be placed under a "React deprecated" tab. You will see an alert on both the React and React deprecated pages. - -Deprecated components can be imported from @patternfly/react-core/deprecated. - - diff --git a/packages/documentation-site/patternfly-docs/pages/landing-pages/components/view-all-components.md b/packages/documentation-site/patternfly-docs/pages/landing-pages/components/view-all-components.md deleted file mode 100644 index 807ba5f2fc..0000000000 --- a/packages/documentation-site/patternfly-docs/pages/landing-pages/components/view-all-components.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -id: All components -title: All components -section: components -sortValue: 1 ---- - -import { SectionGallery } from '@patternfly/documentation-framework/components/sectionGallery/sectionGallery'; -import * as illustrations from '../../../images/component-illustrations'; -import componentsData from './components-data.json'; - - diff --git a/packages/documentation-site/patternfly-docs/pages/landing-pages/extensions/extensions-data.json b/packages/documentation-site/patternfly-docs/pages/landing-pages/extensions/extensions-data.json deleted file mode 100644 index 37a467d88f..0000000000 --- a/packages/documentation-site/patternfly-docs/pages/landing-pages/extensions/extensions-data.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "component-groups": { - "summary": "Provides additional React components that combine multiple base PatternFly components to address more complex UI design scenarios." - }, - "catalog-view": { - "summary": "Constructs an interface that is composed of different elements, like tiles, tabs, panels, and headers." - }, - "log-viewer": { - "summary": "Enables you to clearly visualize your project's log content in real time." - }, - "quick-starts": { - "summary": "Creates 2 product documentation tools that provide users with embedded guidance and documentation: quick starts and in-app documentation." - }, - "react-console": { - "summary": "Provides additional React components that enable access to virtual machines or server consoles." - }, - "user-feedback": { - "summary": "Enables products to collect asynchronous feedback from users." - } -} diff --git a/packages/documentation-site/patternfly-docs/pages/landing-pages/extensions/extensions.md b/packages/documentation-site/patternfly-docs/pages/landing-pages/extensions/extensions.md deleted file mode 100644 index b84972db39..0000000000 --- a/packages/documentation-site/patternfly-docs/pages/landing-pages/extensions/extensions.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -id: Overview -title: Extensions overview -section: extensions -sortValue: 1 ---- - -import { SectionGallery } from '@patternfly/documentation-framework/components/sectionGallery/sectionGallery'; -import extensionsData from './extensions-data.json'; - -# Overview - -Extensions are holistic solutions that utilize multiple PatternFly components, typically addressing cross-project use cases. They provide reusable code that can drive consistency throughout a user’s journey across products and platforms. We welcome ideas and contributions for new extensions from the PatternFly community and will prioritize those that can be widely used by multiple projects. - -To contribute an idea for a new extension, [start a discussion on GitHub.](https://github.com/orgs/patternfly/discussions/categories/extensions) - - diff --git a/packages/documentation-site/patternfly-docs/pages/landing-pages/patterns/patterns-data.json b/packages/documentation-site/patternfly-docs/pages/landing-pages/patterns/patterns-data.json deleted file mode 100644 index 8e41799878..0000000000 --- a/packages/documentation-site/patternfly-docs/pages/landing-pages/patterns/patterns-data.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "actions": { - "summary": "Allows users to trigger process via UI elements." - }, - "bulk-selection": { - "summary": "Allows users to select or deselect multiple items in a content view." - }, - "card-view": { - "summary": "Assembles a grid of cards in a gallery." - }, - "dashboard": { - "summary": "Provides an overview of key metrics or performance indicators." - }, - "filters": { - "summary": "Allows users to narrow down content from data." - }, - "primary-detail": { - "summary": "Shows users a list of items and corresponding details for a selected item." - }, - "right-to-left": { - "summary": "Demonstrates how the UI adapts to the writing mode of the page." - }, - "status-and-severity": { - "summary": "Rules and guidelines for communicating status and severity in a UI." - } -} diff --git a/packages/documentation-site/patternfly-docs/pages/landing-pages/patterns/patterns.md b/packages/documentation-site/patternfly-docs/pages/landing-pages/patterns/patterns.md deleted file mode 100644 index 27fb2c7d8a..0000000000 --- a/packages/documentation-site/patternfly-docs/pages/landing-pages/patterns/patterns.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -id: Overview -title: Patterns overview -section: patterns -sortValue: 1 ---- - -import { SectionGallery } from '@patternfly/documentation-framework/components/sectionGallery/sectionGallery'; -import patternsData from './patterns-data.json'; - -# Overview - -Patterns are reusable, best practices solutions that solve common user problems. They are complex and contain multiple components. To outline each pattern’s conventions, we provide design guidelines that describe a pattern’s usage, appearance, features, variations, and more. - -A pattern may also have related React or HTML demos that present interactive examples and general implementation code. These demos are contained in a tab separate from the design guidelines. - - diff --git a/packages/documentation-site/patternfly-docs/patternfly-docs.config.js b/packages/documentation-site/patternfly-docs/patternfly-docs.config.js index 18583dbfe0..8430f5d40b 100644 --- a/packages/documentation-site/patternfly-docs/patternfly-docs.config.js +++ b/packages/documentation-site/patternfly-docs/patternfly-docs.config.js @@ -1,4 +1,4 @@ -const componentsData = require('./pages/landing-pages/components/components-data.json'); +const componentsData = require('./content/components/components-data.json'); // This module is shared between NodeJS and babelled ES5, if this extension only build // exclude the other side nav items. if (process.env.EXTENSIONS_ONLY === 'true') { diff --git a/packages/documentation-site/patternfly-docs/patternfly-docs.source.js b/packages/documentation-site/patternfly-docs/patternfly-docs.source.js index 382818b25e..3bfd619d90 100644 --- a/packages/documentation-site/patternfly-docs/patternfly-docs.source.js +++ b/packages/documentation-site/patternfly-docs/patternfly-docs.source.js @@ -28,7 +28,7 @@ module.exports = (sourceMD, sourceProps, sourceFunctionDocs) => { // Landing pages (in pages directory, sourced with landing-pages source) const pagesBase = path.join(__dirname, '../patternfly-docs/pages'); sourceMD(path.join(pagesBase, 'landing-pages/**/*.md'), 'landing-pages'); - sourceMD(path.join(pagesBase, 'about-us.md'), 'pages-overview'); + sourceMD(path.join(contentBase, 'about-us.md'), 'pages-overview'); // Org demos sourceMD(path.join(contentBase, 'demos/**/*.md'), 'org-demos');