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

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

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>