diff --git a/packages/documentation-framework/components/sectionGallery/sectionGalleryWrapper.js b/packages/documentation-framework/components/sectionGallery/sectionGalleryWrapper.js index 9b67b94f84..c696554792 100644 --- a/packages/documentation-framework/components/sectionGallery/sectionGalleryWrapper.js +++ b/packages/documentation-framework/components/sectionGallery/sectionGalleryWrapper.js @@ -1,4 +1,5 @@ import React from 'react'; +import { useLocation } from '@reach/router'; import { groupedRoutes } from '../../routes'; export const SectionGalleryWrapper = ({ @@ -13,8 +14,16 @@ export const SectionGalleryWrapper = ({ children, }) => { let sectionRoutes = subsection - ? groupedRoutes[section][subsection] + ? groupedRoutes[section]?.[subsection] : groupedRoutes[section]; + // Safety check: if sectionRoutes is undefined/null, return empty array to prevent errors + if (!sectionRoutes) { + return ( +
+ {children([], '', () => {}, initialLayout, () => {})} +
+ ); + } if (!includeSubsections || parseSubsections) { const sectionRoutesArr = Object.entries(sectionRoutes); // loop through galleryItems object and build new object to handle subsections @@ -40,6 +49,7 @@ export const SectionGalleryWrapper = ({ }, {}); } + const location = useLocation(); const [searchTerm, setSearchTerm] = React.useState(''); const [layoutView, setLayoutView] = React.useState(initialLayout); const filteredItems = Object.entries(sectionRoutes).filter( diff --git a/packages/documentation-framework/pages/404/index.js b/packages/documentation-framework/pages/404/index.js index b1f8afb765..aceceaf868 100644 --- a/packages/documentation-framework/pages/404/index.js +++ b/packages/documentation-framework/pages/404/index.js @@ -73,31 +73,31 @@ const Page404 = () => { { body="Visualize your facts and figures by designing the right charts for your data." link={{ text: 'View charts', - to: '/charts/about-charts', + to: '/components/charts/overview', }} /> diff --git a/packages/documentation-framework/routes.js b/packages/documentation-framework/routes.js index 55e5ce91b6..c14223c5df 100644 --- a/packages/documentation-framework/routes.js +++ b/packages/documentation-framework/routes.js @@ -154,7 +154,7 @@ function getAsyncComponent(url) { if (allRoutes[url]) { res = allRoutes[url].Component; } - else if (routes[url]) { + else if (routes[url] && routes[url].sources && routes[url].sources.length > 0) { res = routes[url].sources[0].Component; } diff --git a/packages/documentation-framework/templates/mdx.js b/packages/documentation-framework/templates/mdx.js index b008c9f4a6..70c5952609 100644 --- a/packages/documentation-framework/templates/mdx.js +++ b/packages/documentation-framework/templates/mdx.js @@ -96,7 +96,7 @@ const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => { )}{' '} To learn more about deprecated components, visit{' '} - about PatternFly. + about PatternFly. )} {(template || source === 'react-template') && ( diff --git a/packages/documentation-site/patternfly-docs/content/AI/Compass/Compass.md b/packages/documentation-site/patternfly-docs/content/AI/Compass/Compass.md index a50d8f6223..3318651b63 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/Compass/Compass.md +++ b/packages/documentation-site/patternfly-docs/content/AI/Compass/Compass.md @@ -47,8 +47,8 @@ To facilitate building a compass layout, there are several useful variants and p - `isNav` on [Tabs](/components/tabs#tabs-used-for-site-navigation). This flag enables a new styling of `Tabs` to be used as a top site navigation. - `isCircle` on [Button](/components/button#circle-buttons) and [MenuToggle](/components/menus/menu-toggle#plain-circle-toggle). This flag sets a border radius on the `Button` and `MenuToggle`, allowing buttons and plain icon menu toggles to be circular and typical menu toggles to be a pill shape. - `isPill` on [Drawer](/components/drawer#pill). This flag sets a border radius and inset on the `Drawer`, giving it a more floating look. -- `isThinking` or `pf-v6-m-thinking` on `CompassPanel` and [MessageBar](/AI/chatbot/ui/#message-bar-with-ai-indicator-styles). This prop, or class name, may be set to turn on a pulsing color animation around the component. -- `hasAiIndicator` or `pf-v6-m-ai-indicator` on [MessageBar](/AI/chatbot/ui/#message-bar-with-ai-indicator-styles). This prop, or class name, may be set to enable a gradient border around the component. +- `isThinking` or `pf-v6-m-thinking` on `CompassPanel` and [MessageBar](/extensions/chatbot/ui/#message-bar-with-ai-indicator-styles). This prop, or class name, may be set to turn on a pulsing color animation around the component. +- `hasAiIndicator` or `pf-v6-m-ai-indicator` on [MessageBar](/extensions/chatbot/ui/#message-bar-with-ai-indicator-styles). This prop, or class name, may be set to enable a gradient border around the component. ### Card and data view layout 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 27d2eacf25..e75747209e 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 @@ -25,10 +25,10 @@ We are creating an [AI-enabled seed app](https://github.com/patternfly/patternfl ### What does Compass include? To explore Compass and its features, take a look at a number of our full page demos: -- [Full page demo with card view and table layouts](/patternfly-ai/generative-uis/compass#card-and-data-view-layout) -- [Full page demo with dashboard layout](/patternfly-ai/generative-uis/compass/org-demos#dashboard-layout) -- [Static, full page HTML demo with multiple content sections](/patternfly-ai/generative-uis/compass/html-demos#multiple-sections) -- [Static, full page HTML demo with drawer](/patternfly-ai/generative-uis/compass/html-demos#with-drawer) +- [Full page demo with card view and table layouts](/ai/generative-uis/compass#card-and-data-view-layout) +- [Full page demo with dashboard layout](/ai/generative-uis/compass/org-demos#dashboard-layout) +- [Static, full page HTML demo with multiple content sections](/ai/generative-uis/compass/html-demos#multiple-sections) +- [Static, full page HTML demo with drawer](/ai/generative-uis/compass/html-demos#with-drawer) To support the different ways you might use Compass, we've introduced several new capabilities to PatternFly: @@ -37,7 +37,7 @@ To support the different ways you might use Compass, we've introduced several ne - Background and border gradients - Additional smooth animations - Background image explorations -- [**Compass layout component**](/components/compass): A new layout component designed specifically for generative UI patterns +- [**Compass layout component**](/ai/generative-uis/compass): A new layout component designed specifically for generative UI patterns - **Additional components and component variants**: - Transparency & Effects: - `isPlain` makes cards, data lists, and tables transparent to allow background effects (like a glass look) to show through. @@ -57,7 +57,7 @@ Accessibility has been a major focus throughout the Compass exploration. As gene ### Integration with react-flow -Some stakeholdres have been experimenting with Generative UI use cases using React Flow. The React Flow package `@xyflow/react` is compatible with PatternFly through customization of its [theme](https://reactflow.dev/learn/customization/theming) and [rendered nodes](https://reactflow.dev/learn/customization/custom-nodes). A custom override stylesheet can assign PatternFly's global tokens to React Flow's own tokens to ensure a consistent styling. We have created some [documentation and a demo](/patternfly-ai/generative-uis/react-flow) for integrations with PatternFly as a POC for these use cases. +Some stakeholdres have been experimenting with Generative UI use cases using React Flow. The React Flow package `@xyflow/react` is compatible with PatternFly through customization of its [theme](https://reactflow.dev/learn/customization/theming) and [rendered nodes](https://reactflow.dev/learn/customization/custom-nodes). A custom override stylesheet can assign PatternFly's global tokens to React Flow's own tokens to ensure a consistent styling. We have created some [documentation and a demo](/ai/generative-uis/react-flow) for integrations with PatternFly as a POC for these use cases. ### Current status diff --git a/packages/documentation-site/patternfly-docs/content/AI/conversation-design/conversation-design.md b/packages/documentation-site/patternfly-docs/content/AI/conversation-design/conversation-design.md index 5d10228f50..a38ce5ec5e 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/conversation-design/conversation-design.md +++ b/packages/documentation-site/patternfly-docs/content/AI/conversation-design/conversation-design.md @@ -13,7 +13,7 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-i Good conversation design combines content strategy, writing, and design to ensure that the development and use of chatbots is centered on real user needs. This includes making sure that all text related to the conversational UI supports easy engagement with chatbots, while staying aligned with brand standards. -When designing AI conversations alongside PatternFly-based projects, it is important to align with our established [brand voice and tone](/content-design/brand-voice-and-tone), as well as our [ethical guidelines for AI.](/AI/ai-guidelines) +When designing AI conversations alongside PatternFly-based projects, it is important to align with our established [brand voice and tone](/content-design/brand-voice-and-tone), as well as our [ethical guidelines for AI.](/ai/overview) ## Best practices @@ -29,11 +29,11 @@ Following these best practices to help ensure that your users can complete their When chatbots are designed to meet the needs of your users, they can improve the overall UX of your product. They are convenient, efficient, and persistent. -[Our chatbot extension](/AI/chatbot/about-chatbot) utilizes PatternFly components to create a foundation for an AI-based chatbot, with additional customization options. +[Our chatbot extension](/extensions/chatbot/overview) utilizes PatternFly components to create a foundation for an AI-based chatbot, with additional customization options. - + diff --git a/packages/documentation-site/patternfly-docs/content/AI/rapid-prototyping/enhancing-existing-projects.md b/packages/documentation-site/patternfly-docs/content/AI/rapid-prototyping/enhancing-existing-projects.md index f0ab5cf3bc..8adc0a46fb 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/rapid-prototyping/enhancing-existing-projects.md +++ b/packages/documentation-site/patternfly-docs/content/AI/rapid-prototyping/enhancing-existing-projects.md @@ -9,9 +9,9 @@ sortValue: 2 This guide provides instructions for integrating AI-assisted PatternFly development tools into your existing codebase. -Before you get started, review [best practices for AI-assisted prototyping](/AI/rapid-prototyping/rapid-prototyping#best-practices-for-ai-assisted-prototyping) and learn about [vibe coding principles](/AI/rapid-prototyping/rapid-prototyping#what-is-vibe-coding) for effective AI-assisted development. +Before you get started, review [best practices for AI-assisted prototyping](/ai/rapid-prototyping/#best-practices-for-ai-assisted-prototyping) and learn about [vibe coding principles](/ai/rapid-prototyping/#what-is-vibe-coding) for effective AI-assisted development. -If you need to start a new project, follow our guidelines for [starting a new prototype](/AI/rapid-prototyping/new-prototypes). +If you need to start a new project, follow our guidelines for [starting a new prototype](/ai/rapid-prototyping/new-prototypes). ## Why enhance existing projects? diff --git a/packages/documentation-site/patternfly-docs/content/AI/rapid-prototyping/migrating-to-patternfly.md b/packages/documentation-site/patternfly-docs/content/AI/rapid-prototyping/migrating-to-patternfly.md index 5bc215482b..ac8fe8c61e 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/rapid-prototyping/migrating-to-patternfly.md +++ b/packages/documentation-site/patternfly-docs/content/AI/rapid-prototyping/migrating-to-patternfly.md @@ -56,7 +56,7 @@ For example, you could use AI to migrate a simple Angular feature like this tabl ![Before migration - Angular Products page](./img/products-before.png) -During the development phase, you could take a couple of different approaches to migrate code. You might be able to simply change the code within the same file or you might want to start fresh, using the patternfly-react-seed and following [our rapid prototyping guide.](https://www.patternfly.org/AI/rapid-prototyping/new-prototypes) +During the development phase, you could take a couple of different approaches to migrate code. You might be able to simply change the code within the same file or you might want to start fresh, using the patternfly-react-seed and following [our rapid prototyping guide.](https://www.patternfly.org/ai/rapid-prototyping/new-prototypes) In this example, we created a placeholder page (PF6placeholder.js) and asked AI to replicate the Angular component on the new page, using PatternFly. diff --git a/packages/documentation-site/patternfly-docs/content/AI/rapid-prototyping/new-prototypes.md b/packages/documentation-site/patternfly-docs/content/AI/rapid-prototyping/new-prototypes.md index 086dd57d21..474ae187f4 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/rapid-prototyping/new-prototypes.md +++ b/packages/documentation-site/patternfly-docs/content/AI/rapid-prototyping/new-prototypes.md @@ -9,9 +9,9 @@ sortValue: 2 This guide provides instructions for setting up new PatternFly prototypes using AI-assisted development tools. -Before you get started, review [best practices for AI-assisted prototyping](/AI/rapid-prototyping/rapid-prototyping#best-practices-for-ai-assisted-prototyping). +Before you get started, review [best practices for AI-assisted prototyping](/ai/rapid-prototyping/#best-practices-for-ai-assisted-prototyping). -If you need to add AI tools to existing codebases instead, follow our guidelines for [enhancing existing projects](/AI/rapid-prototyping/enhancing-existing-projects). +If you need to add AI tools to existing codebases instead, follow our guidelines for [enhancing existing projects](/ai/rapid-prototyping/enhancing-existing-projects). ## Project setup @@ -35,7 +35,7 @@ The patternfly-react-seed ai_enabled branch comes pre-configured with: Once you've installed and set up the patternfly-react-seed ai_enabled branch, with the [patternfly-ai-coding tool](https://github.com/patternfly/patternfly-ai-coding), follow these steps to begin prototyping: -1. **Define your scope**: Clearly articulate what you want to build using [vibe coding principles](/AI/rapid-prototyping/rapid-prototyping#effective-prompting-with-vibe-coding). Describe the experience, not the technical implementation. +1. **Define your scope**: Clearly articulate what you want to build using [vibe coding principles](/ai/rapid-prototyping/#effective-prompting-with-vibe-coding). Describe the experience, not the technical implementation. 2. **Leverage AI assistance**: Use AI tools to generate PatternFly components based on your requirements, communicating through natural language descriptions of user needs and design intent. 3. **Iterate and refine**: Review generated code and make adjustments as needed, continuing to use vibe coding to guide refinements. 4. **Test and validate**: Ensure your prototype meets design and functional requirements. \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/AI/rapid-prototyping/rapid-prototyping.md b/packages/documentation-site/patternfly-docs/content/AI/rapid-prototyping/rapid-prototyping.md index e60511c998..01bb276327 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/rapid-prototyping/rapid-prototyping.md +++ b/packages/documentation-site/patternfly-docs/content/AI/rapid-prototyping/rapid-prototyping.md @@ -26,8 +26,8 @@ Rapid prototyping with PatternFly code offers several key benefits: Choose your path based on your current situation: -- **[Starting a new prototype](/AI/rapid-prototyping/new-prototypes):** Use the [patternfly-react-seed (ai_enabled branch)](https://github.com/patternfly/patternfly-react-seed/tree/ai_enabled) application for optimal setup. -- **[Enhancing existing projects](/AI/rapid-prototyping/enhancing-existing-projects):** Integrate AI tools into your current codebase. +- **[Starting a new prototype](/ai/rapid-prototyping/new-prototypes):** Use the [patternfly-react-seed (ai_enabled branch)](https://github.com/patternfly/patternfly-react-seed/tree/ai_enabled) application for optimal setup. +- **[Enhancing existing projects](/ai/rapid-prototyping/enhancing-existing-projects):** Integrate AI tools into your current codebase. ## Best practices for AI-assisted prototyping diff --git a/packages/documentation-site/patternfly-docs/content/accessibility/accessibility-design.md b/packages/documentation-site/patternfly-docs/content/accessibility/accessibility-design.md index 788bff874d..ecf4238487 100644 --- a/packages/documentation-site/patternfly-docs/content/accessibility/accessibility-design.md +++ b/packages/documentation-site/patternfly-docs/content/accessibility/accessibility-design.md @@ -6,7 +6,7 @@ section: accessibility import { Card, CardBody, Grid, GridItem } from '@patternfly/react-core'; -As described in our [accessibility guidelines](/accessibility/overview), users may interact with your product through a variety of assistive technologies. In addition to [developing for accessibility](/accessibility/develop-for-accessibility), you must also incorporate it into your product's visual design. +As described in our [accessibility guidelines](/accessibility/overview), users may interact with your product through a variety of assistive technologies. In addition to [developing for accessibility](/accessibility/develop), you must also incorporate it into your product's visual design. ## Color and contrast diff --git a/packages/documentation-site/patternfly-docs/content/accessibility/accessibility-development.md b/packages/documentation-site/patternfly-docs/content/accessibility/accessibility-development.md index 2a9dff2257..642d1995fc 100644 --- a/packages/documentation-site/patternfly-docs/content/accessibility/accessibility-development.md +++ b/packages/documentation-site/patternfly-docs/content/accessibility/accessibility-development.md @@ -102,7 +102,7 @@ For keyboard-only users who use the tab key to navigate the interface, trapped f For screen reader users, the other contents on the page should be hidden from the screen reader. -Based on the [screen reader / browser combinations](/accessibility/testing-your-accessibility) we use for testing, we recommend applying `aria-hidden="true"` to the parent wrapping element of the page contents. The modal element of the component must not be a descendent of this element, and should be included as a sibling to this element. +Based on the [screen reader / browser combinations](/accessibility/test-your-product) we use for testing, we recommend applying `aria-hidden="true"` to the parent wrapping element of the page contents. The modal element of the component must not be a descendent of this element, and should be included as a sibling to this element. #### Scrollable elements diff --git a/packages/documentation-site/patternfly-docs/content/accessibility/accessibility-scorecard.md b/packages/documentation-site/patternfly-docs/content/accessibility/accessibility-scorecard.md index 60a2f006dd..c3e7ac6955 100644 --- a/packages/documentation-site/patternfly-docs/content/accessibility/accessibility-scorecard.md +++ b/packages/documentation-site/patternfly-docs/content/accessibility/accessibility-scorecard.md @@ -10,7 +10,7 @@ To support the proper assessment of accessibility measures, we've created a scor Scoring your accessibility shouldn't be a one-time thing. It's something that you should do routinely to assess your product as it evolves. -An accessibility scorecard offers a higher-level overview of the current state of your product's accessibility, but it is **not intended to replace a full accessibility audit**, as described by our [accessibility testing guide](/accessibility/testing-your-accessibility). An accessibility audit is a vital part of creating your accessibility scorecard. +An accessibility scorecard offers a higher-level overview of the current state of your product's accessibility, but it is **not intended to replace a full accessibility audit**, as described by our [accessibility testing guide](/accessibility/test-your-product). An accessibility audit is a vital part of creating your accessibility scorecard. ## PatternFly.org accessibility scorecard diff --git a/packages/documentation-site/patternfly-docs/content/components/accessibility/modal/modal.md b/packages/documentation-site/patternfly-docs/content/components/accessibility/modal/modal.md index 04adfe890f..228b0f6865 100644 --- a/packages/documentation-site/patternfly-docs/content/components/accessibility/modal/modal.md +++ b/packages/documentation-site/patternfly-docs/content/components/accessibility/modal/modal.md @@ -20,7 +20,7 @@ At a minimum, a modal should meet the following criteria: - Learn more about trapping focus in our accessibility development guide for accessibility.} /> + Learn more about trapping focus in our accessibility development guide for accessibility.} /> Tab navigates to the next focusable element inside a modal, and Shift + Tab navigates to the previous focusable element.} /> diff --git a/packages/documentation-site/patternfly-docs/content/components/accessibility/page/page.md b/packages/documentation-site/patternfly-docs/content/components/accessibility/page/page.md index 0e02179bba..fa15b1c328 100644 --- a/packages/documentation-site/patternfly-docs/content/components/accessibility/page/page.md +++ b/packages/documentation-site/patternfly-docs/content/components/accessibility/page/page.md @@ -45,7 +45,7 @@ The following React props have been provided for more fine-tuned control over ac | `mainTabIndex={-1 or null}` | `Page` | Set the tabindex for the main content container. This must be passed a value of `-1` when a skip to content is also passed to the page, as some browsers require it in order for skip links to work correctly. | | `role="[role of the main content element]"` | `Page` | Sets the `role` attribute of the main content element. This should only be passed in if the `mainComponent` property has a value of "div". You should also avoid passing `role="main"` and instead use the default `mainComponent` value of "main". | | `hasOverflowScroll` | `PageBreadcrumb`, `PageGroup`, `PageNavigation`, `PageSection` | Indicates that the component's content causes an overflow scrollbar to render. Passing this property will also set the tabindex of the component to `0` so that it can be focused and scrolled via keyboard. **Required** and should only be passed in when the content's height exceeds the component height, and when there is no other focusable content before the primary content of the component. | -| `aria-label="[text that labels the component]"` | `PageBreadcrumb`, `PageGroup`, `PageNavigation`, `PageSection` | Adds an accessible name to the component. **Required** when the component has the `hasOverflowScroll` property passed in. See our content on [scrollable elements](/accessibility/develop-for-accessibility#scrollable-elements) for further information. | +| `aria-label="[text that labels the component]"` | `PageBreadcrumb`, `PageGroup`, `PageNavigation`, `PageSection` | Adds an accessible name to the component. **Required** when the component has the `hasOverflowScroll` property passed in. See our content on [scrollable elements](/accessibility/develop#scrollable-elements) for further information. | | `component="[an HTML tag]"` | `PageSection` | Sets the wrapper element of the page section. By default this is the HTML `section` element. Customizing this property may require you to take additional considerations that are dependent on your particular use case. | | `aria-label="[text that labels the page toggle button]"` | `PageToggleButton` | Adds an accessible name to the page toggle button that controls the sidebar expansion. This should only be passed if the page toggle button contains no text content, such as an icon. | @@ -61,7 +61,7 @@ The following HTML attributes and PatternFly classes can be used for more fine-t | `id="[id for the main content container]"` | `.pf-v6-c-page__main` | Sets the `id` of the main content container. This must be passed in when a skip to content is present within the page, with the value being linked to the skip to content's `href` attribute, e.g. `href="#container-id`. | | `role="[role of the main content element]"` | `.pf-v6-c-page__main` | Sets the `role` attribute of the main content element. This should only be passed in if the `.pf-v6-c-page__main` class is applied to a `div` element. You should also avoid passing `role="main"` and instead use a `main` element. | | `tabindex="-1"` | `.pf-v6-c-page__main` | Set the tabindex for the main content container. This should only be passed in when a skip to content is also present within the page, as some browsers require it in order for skip links to work correctly. | -| `aria-label="[text that labels the component]"` | `.pf-v6-c-page__main-breadcrumb`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-nav`, `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-subnav`, `.pf-v6-c-page__main-tabs`, `.pf-v6-c-page__main-wizard` | Adds an accessible name to the component. **Required** and should only be passed in when the component has the `.pf-m-overflow-scroll` class has caused an overflow scrollbar to render, and when there is no other focusable content before the primary content of the component.
See our content on [scrollable elements](/accessibility/develop-for-accessibility#scrollable-elements) for further information. | +| `aria-label="[text that labels the component]"` | `.pf-v6-c-page__main-breadcrumb`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-nav`, `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-subnav`, `.pf-v6-c-page__main-tabs`, `.pf-v6-c-page__main-wizard` | Adds an accessible name to the component. **Required** and should only be passed in when the component has the `.pf-m-overflow-scroll` class has caused an overflow scrollbar to render, and when there is no other focusable content before the primary content of the component.
See our content on [scrollable elements](/accessibility/develop#scrollable-elements) for further information. | | `tabindex="0"` | `.pf-v6-c-page__main-breadcrumb`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-nav`, `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-subnav`, `.pf-v6-c-page__main-tabs`, `.pf-v6-c-page__main-wizard` | Allows keyboard focus to be placed on the component. **Required** and should only be passed in when the component has the `.pf-m-overflow-scroll` class has caused an overflow scrollbar to render, and when there is no other focusable content before the primary content of the component. | | `aria-label="[text that labels the page toggle button]"` | `.pf-v6-c-button.pf-m-plain` | Adds an accessible name to the page toggle button that controls the sidebar expansion. This should only be passed if the page toggle button contains no text content, such as an icon. | diff --git a/packages/documentation-site/patternfly-docs/content/components/accessibility/sidebar/sidebar.md b/packages/documentation-site/patternfly-docs/content/components/accessibility/sidebar/sidebar.md index d3c0140d7c..73b86025ad 100644 --- a/packages/documentation-site/patternfly-docs/content/components/accessibility/sidebar/sidebar.md +++ b/packages/documentation-site/patternfly-docs/content/components/accessibility/sidebar/sidebar.md @@ -10,7 +10,7 @@ import { Link } from '@patternfly/documentation-framework/components/link/link'; To implement an accessible PatternFly **sidebar**: -- Ensure the sidebar panel follows our documentation on [accessible scrollable elements](/accessibility/develop-for-accessibility#scrollable-elements) if its content creates a scrollable container +- Ensure the sidebar panel follows our documentation on [accessible scrollable elements](/accessibility/develop#scrollable-elements) if its content creates a scrollable container ## Testing @@ -21,7 +21,7 @@ At a minimum, a sidebar should meet the following criteria: Tab navigates to the next focusable element, and Shift + Tab navigates to the previous focusable element.} /> - If the sidebar panel content creates a scrollbale container, it follows our documentation on accessible scrollable elements.} /> + If the sidebar panel content creates a scrollbale container, it follows our documentation on accessible scrollable elements.} /> diff --git a/packages/documentation-site/patternfly-docs/content/components/button/button.md b/packages/documentation-site/patternfly-docs/content/components/button/button.md index 0ffd4529d6..2a58d990ea 100644 --- a/packages/documentation-site/patternfly-docs/content/components/button/button.md +++ b/packages/documentation-site/patternfly-docs/content/components/button/button.md @@ -315,7 +315,7 @@ Buttons in forms, modals, or wizards should always be left aligned in the box. T When writing button labels: * Be specific and clearly communicate the button's action. -* Make sure that button text is unique and easily understood on its own, so that screen readers may read buttons to users out of context. Refer to [PatternFly's accessibility guide](/accessibility/about-accessibility) for more information. +* Make sure that button text is unique and easily understood on its own, so that screen readers may read buttons to users out of context. Refer to [PatternFly's accessibility guide](/accessibility/overview) for more information. * Use simple verbs or verb phrases. * Aim for short labels when possible (1–3 words), to avoid wrapping. * Avoid using articles (for example, write “Add source” instead of “Add a source”). @@ -325,7 +325,7 @@ When writing button labels: ### Writing link labels -Use specific, action-focused labels that match what the user will see when they arrive at their location. For example, if you are sending a user to a dashboard, your link label might read _View dashboard_. For a link directing a user to a support forum, the label might read _Get help in the support forum_. See [PatternFly's content guidelines](/content-design/about-ux-writing) for additional guidance. +Use specific, action-focused labels that match what the user will see when they arrive at their location. For example, if you are sending a user to a dashboard, your link label might read _View dashboard_. For a link directing a user to a support forum, the label might read _Get help in the support forum_. See [PatternFly's content guidelines](/content-design/overview) for additional guidance. ## Accessibility diff --git a/packages/documentation-site/patternfly-docs/content/components/charts/about/about.md b/packages/documentation-site/patternfly-docs/content/components/charts/about/about.md index ac68b17fa1..4f5053398b 100644 --- a/packages/documentation-site/patternfly-docs/content/components/charts/about/about.md +++ b/packages/documentation-site/patternfly-docs/content/components/charts/about/about.md @@ -16,23 +16,23 @@ A **chart** visualizes data in an application. The type of chart you use will de 1. **Title:** Titles should be left-aligned and appear above your chart. 2. **Axis labels and scale values:** We recommend using tick marks to clearly mark scale values on the y-axis. The text for axis labels and scale values should be 12px font in standard text color. All scale values should be equally distributed across the axis and the axis label should fall outside the scale values, centered with the axis line. 3. **Legends:** We recommend using legends when charts include more than one variable and therefore use more than one color. When datasets are overlapping, an [interactive legend](#interactive-chart-legends) can be used. If space is not available to display names of horizontal and vertical axes, a legend must be added instead. The legend should list the colors that each variable obtains and the name of the variable. The text on the legend should be 14px size and standard text color. They can either be placed left-aligned to the right of the chart or centered below the chart. -4. **Chart tooltip:** A tooltip will appear on hover over certain elements of a chart, like bars in a bar chart or segments in a donut chart. [Chart tooltips](/charts/tooltips) should display the specific values related to the element the user is hovering over. +4. **Chart tooltip:** A tooltip will appear on hover over certain elements of a chart, like bars in a bar chart or segments in a donut chart. [Chart tooltips](/components/charts/tooltips) should display the specific values related to the element the user is hovering over. ## Chart types Image displaying what chart types to use when -- [Area chart](/charts/area-chart/design-guidelines): Use to show (potentially multiple) trends over a continuous scale (usually time). -- [Bar chart](/charts/bar-chart/design-guidelines): Use to show and compare categories and their respective data point/value. Bar charts can be plotted vertically or horizontally. The axis that labels the bar is the category, the axis that marks the end point of the bar displays the data points/values. - - [Stacked bar chart](/charts/stack-chart/design-guidelines): Use to show and compare categorical data of more than one variable. Can be plotted vertically or horizontally. +- [Area chart](/components/charts/area-chart/design-guidelines): Use to show (potentially multiple) trends over a continuous scale (usually time). +- [Bar chart](/components/charts/bar-chart/design-guidelines): Use to show and compare categories and their respective data point/value. Bar charts can be plotted vertically or horizontally. The axis that labels the bar is the category, the axis that marks the end point of the bar displays the data points/values. + - [Stacked bar chart](/components/charts/stack-chart/design-guidelines): Use to show and compare categorical data of more than one variable. Can be plotted vertically or horizontally. - Vertical bar charts (category on the horizontal x axis): Use to show a progression of the categories (or sequential variables). The most common bar chart. - Horizontal bar charts (category on the vertical y axis): Use to show nominal variables. Allows for more space for category labeling. -- [Bullet chart](/charts/bullet-chart/design-guidelines): Use as an extension to the bar chart to measure data with thresholds and static ranges. -- [Donut chart](/charts/donut-chart/design-guidelines): Use to show the relationship of a set of values to a whole or to show progress completion as a percentage. Donut charts are best used to display data with a small number of categories (example: 2-5 categories). Use the middle of the chart to highlight a data point. - - [Donut utilization](/charts/donut-utilization-chart/design-guidelines): Use to show utilization for an object as a percentage. - - [Donut utilization with threshold](/charts/donut-utilization-chart/design-guidelines#donut-chart---utilization-with-threshold): Use to show utilization for an object as a percentage in relation to threshold values. -- [Line chart](/charts/line-chart/design-guidelines): Use to compare several data sets or to show data changes over a period of time. Line charts work best when small changes exist within the data. -- [Pie chart](/charts/pie-chart/design-guidelines): Use to show percentages or proportional data. Can be used to show up to five or more data points. -- [Sparkline](/charts/sparkline-chart/design-guidelines): Use to show how values change over time for multiple sets of data. Sparkline charts offer an alternative to the line chart when multiple lines need to be plotted. Axis values are not labeled, but a tooltip can be used to display the value at a given point. +- [Bullet chart](/components/charts/bullet-chart/design-guidelines): Use as an extension to the bar chart to measure data with thresholds and static ranges. +- [Donut chart](/components/charts/donut-chart/design-guidelines): Use to show the relationship of a set of values to a whole or to show progress completion as a percentage. Donut charts are best used to display data with a small number of categories (example: 2-5 categories). Use the middle of the chart to highlight a data point. + - [Donut utilization](/components/charts/donut-utilization-chart/design-guidelines): Use to show utilization for an object as a percentage. + - [Donut utilization with threshold](/components/charts/donut-utilization-chart/design-guidelines#donut-chart---utilization-with-threshold): Use to show utilization for an object as a percentage in relation to threshold values. +- [Line chart](/components/charts/line-chart/design-guidelines): Use to compare several data sets or to show data changes over a period of time. Line charts work best when small changes exist within the data. +- [Pie chart](/components/charts/pie-chart/design-guidelines): Use to show percentages or proportional data. Can be used to show up to five or more data points. +- [Sparkline](/components/charts/sparkline-chart/design-guidelines): Use to show how values change over time for multiple sets of data. Sparkline charts offer an alternative to the line chart when multiple lines need to be plotted. Axis values are not labeled, but a tooltip can be used to display the value at a given point. ## Charts in cards If a chart lives in a card, the title of that chart will be placed on the header of that card instead of the chart. The rest of the chart guidelines should be followed for the chart itself. @@ -78,4 +78,4 @@ To support dark-themed charts, you must: 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-patternfly-tokens). \ No newline at end of file +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 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 3df1047fc9..8b5ed337e9 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 @@ -6,12 +6,12 @@ subsection: charts An **area chart** is used to provide metrics for a single data point. While similar to a line chart in both form and function, it offers an area fill for visual emphasis. The area fill below the line also functions to indicate cumulative data. ## Usage -The most common use case for area charts is to show trending over a continuous scale (usually time). Use this chart type when you need to provide more visual emphasis than a simple [line chart](/charts/line-chart) offers. +The most common use case for area charts is to show trending over a continuous scale (usually time). Use this chart type when you need to provide more visual emphasis than a simple [line chart](/components/charts/line-chart) offers. You may stack area charts to compare more than one continuous data sets. Stacking area charts will put more emphasis on the difference between each visualized data set. ### 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](/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 [colors for charts](/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 937fff675e..2f9039dffb 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 @@ -8,7 +8,7 @@ A **bar chart** is used to easily display two variables, one on the horizontal x ## Usage Bar charts are a great way to show and compare categorical data. Unlike donut or pie charts that differentiate by angle area, bar charts differentiate by length. Because of this clearer differentiation, we recommend using bar charts over donut or pie charts in most cases. -If you want to show continuous data over time, you may consider using a [line chart](/charts/line-chart) instead. If you wish to show the percentage utilization ratio between used and available, you should check out the [donut utilization chart](/charts/donut-utilization-chart). +If you want to show continuous data over time, you may consider using a [line chart](/components/charts/line-chart) instead. If you wish to show the percentage utilization ratio between used and available, you should check out the [donut utilization chart](/components/charts/donut-utilization-chart). ## Horizontal vs. vertical bar charts @@ -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](/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 [colors for charts](/components/charts/colors-for-charts). diff --git a/packages/documentation-site/patternfly-docs/content/components/charts/bullet-chart/bullet-chart.md b/packages/documentation-site/patternfly-docs/content/components/charts/bullet-chart/bullet-chart.md index 123f60b0b2..4c406cb8d8 100644 --- a/packages/documentation-site/patternfly-docs/content/components/charts/bullet-chart/bullet-chart.md +++ b/packages/documentation-site/patternfly-docs/content/components/charts/bullet-chart/bullet-chart.md @@ -3,10 +3,10 @@ id: Bullet chart section: components subsection: charts --- -A **bullet chart** can be thought of as an extension to a bar chart that measures a dynamic value with thresholds and target values. While similar to [donut utilization charts](/charts/donut-utilization-chart), bullet charts can show underages and overages of data (below 0% and above 100%), visualize horizontally or vertically, and pack large amounts of information into a compact space. +A **bullet chart** can be thought of as an extension to a bar chart that measures a dynamic value with thresholds and target values. While similar to [donut utilization charts](/components/charts/donut-utilization-chart), bullet charts can show underages and overages of data (below 0% and above 100%), visualize horizontally or vertically, and pack large amounts of information into a compact space. ## Usage -Bullet charts are most often used to measure sets of performance data or utilization. They can be used for similar use cases as [donut utilization with threshhold charts](/charts/donut-utilization-chart#donut-utilization-threshold-examples). For example, a user can use a bullet chart to measure values of a set compared to the whole, while also illustrating related thresholds, target values, and underages or overages. +Bullet charts are most often used to measure sets of performance data or utilization. They can be used for similar use cases as [donut utilization with threshhold charts](/components/charts/donut-utilization-chart#donut-utilization-threshold-examples). For example, a user can use a bullet chart to measure values of a set compared to the whole, while also illustrating related thresholds, target values, and underages or overages. When deciding which chart to use, consider the type of data you are dealing with and the importance of tracking underages or overages in that data. Also consider the amount of space you have to visualize the data and its surrounding information. Bullet charts consolidate data and therefore take up less space than donut charts. They fit very well within text-dense areas, since they can be horizontally or visually illustrated. Bullet charts can also measure data by percentages or integer values; donut charts cannot. 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 f7efeacde4..3f64652c99 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,18 +8,18 @@ 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](/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 [colors for charts](/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. - Showing utilization for an object as a percentage (with or without thresholds). -If you need to compare one category to another, consider using a [bar chart](/charts/bar-chart). +If you need to compare one category to another, consider using a [bar chart](/components/charts/bar-chart). ### Example Donut chart -1. **Segment fill:** We recommend using [colors for charts](/charts/colors-for-charts) for different items within the donut chart. +1. **Segment fill:** We recommend using [colors for charts](/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 e075322e9c..e950028853 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](/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 [colors for charts](/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 02ef258871..eee0c37f42 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 @@ -6,11 +6,11 @@ subsection: charts A **line chart** plots a series of discrete data samples to show continuous data and trend information. Sample values on the line can be measured and extracted. ## Usage -The most common use case for line charts is to compare several data sets over a period of time. They can be used to project trends into the past or future. A best fit line is created and extended in both directions to do so, but the validity of the projection is not certain. If you want to show and compare categorical data, you may consider using a [bar chart](/charts/bar-chart). +The most common use case for line charts is to compare several data sets over a period of time. They can be used to project trends into the past or future. A best fit line is created and extended in both directions to do so, but the validity of the projection is not certain. If you want to show and compare categorical data, you may consider using a [bar chart](/components/charts/bar-chart). Multiple lines on the same chart allow the user to visualize relationships between varying data sets, such as correlated events, similarities or unexpected differences. We recommend displaying no more than 6 lines on a single graph to avoid confusion. ### 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](/charts/area-chart) will occur in line charts. For line colors, we recommend consulting [colors for charts](/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 [colors for charts](/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 65d8d19bcc..154d9732c3 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 @@ -8,10 +8,10 @@ A **pie chart** is commonly used to show percentages or proportional data. ## Usage Choose a pie chart when you need to compare a set of values to a whole. For example, you might choose a pie chart when visualizing the number of sales made by a team of five people; each segment of the chart represents one salesperson’s performance in the context of the rest of the team. The sum of all of the segments of the chart must equal 100%, and the data points should be mutually exclusive. It is recommended that there are no more than six segments per single pie chart. -A pie chart may be the wrong choice when you need to compare categories to one another, because it can be difficult to distinguish small differences between segments. If you wish to compare values to each other, a [bar chart](/charts/bar-chart) may be a more effective pattern. +A pie chart may be the wrong choice when you need to compare categories to one another, because it can be difficult to distinguish small differences between segments. If you wish to compare values to each other, a [bar chart](/components/charts/bar-chart) may be a more effective pattern. ### Example Pie chart -1. **Pie chart fill:** We recommend fill colors based on the [colors for charts](/charts/colors-for-charts). +1. **Pie chart fill:** We recommend fill colors based on the [colors for charts](/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 9028ec6e48..a199cbfcee 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](/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 [colors for charts](/components/charts/colors-for-charts). diff --git a/packages/documentation-site/patternfly-docs/content/components/charts/tooltip-chart/tooltip-chart.md b/packages/documentation-site/patternfly-docs/content/components/charts/tooltip-chart/tooltip-chart.md index 39be0ac763..81aa77d88e 100644 --- a/packages/documentation-site/patternfly-docs/content/components/charts/tooltip-chart/tooltip-chart.md +++ b/packages/documentation-site/patternfly-docs/content/components/charts/tooltip-chart/tooltip-chart.md @@ -7,7 +7,7 @@ subsection: charts A **tooltip chart** is a chart with tooltips that appear when users hover over items within it. ## Usage -For charts that have more than one data set graphed, a complex chart tooltip can be used to give more detail to a specific point in the multiple data series. This works well for [line](/charts/line-chart), [area](/charts/area-chart), or [stacked](/charts/stack-chart) charts, where data sets may intersect over a period of time. +For charts that have more than one data set graphed, a complex chart tooltip can be used to give more detail to a specific point in the multiple data series. This works well for [line](/components/charts/line-chart), [area](/components/charts/area-chart), or [stacked](/components/charts/stack-chart) charts, where data sets may intersect over a period of time. ## Example On hover, the tooltip shows all the corresponding data points that match a point along the x-axis. Tooltip content could also include any additional information that might be important to the user. diff --git a/packages/documentation-site/patternfly-docs/content/components/data-list/data-list.md b/packages/documentation-site/patternfly-docs/content/components/data-list/data-list.md index e3e58794a2..9ab8993be2 100644 --- a/packages/documentation-site/patternfly-docs/content/components/data-list/data-list.md +++ b/packages/documentation-site/patternfly-docs/content/components/data-list/data-list.md @@ -26,12 +26,12 @@ The elements mentioned below are similar for a data list with compact or default ## Usage -Think of each row in a data list as a container for some formatted content. In PatternFly, data list rows can accept any [layout](/layouts/bullseye) supported by the design system as long as all rows apply the same layout. Here are some common layouts that may be useful in a data list: +Think of each row in a data list as a container for some formatted content. In PatternFly, data list rows can accept any [layout](/foundations-and-styles/layouts/bullseye) supported by the design system as long as all rows apply the same layout. Here are some common layouts that may be useful in a data list: -* **[Grid](/layouts/grid):** Displays content in a responsive grid. -* **[Level](/layouts/level):** Justifies content evenly over the width of the row and vertically aligns items in the center of the row. -* **[Split](/layouts/split):** Distributes content evenly with a main content area in the center. -* **[Flex](/layouts/flex):** Enables more customization control over the alignment and spacing options provided in the other layouts. +* **[Grid](/foundations-and-styles/layouts/grid):** Displays content in a responsive grid. +* **[Level](/foundations-and-styles/layouts/level):** Justifies content evenly over the width of the row and vertically aligns items in the center of the row. +* **[Split](/foundations-and-styles/layouts/split):** Distributes content evenly with a main content area in the center. +* **[Flex](/foundations-and-styles/layouts/flex):** Enables more customization control over the alignment and spacing options provided in the other layouts. PatternFly offers 2 components for displaying large data sets: data lists and [tables](/components/table/design-guidelines). While they satisfy similar use cases, choosing the correct component to use in your design will be dependent on the type of data you need to display. diff --git a/packages/documentation-site/patternfly-docs/content/components/date-picker/date-picker.md b/packages/documentation-site/patternfly-docs/content/components/date-picker/date-picker.md index d9955ff13d..cc4a283b19 100644 --- a/packages/documentation-site/patternfly-docs/content/components/date-picker/date-picker.md +++ b/packages/documentation-site/patternfly-docs/content/components/date-picker/date-picker.md @@ -111,7 +111,7 @@ Some use cases will call for more advanced scheduling options, such as schedulin ### Date format Date formats are product-specific and often depend on user locale. To minimize confusion, choose one date format and keep it consistent. If one date picker displays MM/DD/YYYY, be sure to repeat the same date format throughout your interface. -Learn more about recommended date and time conventions in our [date and time guidelines](/content-design/numerics). +Learn more about recommended date and time conventions in our [date and time guidelines](/content-design/grammar/numerics). ### Placeholder text Always use placeholder text in date fields to provide an example of the accepted date format. Placeholder text will disappear after users begin inputting their own date. diff --git a/packages/documentation-site/patternfly-docs/content/components/empty-state/empty-state.md b/packages/documentation-site/patternfly-docs/content/components/empty-state/empty-state.md index 3e3fce4a1e..9137158d96 100644 --- a/packages/documentation-site/patternfly-docs/content/components/empty-state/empty-state.md +++ b/packages/documentation-site/patternfly-docs/content/components/empty-state/empty-state.md @@ -341,7 +341,7 @@ State what isn't there, and then give the user a next step. Empty states should ### Capitalization and punctuation -Use [sentence case](/content-design/capitalization) in your empty states: Capitalize only the first letter of the first word in the heading, body, buttons, or links. However, be sure to capitalize the first letter in all proper nouns, product names, acronyms, and initialisms, regardless of where they appear in the heading, body, buttons, or links. +Use [sentence case](/content-design/grammar/capitalization) in your empty states: Capitalize only the first letter of the first word in the heading, body, buttons, or links. However, be sure to capitalize the first letter in all proper nouns, product names, acronyms, and initialisms, regardless of where they appear in the heading, body, buttons, or links. Add a period at the end of full sentences in the body, but do not add a period at the end of headings or buttons. diff --git a/packages/documentation-site/patternfly-docs/content/components/expandable-section/expandable-section.md b/packages/documentation-site/patternfly-docs/content/components/expandable-section/expandable-section.md index 70341a359b..e2c996a18b 100644 --- a/packages/documentation-site/patternfly-docs/content/components/expandable-section/expandable-section.md +++ b/packages/documentation-site/patternfly-docs/content/components/expandable-section/expandable-section.md @@ -16,7 +16,7 @@ An expandable section has two main elements. 2. **Toggle text:** Informs the user what will be shown when the component is expanded. ## Usage -Use an expandable section when you want to hide optional or advanced content by default. They are commonly used in forms to reveal plain text or additional form fields. They can also be used to reveal [charts](/charts/about-charts), [cards](/components/card), [data lists](/components/data-list), or [table views](/components/table). Expandable sections can also be used in [alerts](/components/alert) to show additional information. +Use an expandable section when you want to hide optional or advanced content by default. They are commonly used in forms to reveal plain text or additional form fields. They can also be used to reveal [charts](/components/charts/about-charts), [cards](/components/card), [data lists](/components/data-list), or [table views](/components/table). Expandable sections can also be used in [alerts](/components/alert) to show additional information. We recommend using dynamic toggle text for an expandable section, which will update the toggle text based on the state of the expandable section. For example, it may read **Show more** when the toggle is collapsed, and **Show less** when the toggle is open. diff --git a/packages/documentation-site/patternfly-docs/content/components/form/forms.md b/packages/documentation-site/patternfly-docs/content/components/form/forms.md index e722dc3515..cd56238f1e 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/forms.md +++ b/packages/documentation-site/patternfly-docs/content/components/form/forms.md @@ -367,7 +367,7 @@ Forms in a modal should be horizontally centered with the modal background and f Multi-column forms are forms that allow multiple inputs to share a single form line. Single column forms are recommended over multi-column forms since multiple columns can lead to confusion and may not support an accessible experience for all users. -If you choose to create a multi-column form, you may do so using any of the [layouts](/layouts/bullseye) offered in PatternFly including [grid](/layouts/grid) or [flex](/layouts/flex). +If you choose to create a multi-column form, you may do so using any of the [layouts](/foundations-and-styles/layouts/bullseye) offered in PatternFly including [grid](/foundations-and-styles/layouts/grid) or [flex](/foundations-and-styles/layouts/flex). When grouping columns together in a multi-column form, organize them so that field information on the same line relates to one another. Common cases for this input field grouping include: @@ -458,7 +458,7 @@ If a user formats an input incorrectly, avoid unclear error messages like *Inval * *Date format must be MM-DD-YYYY* * *Enter a valid email: email@provider.com* -For more error message guidance, see our [UX writing style guide](/content-design/error-messages). +For more error message guidance, see our [UX writing style guide](/content-design/writing-guides/error-messages). ### Buttons @@ -470,7 +470,7 @@ For more button text guidance, see our [button content guidelines](/components/b ## Accessibility -This section highlights accessibility considerations to keep in mind when creating forms. For more accessibility guidance, see our [PatternFly accessibility guide](/accessibility/about-accessibility). +This section highlights accessibility considerations to keep in mind when creating forms. For more accessibility guidance, see our [PatternFly accessibility guide](/accessibility/overview). ### Form sections Follow these best practices to create accessible form sections: diff --git a/packages/documentation-site/patternfly-docs/content/components/label/label.md b/packages/documentation-site/patternfly-docs/content/components/label/label.md index b0f1c7b49a..bb6805d5cb 100644 --- a/packages/documentation-site/patternfly-docs/content/components/label/label.md +++ b/packages/documentation-site/patternfly-docs/content/components/label/label.md @@ -67,7 +67,7 @@ Labels are typically used in filter and selection use cases to indicate what sel Labels can utilize both our [status](/foundations-and-styles/colors#status-and-state-colors) and [nonstatus](/foundations-and-styles/colors#nonstatus-colors) color palettes. -While you may use other colors for your labels, we recommend using the ones provided as they have been carefully selected to be accessible with the PatternFly library. If you choose to use other colors, be mindful of picking [accessible text color and icon color](/accessibility/testing-your-accessibility) to go with the label background. +While you may use other colors for your labels, we recommend using the ones provided as they have been carefully selected to be accessible with the PatternFly library. If you choose to use other colors, be mindful of picking [accessible text color and icon color](/accessibility/test-your-product) to go with the label background. The colors you should use differs for status and nonstatus labels: diff --git a/packages/documentation-site/patternfly-docs/content/components/modal/modal.md b/packages/documentation-site/patternfly-docs/content/components/modal/modal.md index 23ba823c46..202ca23f7d 100644 --- a/packages/documentation-site/patternfly-docs/content/components/modal/modal.md +++ b/packages/documentation-site/patternfly-docs/content/components/modal/modal.md @@ -182,7 +182,7 @@ Example headline: *Permanently delete database?*
Example buttons: *Delete* and *Cancel*
For more button guidance, see our [button label guidelines](/components/button/design-guidelines#content). -For general content guidance to help write effective modal dialogs, see our [UX writing style guide](/content-design/about-ux-writing). +For general content guidance to help write effective modal dialogs, see our [UX writing style guide](/content-design/overview). ### Icon use in modal dialogs diff --git a/packages/documentation-site/patternfly-docs/content/components/select/select.md b/packages/documentation-site/patternfly-docs/content/components/select/select.md index 2b60b3a026..32876d1ec2 100644 --- a/packages/documentation-site/patternfly-docs/content/components/select/select.md +++ b/packages/documentation-site/patternfly-docs/content/components/select/select.md @@ -79,7 +79,7 @@ If there are no matches for the search term that a user has entered into the typ ![Typeahead menu with no results matching the search term.](./img/typeahead-search-no-results.svg) -Typeahead is available for single and multiple select lists, but is not supported by checkbox select list toggles by default. However, there is an option to add typeahead capability within a menu of items if needed, as seen in the [grouped checkbox input with filtering](/components/menus/select/react#grouped-checkbox-input-with-filtering) example. +Typeahead is available for single and multiple select lists, but is not supported by checkbox select list toggles by default. However, there is an option to add typeahead capability within a menu of items if needed, as seen in the [grouped checkbox input with filtering](/components/menus/select/#grouped-checkbox-input-with-filtering) example. ### Selected item count You can add a number count to a select component, either as a badge in the toggle to indicate the number of selected items, or placed beside a menu item to indicate the number of items that match a certain filter option. diff --git a/packages/documentation-site/patternfly-docs/content/components/text-input/text-input.md b/packages/documentation-site/patternfly-docs/content/components/text-input/text-input.md index aa4293d23a..9849b87297 100644 --- a/packages/documentation-site/patternfly-docs/content/components/text-input/text-input.md +++ b/packages/documentation-site/patternfly-docs/content/components/text-input/text-input.md @@ -19,7 +19,7 @@ import '../components.css'; ## Usage * Be sure to size input fields appropriately to anticipate the longest likely value (if a maximum character length is known). -* When a value is too long to be fully displayed in a text field, use [truncation](/content-design/truncation). +* When a value is too long to be fully displayed in a text field, use [truncation](/content-design/grammar/truncation). * Provide a [text area](/components/forms/text-area) for input anticipated to be longer than a single line. * Pre-populate fields with known values when possible, like a default IP address, for example. diff --git a/packages/documentation-site/patternfly-docs/content/components/timestamp/timestamp.md b/packages/documentation-site/patternfly-docs/content/components/timestamp/timestamp.md index dd12808188..b8c97e4818 100644 --- a/packages/documentation-site/patternfly-docs/content/components/timestamp/timestamp.md +++ b/packages/documentation-site/patternfly-docs/content/components/timestamp/timestamp.md @@ -11,9 +11,9 @@ import '../components.css'; ![Timestamp with tooltip underline](./img/timestamp-elements.svg) -1. **Day:** Spelled out or abbreviated format. [See Numerics guidelines for more information](/content-design/numerics). -2. **Date:** Can be spelled out, abbreviated form, or digit format. [See Numerics guidelines for more information](/content-design/numerics). -3. **Time:** Should be displayed in 12-hour or 24-hour (HH:MM:SS). [See Numerics guidelines for more information](/content-design/numerics). +1. **Day:** Spelled out or abbreviated format. [See Numerics guidelines for more information](/content-design/grammar/numerics). +2. **Date:** Can be spelled out, abbreviated form, or digit format. [See Numerics guidelines for more information](/content-design/grammar/numerics). +3. **Time:** Should be displayed in 12-hour or 24-hour (HH:MM:SS). [See Numerics guidelines for more information](/content-design/grammar/numerics). 4. **UTC/Timezone:** Should always be displayed last, in shorthand form and be in 24-hour format. 5. **Tooltip:** Dotted line displayed if there is tooltip available. @@ -37,7 +37,7 @@ Use a timestamp when: - Displays time in UTC (Universal Coordinated Time). - Should be formatted the same as the timestamp. -See [numerics guidelines](/content-design/numerics) for more information about relative time best practices. +See [numerics guidelines](/content-design/grammar/numerics) for more information about relative time best practices. ## Variations ### 12-hour format diff --git a/packages/documentation-site/patternfly-docs/content/components/tree-view/tree-view.md b/packages/documentation-site/patternfly-docs/content/components/tree-view/tree-view.md index e1c9683275..a8d53f2e2a 100644 --- a/packages/documentation-site/patternfly-docs/content/components/tree-view/tree-view.md +++ b/packages/documentation-site/patternfly-docs/content/components/tree-view/tree-view.md @@ -36,7 +36,7 @@ A tree view can be used for: ### When not to use * You select 1 item from a small set. Instead, use [simple list](/components/simple-list), [select lists](/components/menus/select), [radio buttons](/components/forms/radio), [checkboxes](/components/forms/checkbox), or a [dropdown](/components/menus/dropdown). * You need to see an overview of a large amount of data. -* You need to compare 2 large sets of data. Use [charts](/charts/about-charts) for a better view. +* You need to compare 2 large sets of data. Use [charts](/components/charts/about-charts) for a better view. * The hierarchy is too deep and includes hundreds of items. Instead, use a [drill-down menu](/components/menus/menu#with-drilldown). ### When to use accordions vs. tree tables vs. tree views diff --git a/packages/documentation-site/patternfly-docs/content/content-design/grammar/units-and-symbols.md b/packages/documentation-site/patternfly-docs/content/content-design/grammar/units-and-symbols.md index 6ba2957ef9..000e37a505 100644 --- a/packages/documentation-site/patternfly-docs/content/content-design/grammar/units-and-symbols.md +++ b/packages/documentation-site/patternfly-docs/content/content-design/grammar/units-and-symbols.md @@ -30,7 +30,7 @@ When displaying quantitative values for measurements in your UI, use the [Intern ## Currency -Wherever possible, display currency in three-letter code according to [ISO Standard 4217](https://www.iso.org/iso-4217-currency-codes.html). See our [numerics](/content-design/numerics#numbers-and-currency) guidelines for more information about writing currency. +Wherever possible, display currency in three-letter code according to [ISO Standard 4217](https://www.iso.org/iso-4217-currency-codes.html). See our [numerics](/content-design/grammar/numerics#numbers-and-currency) guidelines for more information about writing currency. ## Data bandwidth diff --git a/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/cli-guidelines.md b/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/cli-guidelines.md index 4d003c7d9e..0de98b9d99 100644 --- a/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/cli-guidelines.md +++ b/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/cli-guidelines.md @@ -12,7 +12,7 @@ Our CLI handbook offers best practices for designing consistent, usable, and dev ## Accessibility considerations -While CLIs don't have visual UI elements, many [accessibility principles](/accessibility/about-accessibility/) still apply. +While CLIs don't have visual UI elements, many [accessibility principles](/accessibility/overview) still apply. Accessibility matters in CLI design just as much as it does in graphical interfaces. Clear, inclusive output ensures all users can successfully interact with the tool—including those using screen readers or alternative input devices. diff --git a/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/cli-writing.md b/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/cli-writing.md index aa9920bd9d..85fae1e9e6 100644 --- a/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/cli-writing.md +++ b/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/cli-writing.md @@ -34,7 +34,7 @@ Next steps: When errors occur, explain what happened, why, and how to fix it. -Expanding on our [UI error writing guidelines](/content-design/error-messages), CLI errors should: +Expanding on our [UI error writing guidelines](/content-design/writing-guides/error-messages), CLI errors should: - Use plain language, avoiding internal jargon. - Offer suggestions and actionable next steps. - Conclude with the most important information. This is the opposite of content design for products with GUIs. diff --git a/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/error-messages.md b/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/error-messages.md index 7f29bd032f..c7ed8801ff 100644 --- a/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/error-messages.md +++ b/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/error-messages.md @@ -100,7 +100,7 @@ When providing users with a resolution, start the sentence with their goal ("the A **404 page** is an error page that a user lands on when the content they're trying to view either doesn’t exist or can’t be found. 404 pages are named after the type of error they communicate: “Error 404: Not found.” -Write 404 pages with [error message best practices](/content-design/error-messages) in mind: Explain what a 404 error is, define how users can proceed, and provide the tools they need to get there. +Write 404 pages with [error message best practices](/content-design/writing-guides/error-messages) in mind: Explain what a 404 error is, define how users can proceed, and provide the tools they need to get there. Effective 404 pages combine several elements to regroup, redirect, and empower lost users to reach their desired destination or find a new one. diff --git a/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/patternfly-design-guidelines.md b/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/patternfly-design-guidelines.md index 01dd4a4af5..3e6066b9aa 100644 --- a/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/patternfly-design-guidelines.md +++ b/packages/documentation-site/patternfly-docs/content/content-design/writing-guides/patternfly-design-guidelines.md @@ -63,7 +63,7 @@ The following best practices should inform the way that you format the content i ### Capitalization -Our [capitalization style guidelines](/content-design/capitalization/) outline best practices for capitalization across PatternFly. +Our [capitalization style guidelines](/content-design/grammar/capitalization/) outline best practices for capitalization across PatternFly. Always write headings in sentence case. Write component names in lowercase. @@ -121,7 +121,7 @@ When writing design guidelines, use: - Second-person point of view ("you"). - Active voice, unless you're using passive voice for emphasis. - Direct language and sentence structure. -- Full words to introduce examples, instead of their abbreviations ("for example" instead of "e.g."), as seen on our [terms list](/content-design/terminology/). +- Full words to introduce examples, instead of their abbreviations ("for example" instead of "e.g."), as seen on our [terms list](/content-design/grammar/terminology/). - Descriptive language instead of directional language (up, down, left, right) to refer to elements in your document. - Descriptive hyperlinks (not "click here"). diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-tokens/design.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-tokens/design.md index 649400b48c..d861161097 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-tokens/design.md +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-tokens/design.md @@ -1,7 +1,8 @@ --- -id: Design with tokens +id: Design section: foundations-and-styles subsection: design-tokens +sortvalue: 5 --- Tokens are only available as part of PatternFly 6. In order to make use of our token system, you will need to install the PatternFly 6 design kit [using our onboarding guide](/get-started/design) and make sure that your product is [upgraded to PatternFly 6](/releases/upgrade-guide). @@ -10,7 +11,7 @@ Tokens are only available as part of PatternFly 6. In order to make use of our t Our tokens are set up as [variables](https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma) and [styles](https://help.figma.com/hc/en-us/articles/360039238753-Styles-in-Figma) in Figma, within our [Design Tokens and Styles Library](https://www.figma.com/@PatternFly). They define all of the design elements used in PatternFly, including color, font size, spacing, dimensions, and more. -Figma tokens align with the segments in [our token variable structure](/foundations-and-styles/design-tokens/about-tokens#token-names), but they use a forward slash (/) in place of a double hyphen (--). +Figma tokens align with the segments in [our token variable structure](/foundations-and-styles/design-tokens/overview#token-names), but they use a forward slash (/) in place of a double hyphen (--). ![Table of brand color tokens.](./img/token-example-brand.png) diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-tokens/develop.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-tokens/develop.md index 7ce75ae5b0..a156c8aa51 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-tokens/develop.md +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-tokens/develop.md @@ -1,7 +1,8 @@ --- -id: Develop with tokens +id: Develop section: foundations-and-styles subsection: design-tokens +sortvalue: 10 --- ## Using tokens in code @@ -32,7 +33,7 @@ As you migrate and [select tokens](#selecting-tokens), refer to these recommenda 1. **Don’t start with the old value and work backwards.** For example, there are many things that are “blue” but it’s important to choose the right token for your purpose. In addition, PatternFly 6 has a completely new look—so what used to be “blue” might not be anymore! -1. **Understand the naming layers for semantic tokens.** Remember [the structure of our token names:](/foundations-and-styles/design-tokens/about-tokens#token-names) +1. **Understand the naming layers for semantic tokens.** Remember [the structure of our token names:](/foundations-and-styles/design-tokens/overview#token-names) `--pf-t--[scope]--[component]--[property]--[concept]--[variant]--[state]` For each segment, consider the following: diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/bullseye.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/bullseye.md index a021efb514..1dad5709c2 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/bullseye.md +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/bullseye.md @@ -18,4 +18,4 @@ A bullseye layout can only contain one section of content. As an example, the bullseye layout is commonly used with the [modal component](/components/modal) to surface important information and place content on top of another layout. -If you need to center more than one section of content on a page, you should choose a different [PatternFly layout](/layouts/about-layouts). \ No newline at end of file +If you need to center more than one section of content on a page, you should choose a different [PatternFly layout](/foundations-and-styles/layouts/overview). \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/flex.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/flex.md index 85d9e61c74..4fcba75d42 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/flex.md +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/flex.md @@ -26,7 +26,7 @@ Use the flex layout with content heavy UIs and when it is necessary to wrap UI e ### When to use the flex layout vs the grid layout -Use the flex layout when a rigid grid is not necessary or wanted. If you need a more structured layout, consider using a the [grid layout](/layouts/grid). +Use the flex layout when a rigid grid is not necessary or wanted. If you need a more structured layout, consider using a the [grid layout](/foundations-and-styles/layouts/grid). ## Variations diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/split.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/split.md index 83b8f64de5..a09d17bcd7 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/split.md +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/split.md @@ -24,7 +24,7 @@ You can specify which split item fills the remaining horizontal space in the lay ### Items that wrap -You can wrap split items to ensure that they fit among other content as the screen is resized. To implement wrappable items, refer to the related [React](/layouts/split#wrappable) and [HTML](/layouts/split/html#wrappable) examples. +You can wrap split items to ensure that they fit among other content as the screen is resized. To implement wrappable items, refer to the related [React](/foundations-and-styles/layouts/split#wrappable) and [HTML](/foundations-and-styles/layouts/split/html#wrappable) examples. ### Gutters around items diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/stack.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/stack.md index e7c564fa8d..1b863f297a 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/stack.md +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/layouts/stack.md @@ -26,4 +26,4 @@ You can specify which stack items fill the remaining vertical space in the layou ### Gutters around items -To adjust spacing between items, you can apply gutters, as shown in the related [React](/layouts/stack#with-gutter) and [HTML](/layouts/stack/html#with-gutter) examples. \ No newline at end of file +To adjust spacing between items, you can apply gutters, as shown in the related [React](/foundations-and-styles/layouts/stack#with-gutter) and [HTML](/foundations-and-styles/layouts/stack/html#with-gutter) examples. \ No newline at end of file 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 96a0b717c2..07a31803b7 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 @@ -10,7 +10,7 @@ import { ColorFamily } from './ColorFamily'; # PatternFly's palette -Our color palettes align with Red Hat's brand colors and are designed to reinforce content and support effective communication across different UI needs. Colors are applied to PatternFly elements using [semantic design tokens.](/foundations-and-styles/design-tokens/about-tokens) This guide offers guidance for color use in some of the most common scenarios, but it does not cover all tokens. Additional color usage information is included in our tokens documentation. +Our color palettes align with Red Hat's brand colors and are designed to reinforce content and support effective communication across different UI needs. Colors are applied to PatternFly elements using [semantic design tokens.](/foundations-and-styles/design-tokens/overview) This guide offers guidance for color use in some of the most common scenarios, but it does not cover all tokens. Additional color usage information is included in our tokens documentation.
diff --git a/packages/documentation-site/patternfly-docs/content/patterns/actions/actions.md b/packages/documentation-site/patternfly-docs/content/patterns/actions/actions.md index 085635d1b6..b8ea027e5c 100644 --- a/packages/documentation-site/patternfly-docs/content/patterns/actions/actions.md +++ b/packages/documentation-site/patternfly-docs/content/patterns/actions/actions.md @@ -20,7 +20,7 @@ The following image of a card view demonstrates some of the more common uses of Use actions to make it clear and convenient for users to complete tasks in a UI. When applied intentionally, actions can make the UI more efficient and effective. -When labeling or referring to actions in your UI, make sure that you adhere to our [terminology guidelines](/content-design/terminology) and align any icons you use with the usage behavior outlined in our [icon design foundations.](/foundations-and-styles/iconography#all-icons) +When labeling or referring to actions in your UI, make sure that you adhere to our [terminology guidelines](/content-design/grammar/terminology) and align any icons you use with the usage behavior outlined in our [icon design foundations.](/foundations-and-styles/iconography#all-icons) ### Deletion vs removal Make sure that users understand the purpose and consequences of deleting or removing data objects, items, or similar resources via the UI. Deleting is different from removing. diff --git a/packages/documentation-site/patternfly-docs/content/patterns/dashboard/dashboard.md b/packages/documentation-site/patternfly-docs/content/patterns/dashboard/dashboard.md index 58e21f7799..ee6b62c6cb 100644 --- a/packages/documentation-site/patternfly-docs/content/patterns/dashboard/dashboard.md +++ b/packages/documentation-site/patternfly-docs/content/patterns/dashboard/dashboard.md @@ -41,7 +41,7 @@ Trend cards are used to display the change in some metric over time. It should b 2. **Filter (optional):** Place a filter in the upper right corner of the card when you want to filter data in the chart. Most often this will be used to change the time range of the chart, e.g. “Last 24 hours,” “Last 7 days,” “Last 30 days,” etc. -3. **Trend chart:** [Sparkline charts](/charts/sparkline-chart) are most often used to display trend data. +3. **Trend chart:** [Sparkline charts](/components/charts/sparkline-chart) are most often used to display trend data. 4. **Actions (optional):** If your card is to include actions include them as [link-style buttons](/components/button#variations) in the footer of your card. @@ -59,7 +59,7 @@ A utilization card reports the current value of a single metric or multiple metr 2. **Filter (optional):** Place a filter in the upper right corner of the card when you want to filter data in the chart. -3. **Utilization chart:** [Bar charts](/charts/bar-chart) or [donut charts](/charts/donut-utilization-chart) are commonly used to report utilization. +3. **Utilization chart:** [Bar charts](/components/charts/bar-chart) or [donut charts](/components/charts/donut-utilization-chart) are commonly used to report utilization. 4. **Actions (optional):** If your card includes actions or links to another page, add them as [link-style buttons](/components/button#variations) in the footer. diff --git a/packages/documentation-site/patternfly-docs/content/patterns/filters/filters.md b/packages/documentation-site/patternfly-docs/content/patterns/filters/filters.md index 6b99e63925..22b9eff439 100644 --- a/packages/documentation-site/patternfly-docs/content/patterns/filters/filters.md +++ b/packages/documentation-site/patternfly-docs/content/patterns/filters/filters.md @@ -143,7 +143,7 @@ Since you can only search by 1 value at a time, the value will already be shown
### Single select -A single select provides the user with a fixed set of values from which they can only select 1 value. This filter type uses the [single select component](/components/menus/select/react#single). +A single select provides the user with a fixed set of values from which they can only select 1 value. This filter type uses the [single select component](/components/menus/select/#single). If the single select filter is the only filter in the toolbar, it should have an “All options” menu item that's selected by default, acting as an equivalent of no filter selected. diff --git a/packages/documentation-site/patternfly-docs/content/patterns/primary-detail/primary-detail.md b/packages/documentation-site/patternfly-docs/content/patterns/primary-detail/primary-detail.md index 73ce4e7619..8255d12c06 100644 --- a/packages/documentation-site/patternfly-docs/content/patterns/primary-detail/primary-detail.md +++ b/packages/documentation-site/patternfly-docs/content/patterns/primary-detail/primary-detail.md @@ -26,7 +26,7 @@ When the page content has a white background, the drawer can be placed on the sa **Common detail components:** - Markdown text form or [code editor](/components/code-editor) - [Description list](/components/description-list) -- [Charts or graphs](/charts/about-charts) +- [Charts or graphs](/components/charts/about-charts) - [Input forms](/components/input-group) - [Content](/components/content) diff --git a/packages/documentation-site/patternfly-docs/content/patterns/status-and-severity/status-and-severity.md b/packages/documentation-site/patternfly-docs/content/patterns/status-and-severity/status-and-severity.md index cb9c185cd4..1004719a13 100644 --- a/packages/documentation-site/patternfly-docs/content/patterns/status-and-severity/status-and-severity.md +++ b/packages/documentation-site/patternfly-docs/content/patterns/status-and-severity/status-and-severity.md @@ -32,7 +32,7 @@ Though both can be used to warn users of issues, severity icons and status icons ## Content considerations -Icons are often most meaningful when paired with text. If you're not certain that all users will recognize an icon on its own, add a descriptive text label or a tooltip. For guidance related to icon tooltips, refer to our [tooltips writing guide.](/content-design/tooltips) +Icons are often most meaningful when paired with text. If you're not certain that all users will recognize an icon on its own, add a descriptive text label or a tooltip. For guidance related to icon tooltips, refer to our [tooltips writing guide.](/content-design/writing-guides/tooltips) ## Status icons diff --git a/packages/documentation-site/patternfly-docs/content/releases/release-highlights.md b/packages/documentation-site/patternfly-docs/content/releases/release-highlights.md index 2bb187e41b..0b84475f72 100644 --- a/packages/documentation-site/patternfly-docs/content/releases/release-highlights.md +++ b/packages/documentation-site/patternfly-docs/content/releases/release-highlights.md @@ -71,10 +71,10 @@ We’ve updated our documentation and examples with the following recommendation ### Community-driven ChatBot enhancements Based on feedback from usability workshops and our community, we've made significant enhancements to the ChatBot extension to improve usability and address user needs: -- **Clearer navigation:** To provide users with more context, the [chat history drawer](/AI/chatbot/ui#drawer-with-search-and-new-chat-button) now includes a clearer title, an icon, and a prominent "new chat" button. -- **Flexible layouts:** To support different presentation preferences, we've introduced [compact component styles](/AI/chatbot/overview/demo#compact-chatbot) and a new [demo for swapping between display modes](/AI/chatbot/overview/demo#display-mode-switcher). -- **Modern features:** To give users more control and flexibility, we added support for [message dividers](/AI/chatbot/messages#message-dividers), [editing messages](/AI/chatbot/messages#user-messages), [pinning chat history items](/AI/chatbot/ui#pinning-conversations), [previewing images](/AI/chatbot/messages#image-preview) and [downloading chat transcripts](/AI/chatbot/overview/design-guidelines#downloading-chat-transcripts). -- **Advanced interactions:** To support more complex agentic interactions, we've added new components to [display an AI's reasoning process (deep thinking)](/AI/chatbot/messages#messages-with-deep-thinking), as well as [managing tool calls](/AI/chatbot/messages#messages-with-tool-calls) and sharing [tool responses](/AI/chatbot/messages#messages-with-tool-responses). +- **Clearer navigation:** To provide users with more context, the [chat history drawer](/extensions/chatbot/ui#drawer-with-search-and-new-chat-button) now includes a clearer title, an icon, and a prominent "new chat" button. +- **Flexible layouts:** To support different presentation preferences, we've introduced [compact component styles](/extensions/chatbot/overview/demo#compact-chatbot) and a new [demo for swapping between display modes](/extensions/chatbot/overview/demo#display-mode-switcher). +- **Modern features:** To give users more control and flexibility, we added support for [message dividers](/extensions/chatbot/messages#message-dividers), [editing messages](/extensions/chatbot/messages#user-messages), [pinning chat history items](/extensions/chatbot/ui#pinning-conversations), [previewing images](/extensions/chatbot/messages#image-preview) and [downloading chat transcripts](/extensions/chatbot/overview/design-guidelines#downloading-chat-transcripts). +- **Advanced interactions:** To support more complex agentic interactions, we've added new components to [display an AI's reasoning process (deep thinking)](/extensions/chatbot/messages#messages-with-deep-thinking), as well as [managing tool calls](/extensions/chatbot/messages#messages-with-tool-calls) and sharing [tool responses](/extensions/chatbot/messages#messages-with-tool-responses). ### Resizable table columns Based on user feedback, we've added resizable table columns within the [@patternfly/react-data-view extension](https://www.npmjs.com/package/@patternfly/react-data-view). This update allows users to click and drag column dividers to adjust widths, making it easier to view and work with data in dense tables. @@ -85,7 +85,7 @@ To see this feature in action, [refer to our resizable columns table demo](/exte To help you safely and effectively integrate AI into your development process, we’ve released two new sets of guidelines: - **AI-generated code contribution:** To ensure legal compliance and quality, we've established new guidelines for contributing AI-generated code. You can find them [within GitHub](https://github.com/patternfly/.github/blob/main/CONTRIBUTING.md). -- **AI-assisted code migrations:** We've also published [new documentation on using AI to streamline code migrations](/AI/ai-assisted-code-migration/). This guide offers strategies for using AI to make it easier and faster to migrate your project to PatternFly React from other frameworks. +- **AI-assisted code migrations:** We've also published [new documentation on using AI to streamline code migrations](/ai/ai-assisted-code-migration/). This guide offers strategies for using AI to make it easier and faster to migrate your project to PatternFly React from other frameworks. ### What's next? For the Q4 2025 release, we’ll be focused on: @@ -297,19 +297,19 @@ The following animations are unique to each icon and don't support any custom ic ### PatternFly AI -We updated our high-level [AI principles and guidelines](/AI/principles-and-guidelines) to expand guidance and improve the usability of this resource. We integrated community feedback and research to include new patterns and recommendations that have emerged from the increased use of AI features in products. As the design and implementation of AI features continue to evolve, so will this guiding resource. +We updated our high-level [AI principles and guidelines](/ai/overview) to expand guidance and improve the usability of this resource. We integrated community feedback and research to include new patterns and recommendations that have emerged from the increased use of AI features in products. As the design and implementation of AI features continue to evolve, so will this guiding resource. #### ChatBot -We expanded our ChatBot extension with improvements identified in a recent usability study, including [editable messages](/AI/chatbot/messages#user-messages) and [compact styles](/AI/chatbot/overview/demo#compact-chatbot). We also added other requested features, such as [auto-scrolling for messages](/AI/chatbot/messages/demo#message-auto-scrolling) (a community contribution!), [empty and error states for the chat history drawer](/AI/chatbot/ui#drawer-with-search-and-new-chat-button), and [expandable code blocks](/AI/chatbot/messages#user-messages)—to name a few. +We expanded our ChatBot extension with improvements identified in a recent usability study, including [editable messages](/extensions/chatbot/messages#user-messages) and [compact styles](/extensions/chatbot/overview/demo#compact-chatbot). We also added other requested features, such as [auto-scrolling for messages](/extensions/chatbot/messages/demo#message-auto-scrolling) (a community contribution!), [empty and error states for the chat history drawer](/extensions/chatbot/ui#drawer-with-search-and-new-chat-button), and [expandable code blocks](/extensions/chatbot/messages#user-messages)—to name a few. -On the documentation side, there's a new ["Customizing messages" guide](/AI/chatbot/customizing-messages) that provides guidance for using rehype plugins for advanced HTML customization. +On the documentation side, there's a new ["Customizing messages" guide](/extensions/chatbot/customizing-messages) that provides guidance for using rehype plugins for advanced HTML customization. We also fixed reported bugs, which require no updates on your end. ### CLI experience guidelines -With the help of a community contribution, we now have [a CLI handbook](/developer-guides/cli-handbook) that offers guidance for designing command-line interface experiences. This resource outlines unique accessibility considerations for CLIs, as well as writing guidelines for crafting well-designed messages, documentation, and interactive CLI experiences. +With the help of a community contribution, we now have [a CLI handbook](/content-design/writing-guides/cli-handbook) that offers guidance for designing command-line interface experiences. This resource outlines unique accessibility considerations for CLIs, as well as writing guidelines for crafting well-designed messages, documentation, and interactive CLI experiences. ### Motion guidelines @@ -385,16 +385,16 @@ We’ve made significant progress towards React 19 support in PatternFly, which ### PatternFly AI -In the world of PatternFly AI, we've continued our focus on expanding our ChatBot extension. As more Flyers have used ChatBot, we've gained insight into the types of new features that would have the most impact. To make progress on growing ChatBot needs, this release adds *many* new features, including [an inline drawer display mode](https://patternfly-org-pr-4493-site.surge.sh/AI/chatbot/overview/demo/#inline-drawer-chatbot), the ability for users to give [message feedback](https://patternfly-org-pr-4493-site.surge.sh/AI/chatbot/messages#message-feedback), [support for quick starts](https://patternfly-org-pr-4493-site.surge.sh/AI/chatbot/messages#messages-with-quick-start-tiles), additional content types for [messages](/AI/chatbot/messages#bot-messages), and much more. +In the world of PatternFly AI, we've continued our focus on expanding our ChatBot extension. As more Flyers have used ChatBot, we've gained insight into the types of new features that would have the most impact. To make progress on growing ChatBot needs, this release adds *many* new features, including [an inline drawer display mode](https://patternfly-org-pr-4493-site.surge.sh/extensions/chatbot/overview/demo/#inline-drawer-chatbot), the ability for users to give [message feedback](https://patternfly-org-pr-4493-site.surge.sh/extensions/chatbot/messages#message-feedback), [support for quick starts](https://patternfly-org-pr-4493-site.surge.sh/extensions/chatbot/messages#messages-with-quick-start-tiles), additional content types for [messages](/extensions/chatbot/messages#bot-messages), and much more. To see a complete list of new ChatBot features, [view the changelog](https://github.com/patternfly/chatbot/releases/tag/v2.2.0). Along with these new features, we've updated our documentation: -- [The ChatBot design guidelines](/AI/chatbot/overview/design-guidelines) have been updated to reflect new features, expand on previous guidance, and add higher-level patterns for ChatBots usage in products. -- New [ChatBot analytics documentation](/AI/chatbot/analytics) is also now available, which provides general guidance on the implementation of analytics tracking. +- [The ChatBot design guidelines](/extensions/chatbot/overview/design-guidelines) have been updated to reflect new features, expand on previous guidance, and add higher-level patterns for ChatBots usage in products. +- New [ChatBot analytics documentation](/extensions/chatbot/analytics) is also now available, which provides general guidance on the implementation of analytics tracking. ### Expanded chart library -PatternFly has historically provided a charting solution using the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library. With this release, PatternFly is also now delivering 2 charts based on the [Apache ECharts](https://echarts.apache.org/) library, including [a line chart](/charts/line-chart) and [a Sankey chart](/charts/sankey-chart). +PatternFly has historically provided a charting solution using the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library. With this release, PatternFly is also now delivering 2 charts based on the [Apache ECharts](https://echarts.apache.org/) library, including [a line chart](/components/charts/line-chart) and [a Sankey chart](/components/charts/sankey-chart). Additionally, EChart is now listed as a peer dependency for PatternFly. To use these new chart solutions, add 'echart' to your project dependencies and follow PatternFly's documentation to build out your charts. @@ -490,7 +490,7 @@ The following fix could require manual updates depending on how you handle break - We fixed an issue on PatternFly.org that prevented proper page loading when navigating to new pages via in-content links. -- We updated [the PatternFly.org accessibility scorecard](/accessibility/accessibility-scorecard#patternfly.org-accessibility-scorecard) and will begin to resolve accessibility violations that were identified. +- We updated [the PatternFly.org accessibility scorecard](/accessibility/product-scorecard#patternfly.org-accessibility-scorecard) and will begin to resolve accessibility violations that were identified. ### Content updates @@ -499,9 +499,9 @@ The following fix could require manual updates depending on how you handle break - We updated and added "draggable" examples to [dual list selector](/components/dual-list-selector#draggable) and [data list](/components/data-list#draggable). - We updated our ChatBot documentation: - We renamed the extension to "ChatBot", to better brand our offering and help distinguish it from other general "chatbot" features. - - We combined and organized our documentation into a few cohesive pages: ["Overview"](/AI/chatbot/overview), ["UI"](/AI/chatbot/ui), and ["Messages"](/AI/chatbot/messages). Note that our documentation structure could continue to change as our extension grows. We will continue to share updates when changes occur. - - We moved our [basic and embedded ChatBot demos](/AI/chatbot/overview/demo) to the "Overview" page for better visibility. - - We added initial [ChatBot design guidelines](/AI/chatbot/overview/design-guidelines), which can also be found on the "Overview" page. + - We combined and organized our documentation into a few cohesive pages: ["Overview"](/extensions/chatbot/overview), ["UI"](/extensions/chatbot/ui), and ["Messages"](/extensions/chatbot/messages). Note that our documentation structure could continue to change as our extension grows. We will continue to share updates when changes occur. + - We moved our [basic and embedded ChatBot demos](/extensions/chatbot/overview/demo) to the "Overview" page for better visibility. + - We added initial [ChatBot design guidelines](/extensions/chatbot/overview/design-guidelines), which can also be found on the "Overview" page. - We added documentation for new features, as described in the following section. ### Extension updates @@ -513,19 +513,19 @@ We've continued to evolve our new ChatBot: - We removed the third-party `AutoTextArea` in the message bar and replaced it with our own custom solution. - We renamed the `toolTipLabel` prop to `tooltipLabel`. - We added support for new features, including: - - A ["skip to chatbot" button](/AI/chatbot/ui#skip-to-content). - - New features in [ChatBot messages](/AI/chatbot/messages#messages) and the message bar: + - A ["skip to chatbot" button](/extensions/chatbot/ui#skip-to-content). + - New features in [ChatBot messages](/extensions/chatbot/messages#messages) and the message bar: - Truncation of long bot and user names. - More complex list formats. - - [Quick response buttons](/AI/chatbot/messages#messages-with-quick-responses). - - [Multiple file attachments](/AI/chatbot/messages#messages-with-attachments). - - A [stop streaming button](/AI/chatbot/ui#message-bar-with-stop-button) that will pause the streaming of a ChatBot message. - - Additional customization options for [welcome messages](/AI/chatbot/ui#welcome-message), [message avatars](/AI/chatbot/messages#messages), [message actions](/AI/chatbot/messages#custom-messages-actions), [modal](/AI/chatbot/ui#modal), [toggle shape](/AI/chatbot/ui#custom-toggle-shape). + - [Quick response buttons](/extensions/chatbot/messages#messages-with-quick-responses). + - [Multiple file attachments](/extensions/chatbot/messages#messages-with-attachments). + - A [stop streaming button](/extensions/chatbot/ui#message-bar-with-stop-button) that will pause the streaming of a ChatBot message. + - Additional customization options for [welcome messages](/extensions/chatbot/ui#welcome-message), [message avatars](/extensions/chatbot/messages#messages), [message actions](/extensions/chatbot/messages#custom-messages-actions), [modal](/extensions/chatbot/ui#modal), [toggle shape](/extensions/chatbot/ui#custom-toggle-shape). - A variety of styling updates to shadows, sizing, and positioning. #### Component groups -- We added customization support to [error state](/component-groups/error-communication/error-state) via PatternFly empty state props, including a custom icon and title heading level. +- We added customization support to [error state](/extensions/component-groups/error-state) via PatternFly empty state props, including a custom icon and title heading level. @@ -562,16 +562,16 @@ The official release of PatternFly 6 is here! It contains all of the previous fe We're excited to introduce PatternFly AI: our new effort to support and integrate AI into our design system. We've added guidance and resources, contained within a new section of our website: -- [About PatternFly AI](/AI/about-ai) -- [AI guidelines](/AI/ai-guidelines) -- [Chatbot](/AI/chatbot/about-chatbot) -- [Conversation design](/AI/conversation-design) +- [About PatternFly AI](/ai/overview) +- [AI guidelines](/ai/overview) +- [Chatbot](/extensions/chatbot/overview) +- [Conversation design](/ai/conversation-design) As with all things AI currently, this area will continue to grow and mature with time. ### Component groups restructuring -We made many updates to our [component groups extension](/component-groups/about-component-groups) to improve accuracy, usability, and alignment with PatternFly 6. We've moved its website section to our top-level navigation for better visibility, and also to support necessary sub-navigation. We've conceptually grouped the components into functional categories. Additionally, we renamed some of the components to be more accurate. +We made many updates to our [component groups extension](/extensions/component-groups/overview) to improve accuracy, usability, and alignment with PatternFly 6. We've moved its website section to our top-level navigation for better visibility, and also to support necessary sub-navigation. We've conceptually grouped the components into functional categories. Additionally, we renamed some of the components to be more accurate. Our updated documentation includes: @@ -630,7 +630,7 @@ In addition to the previously mentioned documentation updates, we've made change #### Design guidelines - Added a new [status and severity pattern](/patterns/status-and-severity), which provides guidance for using our new severity icons. - Updated our [quick starts extension](/extensions/quick-starts) with more content guidance. -- Documented our tabular number modifier `.pf-v6-m-tabular-nums` in [typography](/foundations-and-styles/typography), [numerics](/content-design/numerics), and [table](/components/table/design-guidelines). +- Documented our tabular number modifier `.pf-v6-m-tabular-nums` in [typography](/foundations-and-styles/typography), [numerics](/content-design/grammar/numerics), and [table](/components/table/design-guidelines). - Added guidance for editorial styling to our [content component](/components/content) (formerly called text content). - We've started updating images across our design guidelines to represent PatternFly 6 styling. @@ -662,8 +662,8 @@ We created a framework for micro animation CSS tokens, which will be used to ena We made more improvements to our website docs, to ensure that they're accurate and inline with our new token system. A variety of pages and sections were updated, including: - All tokens pages: - - [About tokens](/foundations-and-styles/design-tokens/about-tokens) - - [All design tokens](/foundations-and-styles/design-tokens/all-patternfly-tokens) + - [About tokens](/foundations-and-styles/design-tokens/overview) + - [All design tokens](/foundations-and-styles/design-tokens/all-design-tokens) - [Develop with tokens](/foundations-and-styles/design-tokens/develop) - [Design with tokens](/foundations-and-styles/design-tokens/design) - **Note:*- Any @patternfly/react-tokens referencing global variables will need to be updated, since global variables have been replaced with tokens. Following our [token migration instructions](/foundations-and-styles/design-tokens/develop#migrate-to-tokens) will help you determine the correct token to use. @@ -749,7 +749,7 @@ All of our components have a new look to match. As you use the alpha website, ta ### Design tokens -In order to support PatternFly 6, and any future visual theming capabilities, we have implemented a design token system for PatternFly. For more details and instructions on how to use tokens, you can refer to our new [design token documentation](/foundations-and-styles/design-tokens/about-tokens). +In order to support PatternFly 6, and any future visual theming capabilities, we have implemented a design token system for PatternFly. For more details and instructions on how to use tokens, you can refer to our new [design token documentation](/foundations-and-styles/design-tokens/overview). Our tokens cover both dark and light themes, and make it easier to support both in your product. We also updated our [dark theme handbook](/foundations-and-styles/theming/dark-theme-handbook) to align with our tokens. diff --git a/packages/documentation-site/patternfly-docs/content/releases/upgrade-guide.md b/packages/documentation-site/patternfly-docs/content/releases/upgrade-guide.md index 118fbfc34f..54ed5e7c53 100644 --- a/packages/documentation-site/patternfly-docs/content/releases/upgrade-guide.md +++ b/packages/documentation-site/patternfly-docs/content/releases/upgrade-guide.md @@ -154,7 +154,7 @@ This codemod automatically identifies PatternFly 5 CSS variables that need to be ### 4. Update any pixel-based logic for breakpoints -PatternFly 6 uses rem units for global breakpoint [design tokens](/foundations-and-styles/design-tokens/all-tokens), rather than pixels. +PatternFly 6 uses rem units for global breakpoint [design tokens](/foundations-and-styles/design-tokens/all-design-tokens), rather than pixels. If you have previously implemented any breakpoint logic based on a pixel value, you will need to account for the fact that PatternFly 6 breakpoint tokens use rems. To find the rem equivalent, divide your pixel value by 16 or refer to this table: diff --git a/packages/documentation-site/patternfly-docs/content/components/landing-page/components-data.json b/packages/documentation-site/patternfly-docs/pages/landing-pages/components/components-data.json similarity index 100% rename from packages/documentation-site/patternfly-docs/content/components/landing-page/components-data.json rename to packages/documentation-site/patternfly-docs/pages/landing-pages/components/components-data.json diff --git a/packages/documentation-site/patternfly-docs/content/components/landing-page/view-all-components.md b/packages/documentation-site/patternfly-docs/pages/landing-pages/components/view-all-components.md similarity index 100% rename from packages/documentation-site/patternfly-docs/content/components/landing-page/view-all-components.md rename to packages/documentation-site/patternfly-docs/pages/landing-pages/components/view-all-components.md diff --git a/packages/documentation-site/patternfly-docs/content/extensions/landing-page/extensions-data.json b/packages/documentation-site/patternfly-docs/pages/landing-pages/extensions/extensions-data.json similarity index 100% rename from packages/documentation-site/patternfly-docs/content/extensions/landing-page/extensions-data.json rename to packages/documentation-site/patternfly-docs/pages/landing-pages/extensions/extensions-data.json diff --git a/packages/documentation-site/patternfly-docs/content/extensions/landing-page/extensions.md b/packages/documentation-site/patternfly-docs/pages/landing-pages/extensions/extensions.md similarity index 100% rename from packages/documentation-site/patternfly-docs/content/extensions/landing-page/extensions.md rename to packages/documentation-site/patternfly-docs/pages/landing-pages/extensions/extensions.md diff --git a/packages/documentation-site/patternfly-docs/pages/landing-pages/layouts/layouts.md b/packages/documentation-site/patternfly-docs/pages/landing-pages/layouts/layouts.md deleted file mode 100644 index 39737f7b3a..0000000000 --- a/packages/documentation-site/patternfly-docs/pages/landing-pages/layouts/layouts.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -id: Overview -title: Layouts overview -section: layouts -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. - -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/patterns/landing-page/patterns-data.json b/packages/documentation-site/patternfly-docs/pages/landing-pages/patterns/patterns-data.json similarity index 100% rename from packages/documentation-site/patternfly-docs/content/patterns/landing-page/patterns-data.json rename to packages/documentation-site/patternfly-docs/pages/landing-pages/patterns/patterns-data.json diff --git a/packages/documentation-site/patternfly-docs/content/patterns/landing-page/patterns.md b/packages/documentation-site/patternfly-docs/pages/landing-pages/patterns/patterns.md similarity index 100% rename from packages/documentation-site/patternfly-docs/content/patterns/landing-page/patterns.md rename to packages/documentation-site/patternfly-docs/pages/landing-pages/patterns/patterns.md diff --git a/packages/documentation-site/patternfly-docs/patternfly-docs.config.js b/packages/documentation-site/patternfly-docs/patternfly-docs.config.js index b9a4e41750..18583dbfe0 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('./content/components/landing-page/components-data.json'); +const componentsData = require('./pages/landing-pages/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 1d0ab51e17..382818b25e 100644 --- a/packages/documentation-site/patternfly-docs/patternfly-docs.source.js +++ b/packages/documentation-site/patternfly-docs/patternfly-docs.source.js @@ -25,13 +25,9 @@ module.exports = (sourceMD, sourceProps, sourceFunctionDocs) => { sourceMD(path.join(contentBase, 'get-help/**/*.md'), 'get-help'); sourceMD(path.join(contentBase, 'get-involved/**/*.md'), 'get-involved'); - // Landing pages (now in their respective content folders) - sourceMD(path.join(contentBase, 'components/landing-page/**/*.md'), 'components'); - sourceMD(path.join(contentBase, 'extensions/landing-page/**/*.md'), 'extensions'); - sourceMD(path.join(contentBase, 'patterns/landing-page/**/*.md'), 'patterns'); - - // Standalone pages + // 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'); // Org demos