@patternfly/react-core 6.0.0-alpha.6 → 6.0.0-alpha.60

package/src/components/Tabs/examples/Tabs.md

@@ -36,15 +36,13 @@ Tabs can be styled as 'default' or 'boxed':
 ```ts file="./TabsDefault.tsx"
 ```
 
-### Boxed light tabs
+### Boxed secondary tabs
 
-To change the background color of boxed tabs, use the `variant` property. 
+To change the background color of boxed tabs or the tab content, use the `variant` property. 
 
-The following example passes `variant={isTabsLightScheme ? 'light300' : 'default'}` into the `<Tabs>` component to style the tabs with a lighter color.
+Toggle the tab color by selecting the 'Tabs secondary variant' checkbox in the following example.
 
-Toggle the tab color by selecting the 'Tabs light variation' checkbox in the following example.
-
-```ts file="./TabsBoxLight.tsx"
+```ts file="./TabsBoxSecondary.tsx"
 ```
 
 ### Vertical tabs
@@ -132,11 +130,11 @@ To add an icon to a tab, pass a `<TabTitleIcon>` component that contains the ico
 ```ts file="./TabsIconAndText.tsx"
 ```
 
-### Secondary tabs
+### Subtabs
 
-Use secondary tabs as "sub tabs" or within other components, like modals. Secondary tabs have less visually prominent styling. 
+Use subtabs within other components, like modals. Subtabs have less visually prominent styling. 
 
-To apply secondary styling to tabs, use the `isSecondary` property. 
+To apply subtab styling to tabs, use the `isSubtab` property. 
 
 ```ts file="./TabsSubtabs.tsx"
 ```
@@ -157,11 +155,11 @@ Nav tabs should use the `href` property to link the tab to the URL of another pa
 ```ts file="./TabsNav.tsx"
 ```
 
-### Secondary tabs linked to nav elements
+### Subtabs linked to nav elements
 
-Secondary tabs can also link to nav elements. 
+Subtabs can also link to nav elements. 
 
-```ts file="./TabsNavSecondary.tsx"
+```ts file="./TabsNavSubtab.tsx"
 ```
 
 ### With separate content

package/src/components/Tabs/examples/TabsBoxSecondary.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core';
+
+export const TabsBoxSecondary: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [isTabsBoxSecondary, setIsTabsBoxSecondary] = React.useState<boolean>(true);
+  // Toggle currently active tab
+  const handleTabClick = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  const toggleScheme = (checked: boolean) => {
+    setIsTabsBoxSecondary(checked);
+  };
+
+  const tooltip = (
+    <Tooltip content="Aria-disabled tabs are like disabled tabs, but focusable. Allows for tooltip support." />
+  );
+  return (
+    <div>
+      <Tabs
+        activeKey={activeTabKey}
+        onSelect={handleTabClick}
+        variant={isTabsBoxSecondary ? 'secondary' : 'default'}
+        isBox
+        aria-label="Tabs in the box light variation example"
+        role="region"
+      >
+        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label="Box light variation content - users">
+          Users
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>
+          Containers
+        </Tab>
+        <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>
+          Database
+        </Tab>
+        <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled>
+          Disabled
+        </Tab>
+        <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled>
+          ARIA Disabled
+        </Tab>
+        <Tab eventKey={5} title={<TabTitleText>ARIA Disabled (Tooltip)</TabTitleText>} isAriaDisabled tooltip={tooltip}>
+          ARIA Disabled (Tooltip)
+        </Tab>
+      </Tabs>
+      <div style={{ marginTop: '20px' }}>
+        <Checkbox
+          label="Tabs secondary variant"
+          isChecked={isTabsBoxSecondary}
+          onChange={(_event, checked) => toggleScheme(checked)}
+          id="toggle-tabs-variant"
+          name="toggle-tabs-variant"
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/Tabs/examples/TabsNavSubtab.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Tabs, Tab, TabsComponent, TabTitleText } from '@patternfly/react-core';
+
+export const TabsNavSubtab: React.FunctionComponent = () => {
+  const [activeTabKey1, setActiveTabKey1] = React.useState<string | number>(0);
+  const [activeTabKey2, setActiveTabKey2] = React.useState<string | number>(0);
+
+  // Toggle currently active primary tab
+  const handleTabClickFirst = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey1(tabIndex);
+  };
+
+  // Toggle currently active secondary tab
+  const handleTabClickSecond = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey2(tabIndex);
+  };
+
+  return (
+    <Tabs
+      activeKey={activeTabKey1}
+      onSelect={handleTabClickFirst}
+      component={TabsComponent.nav}
+      aria-label="Tabs in the sub tabs with nav element example"
+    >
+      <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} href="#" aria-label="Subtabs with nav content users">
+        <Tabs
+          activeKey={activeTabKey2}
+          isSubtab
+          onSelect={handleTabClickSecond}
+          aria-label="Local secondary"
+          component={TabsComponent.nav}
+        >
+          <Tab eventKey={20} title={<TabTitleText>Item 1</TabTitleText>} href="#">
+            Item 1 item section
+          </Tab>
+          <Tab eventKey={21} title={<TabTitleText>Item 2</TabTitleText>} href="#">
+            Item 2 section
+          </Tab>
+          <Tab eventKey={22} title={<TabTitleText>Item 3</TabTitleText>} href="#">
+            Item 3 section
+          </Tab>
+          <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled href="#">
+            Disabled
+          </Tab>
+          <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled href="#">
+            ARIA Disabled
+          </Tab>
+          <Tab eventKey={25} title={<TabTitleText>Item 6</TabTitleText>} href="#">
+            Item 6 section
+          </Tab>
+        </Tabs>
+      </Tab>
+      <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>} href="#">
+        Containers
+      </Tab>
+      <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>} href="#">
+        Database
+      </Tab>
+      <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled href="#">
+        Disabled
+      </Tab>
+      <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled href="#">
+        ARIA Disabled
+      </Tab>
+      <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>} href="#">
+        Network
+      </Tab>
+    </Tabs>
+  );
+};

package/src/components/Tabs/examples/TabsSubtabs.tsx

@@ -14,7 +14,7 @@ export const TabsSubtabs: React.FunctionComponent = () => {
     setActiveTabKey1(tabIndex);
   };
 
-  // Toggle currently active secondary tab
+  // Toggle currently active subtab
   const handleTabClickSecond = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
     tabIndex: string | number
@@ -37,35 +37,35 @@ export const TabsSubtabs: React.FunctionComponent = () => {
       >
         <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label="Tabs with subtabs content users">
           <Tabs
-            aria-label="secondary tabs for users"
+            aria-label="subtabs for users"
             role="region"
             activeKey={activeTabKey2}
-            isSecondary
+            isSubtab
             onSelect={handleTabClickSecond}
           >
-            <Tab eventKey={20} title={<TabTitleText>Secondary tab item 1</TabTitleText>}>
-              Secondary tab item 1 item section
+            <Tab eventKey={20} title={<TabTitleText>Subtab item 1</TabTitleText>}>
+              Subtab item 1 item section
             </Tab>
-            <Tab eventKey={21} title={<TabTitleText>Secondary tab item 2</TabTitleText>}>
-              Secondary tab item 2 section
+            <Tab eventKey={21} title={<TabTitleText>Subtab item 2</TabTitleText>}>
+              Subtab item 2 section
             </Tab>
-            <Tab eventKey={22} title={<TabTitleText>Secondary tab item 3</TabTitleText>}>
-              Secondary tab item 3 section
+            <Tab eventKey={22} title={<TabTitleText>Subtab item 3</TabTitleText>}>
+              Subtab item 3 section
             </Tab>
-            <Tab eventKey={23} title={<TabTitleText>Secondary tab item 4</TabTitleText>}>
-              Secondary tab item 4 section
+            <Tab eventKey={23} title={<TabTitleText>Subtab item 4</TabTitleText>}>
+              Subtab item 4 section
             </Tab>
-            <Tab eventKey={24} title={<TabTitleText>Secondary tab item 5</TabTitleText>}>
-              Secondary tab item 5 section
+            <Tab eventKey={24} title={<TabTitleText>Subtab item 5</TabTitleText>}>
+              Subtab item 5 section
             </Tab>
-            <Tab eventKey={25} title={<TabTitleText>Secondary tab item 6</TabTitleText>}>
-              Secondary tab item 6 section
+            <Tab eventKey={25} title={<TabTitleText>Subtab item 6</TabTitleText>}>
+              Subtab item 6 section
             </Tab>
-            <Tab eventKey={26} title={<TabTitleText>Secondary tab item 7</TabTitleText>}>
-              Secondary tab item 7 section
+            <Tab eventKey={26} title={<TabTitleText>Subtab item 7</TabTitleText>}>
+              Subtab item 7 section
             </Tab>
-            <Tab eventKey={27} title={<TabTitleText>Secondary tab item 8</TabTitleText>}>
-              Secondary tab item 8 section
+            <Tab eventKey={27} title={<TabTitleText>Subtab item 8</TabTitleText>}>
+              Subtab item 8 section
             </Tab>
           </Tabs>
         </Tab>
@@ -106,8 +106,8 @@ export const TabsSubtabs: React.FunctionComponent = () => {
           isChecked={isBox}
           onChange={(_event, checked) => toggleBox(checked)}
           aria-label="show box variation checkbox with sub tabs"
-          id="toggle-box-secondary"
-          name="toggle-box-secondary"
+          id="toggle-box-subtab"
+          name="toggle-box-subtab"
         />
       </div>
     </div>

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__/TextContent.test.tsx.snap

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

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

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

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

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,7 +49,15 @@ Text components such as Text, TextList, TextListItem need to be placed within a
 
 ```
 
-### Visited
+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>
+  </>
 );