Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -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 = () => {
Expand All @@ -18,8 +18,20 @@ export const NavAnnouncementBanner = () => {
isInline
actionClose={<AlertActionCloseButton onClose={closeBanner} />}
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 <a href="https://medium.com/patternfly" target="_blank" rel="noopener noreferrer">Medium</a> and share any thoughts in our <a href="https://www.feedback.redhat.com/jfe/form/SV_9MKBjq8H7muINMy" target="_blank" rel="noopener noreferrer">user feedback survey</a>.</>}
/>
title="Website update"
actionLinks={
<Fragment>
<AlertActionLink component="a" href="https://medium.com/patternfly/a-new-path-for-patternfly-org-91d14de4b93c" target="_blank">
Learn more
</AlertActionLink>
<AlertActionLink component="a" href="https://www.feedback.redhat.com/jfe/form/SV_9MKBjq8H7muINMy" target="_blank">
Share your feedback
</AlertActionLink>
</Fragment>
}
>
To make it easier for you to find what you need on PatternFly.org, we've redesigned our website navigation menu.
</Alert>
</div>
);
}
2 changes: 1 addition & 1 deletion packages/documentation-framework/pages/404/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
}}
/>
<Card404
Expand Down
5 changes: 5 additions & 0 deletions packages/documentation-framework/scripts/md/parseMD.js
Original file line number Diff line number Diff line change
Expand Up @@ -279,6 +279,11 @@ function sourceMDFile(file, source, buildMode) {
if (path.basename(file).startsWith('_')) {
return;
}
// Skip accessibility files when sourcing as design-guidelines
// They should only be sourced with the 'accessibility' source
if (source === 'design-guidelines' && file.includes('/accessibility/')) {
return;
}
const { jsx, pageData, outPath } = toReactComponent(file, source, buildMode);

if (jsx) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ To support your AI practices, we provide a range of AI tools that you can integr

- **[Rapid prototyping](/ai/rapid-prototyping):** How to quickly test and iterate on AI features during the early stages of design.
- **[AI-assisted code migration](/ai/ai-assisted-code-migration):** How to quickly test and iterate on AI features during the early stages of design.
- **[Conversational Design Principles](/ai/conversational-design):** Guidance for designing effective and human-centered text-based conversational flows.
- **[Conversational Design Principles](/ai/conversation-design):** Guidance for designing effective and human-centered text-based conversational flows.
- **[Rapid Prototyping Guidelines](/ai/generative-uis/overview):** How to quickly test and iterate on AI features during the early stages of design.

Regardless of the AI resources or workflow you're using, it's important to ensure that you're aligned with the compliance rules, ethical considerations, and best practies on this page.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import './colors-for-charts.css';

import '../../components.css';

**Note:** Our charts use separate design tokens from our standard library. To view a list of all chart tokens, apply the "chart" category filter to [the design tokens table](/foundations-and-styles/design-tokens/all-patternfly-tokens).
**Note:** Our charts use separate design tokens from our standard library. To view a list of all chart tokens, apply the "chart" category filter to [the design tokens table](/foundations-and-styles/design-tokens/all-design-tokens).

## Color palettes

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -139,4 +139,4 @@ Examples:

<img src="./img/Error message date picker.png" alt="Date picker with error message" width="200"/>

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)
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,14 +64,14 @@ For some use cases, users may wish to customize their time display or selection

<img src="./img/time zone.png" alt="time zone" width="260"/>

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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
id: Accessiblity and localization
id: Accessibility and localization
section: content-design
---

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { ColorFamily } from './ColorFamily.js';
Our color palettes align with <a href="https://www.redhat.com/en/about/brand/standards/color" target="_blank" alt="Red Hat brand colors"> Red Hat's brand colors </a> 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.

<div>
<Button component="a" href="/foundations-and-styles/design-tokens/all-patternfly-tokens" variant="link" isInline> View all design tokens <ArrowRightIcon />
<Button component="a" href="/foundations-and-styles/design-tokens/all-design-tokens" variant="link" isInline> View all design tokens <ArrowRightIcon />
</Button>
</div>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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** |
| --- | --- | :---: |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
Loading