@patternfly/react-core 4.203.2 → 4.205.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.203.2",
+  "version": "4.205.1",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.54.2",
-    "@patternfly/react-styles": "^4.53.2",
-    "@patternfly/react-tokens": "^4.55.2",
+    "@patternfly/react-icons": "^4.56.1",
+    "@patternfly/react-styles": "^4.55.1",
+    "@patternfly/react-tokens": "^4.57.1",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.190.0",
+    "@patternfly/patternfly": "4.192.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "ca5c716646e391e92b954b9cb3bbbe52b16834b7"
+  "gitHead": "4d73b9030cf92b075c46a0eeab561d47070bec50"
 }

package/src/components/ProgressStepper/ProgressStep.tsx

@@ -22,13 +22,11 @@ export interface ProgressStepProps
   description?: string;
   /** ID of the title of the progress step. */
   titleId?: string;
-  /** Popover for a progress step. */
-  popover?: React.ReactNode;
-  /** @hide Forwarded reference to title container */
-  innerRef?: React.Ref<any>;
   /** Accessible label for the progress step. Should communicate all information being communicated by the progress
    * step's icon, including the variant and the completed status. */
   'aria-label'?: string;
+  /** Forwards the step ref to rendered function.  Use this prop to add a popover to the step.*/
+  popoverRender?: (stepRef: React.RefObject<any>) => React.ReactNode;
 }
 
 const variantIcons = {
@@ -49,7 +47,7 @@ const variantStyle = {
   danger: styles.modifiers.danger
 };
 
-const ProgressStepBase: React.FunctionComponent<ProgressStepProps> = ({
+export const ProgressStep: React.FunctionComponent<ProgressStepProps> = ({
   children,
   className,
   variant,
@@ -57,13 +55,13 @@ const ProgressStepBase: React.FunctionComponent<ProgressStepProps> = ({
   description,
   icon,
   titleId,
-  popover,
-  innerRef,
   'aria-label': ariaLabel,
+  popoverRender,
   ...props
 }: ProgressStepProps) => {
   const _icon = icon !== undefined ? icon : variantIcons[variant];
-  const Component = popover !== undefined ? 'span' : 'div';
+  const Component = popoverRender !== undefined ? 'span' : 'div';
+  const stepRef = React.useRef();
 
   if (props.id === undefined || titleId === undefined) {
     /* eslint-disable no-console */
@@ -89,14 +87,14 @@ const ProgressStepBase: React.FunctionComponent<ProgressStepProps> = ({
       </div>
       <div className={css(styles.progressStepperStepMain)}>
         <Component
-          className={css(styles.progressStepperStepTitle, popover && styles.modifiers.helpText)}
+          className={css(styles.progressStepperStepTitle, popoverRender && styles.modifiers.helpText)}
           id={titleId}
-          ref={innerRef}
-          {...(popover && { tabIndex: 0, role: 'button', type: 'button' })}
+          ref={stepRef}
+          {...(popoverRender && { tabIndex: 0, role: 'button', type: 'button' })}
           {...(props.id !== undefined && titleId !== undefined && { 'aria-labelledby': `${props.id} ${titleId}` })}
         >
           {children}
-          {popover}
+          {popoverRender && popoverRender(stepRef)}
         </Component>
         {description && <div className={css(styles.progressStepperStepDescription)}>{description}</div>}
       </div>
@@ -104,7 +102,4 @@ const ProgressStepBase: React.FunctionComponent<ProgressStepProps> = ({
   );
 };
 
-export const ProgressStep = React.forwardRef((props: ProgressStepProps, ref: React.Ref<HTMLSpanElement>) => (
-  <ProgressStepBase innerRef={ref} {...props} />
-));
 ProgressStep.displayName = 'ProgressStep';

package/src/components/ProgressStepper/__tests__/ProgressStepper.test.tsx

@@ -87,7 +87,7 @@ describe('ProgressStep', () => {
   });
 
   test('renders help text styling', () => {
-    const view = render(<ProgressStep popover={<div></div>}>Title</ProgressStep>);
+    const view = render(<ProgressStep popoverRender={({ stepRef }) => (<div></div>)}>Title</ProgressStep>);
     expect(view.container).toMatchSnapshot();
   });
 

package/src/components/ProgressStepper/examples/ProgressStepper.md

@@ -331,17 +331,13 @@ import PendingIcon from '@patternfly/react-icons/dist/esm/icons/pending-icon';
 
 ### With help popover
 
-To add a popover to a progress step, set the `popover` and `ref` properties on the `ProgressStep` component and the `reference` property on the `Popover` component.
+To add a popover to a progress step, set the `popoverRender` properties on the `ProgressStep` component.
 
 ```js
 import React from 'react';
 import { ProgressStepper, ProgressStep, Popover } from '@patternfly/react-core';
 
 PopoverProgressStep = () => {
-  const firstStepRef = React.useRef();
-  const secondStepRef = React.useRef();
-  const thirdStepRef = React.useRef();
-
   return (
     <ProgressStepper>
       <ProgressStep
@@ -349,55 +345,52 @@ PopoverProgressStep = () => {
         id="popover-step1"
         titleId="popover-step1-title"
         aria-label="completed step with popover, step with success"
-        popover={
+        popoverRender={( stepRef ) => (
           <Popover
             aria-label="First step help"
             headerContent={<div>First step popover</div>}
             bodyContent={<div>Additional info or help text content.</div>}
-            reference={firstStepRef}
+            reference={stepRef}
             position="right"
           />
-        }
-        ref={firstStepRef}
+           )}
       >
-        First Step
+        First step
       </ProgressStep>
       <ProgressStep
         variant="danger"
         id="popover-step2"
         titleId="popover-step2-title"
         aria-label="completed step with popover, step with danger"
-        popover={
+        popoverRender={( stepRef ) => (
           <Popover
             aria-label="Second step help"
             headerContent={<div>Second step popover</div>}
             bodyContent={<div>Additional info or help text content.</div>}
-            reference={secondStepRef}
+            reference={stepRef}
             position="right"
           />
-        }
-        ref={secondStepRef}
+        )}
       >
-        Second Step
+        Second step
       </ProgressStep>
       <ProgressStep
         variant="info"
         id="popover-step3"
         titleId="popover-step3-title"
         aria-label="step with popover"
-        popover={
+        popoverRender={(stepRef) => (
           <Popover
             aria-label="Third step help"
             headerContent={<div>Third step popover</div>}
             bodyContent={<div>Additional info or help text content.</div>}
-            reference={thirdStepRef}
+            reference={stepRef}
             position="right"
           />
-        }
+        )}
         isCurrent
-        ref={thirdStepRef}
       >
-        Third Step
+        Third step
       </ProgressStep>
       <ProgressStep variant="pending" id="popover-step4" titleId="popover-step4-title" aria-label="pending step">
         Fourth step

package/src/demos/Tabs.md

@@ -445,7 +445,12 @@ TabsOpenWithSecondaryTabsDemo = () => {
 
 ### Nested tabs
 
-```js isFullscreen file="./Tabs/NestedTabsDemo.js"
+```js isFullscreen file="./examples/Tabs/NestedTabs.tsx"
+```
+
+### Nested, unindented tabs
+
+```js isFullscreen file="./examples/Tabs/NestedUnindentedTabs.tsx"
 ```
 
 ### Tables and tabs

package/src/demos/examples/DashboardWrapper.js

@@ -6,8 +6,11 @@ import {
   NavItem,
   NavList,
   Page,
+  PageSection,
   PageSidebar,
-  SkipToContent
+  SkipToContent,
+  Text,
+  TextContent
 } from '@patternfly/react-core';
 import DashboardHeader from './DashboardHeader';
 
@@ -21,6 +24,15 @@ export const DashboardBreadcrumb = (
     </BreadcrumbItem>
   </Breadcrumb>
 );
+
+export const PageTemplateTitle = (
+  <PageSection variant="light">
+    <TextContent>
+      <Text component="h1">Main title</Text>
+      <Text component="p">This is a full page demo.</Text>
+    </TextContent>
+  </PageSection>
+);
 export default class DashboardWrapper extends React.Component {
   constructor(props) {
     super(props);
@@ -45,7 +57,8 @@ export default class DashboardWrapper extends React.Component {
       sidebar,
       sidebarNavOpen,
       onPageResize,
-      hasNoBreadcrumb
+      hasNoBreadcrumb,
+      hasPageTemplateTitle
     } = this.props;
 
     let renderedBreadcrumb;
@@ -92,6 +105,7 @@ export default class DashboardWrapper extends React.Component {
         mainContainerId={mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}
         onPageResize={onPageResize}
       >
+        {hasPageTemplateTitle && PageTemplateTitle}
         {children}
       </Page>
     );

package/src/demos/examples/Tabs/GrayTabs.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {
   PageSection,
-  PageSectionVariants,
   Tabs,
   Tab,
   TabContent,
@@ -16,7 +15,7 @@ import {
   CardBody,
   CardHeader
 } from '@patternfly/react-core';
-import DashboardWrapper from '../../examples/DashboardWrapper';
+import DashboardWrapper from '../DashboardWrapper';
 
 export const GrayTabsDemo: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
@@ -126,12 +125,7 @@ export const GrayTabsDemo: React.FunctionComponent = () => {
   );
 
   return (
-    <DashboardWrapper hasNoBreadcrumb>
-      <PageSection isWidthLimited variant={PageSectionVariants.light}>
-        <Title headingLevel="h1" size="2xl">
-          Overview
-        </Title>
-      </PageSection>
+    <DashboardWrapper hasPageTemplateTitle>
       <PageSection type="tabs" isWidthLimited>
         <Tabs
           activeKey={activeTabKey}

package/src/demos/examples/Tabs/ModalTabs.tsx

@@ -81,7 +81,7 @@ export const ModalTabs: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <DashboardWrapper mainContainerId="main-content-card-view-default-nav" breadcrumb={null}>
+      <DashboardWrapper mainContainerId="main-content-card-view-default-nav">
         <PageSection variant={PageSectionVariants.light}>
           <TextContent>
             <Text component="h1">Projects</Text>

package/src/demos/{Tabs/NestedTabsDemo.js → examples/Tabs/NestedTabs.tsx}

@@ -6,7 +6,6 @@ import {
   Grid,
   GridItem,
   PageSection,
-  PageSectionVariants,
   Tabs,
   Tab,
   TabContent,
@@ -16,17 +15,17 @@ import {
   Flex,
   FlexItem
 } from '@patternfly/react-core';
-import DashboardWrapper from '../examples/DashboardWrapper';
+import DashboardWrapper from '../DashboardWrapper';
 
-export const NestedTabsDemo = () => {
+export const NestedTabs: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = React.useState(0);
   const [activeNestedTabKey, setActiveNestedTabKey] = React.useState(10);
 
   // Toggle currently active tab
-  const handleTabClick = (_, tabIndex) => setActiveTabKey(tabIndex);
+  const handleTabClick = (tabIndex: number) => setActiveTabKey(tabIndex);
 
   // Toggle currently active nested tab
-  const handleNestedTabClick = (_, tabIndex) => setActiveNestedTabKey(tabIndex);
+  const handleNestedTabClick = (tabIndex: number) => setActiveNestedTabKey(tabIndex);
 
   const tabContent = (
     <Grid hasGutter>
@@ -41,7 +40,7 @@ export const NestedTabsDemo = () => {
                 <Tabs
                   activeKey={activeNestedTabKey}
                   isSecondary
-                  onSelect={handleNestedTabClick}
+                  onSelect={(_event, tabIndex) => handleNestedTabClick(Number(tabIndex))}
                   id="nested-tabs-example-nested-tabs-list"
                 >
                   <Tab eventKey={10} title={<TabTitleText>Cluster</TabTitleText>} tabContentId={`tabContent${10}`} />
@@ -126,14 +125,14 @@ export const NestedTabsDemo = () => {
   );
 
   return (
-    <DashboardWrapper hasNoBreadcrumb>
-      <PageSection isWidthLimited variant={PageSectionVariants.light}>
-        <Title headingLevel="h1" size="2xl">
-          Overview
-        </Title>
-      </PageSection>
+    <DashboardWrapper hasPageTemplateTitle>
       <PageSection type="tabs" isWidthLimited>
-        <Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="nested-tabs-example-tabs-list">
+        <Tabs
+          activeKey={activeTabKey}
+          onSelect={(_event, tabIndex) => handleTabClick(Number(tabIndex))}
+          usePageInsets
+          id="nested-tabs-example-tabs-list"
+        >
           <Tab eventKey={0} title={<TabTitleText>Cluster 1</TabTitleText>} tabContentId={`tabContent${0}`} />
           <Tab eventKey={1} title={<TabTitleText>Cluster 2</TabTitleText>} tabContentId={`tabContent${1}`} />
         </Tabs>

package/src/demos/examples/Tabs/NestedUnindentedTabs.tsx

@@ -0,0 +1,174 @@
+import React from 'react';
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  Grid,
+  GridItem,
+  PageSection,
+  Tabs,
+  Tab,
+  TabContent,
+  TabContentBody,
+  TabTitleText,
+  Title,
+  Text,
+  TextContent,
+  TitleSizes
+} from '@patternfly/react-core';
+import DashboardWrapper from '../DashboardWrapper';
+
+export const NestedUnindentedTabs: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState(1);
+  const [activeNestedTabKey, setActiveNestedTabKey] = React.useState(10);
+
+  // Toggle currently active tab
+  const handleTabClick = (tabIndex: number) => setActiveTabKey(tabIndex);
+
+  // Toggle currently active nested tab
+  const handleNestedTabClick = (tabIndex: number) => setActiveNestedTabKey(tabIndex);
+
+  const tabContent = (
+    <Grid hasGutter>
+      <GridItem>
+        <CardHeader>
+          <Title headingLevel="h1" size={TitleSizes['2xl']}>
+            Get started with Red Hat Enterprise Linux
+          </Title>
+        </CardHeader>
+      </GridItem>
+      <GridItem>
+        <Tabs
+          activeKey={activeNestedTabKey}
+          isSecondary
+          onSelect={(_event, tabIndex) => handleNestedTabClick(Number(tabIndex))}
+          id="nested-tabs-example-nested-tabs-list"
+        >
+          <Tab eventKey={10} title={<TabTitleText>x86 architecture</TabTitleText>} tabContentId={`tabContent${10}`} />
+          <Tab
+            eventKey={11}
+            title={<TabTitleText>Additional Architectures</TabTitleText>}
+            tabContentId={`tabContent${11}`}
+          />
+        </Tabs>
+      </GridItem>
+      <GridItem>
+        <TabContent
+          key={10}
+          eventKey={10}
+          id={`tabContent${10}`}
+          activeKey={activeNestedTabKey}
+          hidden={10 !== activeNestedTabKey}
+        >
+          <TabContentBody>
+            <Grid hasGutter>
+              <GridItem>
+                <TextContent>
+                  <Text>To perform a standard x86_64 installation using the GUI, you'll need to:</Text>
+                </TextContent>
+              </GridItem>
+              <Grid md={6} xl2={3} hasGutter>
+                <GridItem>
+                  <Card isFullHeight>
+                    <CardHeader>Check system requirements</CardHeader>
+                    <CardBody>
+                      Your physical or virtual machine should meet the <a href="#">system requirement</a>.
+                    </CardBody>
+                  </Card>
+                </GridItem>
+
+                <GridItem>
+                  <Card isFullHeight>
+                    <CardHeader>Download an installation ISO image</CardHeader>
+                    <CardBody>
+                      {' '}
+                      <a href="#">Download</a> the binary DVD ISO.
+                    </CardBody>
+                  </Card>
+                </GridItem>
+                <GridItem>
+                  <Card isFullHeight>
+                    <CardHeader>Create a bootable installation media</CardHeader>
+                    <CardBody>
+                      {' '}
+                      <a href="#">Create</a> a bootable installation media, for example a USB flash drive.
+                    </CardBody>
+                  </Card>
+                </GridItem>
+                <GridItem>
+                  <Card isFullHeight>
+                    <CardHeader>Install and register your system</CardHeader>
+                    <CardBody>
+                      Boot the installation, register your system, attach RHEL subscriptions, and install RHEL from the
+                      Red Hat Content Delivery Network (CDN) using the GUI.
+                    </CardBody>
+                  </Card>
+                </GridItem>
+              </Grid>
+            </Grid>
+          </TabContentBody>
+        </TabContent>
+        <TabContent
+          key={11}
+          eventKey={11}
+          id={`tabContent${11}`}
+          activeKey={activeNestedTabKey}
+          hidden={11 !== activeNestedTabKey}
+        >
+          <TabContentBody>Additional architectures panel</TabContentBody>
+        </TabContent>
+        <TabContent
+          key={12}
+          eventKey={12}
+          id={`tabContent${12}`}
+          activeKey={activeNestedTabKey}
+          hidden={12 !== activeNestedTabKey}
+        >
+          <TabContentBody>Operators panel</TabContentBody>
+        </TabContent>
+        <TabContent
+          key={13}
+          eventKey={13}
+          id={`tabContent${13}`}
+          activeKey={activeNestedTabKey}
+          hidden={13 !== activeNestedTabKey}
+        >
+          <TabContentBody>Virtualization panel</TabContentBody>
+        </TabContent>
+      </GridItem>
+    </Grid>
+  );
+
+  return (
+    <DashboardWrapper hasPageTemplateTitle>
+      <PageSection type="tabs" isWidthLimited variant="light">
+        <Tabs
+          isBox
+          activeKey={activeTabKey}
+          onSelect={(_event, tabIndex) => handleTabClick(Number(tabIndex))}
+          usePageInsets
+          id="nested-tabs-example-tabs-list"
+        >
+          <Tab eventKey={0} title={<TabTitleText>What's new</TabTitleText>} tabContentId={`tabContent${0}`} />
+          <Tab eventKey={1} title={<TabTitleText>Get started</TabTitleText>} tabContentId={`tabContent${1}`} />
+          <Tab eventKey={2} title={<TabTitleText>Knowledge</TabTitleText>} tabContentId={`tabContent${2}`} />
+          <Tab eventKey={3} title={<TabTitleText>Support</TabTitleText>} tabContentId={`tabContent${3}`} />
+        </Tabs>
+      </PageSection>
+      <PageSection variant="light">
+        <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
+          <TabContentBody>What's new panel</TabContentBody>
+        </TabContent>
+        <TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>
+          <TabContentBody>{tabContent}</TabContentBody>
+        </TabContent>
+        <TabContent key={2} eventKey={2} id={`tabContent${2}`} activeKey={activeTabKey} hidden={2 !== activeTabKey}>
+          <TabContentBody>Knowledge panel</TabContentBody>
+        </TabContent>
+        <TabContent key={3} eventKey={3} id={`tabContent${3}`} activeKey={activeTabKey} hidden={3 !== activeTabKey}>
+          <TabContentBody>Support Panel</TabContentBody>
+        </TabContent>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};

package/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -400,7 +400,7 @@ export const TablesAndTabs = () => {
   );
 
   return (
-    <DashboardWrapper hasNoBreadcrumb>
+    <DashboardWrapper>
       <React.Fragment>
         <PageSection variant={PageSectionVariants.light}>
           <Title headingLevel="h1" size="2xl">