Skip to content

docs(release-highlights): Adds additional updates for v6 release. #4317

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nicolethoen merged 10 commits into from
Oct 29, 2024
Merged

docs(release-highlights): Adds additional updates for v6 release. #4317

Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2e2046a
docs(release-highlights): Adds additional updates for v6 release.
edonehoo Oct 11, 2024
77c6181
Add React tokens section.
edonehoo Oct 11, 2024
3f32796
Expands on react token naming change.
edonehoo Oct 16, 2024
4e1b1a7
Rename battery component group to severity.
edonehoo Oct 16, 2024
68bd77b
Merge branch 'main' into iss4289
edonehoo Oct 21, 2024
8ad0c30
Starts integrating feedback.
edonehoo Oct 24, 2024
2a52009
Remove deprecated table update
edonehoo Oct 25, 2024
cec9d51
Add promoted links
edonehoo Oct 25, 2024
bd63f90
Update topology version ref
edonehoo Oct 25, 2024
7754125
Fix broken links
edonehoo Oct 29, 2024
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
83 changes: 83 additions & 0 deletions ...es/documentation-site/patternfly-docs/content/get-started/release-highlights.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,89 @@ section: get-started
import './get-started.css';
import { Divider, Timestamp } from '@patternfly/react-core';

<Timestamp>October 2024</Timestamp>

## PatternFly 6.0
The official release of PatternFly 6 is here! It contains all of the previous features from our alpha and beta releases, but also adds everything described in these release highlights.

### PatternFly AI

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](/patternfly-ai/about-patternfly-ai)
- [AI guidelines](/patternfly-ai/ai-guidelines)
- [Chatbot](/patternfly-ai/chatbot/about-chatbot)
- [Conversation design](/patternfly-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, 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.

[Check out the updated documentation](/component-groups/about-component-groups), which includes:
Copy link
Contributor

@mcoker mcoker Oct 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Super nit and shouldn't block or anything IMO, but with link text, I ask myself if the text would make sense to a screen reader user if they told the screen reader to read all of the links on the page, which is something someone might do if they were just trying to navigate around. Link text like "Click here" would be read a bunch of times and not indicate where the link goes without reading the context around it. Related, I wondered if "component groups extension" should be linked in the first sentence of the paragraph above.

But we have a lot of links that are lacking that context in the link text, so maybe that's not something we even want to do.

Copy link
Collaborator Author

@edonehoo edonehoo Oct 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Eh, not a "super nit", this is important! And something I try to keep in mind, but definitely something I miss often when I'm rushing/spreading myself thin. Even then I tend to think of it from a "it should be obvious what this link is" vs the screenreader perspective, so this is a good reminder about that other side. I'll update this one to your suggestion and also do a quick look over 👀


| **Category** | **Components** |
| --- | --- |
| Content containers | - Details page <br /> - Multi-content card<br /> - Page header (previously named "content header")<br /> - Service card (new!) |
| Controls | - Bulk select <br /> - Close button <br /> - Responsive actions (new!) |
| Error communication | - Error boundary <br /> - Error state <br /> - Missing page (previously named "invalid object") <br /> - Unauthorized access (previously named "not authorized") <br /> - Unavailable content <br /> - Warning modal |
| Helpers | - Column management modal <br /> - Log snippet <br /> - Shortcut grid |
| Status and state indicators | - Ansible <br /> - Severity (previously Battery) <br /> - Skeleton table <br /> - Status (new!) <br /> - Tag count |

### React component updates

Here are the most significant updates we made to our React components:

- Data list
- Refactored `<DataListCheck>` to use `<Checkbox>` internally. As a result, `id` is now a required prop for ` <DataListCheck>`. This also fixes broken checkboxes in the examples.
- Dropdown
Copy link
Contributor

@tlabaj tlabaj Oct 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So we kind of reverted this. We have a prop to set the time out but it is 0 by default. We added some other logic internally to stop the scroll from jumping when focusing the first item in the menu.

Copy link
Collaborator Author

@edonehoo edonehoo Oct 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ahh okay, is that focusTimeoutDelay? How's this

  • Dropdown
    • Added focusTimeoutDelay, which specifies the time to wait before setting focus on the first dropdown item when shouldFocusFirstItemOnOpen is set.
    • Fixed issues with invalid and jumpy scrolling when focusing on the first menu item.

Copy link
Contributor

@tlabaj tlabaj Oct 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good @edonehoo

- Added delay before setting focus on the first dropdown item when `shouldFocusFirstItemOnOpen` is set. This gives enough time for the popover to be shown in the correct location, so the scrollable doesn't scroll to an invalid location.
- Jumplinks
- Fixed improper offset in [demo](/components/jump-links/react-demos).
- Menu toggle
- Removed `pf-m-actions` and, consequently, `SplitButtonOptions`. Items should now be passed directly to `splitButtonItems`.
- Added `isPlaceholder` to support customizable placeholder text, as well as [a corresponding example](/components/menu-toggle#placeholder-text-in-toggle).

### Token updates

#### Design tokens

We updated existing design tokens and added new tokens to support directional box-shadows. To see these tokens, search "box-tokens" in our [tokens documentation](/tokens/all-patternfly-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.
- Inverse hover and inverse clicked tokens.

#### React tokens

To address instances where chart tokens and chart variable names were unintentionally identical, we added a `t_` prefix to our React tokens. This makes it easier to differentiate between tokens and variables.
Copy link
Member

@srambach srambach Oct 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe say between design tokens and other CSS variables. or whatever that actually is, but it's in a React tokens section and referring to design token variables.

Copy link
Contributor

@mcoker mcoker Oct 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah this is a little difficult to understand IMO. Here's a horrible take on making it a little more clear? It's a little tricky with the different usages of the word "token"

To address instances where chart design tokens and chart CSS variables created unintentionally identically named React tokens, we added a t_ prefix to all design tokens in React tokens. This makes it easier to differentiate between design tokens and CSS variables.

Copy link
Collaborator Author

@edonehoo edonehoo Oct 24, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, I'm apparently always going to get confused when writing about tokens and design tokens 😭

this is helpful, not horrible! ty both

so

"we added a t_ prefix to all design tokens in React tokens"

the prefix wasn't added to the React tokens themselves? I thought this part was the React token, am I misunderstanding?

image

Clarification for this ^ will influence my change suggestion, but this is what I have now

To address instances where design tokens and CSS variables for charts unintentionally created identical React tokens, we added a t_ prefix to all design token references in our React tokens. This makes it easier to differentiate between design tokens and other CSS variables.

Copy link
Contributor

@mcoker mcoker Oct 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You got it! That update lgtm.

"we added a t_ prefix to all design tokens in React tokens"
the prefix wasn't added to the React tokens themselves? I thought this part was the React token, am I misunderstanding?

Yep it's on the react token. When I sad "all design tokens in react tokens" I'm thinking of it like react tokens are a thing themselves, and are made up of design tokens and CSS vars. So with design token in react tokens, I'm just referring to any of the t_ react tokens.


### Extensions maintenance

We made a couple of updates to ensure that extensions are in line with PatternFly 6 styling:

- Updated card title style in [quick starts](/extensions/quick-starts/Basic-quick-starts) to maintain the proper blue link style.
- Updated [link catalog tiles](/extensions/catalog-view/catalog-tile#link-variant) in the catalog view extension to be actionable cards.

### Content updates

In addition to the previously mentioned documentation updates, we've made changes to the following content areas:

#### 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](/design-foundations/typography), [numerics](/ux-writing/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.

#### Miscellaneous cleanup and enhancements
- Shortened component descriptions shown in component page headers and [all components page](/components/all-components).
- Added more details about [React tokens](/tokens/develop-with-tokens#react-tokens) and [how to migrate them](/get-started/upgrade#utilize-our-tokens-update-codemod).
- Added React example documentation for [text input group](/components/text-input-group).

<Divider />

<Timestamp>August 2024</Timestamp>

## PatternFly 6 beta
Expand Down