fix(misc): remove occurences of Text, TextContent, TextList, TextList…

…Item
patternfly · Jun 13, 2024 · 91cf95d · 91cf95d
1 parent 375dbb0
commit 91cf95d
Show file tree

Hide file tree

Showing 57 changed files with 452 additions and 530 deletions.
diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
+import { AboutModal, Button, Content } from '@patternfly/react-core';
 import brandImg from '../../assets/PF-IconLogo.svg';
 
 export const AboutModalBasic: React.FunctionComponent = () => {
@@ -23,24 +23,24 @@ export const AboutModalBasic: React.FunctionComponent = () => {
         backgroundImageSrc="/assets/images/pf-background.svg"
         productName="name"
       >
-        <TextContent>
-          <TextList component="dl">
-            <TextListItem component="dt">CFME version</TextListItem>
-            <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
-            <TextListItem component="dt">Cloudforms Version</TextListItem>
-            <TextListItem component="dd">4.1</TextListItem>
-            <TextListItem component="dt">Server name</TextListItem>
-            <TextListItem component="dd">40DemoMaster</TextListItem>
-            <TextListItem component="dt">User name</TextListItem>
-            <TextListItem component="dd">Administrator</TextListItem>
-            <TextListItem component="dt">User role</TextListItem>
-            <TextListItem component="dd">EvmRole-super_administrator</TextListItem>
-            <TextListItem component="dt">Browser version</TextListItem>
-            <TextListItem component="dd">601.2</TextListItem>
-            <TextListItem component="dt">Browser OS</TextListItem>
-            <TextListItem component="dd">Mac</TextListItem>
-          </TextList>
-        </TextContent>
+        <Content>
+          <dl>
+            <dt>CFME version</dt>
+            <dd>5.5.3.4.20102789036450</dd>
+            <dt>Cloudforms Version</dt>
+            <dd>4.1</dd>
+            <dt>Server name</dt>
+            <dd>40DemoMaster</dd>
+            <dt>User name</dt>
+            <dd>Administrator</dd>
+            <dt>User role</dt>
+            <dd>EvmRole-super_administrator</dd>
+            <dt>Browser version</dt>
+            <dd>601.2</dd>
+            <dt>Browser OS</dt>
+            <dd>Mac</dd>
+          </dl>
+        </Content>
       </AboutModal>
     </React.Fragment>
   );

diff --git a/.../react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx b/.../react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { AboutModal, Alert, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
+import { AboutModal, Alert, Button, Content } from '@patternfly/react-core';
 import brandImg from '../../assets/PF-IconLogo.svg';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
@@ -25,29 +25,29 @@ export const AboutModalComplexUserPositionedContent: React.FunctionComponent = (
         hasNoContentContainer={true}
         productName="Product name"
       >
-        <TextContent id="test1" className={spacing.pyXl}>
+        <Content id="test1" className={spacing.pyXl}>
           <h4>About</h4>
           <p>Content here</p>
-        </TextContent>
+        </Content>
         <Alert variant="info" title="Updates available" />
-        <TextContent id="test2" className={spacing.pyXl}>
-          <TextList component="dl">
-            <TextListItem component="dt">CFME version</TextListItem>
-            <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
-            <TextListItem component="dt">Cloudforms version</TextListItem>
-            <TextListItem component="dd">4.1</TextListItem>
-            <TextListItem component="dt">Server name</TextListItem>
-            <TextListItem component="dd">40DemoMaster</TextListItem>
-            <TextListItem component="dt">User name</TextListItem>
-            <TextListItem component="dd">Administrator</TextListItem>
-            <TextListItem component="dt">User role</TextListItem>
-            <TextListItem component="dd">EvmRole-super_administrator</TextListItem>
-            <TextListItem component="dt">Browser version</TextListItem>
-            <TextListItem component="dd">601.2</TextListItem>
-            <TextListItem component="dt">Browser OS</TextListItem>
-            <TextListItem component="dd">Mac</TextListItem>
-          </TextList>
-        </TextContent>
+        <Content id="test2" className={spacing.pyXl}>
+          <dl>
+            <dt>CFME version</dt>
+            <dd>5.5.3.4.20102789036450</dd>
+            <dt>Cloudforms version</dt>
+            <dd>4.1</dd>
+            <dt>Server name</dt>
+            <dd>40DemoMaster</dd>
+            <dt>User name</dt>
+            <dd>Administrator</dd>
+            <dt>User role</dt>
+            <dd>EvmRole-super_administrator</dd>
+            <dt>Browser version</dt>
+            <dd>601.2</dd>
+            <dt>Browser OS</dt>
+            <dd>Mac</dd>
+          </dl>
+        </Content>
       </AboutModal>
     </React.Fragment>
   );

diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
+import { AboutModal, Button, Content } from '@patternfly/react-core';
 import brandImg from '../../assets/PF-IconLogo.svg';
 
 export const AboutModalWithoutProductName: React.FunctionComponent = () => {
@@ -23,24 +23,24 @@ export const AboutModalWithoutProductName: React.FunctionComponent = () => {
         backgroundImageSrc="/assets/images/pf-background.svg"
         aria-label="No product name about modal"
       >
-        <TextContent>
-          <TextList component="dl">
-            <TextListItem component="dt">CFME version</TextListItem>
-            <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
-            <TextListItem component="dt">Cloudforms version</TextListItem>
-            <TextListItem component="dd">4.1</TextListItem>
-            <TextListItem component="dt">Server name</TextListItem>
-            <TextListItem component="dd">40DemoMaster</TextListItem>
-            <TextListItem component="dt">User name</TextListItem>
-            <TextListItem component="dd">Administrator</TextListItem>
-            <TextListItem component="dt">User role</TextListItem>
-            <TextListItem component="dd">EvmRole-super_administrator</TextListItem>
-            <TextListItem component="dt">Browser version</TextListItem>
-            <TextListItem component="dd">601.2</TextListItem>
-            <TextListItem component="dt">Browser OS</TextListItem>
-            <TextListItem component="dd">Mac</TextListItem>
-          </TextList>
-        </TextContent>
+        <Content>
+          <dl>
+            <dt>CFME version</dt>
+            <dd>5.5.3.4.20102789036450</dd>
+            <dt>Cloudforms version</dt>
+            <dd>4.1</dd>
+            <dt>Server name</dt>
+            <dd>40DemoMaster</dd>
+            <dt>User name</dt>
+            <dd>Administrator</dd>
+            <dt>User role</dt>
+            <dd>EvmRole-super_administrator</dd>
+            <dt>Browser version</dt>
+            <dd>601.2</dd>
+            <dt>Browser OS</dt>
+            <dd>Mac</dd>
+          </dl>
+        </Content>
       </AboutModal>
     </React.Fragment>
   );

diff --git a/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx b/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  Content,
   DataList,
   DataListItem,
   DataListCell,
@@ -9,9 +10,6 @@ import {
   DataListContent,
   DataListItemCells,
   DataListItemRow,
-  Text,
-  TextVariants,
-  TextContent,
   Dropdown,
   DropdownList,
   DropdownItem,
@@ -44,9 +42,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
   return (
     <>
       <div key="example-1">
-        <TextContent>
-          <Text component={TextVariants.h4}>Default fitting - example 1</Text>
-        </TextContent>
+        <Content component="h4">Default fitting - example 1</Content>
         <DataList aria-label="Width modifier data list example 1">
           <DataListItem aria-labelledby="width-ex1-item1">
             <DataListItemRow>
@@ -71,9 +67,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
         </DataList>
       </div>
       <div key="example-2">
-        <TextContent>
-          <Text component={TextVariants.h4}>Flex modifiers - example 2</Text>
-        </TextContent>
+        <Content component="h4">Flex modifiers - example 2</Content>
         <DataList aria-label="Width modifier data list example 2">
           <DataListItem aria-labelledby="width-ex2-item1">
             <DataListItemRow>
@@ -139,9 +133,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
         </DataList>
       </div>
       <div key="example-3">
-        <TextContent>
-          <Text component={TextVariants.h4}>Flex modifiers - example 3</Text>
-        </TextContent>
+        <Content component="h4">Flex modifiers - example 3</Content>
         <DataList aria-label="Width modifier data list example 3">
           <DataListItem aria-labelledby="width-ex3-item1" isExpanded={show}>
             <DataListItemRow>

diff --git a/packages/react-core/src/components/Icon/examples/IconInline.tsx b/packages/react-core/src/components/Icon/examples/IconInline.tsx
@@ -1,26 +1,24 @@
 import React from 'react';
-import { Icon, Text, TextContent } from '@patternfly/react-core';
+import { Icon, Content } from '@patternfly/react-core';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const IconInline: React.FunctionComponent = () => (
   <React.Fragment>
-    <TextContent>
-      <Text component="h1">
+    <Content>
+      <h1>
         Heading
         <Icon isInline>
           <PlusCircleIcon />
         </Icon>
-      </Text>
-      <Text component="p">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus.
-      </Text>
-      <Text component="h2">
+      </h1>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus.</p>
+      <h2>
         Second level
         <Icon isInline>
           <PlusCircleIcon />
         </Icon>
-      </Text>
-      <Text component="p">
+      </h2>
+      <p>
         <Icon isInline>
           <PlusCircleIcon />
         </Icon>
@@ -33,7 +31,7 @@ export const IconInline: React.FunctionComponent = () => (
         </strong>
         blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus
         venenatis. Suspendisse potenti.
-      </Text>
+      </p>
       <small>
         Sometimes you need small text
         <Icon isInline>
@@ -57,6 +55,6 @@ export const IconInline: React.FunctionComponent = () => (
         <PlusCircleIcon />
       </Icon>
       extra large
-    </TextContent>
+    </Content>
   </React.Fragment>
 );
diff --git a/packages/react-core/src/components/Modal/examples/ModalCustomHeader.tsx b/packages/react-core/src/components/Modal/examples/ModalCustomHeader.tsx
@@ -8,7 +8,7 @@ import {
   ModalVariant,
   Title,
   TitleSizes,
-  TextContent,
+  Content,
   Flex
 } from '@patternfly/react-core';
 
@@ -34,12 +34,12 @@ export const ModalCustomHeaderFooter: React.FunctionComponent = () => {
         aria-describedby="modal-custom-header-description"
       >
         <ModalHeader>
-          <TextContent>
+          <Content>
             <Title id="modal-custom-header-label" headingLevel="h1" size={TitleSizes['2xl']}>
               Custom header modal
             </Title>
             <p>Add custom content to the header by not passing the titles prop the modal box header component.</p>
-          </TextContent>
+          </Content>
         </ModalHeader>
         <ModalBody>
           <span id="modal-custom-header-description">

diff --git a/packages/react-core/src/components/Slider/examples/SliderActions.tsx b/packages/react-core/src/components/Slider/examples/SliderActions.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Slider, SliderOnChangeEvent, Button, Text, TextVariants } from '@patternfly/react-core';
+import { Slider, SliderOnChangeEvent, Button, Content } from '@patternfly/react-core';
 import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import LockIcon from '@patternfly/react-icons/dist/esm/icons/lock-icon';
@@ -61,7 +61,7 @@ export const SliderActions: React.FunctionComponent = () => {
 
   return (
     <>
-      <Text component={TextVariants.h3}>Slider value is: {value1}</Text>
+      <Content component="h3">Slider value is: {value1}</Content>
       <Slider
         value={value1}
         onChange={onChange1}

diff --git a/packages/react-core/src/components/Slider/examples/SliderContinuous.tsx b/packages/react-core/src/components/Slider/examples/SliderContinuous.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Checkbox, Slider, SliderOnChangeEvent, Text, TextVariants } from '@patternfly/react-core';
+import { Checkbox, Slider, SliderOnChangeEvent, Content } from '@patternfly/react-core';
 
 export const SliderContinuous: React.FunctionComponent = () => {
   const [hasTooltipOverThumb, setHasTooltipOverThumb] = React.useState(false);
@@ -15,14 +15,14 @@ export const SliderContinuous: React.FunctionComponent = () => {
         onChange={(_event: React.FormEvent<HTMLInputElement>, checked: boolean) => setHasTooltipOverThumb(checked)}
         style={{ marginBottom: 20 }}
       />
-      <Text component={TextVariants.h3}>Slider Value is: {value}</Text>
+      <Content component="h3">Slider Value is: {value}</Content>
       <Slider
         hasTooltipOverThumb={hasTooltipOverThumb}
         value={value}
         onChange={(_event: SliderOnChangeEvent, value: number) => setValue(value)}
       />
       <br />
-      <Text component={TextVariants.h3}>Slider value is: {valueCustom}</Text>
+      <Content component="h3">Slider value is: {valueCustom}</Content>
       <Slider
         onChange={(_event: SliderOnChangeEvent, value: number) => setValueCustom(value)}
         value={valueCustom}

diff --git a/packages/react-core/src/components/Slider/examples/SliderDisabled.tsx b/packages/react-core/src/components/Slider/examples/SliderDisabled.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Slider, SliderOnChangeEvent, Text, TextVariants } from '@patternfly/react-core';
+import { Slider, SliderOnChangeEvent, Content } from '@patternfly/react-core';
 
 export const SliderDisabled: React.FunctionComponent = () => {
   const [value, setValue] = React.useState(50);
@@ -22,7 +22,7 @@ export const SliderDisabled: React.FunctionComponent = () => {
 
   return (
     <>
-      <Text component={TextVariants.h3}>Slider value is: {displayValue()}</Text>
+      <Content component="h3">Slider value is: {displayValue()}</Content>
       <Slider
         isDisabled
         value={value}