@patternfly/react-core 6.0.0-alpha.60 → 6.0.0-alpha.61

package/src/components/Wizard/WizardNavItem.tsx

@@ -42,6 +42,7 @@ export const WizardNavItem = ({
   content = '',
   isCurrent = false,
   isDisabled = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   isVisited = false,
   stepIndex,
   onClick,
@@ -66,23 +67,6 @@ export const WizardNavItem = ({
     console.error('WizardNavItem: When using an anchor, please provide an href');
   }
 
-  const ariaLabel = React.useMemo(() => {
-    if (status === WizardNavItemStatus.Error || (isVisited && !isCurrent)) {
-      let label = content.toString();
-
-      if (status === WizardNavItemStatus.Error) {
-        label += `, ${status}`;
-      }
-
-      // No need to signify step is visited if current
-      if (isVisited && !isCurrent) {
-        label += ', visited';
-      }
-
-      return label;
-    }
-  }, [content, isCurrent, isVisited, status]);
-
   return (
     <li
       className={css(
@@ -109,13 +93,15 @@ export const WizardNavItem = ({
         aria-disabled={isDisabled ? true : null}
         aria-current={isCurrent && !children ? 'step' : false}
         {...(isExpandable && { 'aria-expanded': isExpanded })}
-        {...(ariaLabel && { 'aria-label': ariaLabel })}
         {...ouiaProps}
       >
         {status === WizardNavItemStatus.Error && (
-          <span className={css(styles.wizardNavLinkStatusIcon)}>
-            <ExclamationCircleIcon />
-          </span>
+          <>
+            <span className="pf-v5-screen-reader">, {status}</span>
+            <span className={css(styles.wizardNavLinkStatusIcon)}>
+              <ExclamationCircleIcon />
+            </span>
+          </>
         )}
         <span className={css(styles.wizardNavLinkMain)}>
           {isExpandable ? (

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

@@ -190,7 +190,6 @@ test(`can customize the wizard's height and width`, () => {
 
   const wizard = screen.getByTestId('wizard-id');
 
-  expect(wizard).toHaveStyle('height: 500px');
   expect(wizard).toHaveStyle('width: 500px');
 });
 
@@ -411,7 +410,7 @@ test('incrementally shows/hides steps based on the activeStep when isProgressive
   await user.click(nextButton);
   expect(
     screen.getByRole('button', {
-      name: 'Test step 1, visited'
+      name: 'Test step 1'
     })
   ).toBeVisible();
   expect(
@@ -429,12 +428,12 @@ test('incrementally shows/hides steps based on the activeStep when isProgressive
   await user.click(nextButton);
   expect(
     screen.getByRole('button', {
-      name: 'Test step 1, visited'
+      name: 'Test step 1'
     })
   ).toBeVisible();
   expect(
     screen.getByRole('button', {
-      name: 'Test step 2, visited'
+      name: 'Test step 2'
     })
   ).toBeVisible();
   expect(
@@ -447,7 +446,7 @@ test('incrementally shows/hides steps based on the activeStep when isProgressive
   await user.click(backButton);
   expect(
     screen.getByRole('button', {
-      name: 'Test step 1, visited'
+      name: 'Test step 1'
     })
   ).toBeVisible();
   expect(

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

@@ -16,7 +16,7 @@ propComponents:
     'WizardContextProps',
     'WizardBasicStep',
     'WizardParentStep',
-    'WizardSubStep',
+    'WizardSubStep'
   ]
 ---
 
@@ -57,91 +57,119 @@ import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 ### Basic
 
 ```ts file="./WizardBasic.tsx"
+
+```
+
+### Focus content on next/back
+
+To focus the main content element of the `Wizard`, pass in the `shouldFocusContent` property. It is recommended that this is passed in so that users can navigate through a `WizardStep` content in order.
+
+If a `WizardStep` is passed a `body={null}` property, you must manually handle focus.
+
+```ts file="./WizardFocusOnNextBack.tsx"
+
 ```
 
 ### Basic with disabled steps
 
 ```ts file="./WizardBasicDisabledSteps.tsx"
+
 ```
 
 ### Anchors for nav items
 
 ```ts file="./WizardWithNavAnchors.tsx"
+
 ```
 
 ### Incrementally enabled steps
 
 ```ts file="./WizardStepVisitRequired.tsx"
+
 ```
 
 ### Expandable steps
 
 ```ts file="./WizardExpandableSteps.tsx"
+
 ```
 
 ### Progress after submission
 
 ```ts file="./WizardWithSubmitProgress.tsx"
+
 ```
 
 ### Enabled on form validation
 
 ```ts file="./WizardEnabledOnFormValidation.tsx"
+
 ```
 
 ### Validate on button press
 
 ```ts file="./WizardValidateOnButtonPress.tsx"
+
 ```
 
 ### Progressive steps
 
 ```ts file="./WizardProgressiveSteps.tsx"
+
 ```
 
 ### Get current step
 
 ```ts file="./WizardGetCurrentStep.tsx"
+
 ```
 
 ### Within modal
 
 ```ts file="./WizardWithinModal.tsx"
+
 ```
 
 ### Step drawer content
 
 ```ts file="./WizardStepDrawerContent.tsx"
+
 ```
 
 ### Custom navigation
 
 ```ts file="./WizardWithCustomNav.tsx"
+
 ```
 
 ### Header
 
 ```ts file="./WizardWithHeader.tsx"
+
 ```
 
 ### Custom footer
 
 ```ts file="./WizardWithCustomFooter.tsx"
+
 ```
 
 ### Custom navigation item
 
 ```ts file="./WizardWithCustomNavItem.tsx"
+
 ```
 
 ### Toggle step visibility
 
 ```ts file="./WizardToggleStepVisibility.tsx"
+
 ```
 
 ### Step error status
 
 ```ts file="./WizardStepErrorStatus.tsx"
+
 ```
 
 ## Hooks

package/src/components/Wizard/examples/WizardFocusOnNextBack.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Wizard, WizardStep } from '@patternfly/react-core';
+
+export const WizardFocusOnNextBack: React.FunctionComponent = () => (
+  <Wizard shouldFocusContent title="Wizard that focuses content on next or back click">
+    <WizardStep name="Step 1" id="wizard-focus-first-step">
+      Step 1 content
+    </WizardStep>
+    <WizardStep name="Step 2" id="wizard-focus-second-step">
+      Step 2 content
+    </WizardStep>
+    <WizardStep name="Review" id="wizard-focus-review-step" footer={{ nextButtonText: 'Finish' }}>
+      Review step content
+    </WizardStep>
+  </Wizard>
+);

package/src/components/Wizard/examples/WizardWithCustomFooter.tsx

@@ -40,12 +40,12 @@ const CustomStepTwoFooter = () => {
 
   return (
     <WizardFooterWrapper>
-      <Button variant="primary" onClick={onNext} isLoading={isLoading} isDisabled={isLoading}>
-        Async Next
-      </Button>
       <Button variant="secondary" onClick={goToPrevStep} isDisabled={isLoading}>
         Back
       </Button>
+      <Button variant="primary" onClick={onNext} isLoading={isLoading} isDisabled={isLoading}>
+        Async Next
+      </Button>
       <Button variant="link" onClick={close} isDisabled={isLoading}>
         Cancel
       </Button>

package/src/demos/AlertGroup.md

@@ -7,6 +7,7 @@ import { useEffect } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 
 ## Demos
 

package/src/demos/Nav.md

@@ -11,6 +11,8 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
+import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 
 ## Demos
 

package/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx

@@ -30,7 +30,7 @@ import {
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 interface NotificationProps {

package/src/demos/examples/Nav/NavDefault.tsx

@@ -16,7 +16,7 @@ import {
   Text
 } from '@patternfly/react-core';
 import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 
 export const NavDefault: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = React.useState<number | string>(0);

package/src/demos/examples/Nav/NavDrilldown.tsx

@@ -12,7 +12,7 @@ import {
   Menu,
   PageSection
 } from '@patternfly/react-core';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 
 interface MenuHeights {
   [menuId: string]: number;

package/src/demos/examples/Nav/NavExpandable.tsx

@@ -17,7 +17,7 @@ import {
   Text
 } from '@patternfly/react-core';
 import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 
 export const NavExpandableDemo: React.FunctionComponent = () => {
   const [activeGroup, setActiveGroup] = React.useState<string | number>('grp-1');

package/src/demos/examples/Nav/NavGrouped.tsx

@@ -11,7 +11,7 @@ import {
   TextContent,
   Text
 } from '@patternfly/react-core';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 
 export const NavGrouped: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = React.useState<number | string>('grp-1_itm-1');

package/src/demos/examples/Nav/NavHorizontal.tsx

@@ -38,7 +38,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
-import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 export const NavHorizontal: React.FunctionComponent = () => {
   const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);

package/src/demos/examples/Nav/NavWithSubnav.tsx

@@ -17,7 +17,7 @@ import {
   Text
 } from '@patternfly/react-core';
 import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 
 export const NavWithSubnav: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = React.useState<string | number>(0);

package/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx

@@ -1,14 +1,5 @@
 import React from 'react';
-import {
-  Form,
-  FormGroup,
-  FormGroupLabelHelp,
-  FormHelperText,
-  HelperText,
-  Popover,
-  HelperTextItem,
-  TextInput
-} from '@patternfly/react-core';
+import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
@@ -89,18 +80,6 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
     }
   };
 
-  const labelHelpRef = React.useRef(null);
-
-  const iconPopover = (
-    <Popover
-      triggerRef={labelHelpRef}
-      headerContent={<div>Password Requirements</div>}
-      bodyContent={<div>Password rules</div>}
-    >
-      <FormGroupLabelHelp ref={labelHelpRef} aria-label="More info for name field" />
-    </Popover>
-  );
-
   const passStrLabel = (
     <HelperText>
       <HelperTextItem variant={passStrength.variant} icon={passStrength.icon}>
@@ -113,7 +92,6 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
     <Form>
       <FormGroup
         label="Password"
-        labelHelp={iconPopover}
         isRequired
         fieldId="password-field"
         {...(ruleLength === 'success' &&

package/src/next/components/DualListSelector/examples/DualListSelector.md

@@ -1,7 +1,7 @@
 ---
 id: Dual list selector
 section: components
-cssPrefix: 'pf-v5-c-dual-list-selector'
+cssPrefix: 'pf-v6-c-dual-list-selector'
 propComponents:
   [
     'DualListSelector',