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

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/components/Wizard/Wizard.tsx

@@ -92,10 +92,12 @@ export const Wizard = ({
     }
   }, [startIndex]);
 
-  // When children change, active step index should reset
+  // When the number of steps changes and pushes activeStepIndex out of bounds, reset back to startIndex
   React.useEffect(() => {
-    setActiveStepIndex(startIndex);
-  }, [children, startIndex]);
+    if (activeStepIndex > initialSteps.length) {
+      setActiveStepIndex(startIndex);
+    }
+  }, [initialSteps, activeStepIndex, startIndex]);
 
   const focusMainContentElement = () =>
     setTimeout(() => {

package/src/components/Wizard/WizardContext.tsx

@@ -74,10 +74,20 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
   const [currentSteps, setCurrentSteps] = React.useState<WizardStepType[]>(initialSteps);
   const [currentFooter, setCurrentFooter] = React.useState<WizardFooterType>();
 
-  // Callback to update steps if they change after initial render
+  // Callback to update steps if the overall step number changes
   React.useEffect(() => {
-    setCurrentSteps(initialSteps);
-  }, [initialSteps]);
+    if (currentSteps.length !== initialSteps.length) {
+      const newSteps = initialSteps.map((newStep) => {
+        const currentStepMatch = currentSteps.find((step) => step.id === newStep.id);
+        // If an existing step has the same id as a new step, carry over props
+        if (currentStepMatch) {
+          return { ...currentStepMatch, ...newStep };
+        }
+        return newStep;
+      });
+      setCurrentSteps(newSteps);
+    }
+  }, [currentSteps, initialSteps]);
 
   // Combined initial and current state steps
   const steps = React.useMemo(
@@ -130,7 +140,6 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
           if (prevStep.id === step.id) {
             return { ...prevStep, ...step };
           }
-
           return prevStep;
         })
       ),

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>

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>