diff --git a/packages/documentation-framework/components/navAnnouncementBanner/navAnnouncementBanner.js b/packages/documentation-framework/components/navAnnouncementBanner/navAnnouncementBanner.js index 4697912217..bb9c1749bb 100644 --- a/packages/documentation-framework/components/navAnnouncementBanner/navAnnouncementBanner.js +++ b/packages/documentation-framework/components/navAnnouncementBanner/navAnnouncementBanner.js @@ -1,5 +1,5 @@ -import React from 'react'; -import { Alert, AlertActionCloseButton } from '@patternfly/react-core'; +import React, { Fragment } from 'react'; +import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core'; import './navAnnouncementBanner.css'; export const NavAnnouncementBanner = () => { @@ -18,8 +18,20 @@ export const NavAnnouncementBanner = () => { isInline actionClose={} className="ws-nav-announcement-banner" - title={<>We've redesigned our website's navigation menu to make it easier to find the information you need. Learn more about the changes on Medium and share any thoughts in our user feedback survey.} - /> + title="Website update" + actionLinks={ + + + Learn more + + + Share your feedback + + + } + > + To make it easier for you to find what you need on PatternFly.org, we've redesigned our website navigation menu. + ); } diff --git a/packages/documentation-framework/pages/404/index.js b/packages/documentation-framework/pages/404/index.js index aceceaf868..b629493008 100644 --- a/packages/documentation-framework/pages/404/index.js +++ b/packages/documentation-framework/pages/404/index.js @@ -97,7 +97,7 @@ const Page404 = () => { body="Start creating your applications with components, our UI building blocks." link={{ text: 'View all components', - to: '/components/all-components', + to: '/components/overview', }} /> -For more information about writing effective error messages, see our [writing guide.](/content-design/error-messages) +For more information about writing effective error messages, see our [writing guide.](/content-design/writing-guides/error-messages) 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 e2c996a18b..663c0efca4 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](/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. +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/overview), [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/modal/modal.md b/packages/documentation-site/patternfly-docs/content/components/modal/modal.md index 202ca23f7d..dab74b4611 100644 --- a/packages/documentation-site/patternfly-docs/content/components/modal/modal.md +++ b/packages/documentation-site/patternfly-docs/content/components/modal/modal.md @@ -103,7 +103,7 @@ When using destructive actions, ensure that the user is informed about the conse Use an error dialog to inform users of problems that interrupt normal or expected behavior. Briefly contextualize the problem and why it happened, then provide actionable steps toward a solution. -Learn more about writing error messages in our [error message guidelines](/content-design/error-messages). +Learn more about writing error messages in our [error message guidelines](/content-design/writing-guides/error-messages). Error dialogs may use an error icon for visual emphasis. diff --git a/packages/documentation-site/patternfly-docs/content/components/time picker/time-picker.md b/packages/documentation-site/patternfly-docs/content/components/time picker/time-picker.md index 4107a255e9..9e02d3b1bd 100644 --- a/packages/documentation-site/patternfly-docs/content/components/time picker/time-picker.md +++ b/packages/documentation-site/patternfly-docs/content/components/time picker/time-picker.md @@ -64,14 +64,14 @@ For some use cases, users may wish to customize their time display or selection time zone -Learn more about formatting and displaying time zones in our [date and time guidelines](/content-design/numerics). +Learn more about formatting and displaying time zones in our [date and time guidelines](/content-design/grammar/numerics). ## Content considerations ### Time format Time formats are product-specific and often depend on user locale. To minimize confusion, choose one time format and keep it consistent. If one time picker displays HH:MM, be sure to repeat the same format throughout your interface. -Learn more about date and time best practices in our [date and time guidelines](/content-design/numerics). +Learn more about date and time best practices in our [date and time guidelines](/content-design/grammar/numerics). ### Placeholder text Always use placeholder text in time fields to provide an example of the accepted time format. Placeholder text will disappear after users begin inputting their own time. diff --git a/packages/documentation-site/patternfly-docs/content/components/tooltip/tooltip.md b/packages/documentation-site/patternfly-docs/content/components/tooltip/tooltip.md index 604b09268a..9cb3a7ce55 100644 --- a/packages/documentation-site/patternfly-docs/content/components/tooltip/tooltip.md +++ b/packages/documentation-site/patternfly-docs/content/components/tooltip/tooltip.md @@ -44,7 +44,7 @@ Both tooltips and [popovers](/components/popover/design-guidelines) provide more - Tooltips appear on hover, while popovers appear on click. ## Content considerations -For content guidance, refer to [our tooltip writing guide.](/content-design/tooltips) +For content guidance, refer to [our tooltip writing guide.](/content-design/writing-guides/tooltips) ## Accessibility diff --git a/packages/documentation-site/patternfly-docs/content/content-design/accessibility-and-localization.md b/packages/documentation-site/patternfly-docs/content/content-design/accessibility-and-localization.md index 7e3e393cbb..2c05412db3 100644 --- a/packages/documentation-site/patternfly-docs/content/content-design/accessibility-and-localization.md +++ b/packages/documentation-site/patternfly-docs/content/content-design/accessibility-and-localization.md @@ -1,5 +1,5 @@ --- -id: Accessiblity and localization +id: Accessibility and localization section: content-design --- diff --git a/packages/documentation-site/patternfly-docs/content/content-design/content-design.md b/packages/documentation-site/patternfly-docs/content/content-design/content-design.md index a1fbd9dc82..de8b157d84 100644 --- a/packages/documentation-site/patternfly-docs/content/content-design/content-design.md +++ b/packages/documentation-site/patternfly-docs/content/content-design/content-design.md @@ -32,7 +32,7 @@ Our grammar documentation includes common writing mechanics and style rules. - **[Capitalization:](/content-design/grammar/capitalization)** Rules detailing which casing style to use for different UI scenarios. - **[Numerics:](/content-design/grammar/numerics)** Includes rules for displaying and formatting dates, times, currency, and numerical values. - **[Punctuation:](/content-design/grammar/punctuation)** Rules for using punctuation properly within UI components and long-form content. -- **[Sentence structure:](./grammar/sentence-structure)** Guidance on point of view and sentence voice to ensure clarity and active, user-focused language. +- **[Sentence structure:](/content-design/grammar/sentence-structure)** Guidance on point of view and sentence voice to ensure clarity and active, user-focused language. - **[Terminology:](/content-design/grammar/terminology)** Outlines the preferred terms to use across different UI scenarios, including a list of words and phrases to avoid. - **[Truncation:](/content-design/grammar/truncation)** Guidance on replacing overflow content with ellipses to manage text when display space is limited. - **[Units and symbols:](/content-design/grammar/units-and-symbols)** Rules for displaying units of measurement and shorthand symbols. 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 a156c8aa51..f6eddf8711 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 @@ -13,7 +13,7 @@ Our tokens are named semantically, so that they're meaningful and better communi In the event that there isn't a semantic token that fits your use case, then you can use a base token instead, but do so sparingly. Do not use palette tokens. They are the foundation of our token system and there will always be a better base or semantic token to use. -[View all design tokens.](/foundations-and-styles/design-tokens/all-patternfly-tokens) +[View all design tokens.](/foundations-and-styles/design-tokens/all-design-tokens) ### Dark theme support @@ -25,7 +25,7 @@ For more information, refer to our [dark theme handbook.](/foundations-and-style To support tokens, PatternFly's global CSS variable system has been updated. Variable names have been updated across all PatternFly components and extensions. To migrate to our token system, you must [upgrade to PatternFly 6.](/releases/upgrade-guide) -If you make customizations to PatternFly components in your product, or use CSS overrides, you will need to manually update your CSS variable names to match an appropriate [semantic token](/foundations-and-styles/design-tokens/all-patternfly-tokens). There is no one-to-one recommendation for any particular CSS variable, so you will need to choose the most appropriate token for your use case. +If you make customizations to PatternFly components in your product, or use CSS overrides, you will need to manually update your CSS variable names to match an appropriate [semantic token](/foundations-and-styles/design-tokens/all-design-tokens). There is no one-to-one recommendation for any particular CSS variable, so you will need to choose the most appropriate token for your use case. As you migrate and [select tokens](#selecting-tokens), refer to these recommendations and reminders: diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-tokens/tokens.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-tokens/tokens.md index 7512ae592a..a76dc80f04 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-tokens/tokens.md +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/design-tokens/tokens.md @@ -3,7 +3,7 @@ id: Overview title: Design tokens overview section: foundations-and-styles subsection: design-tokens -sortvalue: 1 +sortValue: 1 --- import '../../components/components.css'; 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 545f70968f..6a77d020d9 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 @@ -13,7 +13,7 @@ import { ColorFamily } from './ColorFamily.js'; 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/foundations-and-styles/styles/iconography/iconography.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/iconography.md index effa94daa4..4dfb5ac0c2 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/iconography.md +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/iconography.md @@ -65,7 +65,7 @@ Occasionally, you may need to use a standalone icon that isn't aligned with any Medium icons are typically the most versatile size to use in a UI. Most icons in PatternFly components are medium; other sizes are used sparingly. ## Icon colors -All icon colors that you use should align with the proper [semantic design token.](/foundations-and-styles/design-tokens/all-patternfly-tokens) For example, a warning icon should use our approved warning color, a danger icon should use our approved danger color, and so on. +All icon colors that you use should align with the proper [semantic design token.](/foundations-and-styles/design-tokens/all-design-tokens) For example, a warning icon should use our approved warning color, a danger icon should use our approved danger color, and so on. | **Icon state** | **Color token** | **Example** | | --- | --- | :---: | diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/spacers/spacers.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/spacers/spacers.md index ad61317f0c..a13e56db3f 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/spacers/spacers.md +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/spacers/spacers.md @@ -36,12 +36,12 @@ Our spacer tokens are based on the values in the previous table, but there are c - **Layout spacers:** Used to define spacing within a page. - **Gap spacers:** Used to set space between elements or groups of elements, like gaps between multiple actions, gaps between items in a group, gaps between controls, and so on. - Gap spacer tokens begin with `--pf-t--global--spacer--gap` - - **Gutter spacer:** Used to define gutters within a [layout](/layouts/overview), like the space between elements in a grid layout. + - **Gutter spacer:** Used to define gutters within a [layout](/foundations-and-styles/layouts/overview), like the space between elements in a grid layout. - Gutter spacer tokens begin with `--pf-t--global--spacer--gutter` - **Inset spacer:** Used to define inner padding for structural elements in order to ensure proper alignment, like in the masthead, navigation menu, or the main page content area. - Inset spacer tokens begin with `--pf-t--global--spacer--inset` -You can search for spacer tokens in [our list of all tokens.](/foundations-and-styles/design-tokens/all-patternfly-tokens) +You can search for spacer tokens in [our list of all tokens.](/foundations-and-styles/design-tokens/all-design-tokens) ## Considering line height and padding diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/theming/dark-theme-handbook.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/theming/dark-theme-handbook.md index 675fc6fabe..8c2d2b6296 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/theming/dark-theme-handbook.md +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/theming/dark-theme-handbook.md @@ -18,13 +18,13 @@ The only features which will require additional work in order to support dark th ### Charts -To use charts with dark themes, refer to our guidance for [developing with charts](/components/charts/about-charts#develop-with-charts). +To use charts with dark themes, refer to our guidance for [developing with charts](/components/charts/overview#developing-with-charts). ### Images To create images that adapt to light and dark themes, there are a few approaches you can take: -- Use inline SVG's with fill colors set to [PatternFly color tokens](/foundations-and-styles/design-tokens/all-patternfly-tokens), which inherently adapt to light and dark themes. +- Use inline SVG's with fill colors set to [PatternFly color tokens](/foundations-and-styles/design-tokens/all-design-tokens), which inherently adapt to light and dark themes. - Create images with colors that work well with both light and dark themes. These colors should meet [WCAG AA contrast requirements](https://webaim.org/resources/contrastchecker/). - Utilize background color, border color, border-radius, and padding/spacing to create a container that can hold dynamic/user-supplied images. - Write CSS and dynamically swap between 2 image variations: diff --git a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/theming/theming.md b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/theming/theming.md index ec110a7ea0..c7a8804cec 100644 --- a/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/theming/theming.md +++ b/packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/theming/theming.md @@ -51,7 +51,7 @@ For development guidance, refer to the [high contrast handbook](/foundations-and ## Custom themes -To branch off of our themes and create your own, you can identify the design tokens you'd like to adjust on our [all tokens page](/foundations-and-styles/design-tokens/all-patternfly-tokens) and provide new values to use within your application. +To branch off of our themes and create your own, you can identify the design tokens you'd like to adjust on our [all tokens page](/foundations-and-styles/design-tokens/all-design-tokens) and provide new values to use within your application. ### When to customize a theme diff --git a/packages/documentation-site/patternfly-docs/content/get-help/report-a-bug.md b/packages/documentation-site/patternfly-docs/content/get-help/report-a-bug.md index 846c0068b9..08fb9a0964 100644 --- a/packages/documentation-site/patternfly-docs/content/get-help/report-a-bug.md +++ b/packages/documentation-site/patternfly-docs/content/get-help/report-a-bug.md @@ -48,7 +48,7 @@ Bugs that appear in the base HTML/CSS or can be seen in *both* the React and HTM For bugs found in a PatternFly extension, please file the issue in that extension's specific repository: -- [chatbot:](https://github.com/patternfly/chatbot) Code for [the ChatBot extension](/ai/chatbot/aoverview). +- [chatbot:](https://github.com/patternfly/chatbot) Code for [the ChatBot extension](/extensions/chatbot/overview). - [patternfly-quickstarts:](https://github.com/patternfly/patternfly-quickstarts). Code for [the quick starts extensions](/extensions/quick-starts). - [react-catalog-view:](https://github.com/patternfly/react-catalog-view) Code for [the catalog view extension](/extensions/catalog-view/catalog-item-header). - [react-component-groups:](https://github.com/patternfly/react-component-groups) Code for [the component groups extension](/extensions/component-groups/overview). diff --git a/packages/documentation-site/patternfly-docs/content/patterns/patterns.md b/packages/documentation-site/patternfly-docs/content/patterns/patterns.md index 4159d2d4e3..578c0ff896 100644 --- a/packages/documentation-site/patternfly-docs/content/patterns/patterns.md +++ b/packages/documentation-site/patternfly-docs/content/patterns/patterns.md @@ -14,7 +14,7 @@ import patternsData from './patterns-data.json'; ## How do I use patterns? -Patterns provide design guidance on how you should combine different **[components](/components/all-components)** and foundational styles for recurring design challenges, such as displaying complex data or managing user workflows. While patterns offer abstract guidance, they are distinct from extensions, which provide the actual pre-built coded solutions. +Patterns provide design guidance on how you should combine different **[components](/components/overview)** and foundational styles for recurring design challenges, such as displaying complex data or managing user workflows. While patterns offer abstract guidance, they are distinct from extensions, which provide the actual pre-built coded solutions. Our more holistic design patterns, such as our dashboard and card view, are maintained in our separate [Patterns & Extensions Figma library.](https://www.figma.com/community/file/1357062621908564852/patternfly-6-patterns-extensions) 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 0b84475f72..4212818a9a 100644 --- a/packages/documentation-site/patternfly-docs/content/releases/release-highlights.md +++ b/packages/documentation-site/patternfly-docs/content/releases/release-highlights.md @@ -495,7 +495,7 @@ The following fix could require manual updates depending on how you handle break ### Content updates - We updated design guideline images for [context selector](/components/menus/context-selector/design-guidelines) to align with PatternFly 6 styles. There is an ongoing effort to update images across PatternFly.org to reflect our new visuals, tracked in this [PatternFly 6 design guidelines issue](https://github.com/patternfly/patternfly-org/issues/4235). -- We updated the illustrations on [the component overview page](/components/all-components). +- We updated the illustrations on [the component overview page](/components/overview). - 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. @@ -606,7 +606,7 @@ Here are the most significant updates we made to our React components: #### Design tokens -We updated existing design tokens and added new tokens to support directional box-shadows. To see these tokens, search "box-shadow" in our [tokens documentation](/foundations-and-styles/design-tokens/all-patternfly-tokens). +We updated existing design tokens and added new tokens to support directional box-shadows. To see these tokens, search "box-shadow" in our [tokens documentation](/foundations-and-styles/design-tokens/all-design-tokens). We also added a few new tokens to support the needs of our new chatbot, including: - A tertiary background token that accommodates containers placed on a secondary background. @@ -635,7 +635,7 @@ In addition to the previously mentioned documentation updates, we've made change - We've started updating images across our design guidelines to represent PatternFly 6 styling. #### Miscellaneous cleanup and enhancements -- Shortened component descriptions shown in component page headers and on the [all components page](/components/all-components). +- Shortened component descriptions shown in component page headers and on the [components overview page](/components/overview). - Added more details about [React tokens](/foundations-and-styles/design-tokens/develop#react-tokens) and [how to migrate them](/releases/upgrade-guide#utilize-our-tokens-update-codemod). - Added React example documentation for [text input group](/components/text-input-group). diff --git a/packages/documentation-site/patternfly-docs/content/releases/release-notes-data.js b/packages/documentation-site/patternfly-docs/content/releases/release-notes-data.js index 891d77cef3..b209bf942f 100644 --- a/packages/documentation-site/patternfly-docs/content/releases/release-notes-data.js +++ b/packages/documentation-site/patternfly-docs/content/releases/release-notes-data.js @@ -2849,7 +2849,7 @@ t_color_green_10;`} { component: "Tokens", description: - "We have updated our CSS tokens. About half of our tokens have been replaced with newer ones. \n\n- this rule provides an autofix for global non color tokens\n- global color tokens will be replaced with a temporary hot pink color token **that must be manually replaced** (`t_temp_dev_tbd` react token or `--pf-t--temp--dev--tbd` CSS variable)\n- other non-global (component or chart) tokens need to be replaced manually\n\nTo find a suitable replacement token, check our [v6 token documentation](/foundations-and-styles/design-tokens/all-patternfly-tokens).", + "We have updated our CSS tokens. About half of our tokens have been replaced with newer ones. \n\n- this rule provides an autofix for global non color tokens\n- global color tokens will be replaced with a temporary hot pink color token **that must be manually replaced** (`t_temp_dev_tbd` react token or `--pf-t--temp--dev--tbd` CSS variable)\n- other non-global (component or chart) tokens need to be replaced manually\n\nTo find a suitable replacement token, check our [v6 token documentation](/foundations-and-styles/design-tokens/all-design-tokens).", repo: "React", fixedWithCodeMod: true, title: "tokens-update", 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 54ed5e7c53..53c927c9f6 100644 --- a/packages/documentation-site/patternfly-docs/content/releases/upgrade-guide.md +++ b/packages/documentation-site/patternfly-docs/content/releases/upgrade-guide.md @@ -108,7 +108,7 @@ A number of variables have been removed or added—primarily due to logical - [Removed variables](https://docs.google.com/spreadsheets/d/e/2PACX-1vQqeH7ThYi0jkhYEB8B2SXa7x8AaY5T9ajG6o-Ogz3p7YVp0OuTulb_L3DYLDrHlY4zUE3IBiup6tkN/pubhtml?gid=1160160856&single=true) - [Added variables](https://docs.google.com/spreadsheets/d/e/2PACX-1vQqeH7ThYi0jkhYEB8B2SXa7x8AaY5T9ajG6o-Ogz3p7YVp0OuTulb_L3DYLDrHlY4zUE3IBiup6tkN/pubhtml?gid=268831450&single=true). -Wherever you have custom CSS overrides that reference PatternFly class names or CSS variables, carefully review them and make updates to ensure that they align with [our new design tokens](/foundations-and-styles/design-tokens/all-patternfly-tokens). +Wherever you have custom CSS overrides that reference PatternFly class names or CSS variables, carefully review them and make updates to ensure that they align with [our new design tokens](/foundations-and-styles/design-tokens/all-design-tokens). To assist with naming updates, we offer 3 codemods: 1. [class-name-updater](https://github.com/patternfly/pf-codemods/tree/main/packages/class-name-updater): Automatically identifies and renames classes to align with changes in PatternFly 6.