@patternfly/react-core 4.224.6 → 4.224.9

package/src/components/Tabs/examples/TabsDynamic.tsx

@@ -52,6 +52,7 @@ export const TabsDynamic: React.FunctionComponent = () => {
         <Tab
           key={index}
           eventKey={index}
+          aria-label={`Dynamic ${tab}`}
           title={<TabTitleText>{tab}</TabTitleText>}
           closeButtonAriaLabel={`Close ${tab}`}
           isCloseDisabled={tabs.length === 1}

package/src/components/Toolbar/examples/Toolbar.md

@@ -218,7 +218,7 @@ class ToolbarSpacers extends React.Component {
 
     return (
       <Toolbar
-        id="toolbar-spacers"
+        id="toolbar-insets"
         inset={{
           default: 'insetNone',
           md: 'insetSm',
@@ -249,7 +249,7 @@ const ToolbarItems = () => {
   return (
     <React.Fragment>
       <div style={{ overflowY: 'scroll', height: '200px' }}>
-        <Toolbar id="toolbar-spacers" inset={{ default: 'insetNone' }} isSticky={isSticky}>
+        <Toolbar id="toolbar-sticky" inset={{ default: 'insetNone' }} isSticky={isSticky}>
           <ToolbarContent>
             <ToolbarItem>
               <SearchInput aria-label="search input example" />

package/src/components/Toolbar/examples/ToolbarCustomChipGroupContent.tsx

@@ -155,7 +155,7 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
 
   return (
     <Toolbar
-      id="toolbar-with-filter"
+      id="toolbar-with-custom-chip-group"
       className="pf-m-toggle-group-container"
       collapseListedFiltersBreakpoint="xl"
       customChipGroupContent={customChipGroupContent}

package/src/components/Wizard/examples/Wizard.md

@@ -119,12 +119,12 @@ class IncrementallyEnabledStepsWizard extends React.Component {
     const { stepIdReached } = this.state;
 
     const steps = [
-      { id: 1, name: 'First step', component: <p>Step 1 content</p> },
-      { id: 2, name: 'Second step', component: <p>Step 2 content</p>, canJumpTo: stepIdReached >= 2 },
-      { id: 3, name: 'Third step', component: <p>Step 3 content</p>, canJumpTo: stepIdReached >= 3 },
-      { id: 4, name: 'Fourth step', component: <p>Step 4 content</p>, canJumpTo: stepIdReached >= 4 },
+      { id: 'incrementally-enabled-1', name: 'First step', component: <p>Step 1 content</p> },
+      { id: 'incrementally-enabled-2', name: 'Second step', component: <p>Step 2 content</p>, canJumpTo: stepIdReached >= 2 },
+      { id: 'incrementally-enabled-3', name: 'Third step', component: <p>Step 3 content</p>, canJumpTo: stepIdReached >= 3 },
+      { id: 'incrementally-enabled-4', name: 'Fourth step', component: <p>Step 4 content</p>, canJumpTo: stepIdReached >= 4 },
       {
-        id: 5,
+        id: 'incrementally-enabled-5',
         name: 'Review',
         component: <p>Review step content</p>,
         nextButtonText: 'Finish',
@@ -177,7 +177,7 @@ class SimpleWizard extends React.Component {
       { name: 'Fourth step', component: <p>Step 4 content</p> },
       { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
     ];
-    const title = 'Basic wizard';
+    const title = 'Expandable wizard';
     return (
       <Wizard
         navAriaLabel={`${title} steps`}
@@ -296,29 +296,29 @@ class ValidationWizard extends React.Component {
     const { isFormValid, formValue, allStepsValid, stepIdReached } = this.state;
 
     const steps = [
-      { id: 1, name: 'Information', component: <p>Step 1 content</p> },
+      { id: 'validated-1', name: 'Information', component: <p>Step 1 content</p> },
       {
         name: 'Configuration',
         steps: [
           {
-            id: 2,
+            id: 'validated-2',
             name: 'Substep A with validation',
             component: <SampleForm formValue={formValue} isFormValid={isFormValid} onChange={this.onFormChange} />,
             enableNext: isFormValid,
             canJumpTo: stepIdReached >= 2
           },
-          { id: 3, name: 'Substep B', component: <p>Substep B</p>, canJumpTo: stepIdReached >= 3 }
+          { id: 'validated-3', name: 'Substep B', component: <p>Substep B</p>, canJumpTo: stepIdReached >= 3 }
         ]
       },
       {
-        id: 4,
+        id: 'validated-4',
         name: 'Additional',
         component: <p>Step 3 content</p>,
         enableNext: allStepsValid,
         canJumpTo: stepIdReached >= 4
       },
       {
-        id: 5,
+        id: 'validated-5',
         name: 'Review',
         component: <p>Step 4 content</p>,
         nextButtonText: 'Close',

package/src/demos/CardDemos.md

@@ -320,7 +320,7 @@ CardDetailsDemo = () => {
     <Gallery hasGutter style={{ '--pf-l-gallery--GridTemplateColumns--min': '260px' }}>
       <Card>
         <CardTitle>
-          <Title headingLevel="h2" size="xl">
+          <Title headingLevel="h4" size="xl">
             Details
           </Title>
         </CardTitle>
@@ -357,7 +357,7 @@ CardDetailsDemo = () => {
       </Card>
       <Card>
         <CardTitle>
-          <Title headingLevel="h2" size="xl">
+          <Title headingLevel="h4" size="xl">
             Details
           </Title>
         </CardTitle>
@@ -668,7 +668,7 @@ const StatusPlain: React.FunctionComponent = () => {
 
   const header = (
     <CardHeader>
-      <Title headingLevel="h2" size="lg">
+      <Title headingLevel="h4" size="lg">
         Status
       </Title>
     </CardHeader>
@@ -794,7 +794,7 @@ const StatusPlain: React.FunctionComponent = () => {
                 <a href="#">Operators</a>
               </FlexItem>
               <FlexItem>
-                <span style={{ color: 'var(--pf-global--Color--400)' }}>1 degraded</span>
+                <span style={{ color: 'var(--pf-global--Color--200)' }}>1 degraded</span>
               </FlexItem>
             </Flex>
           </Flex>
@@ -809,7 +809,7 @@ const StatusPlain: React.FunctionComponent = () => {
                 <a href="#">Image Vulnerabilities</a>
               </FlexItem>
               <FlexItem>
-                <span style={{ color: '#8a8d90' }}>0 vulnerabilities</span>
+                <span style={{ color: 'var(--pf-global--Color--200)' }}>0 vulnerabilities</span>
               </FlexItem>
             </Flex>
           </Flex>
@@ -849,16 +849,17 @@ const StatusPlain: React.FunctionComponent = () => {
           onExpand={handleDrawerToggleClick}
           isExpanded={drawerExpanded}
           title={drawerTitle}
+          headingLevel="h4"
         >
           <NotificationDrawerList isHidden={!drawerExpanded}>
             <NotificationDrawerListItem variant="danger">
-              <NotificationDrawerListItemHeader variant="danger" title="Critical alert regarding control plane" />
+              <NotificationDrawerListItemHeader variant="danger" headingLevel="h5" title="Critical alert regarding control plane" />
               <NotificationDrawerListItemBody>
                 This is a long description to show how the title will wrap if it is long and wraps to multiple lines.
               </NotificationDrawerListItemBody>
             </NotificationDrawerListItem>
             <NotificationDrawerListItem variant="warning">
-              <NotificationDrawerListItemHeader variant="warning" title="Warning alert" />
+              <NotificationDrawerListItemHeader variant="warning" headingLevel="h5" title="Warning alert" />
               <NotificationDrawerListItemBody>
                 This is a warning notification description.
               </NotificationDrawerListItemBody>
@@ -947,7 +948,7 @@ const Status: React.FunctionComponent = () => {
             <Flex>
               <FlexItem>{icon}</FlexItem>
               <FlexItem>
-                <Title headingLevel="h3" size="md">
+                <Title headingLevel="h4" size="md">
                   {status}
                 </Title>
               </FlexItem>
@@ -966,7 +967,7 @@ const Status: React.FunctionComponent = () => {
     <>
       <Card>
         <CardHeader>
-          <Title headingLevel="h2" size="lg">
+          <Title headingLevel="h4" size="lg">
             Status
           </Title>
         </CardHeader>
@@ -1023,9 +1024,9 @@ import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartVoronoiContaine
 
 <Gallery hasGutter minWidths={{ default: '360px' }}>
   <GalleryItem>
-    <Card id="utilization-card-1" component="div">
+    <Card id="utilization-card-1-card" component="div">
       <CardTitle>
-        <Title headingLevel="h2" size="lg">
+        <Title headingLevel="h4" size="lg">
           Top Utilized Clusters
         </Title>
       </CardTitle>
@@ -1136,9 +1137,9 @@ import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartVoronoiContaine
 
 <Gallery hasGutter minWidths={{ default: '360px' }}>
   <GalleryItem>
-    <Card id="utilization-card-2" component="div">
+    <Card id="utilization-card-2-card" component="div">
       <CardTitle>
-        <Title headingLevel="h2" size="lg">
+        <Title headingLevel="h4" size="lg">
           Top Utilized Clusters
         </Title>
       </CardTitle>
@@ -1268,10 +1269,10 @@ const UtilizationCard3: React.FunctionComponent = () => {
       <br />
       <Gallery hasGutter minWidths={{ default: '360px' }}>
         <GalleryItem>
-          <Card id="utilization-card-1" component="div">
+          <Card id="utilization-card-3-card" component="div">
             <CardHeader className="pf-u-align-items-flex-start">
               <CardTitle>
-                <Title headingLevel="h2" size="lg" style={{ paddingTop: '3px' }}>
+                <Title headingLevel="h4" size="lg" style={{ paddingTop: '3px' }}>
                   Recommendations
                 </Title>
               </CardTitle>
@@ -1397,9 +1398,9 @@ import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-ch
 
 <Gallery hasGutter minWidths={{ default: '360px' }}>
   <GalleryItem>
-    <Card id="utilization-card-1" component="div">
+    <Card id="utilization-card-4-card" component="div">
       <CardTitle>
-        <Title headingLevel="h2" size="lg">
+        <Title headingLevel="h4" size="lg">
           CPU Usage
         </Title>
       </CardTitle>
@@ -1478,10 +1479,10 @@ CardNestedDemo = () => {
           onChange={checked => onCheckClick(!isToggleOnRight)}
         />
       </div>
-      <Card id="nested-cards">
+      <Card id="nested-cards-card">
         <CardHeader>
           <CardTitle id="nested-cards-toggle-title">
-            <Title headingLevel="h2" size="lg">
+            <Title headingLevel="h4" size="lg">
               {' '}
               Hardware Monitor{' '}
             </Title>
@@ -2005,7 +2006,7 @@ const AccordionCard: React.FunctionComponent = () => {
     <Card>
       <CardHeader>
         <CardTitle>
-          <Title headingLevel="h2" size="lg">
+          <Title headingLevel="h4" size="lg">
             Hardware Monitor
           </Title>
         </CardTitle>
@@ -2531,12 +2532,12 @@ const TrendCard1: React.FunctionComponent = () => {
       <br />
       <Gallery hasGutter minWidths={{ default: '360px' }}>
         <GalleryItem>
-          <Card id="trend-card-1" component="div">
+          <Card id="trend-card-1-card" component="div">
             <CardHeader>
               <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
                 <FlexItem>
                   <CardTitle>
-                    <Title headingLevel="h1">1,050,765 IOPS</Title>
+                    <Title headingLevel="h4" size="lg">1,050,765 IOPS</Title>
                   </CardTitle>
                 </FlexItem>
                 <FlexItem>
@@ -2608,14 +2609,14 @@ import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartVoronoiContaine
 
 <Gallery hasGutter minWidths={{ default: '360px' }}>
   <GalleryItem>
-    <Card id="trend-card-2" component="div">
+    <Card id="trend-card-2-card" component="div">
       <CardHeader>
         <Flex alignItems={{ default: 'alignItemsCenter' }}>
           <FlexItem flex={{ default: 'flexNone' }}>
             <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
               <FlexItem>
                 <CardTitle>
-                  <Title headingLevel="h1" size="2xl">
+                  <Title headingLevel="h4" size="2xl">
                     842 TB
                   </Title>
                 </CardTitle>
@@ -2729,7 +2730,7 @@ CardLogViewDemo = () => {
               </Select>
             </CardActions>
             <CardTitle>
-              <Title headingLevel="h2" size="xl" style={{ paddingTop: '3px' }}>
+              <Title headingLevel="h4" size="xl" style={{ paddingTop: '3px' }}>
                 Activity
               </Title>
             </CardTitle>
@@ -2848,7 +2849,7 @@ CardEventViewDemo = () => {
               </Select>
             </CardActions>
             <CardTitle>
-              <Title headingLevel="h2" size="xl" style={{ paddingTop: '3px' }}>
+              <Title headingLevel="h4" size="xl" style={{ paddingTop: '3px' }}>
                 Events
               </Title>
             </CardTitle>

package/src/demos/Masthead.md

@@ -138,7 +138,7 @@ class BasicMasthead extends React.Component {
     ];
 
     return (
-      <Masthead id="basic">
+      <Masthead id="basic-demo">
         <MastheadToggle>
           <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
             <BarsIcon />

package/src/demos/TileDemo.md

@@ -27,10 +27,10 @@ const TileSingleSelect: React.FunctionComponent = () => {
 
   return (
     <div role="listbox" aria-label="Single selection tiles">
-      <Tile title="Tile 1" id="tile-1" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'tile-1'} />
-      <Tile title="Tile 2" id="tile-2" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'tile-2'} />
-      <Tile title="Tile 3" id="tile-3" isDisabled isSelected={selectedId === 'tile-3'} />
-      <Tile title="Tile 4" id="tile-4" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'tile-4'} />
+      <Tile title="Tile 1" id="single-select-tile-1" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'tile-1'} />
+      <Tile title="Tile 2" id="single-select-tile-2" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'tile-2'} />
+      <Tile title="Tile 3" id="single-select-tile-3" isDisabled isSelected={selectedId === 'tile-3'} />
+      <Tile title="Tile 4" id="single-select-tile-4" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'tile-4'} />
     </div>
   );
 };
@@ -68,22 +68,22 @@ const TileMultiSelect: React.FunctionComponent = () => {
     <div role="listbox" aria-multiselectable={true} aria-label="Multiselectable tiles">
       <Tile
         title="Tile 1"
-        id="tile-1"
+        id="multiselect-tile-1"
         onClick={onSelect}
         onKeyDown={onKeyDown}
         isSelected={selectedIds.includes('tile-1')}
       />
       <Tile
         title="Tile 2"
-        id="tile-2"
+        id="multiselect-tile-2"
         onClick={onSelect}
         onKeyDown={onKeyDown}
         isSelected={selectedIds.includes('tile-2')}
       />
-      <Tile title="Tile 3" id="tile-3" isDisabled />
+      <Tile title="Tile 3" id="multiselect-tile-3" isDisabled />
       <Tile
         title="Tile 4"
-        id="tile-4"
+        id="multiselect-tile-4"
         onClick={onSelect}
         onKeyDown={onKeyDown}
         isSelected={selectedIds.includes('tile-4')}

package/src/layouts/Grid/examples/Grid.md

@@ -82,7 +82,7 @@ import { Grid, GridItem } from '@patternfly/react-core';
 
 ## Ordering
 
-### Ordering
+### Standard ordering
 
 ```js
 import React from 'react';