@patternfly/react-core 6.0.0-alpha.1 → 6.0.0-alpha.3

package/src/components/TreeView/__tests__/__snapshots__/TreeViewList.test.tsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot by default 1`] = `
+<DocumentFragment>
+  <ul
+    class="pf-v5-c-tree-view__list"
+    role="tree"
+  >
+    Content
+  </ul>
+</DocumentFragment>
+`;
+
+exports[`Matches snapshot when toolbar is passed 1`] = `
+<DocumentFragment>
+  <div>
+    Toolbar content
+  </div>
+  <hr
+    class="pf-v5-c-divider"
+  />
+  <ul
+    class="pf-v5-c-tree-view__list"
+    role="tree"
+  >
+    Content
+  </ul>
+</DocumentFragment>
+`;

package/src/components/TreeView/__tests__/__snapshots__/TreeViewListItem.test.tsx.snap

@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot with children 1`] = `
+<DocumentFragment>
+  <li
+    aria-expanded="false"
+    class="pf-v5-c-tree-view__list-item"
+    role="treeitem"
+    tabindex="-1"
+  >
+    <div
+      class="pf-v5-c-tree-view__content"
+    >
+      <button
+        class="pf-v5-c-tree-view__node"
+        type="button"
+      >
+        <span
+          class="pf-v5-c-tree-view__node-container"
+        >
+          <span
+            class="pf-v5-c-tree-view__node-toggle"
+            tabindex="-1"
+          >
+            <span
+              class="pf-v5-c-tree-view__node-toggle-icon"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 256 512"
+                width="1em"
+              >
+                <path
+                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                />
+              </svg>
+            </span>
+          </span>
+          <span
+            class="pf-v5-c-tree-view__node-text"
+          >
+            Item name
+          </span>
+        </span>
+      </button>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`Matches snapshot without children 1`] = `
+<DocumentFragment>
+  <li
+    aria-expanded="false"
+    class="pf-v5-c-tree-view__list-item"
+    role="treeitem"
+    tabindex="-1"
+  >
+    <div
+      class="pf-v5-c-tree-view__content"
+    >
+      <button
+        class="pf-v5-c-tree-view__node"
+        type="button"
+      >
+        <span
+          class="pf-v5-c-tree-view__node-container"
+        >
+          <span
+            class="pf-v5-c-tree-view__node-text"
+          >
+            Item name
+          </span>
+        </span>
+      </button>
+    </div>
+  </li>
+</DocumentFragment>
+`;

package/src/components/TreeView/__tests__/__snapshots__/TreeViewRoot.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-tree-view"
+  >
+    <div
+      class="pf-v5-c-tree-view__node"
+      tabindex="0"
+    >
+      Content
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/TreeView/__tests__/__snapshots__/TreeViewSearch.test.tsx.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-tree-view__search"
+  >
+    <div
+      class="pf-v5-c-form-control pf-m-icon"
+    >
+      <input
+        type="search"
+      />
+      <div
+        class="pf-v5-c-form-control__utilities"
+      >
+        <div
+          class="pf-v5-c-form-control__icon"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 512 512"
+            width="1em"
+          >
+            <path
+              d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Truncate } from '../Truncate';
+import styles from '@patternfly/react-styles/css/components/Truncate/truncate';
 
 jest.mock('../../Tooltip', () => ({
   Tooltip: ({ content, position, children, ...props }) => (
@@ -12,12 +13,12 @@ jest.mock('../../Tooltip', () => ({
   )
 }));
 
-test('renders with class pf-v5-c-truncate', () => {
+test(`renders with class ${styles.truncate}`, () => {
   render(<Truncate content={''} aria-label="test-id" />);
 
   const test = screen.getByLabelText('test-id');
 
-  expect(test).toHaveClass('pf-v5-c-truncate');
+  expect(test).toHaveClass(styles.truncate);
 });
 
 test('renders with custom class name passed via prop', () => {
@@ -44,13 +45,13 @@ test('renders truncate with content', () => {
   expect(test).toHaveTextContent('Test');
 });
 
-test('only renders pf-v5-c-truncate__start with default position', () => {
+test(`only renders ${styles.truncateStart} with default position`, () => {
   render(<Truncate content={'Testing truncate content'} />);
 
   const start = screen.getByText('Testing truncate content');
 
-  expect(start).toHaveClass('pf-v5-c-truncate__start');
-  expect(start).not.toHaveClass('pf-v5-c-truncate__end');
+  expect(start).toHaveClass(styles.truncateStart);
+  expect(start).not.toHaveClass(styles.truncateEnd);
 });
 
 test('renders default truncation', () => {
@@ -80,11 +81,11 @@ test('renders middle truncation', () => {
 
   const start = screen.getByText('Vestibulum interdum risus et enim faucibus, sit amet molestie est ac');
 
-  expect(start).toHaveClass('pf-v5-c-truncate__start');
+  expect(start).toHaveClass(styles.truncateStart);
 
   const end = screen.getByText('cumsan.');
 
-  expect(end).toHaveClass('pf-v5-c-truncate__end');
+  expect(end).toHaveClass(styles.truncateEnd);
 });
 
 test('renders different content when trailingNumChars is passed with middle truncate', () => {
@@ -98,11 +99,11 @@ test('renders different content when trailingNumChars is passed with middle trun
 
   const start = screen.getByText('Vestibulum interdum risus et enim faucibus, sit amet molestie est accums');
 
-  expect(start).toHaveClass('pf-v5-c-truncate__start');
+  expect(start).toHaveClass(styles.truncateStart);
 
   const end = screen.getByText('an.');
 
-  expect(end).toHaveClass('pf-v5-c-truncate__end');
+  expect(end).toHaveClass(styles.truncateEnd);
 });
 
 test('renders tooltip position', () => {

package/src/components/Truncate/examples/Truncate.md

@@ -12,7 +12,8 @@ import './TruncateExamples.css';
 ```js
 import React from 'react';
 import { Truncate } from '@patternfly/react-core';
-<div className="pf-v5-c-truncate--example">
+
+<div className="truncate-example-resize">
   <Truncate
     content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
   />
@@ -20,11 +21,11 @@ import { Truncate } from '@patternfly/react-core';
 ```
 
 ### Middle
-
 ```js
 import React from 'react';
 import { Truncate } from '@patternfly/react-core';
-<div className="pf-v5-c-truncate--example">
+
+<div className="truncate-example-resize">
   <Truncate
     content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}
     trailingNumChars={10}
@@ -37,7 +38,8 @@ import { Truncate } from '@patternfly/react-core';
 ```js
 import React from 'react';
 import { Truncate } from '@patternfly/react-core';
-<div className="pf-v5-c-truncate--example">
+
+<div className="truncate-example-resize">
   <Truncate
     content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
     position={'start'}
@@ -49,7 +51,8 @@ import { Truncate } from '@patternfly/react-core';
 ```js
 import React from 'react';
 import { Truncate } from '@patternfly/react-core';
-<div className="pf-v5-c-truncate--example">
+
+<div className="truncate-example-resize">
   <Truncate
     content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
     tooltipPosition={'bottom'}

package/src/components/Truncate/examples/TruncateExamples.css

@@ -1,4 +1,4 @@
-.pf-v5-c-truncate--example {
+.truncate-example-resize {
   width: 320px;
   resize: horizontal;
   overflow: auto;

package/src/components/Wizard/Wizard.tsx

@@ -11,7 +11,7 @@ import {
   WizardNavType,
   WizardStepChangeScope
 } from './types';
-import { buildSteps } from './utils';
+import { buildSteps, isStepEnabled } from './utils';
 import { useWizardContext, WizardContextProvider } from './WizardContext';
 import { WizardToggle } from './WizardToggle';
 import { WizardNavInternal } from './WizardNavInternal';
@@ -23,13 +23,15 @@ import { WizardNavInternal } from './WizardNavInternal';
 
 export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   /** Step components */
-  children: React.ReactNode | React.ReactNode[];
+  children: React.ReactNode;
   /** Wizard header */
   header?: React.ReactNode;
   /** Wizard footer */
   footer?: WizardFooterType;
   /** Wizard navigation */
   nav?: WizardNavType;
+  /** Aria-label for the Nav */
+  navAriaLabel?: string;
   /** The initial index the wizard is to start on (1 or higher). Defaults to 1. */
   startIndex?: number;
   /** Additional classes spread to the wizard */
@@ -63,6 +65,7 @@ export const Wizard = ({
   className,
   header,
   nav,
+  navAriaLabel,
   startIndex = 1,
   isVisitRequired = false,
   isProgressive = false,
@@ -83,35 +86,23 @@ export const Wizard = ({
   }, [startIndex]);
 
   const goToNextStep = (event: React.MouseEvent<HTMLButtonElement>, steps: WizardStepType[] = initialSteps) => {
-    const newStep = steps.find(
-      (step) => step.index > activeStepIndex && !step.isHidden && !step.isDisabled && !isWizardParentStep(step)
-    );
+    const newStep = steps.find((step) => step.index > activeStepIndex && isStepEnabled(steps, step));
 
     if (activeStepIndex >= steps.length || !newStep?.index) {
       return onSave ? onSave(event) : onClose?.(event);
     }
 
-    const currStep = isWizardParentStep(steps[activeStepIndex]) ? steps[activeStepIndex + 1] : steps[activeStepIndex];
-    const prevStep = steps[activeStepIndex - 1];
-
     setActiveStepIndex(newStep?.index);
-    onStepChange?.(event, currStep, prevStep, WizardStepChangeScope.Next);
+    onStepChange?.(event, newStep, steps[activeStepIndex - 1], WizardStepChangeScope.Next);
   };
 
   const goToPrevStep = (event: React.MouseEvent<HTMLButtonElement>, steps: WizardStepType[] = initialSteps) => {
     const newStep = [...steps]
       .reverse()
-      .find(
-        (step: WizardStepType) =>
-          step.index < activeStepIndex && !step.isHidden && !step.isDisabled && !isWizardParentStep(step)
-      );
-    const currStep = isWizardParentStep(steps[activeStepIndex - 2])
-      ? steps[activeStepIndex - 3]
-      : steps[activeStepIndex - 2];
-    const prevStep = steps[activeStepIndex - 1];
+      .find((step: WizardStepType) => step.index < activeStepIndex && isStepEnabled(steps, step));
 
     setActiveStepIndex(newStep?.index);
-    onStepChange?.(event, currStep, prevStep, WizardStepChangeScope.Back);
+    onStepChange?.(event, newStep, steps[activeStepIndex - 1], WizardStepChangeScope.Back);
   };
 
   const goToStepByIndex = (
@@ -176,7 +167,12 @@ export const Wizard = ({
         {...wrapperProps}
       >
         {header}
-        <WizardInternal nav={nav} isVisitRequired={isVisitRequired} isProgressive={isProgressive} />
+        <WizardInternal
+          nav={nav}
+          navAriaLabel={navAriaLabel}
+          isVisitRequired={isVisitRequired}
+          isProgressive={isProgressive}
+        />
       </div>
     </WizardContextProvider>
   );
@@ -184,9 +180,10 @@ export const Wizard = ({
 
 const WizardInternal = ({
   nav,
+  navAriaLabel,
   isVisitRequired,
   isProgressive
-}: Pick<WizardProps, 'nav' | 'isVisitRequired' | 'isProgressive'>) => {
+}: Pick<WizardProps, 'nav' | 'navAriaLabel' | 'isVisitRequired' | 'isProgressive'>) => {
   const { activeStep, steps, footer, goToStepByIndex } = useWizardContext();
   const [isNavExpanded, setIsNavExpanded] = React.useState(false);
 
@@ -198,12 +195,13 @@ const WizardInternal = ({
     return (
       <WizardNavInternal
         nav={nav}
+        navAriaLabel={navAriaLabel}
         isNavExpanded={isNavExpanded}
         isVisitRequired={isVisitRequired}
         isProgressive={isProgressive}
       />
     );
-  }, [activeStep, isVisitRequired, isProgressive, goToStepByIndex, isNavExpanded, nav, steps]);
+  }, [activeStep, isVisitRequired, isProgressive, goToStepByIndex, isNavExpanded, nav, navAriaLabel, steps]);
 
   return (
     <WizardToggle

package/src/components/Wizard/WizardBody.tsx

@@ -12,7 +12,7 @@ import { getResizeObserver } from '../../helpers/resizeObserver';
 
 export interface WizardBodyProps {
   /** Anything that can be rendered in the Wizard body */
-  children: React.ReactNode | React.ReactNode[];
+  children: React.ReactNode;
   /** Flag to remove the default body padding */
   hasNoPadding?: boolean;
   /** Adds an accessible name to the wrapper element when the content overflows and renders
@@ -67,7 +67,7 @@ export const WizardBody = ({
     return () => {
       observer();
     };
-  }, []);
+  }, [previousWidth]);
 
   return (
     <WrapperComponent

package/src/components/Wizard/WizardFooter.tsx

@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 import { Button, ButtonVariant } from '../Button';
-import { isCustomWizardFooter, WizardStepType } from './types';
+import { isCustomWizardFooter, WizardFooterButtonProps, WizardStepType } from './types';
 
 /**
  * Hosts the standard structure of a footer with ties to the active step so that text for buttons can vary from step to step.
@@ -33,6 +33,12 @@ export interface WizardFooterProps {
   isBackHidden?: boolean;
   /** Flag to hide the cancel button */
   isCancelHidden?: boolean;
+  /** Additional props for the Next button. */
+  nextButtonProps?: Omit<WizardFooterButtonProps, 'isDisabled' | 'type'>;
+  /** Additional props for the Back button. */
+  backButtonProps?: Omit<WizardFooterButtonProps, 'isDisabled'>;
+  /** Additional props for the Cancel button. */
+  cancelButtonProps?: WizardFooterButtonProps;
 }
 
 /**
@@ -62,22 +68,31 @@ const InternalWizardFooter = ({
   isCancelHidden,
   nextButtonText = 'Next',
   backButtonText = 'Back',
-  cancelButtonText = 'Cancel'
+  cancelButtonText = 'Cancel',
+  nextButtonProps,
+  backButtonProps,
+  cancelButtonProps
 }: Omit<WizardFooterProps, 'activeStep'>) => (
   <WizardFooterWrapper>
     {!isBackHidden && (
-      <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={isBackDisabled}>
+      <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={isBackDisabled} {...backButtonProps}>
         {backButtonText}
       </Button>
     )}
 
-    <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={isNextDisabled}>
+    <Button
+      variant={ButtonVariant.primary}
+      type="submit"
+      onClick={onNext}
+      isDisabled={isNextDisabled}
+      {...nextButtonProps}
+    >
       {nextButtonText}
     </Button>
 
     {!isCancelHidden && (
       <div className={styles.wizardFooterCancel}>
-        <Button variant={ButtonVariant.link} onClick={onClose}>
+        <Button variant={ButtonVariant.link} onClick={onClose} {...cancelButtonProps}>
           {cancelButtonText}
         </Button>
       </div>

package/src/components/Wizard/WizardNavInternal.tsx

@@ -7,21 +7,28 @@ import { WizardNav, WizardNavProps } from './WizardNav';
 import { WizardNavItem } from './WizardNavItem';
 
 /**
- * Hosts deafult wizard navigation logic by utilizing the wizard's context and WizardNav/WizardNavItem.
+ * Hosts default wizard navigation logic by utilizing the wizard's context and WizardNav/WizardNavItem.
  * This component is not exposed to consumers.
  */
 
 interface WizardNavInternalProps extends Pick<WizardProps, 'isVisitRequired' | 'isProgressive'> {
   nav: Partial<WizardNavProps>;
+  navAriaLabel: string;
   isNavExpanded: boolean;
 }
 
-export const WizardNavInternal = ({ nav, isVisitRequired, isProgressive, isNavExpanded }: WizardNavInternalProps) => {
+export const WizardNavInternal = ({
+  nav,
+  navAriaLabel,
+  isVisitRequired,
+  isProgressive,
+  isNavExpanded
+}: WizardNavInternalProps) => {
   const { activeStep, steps, goToStepByIndex } = useWizardContext();
 
   const wizardNavProps: WizardNavProps = {
     isExpanded: isNavExpanded,
-    'aria-label': nav?.['aria-label'] || 'Wizard steps',
+    'aria-label': navAriaLabel || nav?.['aria-label'] || 'Wizard steps',
     ...(nav?.['aria-labelledby'] && {
       'aria-labelledby': nav['aria-labelledby']
     })
@@ -78,7 +85,7 @@ export const WizardNavInternal = ({ nav, isVisitRequired, isProgressive, isNavEx
                     id={subStep.id}
                     content={subStep.name}
                     isCurrent={activeStep?.id === subStep.id}
-                    isDisabled={isSubStepDisabled}
+                    isDisabled={isSubStepDisabled || isStepDisabled}
                     isVisited={subStep.isVisited}
                     stepIndex={subStep.index}
                     onClick={() => goToStepByIndex(subStep.index)}
@@ -102,7 +109,7 @@ export const WizardNavInternal = ({ nav, isVisitRequired, isProgressive, isNavEx
                   content={step.name}
                   isExpandable={step.isExpandable}
                   isCurrent={hasActiveChild}
-                  isDisabled={!hasEnabledChildren}
+                  isDisabled={!hasEnabledChildren || isStepDisabled}
                   isVisited={step.isVisited}
                   stepIndex={firstSubStepIndex}
                   onClick={() => goToStepByIndex(firstSubStepIndex)}

package/src/components/Wizard/WizardNavItem.tsx

@@ -7,6 +7,8 @@ import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclam
 
 import { OUIAProps, useOUIAProps } from '../../helpers';
 import { WizardNavItemStatus } from './types';
+import globalSpacerSm from '@patternfly/react-tokens/dist/esm/global_spacer_sm';
+import globalDangerColor100 from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
 
 export interface WizardNavItemProps extends OUIAProps {
   /** Can nest a WizardNav component for substeps */
@@ -125,8 +127,8 @@ export const WizardNavItem = ({
             {content}
             {/* TODO, patternfly/patternfly#5142 */}
             {status === WizardNavItemStatus.Error && (
-              <span style={{ marginLeft: 'var(--pf-v5-global--spacer--sm)' }}>
-                <ExclamationCircleIcon color="var(--pf-v5-global--danger-color--100)" />
+              <span style={{ marginLeft: globalSpacerSm.var }}>
+                <ExclamationCircleIcon color={globalDangerColor100.var} />
               </span>
             )}
           </>

package/src/components/Wizard/WizardToggle.tsx

@@ -71,7 +71,7 @@ export const WizardToggle = ({
 
     return (
       <React.Fragment key={step.id}>
-        {activeStep?.name === step.name &&
+        {activeStep?.id === step.id &&
           (body || body === undefined ? <WizardBody {...body}>{children}</WizardBody> : children)}
 
         <div key={step.id} style={{ display: 'none' }}>