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

package/src/demos/CardView/examples/CardView.tsx

@@ -7,6 +7,7 @@ import {
   CardHeader,
   CardTitle,
   CardBody,
+  Content,
   Divider,
   Dropdown,
   DropdownItem,
@@ -24,8 +25,6 @@ import {
   OverflowMenuItem,
   PageSection,
   Pagination,
-  TextContent,
-  Text,
   Toolbar,
   ToolbarItem,
   ToolbarFilter,
@@ -470,10 +469,10 @@ export const CardViewBasic: React.FunctionComponent = () => {
     <React.Fragment>
       <DashboardWrapper mainContainerId="main-content-card-view-default-nav" breadcrumb={null}>
         <PageSection>
-          <TextContent>
-            <Text component="h1">Projects</Text>
-            <Text component="p">This is a demo that showcases PatternFly cards.</Text>
-          </TextContent>
+          <Content>
+            <h1>Projects</h1>
+            <p>This is a demo that showcases PatternFly cards.</p>
+          </Content>
           <Toolbar id="toolbar-group-types" clearAllFilters={onDelete}>
             <ToolbarContent>{toolbarItems}</ToolbarContent>
           </Toolbar>

package/src/demos/DashboardWrapper.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import {
   Breadcrumb,
   BreadcrumbItem,
+  Content,
   Nav,
   NavItem,
   NavList,
@@ -10,9 +11,7 @@ import {
   PageSection,
   PageSidebar,
   PageSidebarBody,
-  SkipToContent,
-  Text,
-  TextContent
+  SkipToContent
 } from '../components';
 import { DashboardHeader } from './DashboardHeader';
 
@@ -38,10 +37,10 @@ export const DashboardBreadcrumb = (
 
 const PageTemplateTitle = (
   <PageSection>
-    <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>
 );
 

package/src/demos/DataList/examples/DataListBasic.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   Button,
+  Content,
   DataList,
   DataListItem,
   DataListCell,
@@ -14,11 +15,7 @@ import {
   OverflowMenuControl,
   OverflowMenuItem,
   PageSection,
-  PageSectionVariants,
   Pagination,
-  Text,
-  TextContent,
-  TextVariants,
   Toolbar,
   ToolbarItem,
   ToolbarContent
@@ -76,11 +73,11 @@ export const DataListBasic: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <DashboardWrapper mainContainerId="main-content-datalist-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 Data List</Text>
-          </TextContent>
+        <PageSection>
+          <Content>
+            <h1>Projects</h1>
+            <p>This is a demo that showcases PatternFly data list</p>
+          </Content>
         </PageSection>
         <PageSection isFilled>
           <Toolbar id="toolbar-group-types">
@@ -94,13 +91,13 @@ export const DataListBasic: React.FunctionComponent = () => {
                     <DataListCell isFilled={false} key="buttons1">
                       <Flex direction={{ default: 'column' }}>
                         <FlexItem>
-                          <Text component={TextVariants.p}>patternfly</Text>
+                          <Content component="p">patternfly</Content>
                         </FlexItem>
                         <FlexItem>
-                          <Text component={TextVariants.small}>
+                          <Content component="small">
                             Working repo for
                             <a href="http://www.patternfly.org/">PatternFly</a>
-                          </Text>
+                          </Content>
                         </FlexItem>
                         <FlexItem>
                           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
@@ -139,10 +136,10 @@ export const DataListBasic: React.FunctionComponent = () => {
                     <DataListCell isFilled={false} key="buttons2">
                       <Flex direction={{ default: 'column' }}>
                         <FlexItem>
-                          <Text component={TextVariants.small}>patternfly-elements</Text>
+                          <Content component="small">patternfly-elements</Content>
                         </FlexItem>
                         <FlexItem>
-                          <Text component={TextVariants.small}>PatternFly elements</Text>
+                          <Content component="small">PatternFly elements</Content>
                         </FlexItem>
                         <FlexItem>
                           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
@@ -191,7 +188,7 @@ export const DataListBasic: React.FunctionComponent = () => {
                     <DataListCell isFilled={false} key="Demo-item3">
                       <Flex direction={{ default: 'column' }}>
                         <FlexItem>
-                          <Text component={TextVariants.small}>patternfly-unified-design-kit</Text>
+                          <Content component="small">patternfly-unified-design-kit</Content>
                         </FlexItem>
                       </Flex>
                     </DataListCell>,
@@ -216,13 +213,13 @@ export const DataListBasic: React.FunctionComponent = () => {
                     <DataListCell isFilled={false} key="buttons4">
                       <Flex direction={{ default: 'column' }}>
                         <FlexItem>
-                          <Text component={TextVariants.small}>patternfly</Text>
+                          <Content component="small">patternfly</Content>
                         </FlexItem>
                         <FlexItem>
-                          <Text component={TextVariants.small}>
+                          <Content component="small">
                             Working repo for
                             <a href="http://www.patternfly.org/">PatternFly</a>
-                          </Text>
+                          </Content>
                         </FlexItem>
                         <FlexItem>
                           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
@@ -262,10 +259,10 @@ export const DataListBasic: React.FunctionComponent = () => {
                     <DataListCell isFilled={false} key="buttons5">
                       <Flex direction={{ default: 'column' }}>
                         <FlexItem>
-                          <Text component={TextVariants.small}>patternfly-elements</Text>
+                          <Content component="small">patternfly-elements</Content>
                         </FlexItem>
                         <FlexItem>
-                          <Text component={TextVariants.small}>PatternFly elements</Text>
+                          <Content component="small">PatternFly elements</Content>
                         </FlexItem>
                         <FlexItem>
                           <Flex spaceItems={{ default: 'spaceItemsSm' }}>

package/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   Button,
+  Content,
   DataList,
   DataListItem,
   DataListItemRow,
@@ -22,10 +23,7 @@ import {
   SearchInput,
   Tooltip,
   Icon,
-  PageSection,
-  PageSectionVariants,
-  Text,
-  TextContent
+  PageSection
 } from '@patternfly/react-core';
 
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
@@ -135,11 +133,11 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
   return (
     <React.Fragment>
       <DashboardWrapper mainContainerId="main-content-datalist-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 Data List</Text>
-          </TextContent>
+        <PageSection>
+          <Content>
+            <h1>Projects</h1>
+            <p>This is a demo that showcases PatternFly data list</p>
+          </Content>
         </PageSection>
         <PageSection isFilled>
           {renderToolbar()}

package/src/demos/DescriptionList/examples/DescriptionListBasic.tsx

@@ -5,12 +5,10 @@ import {
   DescriptionListGroup,
   DescriptionListDescription,
   PageSection,
-  PageSectionVariants,
   Card,
   CardBody,
   CardHeader,
-  TextContent,
-  Text,
+  Content,
   Title,
   Divider,
   Flex,
@@ -21,11 +19,11 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 export const DescriptionListBasic: React.FunctionComponent = () => (
   <DashboardWrapper>
-    <PageSection variant={PageSectionVariants.light}>
-      <TextContent>
-        <Title headingLevel="h1">Projects</Title>
-        <Text component="p">This is a full page demo</Text>
-      </TextContent>
+    <PageSection>
+      <Content>
+        <Content component="h1">Projects</Content>
+        <Content component="p">This is a full page demo</Content>
+      </Content>
     </PageSection>
     <PageSection>
       <Card>

package/src/demos/JumpLinks.md

@@ -32,7 +32,7 @@ import {
   SidebarPanel,
   Switch,
   Title,
-  TextContent,
+  Content,
   getResizeObserver
 } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
@@ -101,7 +101,7 @@ ScrollspyH2 = () => {
           </SidebarPanel>
           <SidebarContent hasNoBackground>
             <PageSection>
-              <TextContent>
+              <Content>
                 {headings.map(i => (
                   <div key={i} style={{ maxWidth: '800px', marginBottom: '32px' }}>
                     <h2 id={`heading-${i}`} tabIndex={-1}>
@@ -128,7 +128,7 @@ ScrollspyH2 = () => {
                     </p>
                   </div>
                 ))}
-              </TextContent>
+              </Content>
             </PageSection>
           </SidebarContent>
         </Sidebar>

package/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -6,6 +6,7 @@ import {
   BreadcrumbItem,
   Button,
   ButtonVariant,
+  Content,
   Divider,
   Dropdown,
   DropdownItem,
@@ -32,8 +33,6 @@ import {
   PageSidebar,
   PageSidebarBody,
   SkipToContent,
-  TextContent,
-  Text,
   PageToggleButton,
   Masthead,
   MastheadMain,
@@ -530,13 +529,13 @@ export const NotificationDrawerBasic: 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>Panel section content</PageSection>
       </Page>

package/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx

@@ -6,6 +6,7 @@ import {
   BreadcrumbItem,
   Button,
   ButtonVariant,
+  Content,
   Divider,
   Dropdown,
   DropdownItem,
@@ -34,8 +35,6 @@ import {
   PageSidebar,
   PageSidebarBody,
   SkipToContent,
-  TextContent,
-  Text,
   PageToggleButton,
   Masthead,
   MastheadMain,
@@ -769,13 +768,13 @@ export const NotificationDrawerGrouped: 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>Panel section content</PageSection>
       </Page>

package/src/demos/RTL/examples/PaginatedTable.jsx

@@ -8,6 +8,7 @@ import {
   Button,
   ButtonVariant,
   Card,
+  Content,
   Divider,
   Dropdown,
   DropdownGroup,
@@ -32,9 +33,6 @@ import {
   PageToggleButton,
   Pagination,
   PaginationVariant,
-  Text,
-  TextContent,
-  TextVariants,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -448,10 +446,10 @@ export const PaginatedTableAction = () => {
           </Breadcrumb>
         </PageBreadcrumb>
         <PageSection variant="light">
-          <TextContent>
-            <Text component={TextVariants.h1}>{translation.title}</Text>
-            <Text component={TextVariants.p}>{translation.body}</Text>
-          </TextContent>
+          <Content>
+            <h1>{translation.title}</h1>
+            <p>{translation.body}</p>
+          </Content>
         </PageSection>
         <PageSection>
           <Card>

package/src/demos/RTL/examples/PaginatedTable.tsx

@@ -8,6 +8,7 @@ import {
   Button,
   ButtonVariant,
   Card,
+  Content,
   Divider,
   Dropdown,
   DropdownGroup,
@@ -32,9 +33,6 @@ import {
   PageToggleButton,
   Pagination,
   PaginationVariant,
-  Text,
-  TextContent,
-  TextVariants,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -474,10 +472,10 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
           </Breadcrumb>
         </PageBreadcrumb>
         <PageSection variant="light">
-          <TextContent>
-            <Text component={TextVariants.h1}>{translation.title}</Text>
-            <Text component={TextVariants.p}>{translation.body}</Text>
-          </TextContent>
+          <Content>
+            <h1>{translation.title}</h1>
+            <p>{translation.body}</p>
+          </Content>
         </PageSection>
         <PageSection>
           <Card>

package/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx

@@ -13,8 +13,7 @@ import {
   NotificationDrawerListItemBody,
   NotificationDrawerListItemHeader,
   PageSection,
-  TextContent,
-  Text,
+  Content,
   EmptyStateVariant,
   NumberInput,
   Alert,
@@ -316,15 +315,15 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
       isNotificationDrawerExpanded={isDrawerExpanded}
     >
       <PageSection>
-        <TextContent>
-          <Text component="h1">Alert Group with Notification Drawer demo</Text>
-          <Text component="p">
-            New alerts can be added with buttons below. Each alert has a timeout of 7 seconds, however, even after the
-            timeout expires, all alerts are still visible in the notification drawer. By default, only 3 alerts are
-            displayed. The rest can be accessed in the notification drawer after clicking on the bell icon in the header
-            or by clicking on the overflow message.
-          </Text>
-        </TextContent>
+        <Content>
+          <h1>Alert group with notification drawer demo</h1>
+          <p>
+            New alerts can be added with the following buttons. Each alert has a timeout of 7 seconds, however, even
+            after the timeout expires, all alerts are still visible in the notification drawer. By default, only 3
+            alerts are displayed. The rest can be accessed in the notification drawer after clicking on the bell icon in
+            the header or by clicking on the overflow message.
+          </p>
+        </Content>
       </PageSection>
 
       <PageSection>
@@ -348,11 +347,11 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
       </PageSection>
 
       <PageSection>
-        <TextContent>
+        <Content>
           <br />
-          <Text component="h2">Max displayed alerts</Text>
-          <Text component="p">The maximum number of displayed alerts can be set below.</Text>
-        </TextContent>
+          <h2>Max displayed alerts</h2>
+          <p>Adjust the maximum number of displayed alerts.</p>
+        </Content>
         <NumberInput
           value={maxDisplayed}
           min={minAlerts}

package/src/demos/examples/BackToTop/BackToTopNameDemo.tsx

@@ -3,11 +3,10 @@ import {
   BackToTop,
   Card,
   CardBody,
+  Content,
   Gallery,
   GalleryItem,
   PageSection,
-  TextContent,
-  Text,
   Page,
   Switch
 } from '@patternfly/react-core';
@@ -24,14 +23,14 @@ export const Name = () => {
     <DashboardWrapper breadcrumb={null}>
       <Page>
         <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>
+            </p>
             <Switch label="Always show BackToTopButton" onChange={handleChange} isChecked={isAlwaysVisible} />
-          </TextContent>
+          </Content>
         </PageSection>
         <PageSection
           hasOverflowScroll

package/src/demos/examples/DashboardWrapper.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {
   Breadcrumb,
   BreadcrumbItem,
+  Content,
   Nav,
   NavItem,
   NavList,
@@ -9,9 +10,7 @@ import {
   PageSection,
   PageSidebar,
   PageSidebarBody,
-  SkipToContent,
-  Text,
-  TextContent
+  SkipToContent
 } from '@patternfly/react-core';
 import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
 
@@ -28,10 +27,10 @@ export const DashboardBreadcrumb = (
 
 export const PageTemplateTitle = (
   <PageSection>
-    <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>
 );
 

package/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   Button,
+  Content,
   Drawer,
   DrawerPanelContent,
   DrawerContent,
@@ -15,7 +16,6 @@ import {
   Sidebar,
   SidebarContent,
   SidebarPanel,
-  TextContent,
   getResizeObserver,
   DrawerContext
 } from '@patternfly/react-core';
@@ -100,7 +100,7 @@ export const JumpLinksWithDrawer = () => {
                   <Button onClick={onToggleClick}>Toggle drawer</Button>
                 </PageSection>
                 <PageSection>
-                  <TextContent>
+                  <Content>
                     {headings.map((heading) => (
                       <div key={heading} style={{ maxWidth: '800px', marginBottom: '32px' }}>
                         <h2 id={`jump-links-drawer-jump-links-${heading.toLowerCase()}`} tabIndex={-1}>
@@ -132,7 +132,7 @@ export const JumpLinksWithDrawer = () => {
                         </p>
                       </div>
                     ))}
-                  </TextContent>
+                  </Content>
                 </PageSection>
               </SidebarContent>
             </Sidebar>

package/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx

@@ -26,10 +26,8 @@ import {
   NavList,
   Page,
   PageSection,
-  PageSectionVariants,
   SkipToContent,
-  Text,
-  TextContent,
+  Content,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -185,8 +183,8 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
         <PageHorizontalNav />
         <ToolbarGroup
           variant="action-group-plain"
-          align={{ default: 'alignRight' }}
-          spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+          align={{ default: 'alignEnd' }}
+          gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
@@ -288,21 +286,19 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
 
   return (
     <Page
-      header={masthead}
+      masthead={masthead}
       isManagedSidebar
       skipToContent={pageSkipToContent}
       breadcrumb={dashboardBreadcrumb}
       mainContainerId={mainContainerId}
-      isTertiaryNavWidthLimited
       isBreadcrumbWidthLimited
-      isTertiaryNavGrouped
       isBreadcrumbGrouped
       additionalGroupedContent={
-        <PageSection variant={PageSectionVariants.light}>
-          <TextContent>
-            <Text component="h1">Main title</Text>
-            <Text component="p">This is a full page demo.</Text>
-          </TextContent>
+        <PageSection>
+          <Content>
+            <Content component="h1">Main title</Content>
+            <Content component="p">This is a full page demo.</Content>
+          </Content>
         </PageSection>
       }
     >

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -8,6 +8,7 @@ import {
   ButtonVariant,
   Card,
   CardBody,
+  Content,
   Divider,
   Dropdown,
   DropdownGroup,
@@ -36,8 +37,6 @@ import {
   PageToggleButton,
   Popper,
   SkipToContent,
-  Text,
-  TextContent,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -532,10 +531,10 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
       isBreadcrumbGrouped
       additionalGroupedContent={
         <PageSection>
-          <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>
       }
     >