@patternfly/react-core 6.0.0-alpha.57 → 6.0.0-alpha.59

package/src/components/Skeleton/examples/SkeletonText.tsx

@@ -1,35 +1,35 @@
 import React from 'react';
 import { Skeleton } from '@patternfly/react-core';
 /* eslint-disable camelcase */
-import global_FontSize_4xl from '@patternfly/react-tokens/dist/esm/global_FontSize_4xl';
-import global_FontSize_3xl from '@patternfly/react-tokens/dist/esm/global_FontSize_3xl';
-import global_FontSize_2xl from '@patternfly/react-tokens/dist/esm/global_FontSize_2xl';
-import global_FontSize_xl from '@patternfly/react-tokens/dist/esm/global_FontSize_xl';
-import global_FontSize_lg from '@patternfly/react-tokens/dist/esm/global_FontSize_lg';
-import global_FontSize_md from '@patternfly/react-tokens/dist/esm/global_FontSize_md';
-import global_FontSize_sm from '@patternfly/react-tokens/dist/esm/global_FontSize_sm';
+import global_font_size_4xl from '@patternfly/react-tokens/dist/esm/global_font_size_4xl';
+import global_font_size_3xl from '@patternfly/react-tokens/dist/esm/global_font_size_3xl';
+import global_font_size_2xl from '@patternfly/react-tokens/dist/esm/global_font_size_2xl';
+import global_font_size_xl from '@patternfly/react-tokens/dist/esm/global_font_size_xl';
+import global_font_size_lg from '@patternfly/react-tokens/dist/esm/global_font_size_lg';
+import global_font_size_md from '@patternfly/react-tokens/dist/esm/global_font_size_md';
+import global_font_size_sm from '@patternfly/react-tokens/dist/esm/global_font_size_sm';
 
 export const SkeletonText: React.FunctionComponent = () => (
   <React.Fragment>
-    {global_FontSize_4xl.name}
+    {global_font_size_4xl.name}
     <Skeleton fontSize="4xl" screenreaderText="Loading font size 4xl" />
     <br />
-    {global_FontSize_3xl.name}
+    {global_font_size_3xl.name}
     <Skeleton fontSize="3xl" screenreaderText="Loading font size 3xl" />
     <br />
-    {global_FontSize_2xl.name}
+    {global_font_size_2xl.name}
     <Skeleton fontSize="2xl" screenreaderText="Loading font size 2xl" />
     <br />
-    {global_FontSize_xl.name}
+    {global_font_size_xl.name}
     <Skeleton fontSize="xl" screenreaderText="Loading font size xl" />
     <br />
-    {global_FontSize_lg.name}
+    {global_font_size_lg.name}
     <Skeleton fontSize="lg" screenreaderText="Loading font size lg" />
     <br />
-    {global_FontSize_md.name}
+    {global_font_size_md.name}
     <Skeleton fontSize="md" screenreaderText="Loading font size md" />
     <br />
-    {global_FontSize_sm.name}
+    {global_font_size_sm.name}
     <Skeleton fontSize="sm" screenreaderText="Loading font size sm" />
   </React.Fragment>
 );

package/src/components/Slider/SliderStep.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Slider/slider';
 import { css } from '@patternfly/react-styles';
-import sliderStepLeft from '@patternfly/react-tokens/dist/esm/c_slider__step_Left';
+import sliderStepInsetInlineStart from '@patternfly/react-tokens/dist/esm/c_slider__step_InsetInlineStart';
 
 export interface SliderStepProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
   /** Additional classes added to the slider step. */
@@ -27,7 +27,9 @@ export const SliderStep: React.FunctionComponent<SliderStepProps> = ({
   isActive = false,
   ...props
 }: SliderStepProps) => {
-  const style = { [sliderStepLeft.name]: `${value ? value : sliderStepLeft.value}%` } as React.CSSProperties;
+  const style = {
+    [sliderStepInsetInlineStart.name]: `${value ? value : sliderStepInsetInlineStart.value}%`
+  } as React.CSSProperties;
   return (
     <div className={css(styles.sliderStep, isActive && styles.modifiers.active, className)} style={style} {...props}>
       {!isTickHidden && <div className={css(styles.sliderStepTick)} />}

package/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap

@@ -22,7 +22,7 @@ exports[`slider renders continuous slider 1`] = `
       >
         <div
           class="pf-v6-c-slider__step pf-m-active"
-          style="--pf-v6-c-slider__step--Left: 0%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 0%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -32,7 +32,7 @@ exports[`slider renders continuous slider 1`] = `
         </div>
         <div
           class="pf-v6-c-slider__step"
-          style="--pf-v6-c-slider__step--Left: 100%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 100%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -96,7 +96,7 @@ exports[`slider renders continuous slider with custom steps 1`] = `
       >
         <div
           class="pf-v6-c-slider__step pf-m-active"
-          style="--pf-v6-c-slider__step--Left: 0%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 0%;"
         >
           <div
             class="pf-v6-c-slider__step-tick"
@@ -109,7 +109,7 @@ exports[`slider renders continuous slider with custom steps 1`] = `
         </div>
         <div
           class="pf-v6-c-slider__step"
-          style="--pf-v6-c-slider__step--Left: 100%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 100%;"
         >
           <div
             class="pf-v6-c-slider__step-tick"
@@ -159,7 +159,7 @@ exports[`slider renders disabled slider 1`] = `
       >
         <div
           class="pf-v6-c-slider__step pf-m-active"
-          style="--pf-v6-c-slider__step--Left: 0%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 0%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -169,7 +169,7 @@ exports[`slider renders disabled slider 1`] = `
         </div>
         <div
           class="pf-v6-c-slider__step"
-          style="--pf-v6-c-slider__step--Left: 100%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 100%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -216,7 +216,7 @@ exports[`slider renders discrete slider 1`] = `
       >
         <div
           class="pf-v6-c-slider__step pf-m-active"
-          style="--pf-v6-c-slider__step--Left: 0%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 0%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -226,7 +226,7 @@ exports[`slider renders discrete slider 1`] = `
         </div>
         <div
           class="pf-v6-c-slider__step"
-          style="--pf-v6-c-slider__step--Left: 100%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 100%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -290,7 +290,7 @@ exports[`slider renders discrete slider with custom steps 1`] = `
       >
         <div
           class="pf-v6-c-slider__step pf-m-active"
-          style="--pf-v6-c-slider__step--Left: 0%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 0%;"
         >
           <div
             class="pf-v6-c-slider__step-tick"
@@ -303,7 +303,7 @@ exports[`slider renders discrete slider with custom steps 1`] = `
         </div>
         <div
           class="pf-v6-c-slider__step pf-m-active"
-          style="--pf-v6-c-slider__step--Left: 25%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 25%;"
         >
           <div
             class="pf-v6-c-slider__step-tick"
@@ -311,7 +311,7 @@ exports[`slider renders discrete slider with custom steps 1`] = `
         </div>
         <div
           class="pf-v6-c-slider__step pf-m-active"
-          style="--pf-v6-c-slider__step--Left: 50%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 50%;"
         >
           <div
             class="pf-v6-c-slider__step-tick"
@@ -324,7 +324,7 @@ exports[`slider renders discrete slider with custom steps 1`] = `
         </div>
         <div
           class="pf-v6-c-slider__step"
-          style="--pf-v6-c-slider__step--Left: 75%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 75%;"
         >
           <div
             class="pf-v6-c-slider__step-tick"
@@ -332,7 +332,7 @@ exports[`slider renders discrete slider with custom steps 1`] = `
         </div>
         <div
           class="pf-v6-c-slider__step"
-          style="--pf-v6-c-slider__step--Left: 100%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 100%;"
         >
           <div
             class="pf-v6-c-slider__step-tick"
@@ -382,7 +382,7 @@ exports[`slider renders slider with input 1`] = `
       >
         <div
           class="pf-v6-c-slider__step pf-m-active"
-          style="--pf-v6-c-slider__step--Left: 0%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 0%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -392,7 +392,7 @@ exports[`slider renders slider with input 1`] = `
         </div>
         <div
           class="pf-v6-c-slider__step"
-          style="--pf-v6-c-slider__step--Left: 100%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 100%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -473,7 +473,7 @@ exports[`slider renders slider with input above thumb 1`] = `
       >
         <div
           class="pf-v6-c-slider__step pf-m-active"
-          style="--pf-v6-c-slider__step--Left: 0%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 0%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -483,7 +483,7 @@ exports[`slider renders slider with input above thumb 1`] = `
         </div>
         <div
           class="pf-v6-c-slider__step"
-          style="--pf-v6-c-slider__step--Left: 100%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 100%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -577,7 +577,7 @@ exports[`slider renders slider with input actions 1`] = `
       >
         <div
           class="pf-v6-c-slider__step pf-m-active"
-          style="--pf-v6-c-slider__step--Left: 0%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 0%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -587,7 +587,7 @@ exports[`slider renders slider with input actions 1`] = `
         </div>
         <div
           class="pf-v6-c-slider__step"
-          style="--pf-v6-c-slider__step--Left: 100%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 100%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -647,7 +647,7 @@ exports[`slider renders slider with tooltip on thumb 1`] = `
       >
         <div
           class="pf-v6-c-slider__step pf-m-active"
-          style="--pf-v6-c-slider__step--Left: 0%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 0%;"
         >
           <div
             class="pf-v6-c-slider__step-label"
@@ -657,7 +657,7 @@ exports[`slider renders slider with tooltip on thumb 1`] = `
         </div>
         <div
           class="pf-v6-c-slider__step"
-          style="--pf-v6-c-slider__step--Left: 100%;"
+          style="--pf-v6-c-slider__step--InsetInlineStart: 100%;"
         >
           <div
             class="pf-v6-c-slider__step-label"

package/src/components/Text/Text.tsx

@@ -32,6 +32,20 @@ export interface TextProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   ouiaSafe?: boolean;
 }
 
+const componentStyles = {
+  h1: styles.contentH1,
+  h2: styles.contentH2,
+  h3: styles.contentH3,
+  h4: styles.contentH4,
+  h5: styles.contentH5,
+  h6: styles.contentH6,
+  p: styles.contentP,
+  a: styles.contentA,
+  small: styles.contentSmall,
+  blockquote: styles.contentBlockquote,
+  pre: styles.contentPre
+};
+
 export const Text: React.FunctionComponent<TextProps> = ({
   children = null,
   className = '',
@@ -49,7 +63,11 @@ export const Text: React.FunctionComponent<TextProps> = ({
       {...ouiaProps}
       {...props}
       data-pf-content
-      className={css(isVisitedLink && component === TextVariants.a && styles.modifiers.visited, className)}
+      className={css(
+        isVisitedLink && component === TextVariants.a && styles.modifiers.visited,
+        componentStyles[component],
+        className
+      )}
     >
       {children}
     </Component>

package/src/components/Text/TextList.tsx

@@ -8,6 +8,12 @@ export enum TextListVariants {
   dl = 'dl'
 }
 
+const componentStyles = {
+  ul: styles.contentUl,
+  ol: styles.contentOl,
+  dl: styles.contentDl
+};
+
 export interface TextListProps extends React.HTMLProps<HTMLElement> {
   /** Content rendered within the TextList */
   children?: React.ReactNode;
@@ -29,7 +35,7 @@ export const TextList: React.FunctionComponent<TextListProps> = ({
   const Component: any = component;
 
   return (
-    <Component {...props} className={css(isPlain && styles.modifiers.plain, className)}>
+    <Component {...props} className={css(isPlain && styles.modifiers.plain, componentStyles[component], className)}>
       {children}
     </Component>
   );

package/src/components/Text/TextListItem.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Content/content';
 import { css } from '@patternfly/react-styles';
 
 export enum TextListItemVariants {
@@ -7,6 +8,12 @@ export enum TextListItemVariants {
   dd = 'dd'
 }
 
+const componentStyles = {
+  li: styles.contentLi,
+  dt: styles.contentDt,
+  dd: styles.contentDd
+};
+
 export interface TextListItemProps extends React.HTMLProps<HTMLElement> {
   /** Content rendered within the TextListItem */
   children?: React.ReactNode;
@@ -25,7 +32,7 @@ export const TextListItem: React.FunctionComponent<TextListItemProps> = ({
   const Component: any = component;
 
   return (
-    <Component {...props} className={css(className)}>
+    <Component {...props} className={css(componentStyles[component], className)}>
       {children}
     </Component>
   );

package/src/components/Text/__tests__/Generated/__snapshots__/TextList.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`TextList should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <ul
-    class="''"
+    class="pf-v6-c-content--ul ''"
   >
     ReactNode
   </ul>

package/src/components/Text/__tests__/Generated/__snapshots__/TextListItem.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`TextListItem should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <li
-    class="''"
+    class="pf-v6-c-content--li ''"
   >
     ReactNode
   </li>

package/src/components/Text/__tests__/Text.test.tsx

@@ -16,11 +16,6 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders without class name by default', () => {
-  render(<Text>Test</Text>);
-  expect(screen.getByText('Test')).not.toHaveClass();
-});
-
 test('Renders with custom class name when className prop is provided', () => {
   render(<Text className="custom-class">Test</Text>);
   expect(screen.getByText('Test')).toHaveClass('custom-class');

package/src/components/Text/__tests__/TextList.test.tsx

@@ -16,11 +16,6 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders without class name by default', () => {
-  render(<TextList>Test</TextList>);
-  expect(screen.getByText('Test')).not.toHaveClass();
-});
-
 test('Renders with custom class name when className prop is provided', () => {
   render(<TextList className="custom-class">Test</TextList>);
   expect(screen.getByText('Test')).toHaveClass('custom-class');

package/src/components/Text/__tests__/TextListItem.test.tsx

@@ -16,11 +16,6 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders without class name by default', () => {
-  render(<TextListItem>Test</TextListItem>);
-  expect(screen.getByText('Test')).not.toHaveClass();
-});
-
 test('Renders with custom class name when className prop is provided', () => {
   render(<TextListItem className="custom-class">Test</TextListItem>);
   expect(screen.getByText('Test')).toHaveClass('custom-class');

package/src/components/Text/__tests__/__snapshots__/Text.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <p
-    class=""
+    class="pf-v6-c-content--p"
     data-ouia-component-id="ouia-id"
     data-ouia-component-type="PF6/Text"
     data-ouia-safe="true"

package/src/components/Text/__tests__/__snapshots__/TextList.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <ul
-    class=""
+    class="pf-v6-c-content--ul"
   >
     Test
   </ul>

package/src/components/Text/__tests__/__snapshots__/TextListItem.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <li
-    class=""
+    class="pf-v6-c-content--li"
   >
     Test
   </li>

package/src/components/Text/examples/Text.md

@@ -5,7 +5,7 @@ cssPrefix: pf-v5-c-content
 propComponents: ['TextContent', 'Text', 'TextList', 'TextListItem']
 ---
 
-The `<Text>` component provides simple, built-in styling for putting common blocks of HTML elements together. It establishes the block of content and styling within it for the elements listed in the `component` property(`h1` through `h6`, `p`, `a`, `small`, `blockquote`, and `pre`), as well as the text component suite (`<TextContent>`, `<TextList>`, and `<TextListItem>`).
+The `<Text>` component provides simple, built-in styling for putting common blocks of HTML elements together. It establishes the block of content and styling within it for the elements listed in the `component` property(`h1` through `h6`, `p`, `a`, `small`, `blockquote`, and `pre`), as well as the text component suite `<TextList>`, and `<TextListItem>`. `TextContent` may be used as a container for the text components, but nesting them inside `<TextContent>` is not required.
 
 You cannot nest other components within `<Text>`, and doing so can cause styling overrides or other conflicts. Instead, you can use the `<Text>` component's properties to achieve the same results.
 
@@ -25,8 +25,6 @@ For example, rather than nesting the `<List>` and `<Title>` components within `<
 
 ```
 
-Text components such as Text, TextList, TextListItem need to be placed within a TextContent
-
 ### Unordered list
 
 ```ts file="./TextUnorderedList.tsx"
@@ -51,6 +49,14 @@ Text components such as Text, TextList, TextListItem need to be placed within a
 
 ```
 
+Text components such as Text, TextList, TextListItem can be placed within a TextContent to provide styling for html elements, and additional styling options applied to the children.
+
+### Wrapped in TextContent
+
+```ts file="./TextContentWrapped.tsx"
+
+```
+
 ### Link and visited link
 
 ```ts file="./TextVisited.tsx"

package/src/components/Text/examples/TextBody.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { TextContent, Text, TextVariants } from '@patternfly/react-core';
+import { Text, TextVariants } from '@patternfly/react-core';
 
 export const TextBody: React.FunctionComponent = () => (
-  <TextContent>
+  <>
     <Text component={TextVariants.p}>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla
       nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
@@ -20,5 +20,5 @@ export const TextBody: React.FunctionComponent = () => (
       turpis.
     </Text>
     <Text component={TextVariants.small}>Sometimes you need small text to display things like date created</Text>
-  </TextContent>
+  </>
 );

package/src/components/Text/examples/TextContentWrapped.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { TextContent, Text, TextVariants } from '@patternfly/react-core';
+
+export const TextContentWrapped: React.FunctionComponent = () => (
+  <TextContent>
+    <Text component={TextVariants.p}>
+      Text with a component of type "p" still renders the same when wrapped with a TextContent.
+    </Text>
+    <p>If located within a wrapping TextContent, html elements are styled as well!</p>
+  </TextContent>
+);

package/src/components/Text/examples/TextDescriptionList.tsx

@@ -1,17 +1,15 @@
 import React from 'react';
-import { TextContent, TextList, TextListVariants, TextListItem, TextListItemVariants } from '@patternfly/react-core';
+import { TextList, TextListVariants, TextListItem, TextListItemVariants } from '@patternfly/react-core';
 
 export const TextDescriptionList: React.FunctionComponent = () => (
-  <TextContent>
-    <TextList component={TextListVariants.dl}>
-      <TextListItem component={TextListItemVariants.dt}>Web</TextListItem>
-      <TextListItem component={TextListItemVariants.dd}>
-        The part of the Internet that contains websites and web pages
-      </TextListItem>
-      <TextListItem component={TextListItemVariants.dt}>HTML</TextListItem>
-      <TextListItem component={TextListItemVariants.dd}>A markup language for creating web pages</TextListItem>
-      <TextListItem component={TextListItemVariants.dt}>CSS</TextListItem>
-      <TextListItem component={TextListItemVariants.dd}>A technology to make HTML look better</TextListItem>
-    </TextList>
-  </TextContent>
+  <TextList component={TextListVariants.dl}>
+    <TextListItem component={TextListItemVariants.dt}>Web</TextListItem>
+    <TextListItem component={TextListItemVariants.dd}>
+      The part of the Internet that contains websites and web pages
+    </TextListItem>
+    <TextListItem component={TextListItemVariants.dt}>HTML</TextListItem>
+    <TextListItem component={TextListItemVariants.dd}>A markup language for creating web pages</TextListItem>
+    <TextListItem component={TextListItemVariants.dt}>CSS</TextListItem>
+    <TextListItem component={TextListItemVariants.dd}>A technology to make HTML look better</TextListItem>
+  </TextList>
 );

package/src/components/Text/examples/TextHeadings.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { TextContent, Text, TextVariants } from '@patternfly/react-core';
+import { Text, TextVariants } from '@patternfly/react-core';
 
 export const TextHeadings: React.FunctionComponent = () => (
-  <TextContent>
+  <>
     <Text component={TextVariants.h1}>Hello World</Text>
     <Text component={TextVariants.h2}>Second level</Text>
     <Text component={TextVariants.h3}>Third level</Text>
     <Text component={TextVariants.h4}>Fourth level</Text>
     <Text component={TextVariants.h5}>Fifth level</Text>
     <Text component={TextVariants.h6}>Sixth level</Text>
-  </TextContent>
+  </>
 );

package/src/components/Text/examples/TextOrderedList.tsx

@@ -1,16 +1,14 @@
 import React from 'react';
-import { TextContent, TextList, TextListVariants, TextListItem } from '@patternfly/react-core';
+import { TextList, TextListVariants, TextListItem } from '@patternfly/react-core';
 
 export const TextOrderedList: React.FunctionComponent = () => (
-  <TextContent>
-    <TextList component={TextListVariants.ol}>
-      <TextListItem>Donec blandit a lorem id convallis.</TextListItem>
-      <TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem>
-      <TextListItem>Integer in volutpat libero.</TextListItem>
-      <TextListItem>Donec a diam tellus.</TextListItem>
-      <TextListItem>Aenean nec tortor orci.</TextListItem>
-      <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem>
-      <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem>
-    </TextList>
-  </TextContent>
+  <TextList component={TextListVariants.ol}>
+    <TextListItem>Donec blandit a lorem id convallis.</TextListItem>
+    <TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem>
+    <TextListItem>Integer in volutpat libero.</TextListItem>
+    <TextListItem>Donec a diam tellus.</TextListItem>
+    <TextListItem>Aenean nec tortor orci.</TextListItem>
+    <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem>
+    <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem>
+  </TextList>
 );

package/src/components/Text/examples/TextPlainList.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Text, TextVariants, TextContent, TextList, TextListVariants, TextListItem } from '@patternfly/react-core';
+import { Text, TextVariants, TextList, TextListVariants, TextListItem } from '@patternfly/react-core';
 
 export const TextPlainList: React.FunctionComponent = () => (
-  <TextContent>
+  <>
     <Text component={TextVariants.h3}>Plain unordered list</Text>
     <TextList isPlain>
       <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
@@ -20,5 +20,5 @@ export const TextPlainList: React.FunctionComponent = () => (
       <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem>
       <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem>
     </TextList>
-  </TextContent>
+  </>
 );

package/src/components/Text/examples/TextUnorderedList.tsx

@@ -1,19 +1,17 @@
 import React from 'react';
-import { TextContent, TextList, TextListItem } from '@patternfly/react-core';
+import { TextList, TextListItem } from '@patternfly/react-core';
 
 export const TextUnorderedList: React.FunctionComponent = () => (
-  <TextContent>
-    <TextList>
-      <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
-      <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
-      <TextListItem>
-        Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
-        <TextList>
-          <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
-          <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
-        </TextList>
-      </TextListItem>
-      <TextListItem>Ut non enim metus.</TextListItem>
-    </TextList>
-  </TextContent>
+  <TextList>
+    <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
+    <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
+    <TextListItem>
+      Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
+      <TextList>
+        <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
+        <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
+      </TextList>
+    </TextListItem>
+    <TextListItem>Ut non enim metus.</TextListItem>
+  </TextList>
 );

package/src/components/Toolbar/ToolbarItem.tsx

@@ -80,7 +80,8 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
         <div
           className={css(
             styles.toolbarItem,
-            variant && styles.modifiers[toCamel(variant) as 'pagination' | 'label' | 'chipGroup'],
+            variant && styles.modifiers[toCamel(variant) as 'pagination' | 'label'],
+            variant === ToolbarItemVariant['chip-group'] && styles.modifiers.labelGroup,
             isAllExpanded && styles.modifiers.expanded,
             isOverflowContainer && styles.modifiers.overflowContainer,
             formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),

package/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap

@@ -100,7 +100,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
         hidden=""
       >
         <div
-          class="pf-v6-c-toolbar__item pf-m-chip-group"
+          class="pf-v6-c-toolbar__item pf-m-label-group"
         >
           <div
             class="pf-v6-c-label-group pf-m-category"