@patternfly/react-core 6.0.0-alpha.87 → 6.0.0-alpha.89

package/src/components/Content/examples/ContentDescriptionList.tsx

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

package/src/components/Content/examples/ContentHeadings.tsx

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

package/src/components/Content/examples/ContentOrderedList.tsx

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

package/src/components/Content/examples/ContentPlainList.tsx

@@ -1,24 +1,28 @@
 import React from 'react';
-import { Text, TextVariants, TextList, TextListVariants, TextListItem } from '@patternfly/react-core';
+import { Content, ContentVariants } from '@patternfly/react-core';
 
 export const ContentPlainList: React.FunctionComponent = () => (
   <>
-    <Text component={TextVariants.h3}>Plain unordered list</Text>
-    <TextList isPlain>
-      <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.</TextListItem>
-      <TextListItem>Ut non enim metus.</TextListItem>
-    </TextList>
-    <Text component={TextVariants.h3}>Plain ordered list</Text>
-    <TextList component={TextListVariants.ol} isPlain>
-      <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>
+    <Content component={ContentVariants.h3}>Plain unordered list</Content>
+    <Content component={ContentVariants.ul} isPlainList>
+      <Content component={ContentVariants.li}>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</Content>
+      <Content component={ContentVariants.li}>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</Content>
+      <Content component={ContentVariants.li}>
+        Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
+      </Content>
+      <Content component={ContentVariants.li}>Ut non enim metus.</Content>
+    </Content>
+    <Content component={ContentVariants.h3}>Plain ordered list</Content>
+    <Content component={ContentVariants.ol} isPlainList>
+      <Content component={ContentVariants.li}>Donec blandit a lorem id convallis.</Content>
+      <Content component={ContentVariants.li}>
+        {' '}
+        component={ContentVariants.li}Cras gravida arcu at diam gravida gravida.
+      </Content>
+      <Content component={ContentVariants.li}>Integer in volutpat libero.</Content>
+      <Content component={ContentVariants.li}>Aenean nec tortor orci.</Content>
+      <Content component={ContentVariants.li}>Quisque aliquam cursus urna, non bibendum massa viverra eget.</Content>
+      <Content component={ContentVariants.li}>Vivamus maximus ultricies pulvinar.</Content>
+    </Content>
   </>
 );

package/src/components/Content/examples/ContentUnorderedList.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
-import { TextList, TextListItem } from '@patternfly/react-core';
+import { Content, ContentVariants } from '@patternfly/react-core';
 
 export const ContentUnorderedList: React.FunctionComponent = () => (
-  <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>
+  <Content component={ContentVariants.ul}>
+    <Content component={ContentVariants.li}>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</Content>
+    <Content component={ContentVariants.li}>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</Content>
+    <Content component={ContentVariants.li}>
       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>
+      <Content component={ContentVariants.ul}>
+        <Content component={ContentVariants.li}>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</Content>
+        <Content component={ContentVariants.li}>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</Content>
+      </Content>
+    </Content>
+    <Content component={ContentVariants.li}>Ut non enim metus.</Content>
+  </Content>
 );

package/src/components/Content/examples/ContentVisited.tsx

@@ -1,34 +1,34 @@
 import React from 'react';
-import { TextContent, Text, TextVariants } from '@patternfly/react-core';
+import { Content, ContentVariants } from '@patternfly/react-core';
 
 export const ContentVisited: React.FunctionComponent = () => (
   <>
-    <TextContent>
-      <Text component={TextVariants.h3}>Link example</Text>
-      <Text component={TextVariants.p}>
-        <Text component={TextVariants.a} isVisitedLink href="#">
+    <Content>
+      <Content component={ContentVariants.h3}>Link example</Content>
+      <Content component={ContentVariants.p}>
+        <Content component={ContentVariants.a} isVisitedLink href="#">
           Click to visit link
-        </Text>
-      </Text>
-    </TextContent>
+        </Content>
+      </Content>
+    </Content>
     <br />
-    <TextContent isVisited>
-      <Text component={TextVariants.h3}>Link content example</Text>
-      <Text component={TextVariants.p}>
-        <Text component={TextVariants.a} href="#">
+    <Content isVisitedLink>
+      <Content component={ContentVariants.h3}>Link content example</Content>
+      <Content component={ContentVariants.p}>
+        <Content component={ContentVariants.a} href="#">
           content link 1
-        </Text>
-      </Text>
-      <Text component={TextVariants.p}>
-        <Text component={TextVariants.a} href="#">
+        </Content>
+      </Content>
+      <Content component={ContentVariants.p}>
+        <Content component={ContentVariants.a} href="#">
           content link 2
-        </Text>
-      </Text>
-      <Text component={TextVariants.p}>
-        <Text component={TextVariants.a} href="#">
+        </Content>
+      </Content>
+      <Content component={ContentVariants.p}>
+        <Content component={ContentVariants.a} href="#">
           content link 3
-        </Text>
-      </Text>
-    </TextContent>
+        </Content>
+      </Content>
+    </Content>
   </>
 );

package/src/components/Content/examples/ContentWrapper.tsx

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

package/src/components/Content/index.ts

@@ -1,4 +1 @@
 export * from './Content';
-export * from './TextContent';
-export * from './TextList';
-export * from './TextListItem';

package/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,9 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
   return (
     <>
       <div key="example-1">
-        <TextContent>
-          <Text component={TextVariants.h4}>Default fitting - example 1</Text>
-        </TextContent>
+        <Content>
+          <h4>Default fitting - example 1</h4>
+        </Content>
         <DataList aria-label="Width modifier data list example 1">
           <DataListItem aria-labelledby="width-ex1-item1">
             <DataListItemRow>
@@ -71,9 +69,9 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
         </DataList>
       </div>
       <div key="example-2">
-        <TextContent>
-          <Text component={TextVariants.h4}>Flex modifiers - example 2</Text>
-        </TextContent>
+        <Content>
+          <h4>Flex modifiers - example 2</h4>
+        </Content>
         <DataList aria-label="Width modifier data list example 2">
           <DataListItem aria-labelledby="width-ex2-item1">
             <DataListItemRow>
@@ -139,9 +137,9 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
         </DataList>
       </div>
       <div key="example-3">
-        <TextContent>
-          <Text component={TextVariants.h4}>Flex modifiers - example 3</Text>
-        </TextContent>
+        <Content>
+          <h4>Flex modifiers - example 3</h4>
+        </Content>
         <DataList aria-label="Width modifier data list example 3">
           <DataListItem aria-labelledby="width-ex3-item1" isExpanded={show}>
             <DataListItemRow>

package/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>
 );

package/src/components/Modal/examples/ModalCustomHeader.tsx

@@ -8,7 +8,7 @@ import {
   ModalVariant,
   Title,
   TitleSizes,
-  TextContent,
+  Content,
   Flex
 } from '@patternfly/react-core';
 
@@ -34,12 +34,10 @@ export const ModalCustomHeaderFooter: React.FunctionComponent = () => {
         aria-describedby="modal-custom-header-description"
       >
         <ModalHeader>
-          <TextContent>
-            <Title id="modal-custom-header-label" headingLevel="h1" size={TitleSizes['2xl']}>
-              Custom header modal
-            </Title>
+          <Content>
+            <h1 id="modal-custom-header-label">Custom header modal</h1>
             <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">

package/src/components/Slider/examples/Slider.md

@@ -5,7 +5,7 @@ cssPrefix: pf-v5-c-slider
 propComponents: ['Slider', 'SliderStepObject']
 ---
 
-import { Slider, Button, Text, TextVariants } from '@patternfly/react-core';
+import { Slider, Button, Content, ContentVariants } 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';

package/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';
@@ -64,7 +64,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}

package/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}

package/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}

package/src/components/Slider/examples/SliderDiscrete.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 SliderDiscrete: React.FunctionComponent = () => {
   const initialValues = {
@@ -50,15 +50,15 @@ export const SliderDiscrete: React.FunctionComponent = () => {
 
   return (
     <>
-      <Text component={TextVariants.h3}>Slider value is: {numValue.value1}</Text>
+      <Content component="h3">Slider value is: {numValue.value1}</Content>
       <Slider
         value={initialValues.value1}
         onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value1')}
         customSteps={steps}
       />
       <br />
-      <Text component={TextVariants.h3}>Slider value is: {numValue.value2}</Text>
-      <Text component={TextVariants.small}>(min = 0, max = 200, step = 50) </Text>
+      <Content component="h3">Slider value is: {numValue.value2}</Content>
+      <Content component="small">(min = 0, max = 200, step = 50) </Content>
       <Slider
         value={initialValues.value2}
         onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value2')}
@@ -67,8 +67,8 @@ export const SliderDiscrete: React.FunctionComponent = () => {
         showTicks
       />
       <br />
-      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value3)}</Text>
-      <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries not shown) </Text>
+      <Content component="h3">Slider value is: {Math.floor(numValue.value3)}</Content>
+      <Content component="small">(min = -25, max = 75, step = 10, boundaries not shown) </Content>
       <Slider
         value={initialValues.value3}
         onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value3')}
@@ -79,8 +79,8 @@ export const SliderDiscrete: React.FunctionComponent = () => {
         showBoundaries={false}
       />
       <br />
-      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value4)}</Text>
-      <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries shown) </Text>
+      <Content component="h3">Slider value is: {Math.floor(numValue.value4)}</Content>
+      <Content component="small">(min = -25, max = 75, step = 10, boundaries shown) </Content>
       <Slider
         value={initialValues.value4}
         onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value4')}
@@ -90,8 +90,8 @@ export const SliderDiscrete: React.FunctionComponent = () => {
         showTicks
       />
       <br />
-      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value5)}</Text>
-      <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries shown, ticks not shown) </Text>
+      <Content component="h3">Slider value is: {Math.floor(numValue.value5)}</Content>
+      <Content component="small">(min = -25, max = 75, step = 10, boundaries shown, ticks not shown) </Content>
       <Slider
         value={initialValues.value5}
         onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value5')}
@@ -100,8 +100,8 @@ export const SliderDiscrete: React.FunctionComponent = () => {
         step={10}
       />
       <br />
-      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value6)}</Text>
-      <Text component={TextVariants.small}>(max = 5, custom steps) </Text>
+      <Content component="h3">Slider value is: {Math.floor(numValue.value6)}</Content>
+      <Content component="small">(max = 5, custom steps) </Content>
       <Slider
         value={initialValues.value6}
         showTicks
@@ -110,8 +110,8 @@ export const SliderDiscrete: React.FunctionComponent = () => {
         onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value6')}
       />
       <br />
-      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value7)}</Text>
-      <Text component={TextVariants.small}>(min = 12, max = 86, custom steps with non linear data) </Text>
+      <Content component="h3">Slider value is: {Math.floor(numValue.value7)}</Content>
+      <Content component="small">(min = 12, max = 86, custom steps with non linear data) </Content>
       <Slider
         value={initialValues.value7}
         showTicks

package/src/components/Spinner/examples/SpinnerInline.tsx

@@ -1,29 +1,27 @@
 import React from 'react';
-import { Spinner, Text, TextContent } from '@patternfly/react-core';
+import { Spinner, Content } from '@patternfly/react-core';
 
 export const SpinnerInline: React.FunctionComponent = () => (
   <React.Fragment>
-    <TextContent>
-      <Text component="h1">
+    <Content>
+      <h1>
         Heading
         <Spinner isInline aria-label="Spinner in a heading" />
-      </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
         <Spinner isInline aria-label="spinner in a subheading" />
-      </Text>
-      <Text component="p">
+      </h2>
+      <p>
         Curabitur accumsan turpis pharetra blandit. Quisque condimentum maximus mi,{' '}
         <Spinner isInline aria-label="Spinner in a paragraph" /> sit amet commodo arcu rutrum id. Proin pretium urna vel
         cursus venenatis. Suspendisse potenti.
-      </Text>
+      </p>
       <small>
         Sometimes you need small text
         <Spinner isInline aria-label="Spinner in a small element" />
       </small>
-    </TextContent>
+    </Content>
   </React.Fragment>
 );

package/src/demos/Banner.md

@@ -13,17 +13,7 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 ```js isFullscreen
 import React from 'react';
-import {
-  Banner,
-  Card,
-  CardBody,
-  Flex,
-  Gallery,
-  GalleryItem,
-  PageSection,
-  TextContent,
-  Text
-} from '@patternfly/react-core';
+import { Banner, Card, CardBody, Flex, Gallery, GalleryItem, PageSection, Content } from '@patternfly/react-core';
 
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import { css } from '@patternfly/react-styles';
@@ -48,13 +38,13 @@ class BannerDemo extends React.Component {
             </Flex>
           </Banner>
           <PageSection>
-            <TextContent>
-              <Text component="h1">Main title</Text>
-              <Text component="p">
-                Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
+            <Content>
+              <h1>Main title</h1>
+              <p>
+                Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
                 of it’s relative line height of 1.5.
-              </Text>
-            </TextContent>
+              </p>
+            </Content>
           </PageSection>
           <PageSection>
             <Gallery hasGutter>
@@ -87,8 +77,7 @@ import {
   Gallery,
   GalleryItem,
   PageSection,
-  TextContent,
-  Text
+  Content
 } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import { css } from '@patternfly/react-styles';
@@ -122,13 +111,13 @@ class BannerDemo extends React.Component {
           <FlexItem grow={{ default: 'grow' }} style={{ minHeight: 0 }}>
             <DashboardWrapper breadcrumb={null}>
               <PageSection>
-                <TextContent>
-                  <Text component="h1">Main title</Text>
-                  <Text component="p">
-                    Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
+                <Content>
+                  <h1>Main title</h1>
+                  <p>
+                    Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
                     of it’s relative line height of 1.5.
-                  </Text>
-                </TextContent>
+                  </p>
+                </Content>
               </PageSection>
               <PageSection>
                 <Gallery hasGutter>