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

package/src/demos/examples/Nav/NavDefault.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {
   Card,
   CardBody,
+  Content,
   Gallery,
   GalleryItem,
   Nav,
@@ -11,9 +12,7 @@ import {
   PageSection,
   PageSidebar,
   PageSidebarBody,
-  SkipToContent,
-  TextContent,
-  Text
+  SkipToContent
 } from '@patternfly/react-core';
 import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
@@ -72,13 +71,13 @@ export const NavDefault: React.FunctionComponent = () => {
         mainContainerId={pageId}
       >
         <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 its relative line height of 1.5.
-            </Text>
-          </TextContent>
+            </p>
+          </Content>
         </PageSection>
         <PageSection>
           <Gallery hasGutter>

package/src/demos/examples/Nav/NavExpandable.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {
   Card,
   CardBody,
+  Content,
   Gallery,
   GalleryItem,
   Nav,
@@ -12,9 +13,7 @@ import {
   PageSection,
   PageSidebar,
   PageSidebarBody,
-  SkipToContent,
-  TextContent,
-  Text
+  SkipToContent
 } from '@patternfly/react-core';
 import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
@@ -98,13 +97,13 @@ export const NavExpandableDemo: React.FunctionComponent = () => {
         mainContainerId={pageId}
       >
         <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 its relative line height of 1.5.
-            </Text>
-          </TextContent>
+            </p>
+          </Content>
         </PageSection>
         <PageSection>
           <Gallery hasGutter>

package/src/demos/examples/Nav/NavGrouped.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  Content,
   Nav,
   NavGroup,
   NavItem,
@@ -7,9 +8,7 @@ import {
   PageSection,
   PageSidebar,
   PageSidebarBody,
-  SkipToContent,
-  TextContent,
-  Text
+  SkipToContent
 } from '@patternfly/react-core';
 import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 
@@ -80,13 +79,13 @@ export const NavGrouped: React.FunctionComponent = () => {
         mainContainerId={pageId}
       >
         <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 its relative line height of 1.5.
-            </Text>
-          </TextContent>
+            </p>
+          </Content>
         </PageSection>
         <PageSection>Section 1</PageSection>
         <PageSection>Section 2</PageSection>

package/src/demos/examples/Nav/NavHorizontal.tsx

@@ -6,6 +6,7 @@ import {
   ButtonVariant,
   Card,
   CardBody,
+  Content,
   Divider,
   Dropdown,
   DropdownGroup,
@@ -24,8 +25,6 @@ import {
   Page,
   PageSection,
   SkipToContent,
-  TextContent,
-  Text,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -216,13 +215,13 @@ export const NavHorizontal: React.FunctionComponent = () => {
         mainContainerId={pageId}
       >
         <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 its relative line height of 1.5.
-            </Text>
-          </TextContent>
+            </p>
+          </Content>
         </PageSection>
         <PageSection>
           <Gallery hasGutter>

package/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx

@@ -6,6 +6,7 @@ import {
   ButtonVariant,
   Card,
   CardBody,
+  Content,
   Divider,
   Dropdown,
   DropdownGroup,
@@ -27,8 +28,6 @@ import {
   PageSectionTypes,
   PageToggleButton,
   SkipToContent,
-  TextContent,
-  Text,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -271,13 +270,13 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
           {DashboardBreadcrumb}
         </PageSection>
         <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>

package/src/demos/examples/Nav/NavManual.tsx

@@ -6,6 +6,7 @@ import {
   ButtonVariant,
   Card,
   CardBody,
+  Content,
   Divider,
   Dropdown,
   DropdownGroup,
@@ -28,8 +29,6 @@ import {
   PageSidebarBody,
   PageToggleButton,
   SkipToContent,
-  TextContent,
-  Text,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -247,13 +246,13 @@ export const NavManual: React.FunctionComponent = () => {
         mainContainerId={pageId}
       >
         <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 its relative line height of 1.5.
-            </Text>
-          </TextContent>
+            </p>
+          </Content>
         </PageSection>
         <PageSection>
           <Gallery hasGutter>

package/src/demos/examples/Nav/NavWithSubnav.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {
   Card,
   CardBody,
+  Content,
   Gallery,
   GalleryItem,
   Nav,
@@ -12,9 +13,7 @@ import {
   PageSectionTypes,
   PageSidebar,
   PageSidebarBody,
-  SkipToContent,
-  TextContent,
-  Text
+  SkipToContent
 } from '@patternfly/react-core';
 import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
@@ -116,13 +115,13 @@ export const NavWithSubnav: React.FunctionComponent = () => {
           {DashboardBreadcrumb}
         </PageSection>
         <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>

package/src/demos/examples/Page/PageContextSelector.tsx

@@ -31,8 +31,7 @@ import {
   PageSidebarBody,
   PageToggleButton,
   SkipToContent,
-  Text,
-  TextContent,
+  Content,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -298,10 +297,10 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
       isBreadcrumbWidthLimited
     >
       <PageSection isWidthLimited>
-        <TextContent>
-          <Text component="h1">Main title</Text>
-          <Text component="p">This is a full page demo.</Text>
-        </TextContent>
+        <Content>
+          <Content component="h1">Main title</Content>
+          <Content component="p">This is a full page demo.</Content>
+        </Content>
       </PageSection>
       <PageSection isWidthLimited>
         <Gallery hasGutter>

package/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx

@@ -8,6 +8,7 @@ import {
   ButtonVariant,
   Card,
   CardBody,
+  Content,
   Divider,
   Dropdown,
   DropdownGroup,
@@ -31,8 +32,6 @@ import {
   PageSidebarBody,
   PageToggleButton,
   SkipToContent,
-  Text,
-  TextContent,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -270,10 +269,10 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
       }}
     >
       <PageSection isWidthLimited>
-        <TextContent>
-          <Text component="h1">Main title</Text>
-          <Text component="p">This is a full page demo.</Text>
-        </TextContent>
+        <Content>
+          <h1>Main title</h1>
+          <p>This is a full page demo.</p>
+        </Content>
       </PageSection>
       <PageSection isWidthLimited>
         <Gallery hasGutter>

package/src/demos/examples/Page/PageStickySectionGroup.tsx

@@ -8,6 +8,7 @@ import {
   ButtonVariant,
   Card,
   CardBody,
+  Content,
   Divider,
   Dropdown,
   DropdownGroup,
@@ -31,8 +32,6 @@ import {
   PageSidebarBody,
   PageToggleButton,
   SkipToContent,
-  Text,
-  TextContent,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -266,10 +265,10 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
       isBreadcrumbGrouped
       additionalGroupedContent={
         <PageSection isWidthLimited>
-          <TextContent>
-            <Text component="h1">Main title</Text>
-            <Text component="p">This is a full page demo.</Text>
-          </TextContent>
+          <Content>
+            <h1>Main title</h1>
+            <p>This is a full page demo.</p>
+          </Content>
         </PageSection>
       }
       groupProps={{

package/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx

@@ -8,6 +8,7 @@ import {
   ButtonVariant,
   Card,
   CardBody,
+  Content,
   Divider,
   Dropdown,
   DropdownGroup,
@@ -33,8 +34,6 @@ import {
   PageSidebarBody,
   PageToggleButton,
   SkipToContent,
-  Text,
-  TextContent,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -266,10 +265,10 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
           </Breadcrumb>
         </PageBreadcrumb>
         <PageSection isWidthLimited>
-          <TextContent>
-            <Text component="h1">Main title</Text>
-            <Text component="p">This is a full page demo.</Text>
-          </TextContent>
+          <Content>
+            <h1>Main title</h1>
+            <p>This is a full page demo.</p>
+          </Content>
         </PageSection>{' '}
       </PageGroup>
       <PageSection>

package/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx

@@ -6,6 +6,7 @@ import {
   CardHeader,
   CardBody,
   CardTitle,
+  Content,
   Divider,
   Drawer,
   DrawerActions,
@@ -24,14 +25,11 @@ import {
   MenuToggle,
   MenuToggleCheckbox,
   PageSection,
-  PageSectionVariants,
   Pagination,
   Progress,
   Select,
   SelectList,
   SelectOption,
-  TextContent,
-  Text,
   Title,
   Toolbar,
   ToolbarFilter,
@@ -573,11 +571,9 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
                 </Button>
               </FlexItem>
               <FlexItem>
-                <TextContent>
-                  <Text component="small" className="pf-v6-u-color-200 pf-v6-u-font-family-text">
-                    Provided by Red Hat
-                  </Text>
-                </TextContent>
+                <Content>
+                  <small className="pf-v6-u-color-200 pf-v6-u-font-family-text">Provided by Red Hat</small>
+                </Content>
               </FlexItem>
             </Flex>
           </CardTitle>
@@ -620,11 +616,11 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper mainContainerId="main-content-card-view-default-nav" breadcrumb={null}>
-      <PageSection variant={PageSectionVariants.light}>
-        <TextContent>
-          <Text component="h1">Projects</Text>
-          <Text component="p">This is a demo that showcases Patternfly Cards.</Text>
-        </TextContent>
+      <PageSection>
+        <Content>
+          <h1>Projects</h1>
+          <p>This is a demo that showcases Patternfly cards.</p>
+        </Content>
       </PageSection>
       <PageSection isFilled padding={{ default: 'noPadding' }}>
         <Toolbar id="card-view-data-toolbar-group-types" clearAllFilters={onDelete}>
@@ -634,7 +630,7 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
       </PageSection>
       <PageSection isFilled padding={{ default: 'noPadding' }}>
         <Drawer isExpanded={isDrawerExpanded} className={'pf-m-inline-on-2xl'}>
-          <DrawerContent panelContent={panelContent} colorVariant="no-background">
+          <DrawerContent panelContent={panelContent}>
             <DrawerContentBody hasPadding>{drawerContent}</DrawerContentBody>
           </DrawerContent>
         </Drawer>

package/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {
   Button,
   ButtonVariant,
+  Content,
   DataList,
   DataListAction,
   DataListCell,
@@ -30,8 +31,6 @@ import {
   Progress,
   Stack,
   StackItem,
-  Text,
-  TextContent,
   TextInput,
   Title,
   Select,
@@ -419,13 +418,13 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
   return (
     <DashboardWrapper>
       <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>
       <Divider component="div" />
       <PageSection padding={{ default: 'noPadding' }}>

package/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   Card,
+  Content,
   DataList,
   DataListCell,
   DataListItem,
@@ -25,10 +26,7 @@ import {
   FlexItem,
   MenuToggle,
   PageSection,
-  PageSectionVariants,
   Progress,
-  Text,
-  TextContent,
   Title
 } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
@@ -183,14 +181,14 @@ export const PrimaryDetailDataListInCard: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper>
-      <PageSection variant={PageSectionVariants.light}>
-        <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 />
+      <PageSection>
+        <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>
       <Divider component="div" />
       <PageSection>

package/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {
   Button,
   ButtonVariant,
+  Content,
   DataList,
   DataListAction,
   DataListCell,
@@ -30,8 +31,6 @@ import {
   Progress,
   Stack,
   StackItem,
-  Text,
-  TextContent,
   TextInput,
   Title,
   Select,
@@ -419,13 +418,13 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
   return (
     <DashboardWrapper mainContainerId="main-content-page-layout-default-nav">
       <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>
       <Divider component="div" />
       <PageSection padding={{ default: 'noPadding' }}>

package/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {
   Button,
   ButtonVariant,
+  Content,
   DataList,
   DataListAction,
   DataListCell,
@@ -30,8 +31,6 @@ import {
   Progress,
   Stack,
   StackItem,
-  Text,
-  TextContent,
   TextInput,
   Title,
   Select,
@@ -419,13 +418,13 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
   return (
     <DashboardWrapper>
       <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>
       <Divider component="div" />
       <PageSection padding={{ default: 'noPadding' }}>

package/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   Card,
+  Content,
   Divider,
   Drawer,
   DrawerActions,
@@ -13,13 +14,10 @@ import {
   Flex,
   FlexItem,
   PageSection,
-  PageSectionVariants,
   Progress,
   SimpleList,
   SimpleListGroup,
   SimpleListItem,
-  Text,
-  TextContent,
   Title
 } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
@@ -92,14 +90,14 @@ export const PrimaryDetailSimpleListInCard: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper>
-      <PageSection variant={PageSectionVariants.light}>
-        <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 />
+      <PageSection>
+        <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>
       <Divider component="div" />
       <PageSection>