@patternfly/react-core 4.227.0 → 4.227.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.227.0",
+  "version": "4.227.3",
   "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,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.78.0",
-    "@patternfly/react-styles": "^4.77.0",
-    "@patternfly/react-tokens": "^4.79.0",
+    "@patternfly/react-icons": "^4.78.3",
+    "@patternfly/react-styles": "^4.77.3",
+    "@patternfly/react-tokens": "^4.79.3",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "9ab68189931ffebc2eb1d2dd3a39ad5d8bc88b58"
+  "gitHead": "1f3a381413227fade8f0551512fcdc5a47436e7c"
 }

package/src/components/DataList/DataList.tsx

@@ -21,8 +21,6 @@ export enum DataListWrapModifier {
 }
 
 export interface SelectableRowObject {
-  /** Determines if only one of the selectable rows should be selectable at a time */
-  type: 'multiple' | 'single';
   /** Callback that executes when the screen reader accessible element receives a change event */
   onChange: (id: string, event: React.FormEvent<HTMLInputElement>) => void;
 }

package/src/components/DataList/DataListItem.tsx

@@ -115,8 +115,6 @@ export class DataListItem extends React.Component<DataListItemProps> {
             ? { 'aria-label': selectableInputAriaLabel }
             : { 'aria-labelledby': ariaLabelledBy };
 
-          const selectableInputType = selectableRow?.type === 'multiple' ? 'checkbox' : 'radio';
-
           return (
             <li
               id={id}
@@ -136,7 +134,7 @@ export class DataListItem extends React.Component<DataListItemProps> {
               {selectableRow && (
                 <input
                   className="pf-screen-reader"
-                  type={selectableInputType}
+                  type="radio"
                   checked={isSelected}
                   onChange={event => selectableRow.onChange(id, event)}
                   tabIndex={-1}

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

@@ -50,7 +50,7 @@ describe('DataList', () => {
 
   test('List renders with a hidden input to improve a11y when selectableRow is passed', () => {
     render(
-      <DataList aria-label="this is a simple list" selectableRow={{ type: 'multiple', onChange: () => {} }}>
+      <DataList aria-label="this is a simple list" selectableRow={{ onChange: () => {} }}>
         <DataListItem>
           <DataListItemRow aria-labelledby="test-id">
             <p id="test-id">Test</p>
@@ -59,7 +59,7 @@ describe('DataList', () => {
       </DataList>
     );
 
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+    const selectableInput = screen.getByRole('radio', { hidden: true });
 
     expect(selectableInput).toBeInTheDocument();
   });
@@ -75,35 +75,17 @@ describe('DataList', () => {
       </DataList>
     );
 
-    const selectableInput = screen.queryByRole('checkbox', { hidden: true });
+    const selectableInput = screen.queryByRole('radio', { hidden: true });
 
     expect(selectableInput).not.toBeInTheDocument();
   });
 
-  test('List hidden input renders as a radio when selectableRow.type is radio', () => {
-    render(
-      <DataList aria-label="this is a simple list" selectableRow={{ type: 'single', onChange: () => {} }}>
-        <DataListItem>
-          <DataListItemRow aria-labelledby="test-id">
-            <p id="test-id">Test</p>
-          </DataListItemRow>
-        </DataListItem>
-      </DataList>
-    );
-
-    const selectableRadioInput = screen.getByRole('radio', { hidden: true });
-    const selectableCheckboxInput = screen.queryByRole('checkbox', { hidden: true });
-
-    expect(selectableRadioInput).toBeInTheDocument();
-    expect(selectableCheckboxInput).not.toBeInTheDocument();
-  });
-
   test('List calls selectableRow.onChange when the selectable input changes', () => {
     const mock = jest.fn();
 
     render(
-      <DataList aria-label="this is a simple list" selectableRow={{ type: 'multiple', onChange: mock }}>
-        <DataListItem>
+      <DataList aria-label="this is a simple list" selectableRow={{ onChange: mock }} selectedDataListItemId=''>
+        <DataListItem id='item-test-id'>
           <DataListItemRow aria-labelledby="test-id">
             <p id="test-id">Test</p>
           </DataListItemRow>
@@ -111,7 +93,7 @@ describe('DataList', () => {
       </DataList>
     );
 
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+    const selectableInput = screen.getByRole('radio', { hidden: true });
     userEvent.click(selectableInput);
 
     expect(mock).toHaveBeenCalled();
@@ -121,8 +103,8 @@ describe('DataList', () => {
     const mock = jest.fn();
 
     render(
-      <DataList aria-label="this is a simple list" selectableRow={{ type: 'multiple', onChange: mock }}>
-        <DataListItem>
+      <DataList aria-label="this is a simple list" selectableRow={{ onChange: mock }} selectedDataListItemId=''>
+        <DataListItem id='item-test-id'>
           <DataListItemRow aria-labelledby="test-id">
             <p id="test-id">Test</p>
           </DataListItemRow>
@@ -135,7 +117,7 @@ describe('DataList', () => {
 
   test('Item applies selectableInputAriaLabel to the hidden input', () => {
     render(
-      <DataList aria-label="this is a simple list" selectableRow={{ type: 'multiple', onChange: () => {} }}>
+      <DataList aria-label="this is a simple list" selectableRow={{ onChange: () => {} }}>
         <DataListItem selectableInputAriaLabel="Data list item label test">
           <DataListItemRow aria-labelledby="test-id">
             <p id="test-id">Test</p>
@@ -144,35 +126,35 @@ describe('DataList', () => {
       </DataList>
     );
 
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+    const selectableInput = screen.getByRole('radio', { hidden: true });
 
     expect(selectableInput).toHaveAccessibleName('Data list item label test');
   });
 
   test('Item defaults to labelling its input using its aria-labelledby prop', () => {
     render(
-      <DataList aria-label="this is a simple list" selectableRow={{ type: 'multiple', onChange: () => {} }}>
+      <DataList aria-label="this is a simple list" selectableRow={{ onChange: () => {} }}>
         <DataListItem aria-labelledby="test-id">
           <p id="test-id">Test cell content</p>
         </DataListItem>
       </DataList>
     );
 
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+    const selectableInput = screen.getByRole('radio', { hidden: true });
 
     expect(selectableInput).toHaveAccessibleName('Test cell content');
   });
 
   test('Item prioritizes selectableInputAriaLabel over aria-labelledby prop', () => {
     render(
-      <DataList aria-label="this is a simple list" selectableRow={{ type: 'multiple', onChange: () => {} }}>
+      <DataList aria-label="this is a simple list" selectableRow={{ onChange: () => {} }}>
         <DataListItem aria-labelledby="test-id" selectableInputAriaLabel="Data list item label test">
           <p id="test-id">Test cell content</p>
         </DataListItem>
       </DataList>
     );
 
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+    const selectableInput = screen.getByRole('radio', { hidden: true });
 
     expect(selectableInput).toHaveAccessibleName('Data list item label test');
   });

package/src/components/DataList/examples/DataListSelectableRows.tsx

@@ -47,7 +47,7 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
         aria-label="selectable data list example"
         selectedDataListItemId={selectedDataListItemId}
         onSelectDataListItem={onSelectDataListItem}
-        selectableRow={{ type: 'single', onChange: handleInputChange }}
+        selectableRow={{ onChange: handleInputChange }}
       >
         <DataListItem aria-labelledby="selectable-action-item1" id="item1">
           <DataListItemRow>

package/src/components/Page/examples/Page.md

@@ -89,7 +89,7 @@ class VerticalPage extends React.Component {
         <MastheadContent>{headerToolbar}</MastheadContent>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="vertical-sidebar"/>;
+    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="vertical-sidebar" />;
 
     return (
       <Page header={Header} sidebar={Sidebar}>
@@ -262,7 +262,7 @@ class FillPage extends React.Component {
         <MastheadContent>{headerToolbar}</MastheadContent>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="fill-sidebar"/>;
+    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="fill-sidebar" />;
 
     return (
       <Page header={Header} sidebar={Sidebar}>
@@ -344,7 +344,7 @@ class VerticalPage extends React.Component {
         <MastheadContent>{headerToolbar}</MastheadContent>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="main-padding-sidebar"/>;
+    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="main-padding-sidebar" />;
 
     return (
       <Page header={Header} sidebar={Sidebar}>
@@ -410,7 +410,7 @@ class UncontrolledNavPage extends React.Component {
         <MastheadContent>{headerToolbar}</MastheadContent>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav="Navigation" id="uncontrolled-sidebar"/>;
+    const Sidebar = <PageSidebar nav="Navigation" id="uncontrolled-sidebar" />;
 
     return (
       <Page isManagedSidebar header={Header} sidebar={Sidebar}>
@@ -497,7 +497,7 @@ class GroupPage extends React.Component {
         <MastheadContent>{headerToolbar}</MastheadContent>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="group-section-sidebar"/>;
+    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="group-section-sidebar" />;
 
     return (
       <Page header={Header} sidebar={Sidebar}>
@@ -505,13 +505,21 @@ class GroupPage extends React.Component {
           <PageNavigation>
             <Nav aria-label="Group section navigation" variant="tertiary">
               <NavList>
-                <NavItem itemId={0} isActive>
+                <NavItem href="#" itemId={0} isActive>
                   System panel
                 </NavItem>
-                <NavItem itemId={1}>Policy</NavItem>
-                <NavItem itemId={2}>Authentication</NavItem>
-                <NavItem itemId={3}>Network services</NavItem>
-                <NavItem itemId={4}>Server</NavItem>
+                <NavItem href="#" itemId={1}>
+                  Policy
+                </NavItem>
+                <NavItem href="#" itemId={2}>
+                  Authentication
+                </NavItem>
+                <NavItem href="#" itemId={3}>
+                  Network services
+                </NavItem>
+                <NavItem href="#" itemId={4}>
+                  Server
+                </NavItem>
               </NavList>
             </Nav>
           </PageNavigation>
@@ -582,7 +590,7 @@ class VerticalPage extends React.Component {
         navToggleId="vertical-pageheader-toggle"
       />
     );
-    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="vertical-pageheader-sidebar"/>;
+    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="vertical-pageheader-sidebar" />;
 
     return (
       <Page header={Header} sidebar={Sidebar}>
@@ -630,7 +638,12 @@ CenterAlignedPageSection = () => {
   const Header = (
     <Masthead>
       <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label="Global navigation" onNavToggle={this.onNavToggle} id="centered-nav-toggle">
+        <PageToggleButton
+          variant="plain"
+          aria-label="Global navigation"
+          onNavToggle={this.onNavToggle}
+          id="centered-nav-toggle"
+        >
           <BarsIcon />
         </PageToggleButton>
       </MastheadToggle>

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

@@ -15,387 +15,44 @@ Progress steppers have default icons associated with the `variant` property, and
 
 ### Basic
 
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
-
-<ProgressStepper>
-  <ProgressStep
-    variant="success"
-    id="basic-step1"
-    titleId="basic-step1-title"
-    aria-label="completed step, step with success"
-  >
-    First step
-  </ProgressStep>
-  <ProgressStep
-    variant="info"
-    isCurrent
-    id="basic-step2"
-    titleId="basic-step2-title"
-    aria-label="step with info"
-  >
-    Second step
-  </ProgressStep>
-  <ProgressStep variant="pending" id="basic-step3" titleId="basic-step3-title" aria-label="pending step">
-    Third step
-  </ProgressStep>
-</ProgressStepper>;
+```ts file="ProgressStepperBasic.tsx"
 ```
 
-### Basic with descriptions
-
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
+### With step descriptions
 
-<ProgressStepper>
-  <ProgressStep
-    variant="success"
-    description="This is the first thing to happen"
-    id="basic-desc-step1"
-    titleId="basic-desc-step1-title"
-    aria-label="completed step, step with success"
-  >
-    First step
-  </ProgressStep>
-  <ProgressStep
-    variant="info"
-    isCurrent
-    description="This is the second thing to happen"
-    id="basic-desc-step2"
-    titleId="basic-desc-step2-title"
-    aria-label="step with info"
-  >
-    Second step
-  </ProgressStep>
-  <ProgressStep
-    variant="pending"
-    description="This is the last thing to happen"
-    id="basic-desc-step3"
-    titleId="basic-desc-step3-title"
-    aria-label="pending step"
-  >
-    Third step
-  </ProgressStep>
-</ProgressStepper>;
+```ts file="ProgressStepperBasicWithDescription.tsx"
 ```
 
-### Center aligned with descriptions
-
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
-
-<ProgressStepper isCenterAligned>
-  <ProgressStep
-    variant="success"
-    description="This is the first thing to happen"
-    id="center-desc-step1"
-    titleId="center-desc-step1-title"
-    aria-label="completed step, step with success"
-  >
-    First step
-  </ProgressStep>
-  <ProgressStep
-    variant="info"
-    isCurrent
-    description="This is the second thing to happen"
-    id="center-desc-step2"
-    titleId="center-desc-step2-title"
-    aria-label="step with info"
-  >
-    Second step
-  </ProgressStep>
-  <ProgressStep
-    variant="pending"
-    description="This is the last thing to happen"
-    id="center-desc-step3"
-    titleId="center-desc-step3-title"
-    aria-label="pending step"
-  >
-    Third step
-  </ProgressStep>
-</ProgressStepper>;
-```
-
-### Vertical with descriptions
-
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
+### With alignment
 
-<ProgressStepper isVertical>
-  <ProgressStep
-    variant="success"
-    description="This is the first thing to happen"
-    id="vertical-desc-step1"
-    titleId="vertical-desc-step1-title"
-    aria-label="completed step, step with success"
-  >
-    First step
-  </ProgressStep>
-  <ProgressStep
-    variant="info"
-    isCurrent
-    description="This is the second thing to happen"
-    id="vertical-desc-step2"
-    titleId="vertical-desc-step2-title"
-    aria-label="step with info"
-  >
-    Second step
-  </ProgressStep>
-  <ProgressStep
-    variant="pending"
-    description="This is the last thing to happen"
-    id="vertical-desc-step3"
-    titleId="vertical-desc-step3-title"
-    aria-label="pending step"
-  >
-    Third step
-  </ProgressStep>
-</ProgressStepper>;
+```ts file="ProgressStepperBasicWithAlignment.tsx"
 ```
 
 ### Compact
 
 Compact progress steppers will only display the current step's `title`, and will not display any steps' `description` texts.
 
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
-
-<ProgressStepper isCompact>
-  <ProgressStep
-    variant="success"
-    id="compact-step1"
-    titleId="compact-step1-title"
-    aria-label="completed step, step with success"
-  >
-    First step
-  </ProgressStep>
-  <ProgressStep
-    variant="info"
-    isCurrent
-    id="compact-step2"
-    titleId="compact-step2-title"
-    aria-label="step with info"
-  >
-    Second step
-  </ProgressStep>
-  <ProgressStep variant="pending" id="compact-step3" titleId="compact-step3-title" aria-label="pending step">
-    Third step
-  </ProgressStep>
-</ProgressStepper>;
+```ts file="ProgressStepperCompact.tsx"
 ```
 
-### Basic with an issue
-
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
+### With an issue
 
-<ProgressStepper>
-  <ProgressStep
-    variant="success"
-    id="basic-with-issue-step1"
-    titleId="basic-with-issue-step1-title"
-    aria-label="completed step, step with success"
-  >
-    First step
-  </ProgressStep>
-  <ProgressStep
-    variant="success"
-    id="basic-with-issue-step2"
-    titleId="basic-with-issue-step2-title"
-    aria-label="completed step, step with success"
-  >
-    Second step
-  </ProgressStep>
-  <ProgressStep
-    variant="warning"
-    id="basic-with-issue-step3"
-    titleId="basic-with-issue-step3-title"
-    aria-label="completed step, step with warning"
-  >
-    Third step
-  </ProgressStep>
-  <ProgressStep
-    variant="info"
-    isCurrent
-    id="basic-with-issue-step4"
-    titleId="basic-with-issue-step4-title"
-    aria-label="step with info"
-  >
-    Fourth step
-  </ProgressStep>
-  <ProgressStep
-    variant="pending"
-    id="basic-with-issue-step5"
-    titleId="basic-with-issue-step5-title"
-    aria-label="pending step"
-  >
-    Fifth step
-  </ProgressStep>
-</ProgressStepper>;
+```ts file="ProgressStepperBasicIssue.tsx"
 ```
 
-### Basic with a failure
+### With a failure
 
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
-
-<ProgressStepper>
-  <ProgressStep
-    variant="success"
-    id="basic-with-failure-step1"
-    titleId="basic-with-failure-step1-title"
-    aria-label="completed step, step with success"
-  >
-    First step
-  </ProgressStep>
-  <ProgressStep
-    variant="success"
-    id="basic-with-failure-step2"
-    titleId="basic-with-failure-step2-title"
-    aria-label="completed step, step with success"
-  >
-    Second step
-  </ProgressStep>
-  <ProgressStep
-    variant="success"
-    id="basic-with-failure-step3"
-    titleId="basic-with-failure-step3-title"
-    aria-label="completed step, step with success"
-  >
-    Third step
-  </ProgressStep>
-  <ProgressStep
-    variant="danger"
-    isCurrent
-    id="basic-with-failure-step4"
-    titleId="basic-with-failure-step4-title"
-    aria-label="step with danger"
-  >
-    Fourth step
-  </ProgressStep>
-  <ProgressStep
-    variant="pending"
-    id="basic-with-failure-step5"
-    titleId="basic-with-failure-step5-title"
-    aria-label="pending step"
-  >
-    Fifth step
-  </ProgressStep>
-</ProgressStepper>;
+```ts file="ProgressStepperBasicFailure.tsx"
 ```
 
-### Basic with Patternfly icons
+### With custom icons
 
-```js
-import React from 'react';
-import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
-import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
-import PendingIcon from '@patternfly/react-icons/dist/esm/icons/pending-icon';
-
-<ProgressStepper>
-  <ProgressStep
-    variant="success"
-    id="custom-step1"
-    titleId="custom-step1-title"
-    aria-label="completed step, step with success"
-  >
-    Successful completion
-  </ProgressStep>
-  <ProgressStep
-    isCurrent
-    icon={<InProgressIcon />}
-    id="custom-step2"
-    titleId="custom-step2-title"
-    aria-label="in progress"
-  >
-    In process
-  </ProgressStep>
-  <ProgressStep
-    variant="pending"
-    icon={<PendingIcon />}
-    id="custom-step3"
-    titleId="custom-step3-title"
-    aria-label="pending step"
-  >
-    Pending
-  </ProgressStep>
-</ProgressStepper>;
+```ts file="ProgressStepperCustomIcons.tsx"
 ```
 
 ### With help popover
 
 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 = () => {
-  return (
-    <ProgressStepper>
-      <ProgressStep
-        variant="success"
-        id="popover-step1"
-        titleId="popover-step1-title"
-        aria-label="completed step with popover, step with success"
-        popoverRender={( stepRef ) => (
-          <Popover
-            aria-label="First step help"
-            headerContent={<div>First step popover</div>}
-            bodyContent={<div>Additional info or help text content.</div>}
-            reference={stepRef}
-            position="right"
-          />
-           )}
-      >
-        First step
-      </ProgressStep>
-      <ProgressStep
-        variant="danger"
-        id="popover-step2"
-        titleId="popover-step2-title"
-        aria-label="completed step with popover, step with danger"
-        popoverRender={( stepRef ) => (
-          <Popover
-            aria-label="Second step help"
-            headerContent={<div>Second step popover</div>}
-            bodyContent={<div>Additional info or help text content.</div>}
-            reference={stepRef}
-            position="right"
-          />
-        )}
-      >
-        Second step
-      </ProgressStep>
-      <ProgressStep
-        variant="info"
-        id="popover-step3"
-        titleId="popover-step3-title"
-        aria-label="step with 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={stepRef}
-            position="right"
-          />
-        )}
-        isCurrent
-      >
-        Third step
-      </ProgressStep>
-      <ProgressStep variant="pending" id="popover-step4" titleId="popover-step4-title" aria-label="pending step">
-        Fourth step
-      </ProgressStep>
-    </ProgressStepper>
-  );
-};
+```ts file="ProgressStepperHelpPopover.tsx"
 ```