@patternfly/react-core 4.276.6 → 5.0.0-alpha.10

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -23,14 +23,6 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
-  /** @deprecated prop misspelled */
-  visiblity?: {
-    default?: 'hidden' | 'visible';
-    md?: 'hidden' | 'visible';
-    lg?: 'hidden' | 'visible';
-    xl?: 'hidden' | 'visible';
-    '2xl'?: 'hidden' | 'visible';
-  };
   /** Alignment at various breakpoints. */
   alignment?: {
     default?: 'alignRight' | 'alignLeft';
@@ -57,32 +49,13 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
   };
   /** Content to be rendered inside the data toolbar group */
   children?: React.ReactNode;
-  /** Reference to pass to this group if it has .pf-m-chip-container modifier */
+  /** @hide Reference to pass to this group if it has .pf-m-chip-container modifier */
   innerRef?: React.RefObject<any>;
 }
 
 class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
   render() {
-    const {
-      visibility,
-      visiblity,
-      alignment,
-      spacer,
-      spaceItems,
-      className,
-      variant,
-      children,
-      innerRef,
-      ...props
-    } = this.props;
-
-    if (visiblity !== undefined) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        'The ToolbarGroup visiblity prop has been deprecated. ' +
-          'Please use the correctly spelled visibility prop instead.'
-      );
-    }
+    const { visibility, alignment, spacer, spaceItems, className, variant, children, innerRef, ...props } = this.props;
 
     return (
       <PageContext.Consumer>
@@ -91,7 +64,7 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
             className={css(
               styles.toolbarGroup,
               variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup' | 'buttonGroup'],
-              formatBreakpointMods(visibility || visiblity, styles, '', getBreakpoint(width)),
+              formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
               formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
               formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
               formatBreakpointMods(spaceItems, styles, '', getBreakpoint(width)),

package/src/components/Toolbar/ToolbarItem.tsx

@@ -39,14 +39,6 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
-  /** @deprecated prop misspelled */
-  visiblity?: {
-    default?: 'hidden' | 'visible';
-    md?: 'hidden' | 'visible';
-    lg?: 'hidden' | 'visible';
-    xl?: 'hidden' | 'visible';
-    '2xl'?: 'hidden' | 'visible';
-  };
   /** Alignment at various breakpoints. */
   alignment?: {
     default?: 'alignRight' | 'alignLeft';
@@ -84,7 +76,6 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   className,
   variant,
   visibility,
-  visiblity,
   alignment,
   spacer,
   widths,
@@ -97,14 +88,6 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
     return <Divider className={css(styles.modifiers.vertical, className)} {...props} />;
   }
 
-  if (visiblity !== undefined) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      'The ToolbarItem visiblity prop has been deprecated. ' +
-        'Please use the correctly spelled visibility prop instead.'
-    );
-  }
-
   const widthStyles: any = {};
   if (widths) {
     Object.entries(widths || {}).map(
@@ -130,7 +113,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
                   | 'chipGroup'
               ],
             isAllExpanded && styles.modifiers.expanded,
-            formatBreakpointMods(visibility || visiblity, styles, '', getBreakpoint(width)),
+            formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
             formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
             formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
             className

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -22,14 +22,6 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
-  /** @deprecated prop misspelled */
-  visiblity?: {
-    default?: 'hidden' | 'visible';
-    md?: 'hidden' | 'visible';
-    lg?: 'hidden' | 'visible';
-    xl?: 'hidden' | 'visible';
-    '2xl'?: 'hidden' | 'visible';
-  };
   /** Alignment at various breakpoints. */
   alignment?: {
     default?: 'alignRight' | 'alignLeft';
@@ -69,7 +61,6 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
       toggleIcon,
       variant,
       visibility,
-      visiblity,
       breakpoint,
       alignment,
       spacer,
@@ -84,14 +75,6 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
       console.error('ToolbarToggleGroup will not be visible without a breakpoint or toggleIcon.');
     }
 
-    if (visiblity !== undefined) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        'The ToolbarToggleGroup visiblity prop has been deprecated. ' +
-          'Please use the correctly spelled visibility prop instead.'
-      );
-    }
-
     return (
       <PageContext.Consumer>
         {({ width, getBreakpoint }) => (
@@ -123,7 +106,7 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
                         variant &&
                           styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup' | 'buttonGroup'],
                         formatBreakpointMods(breakpointMod, styles, '', getBreakpoint(width)),
-                        formatBreakpointMods(visibility || visiblity, styles, '', getBreakpoint(width)),
+                        formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
                         formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
                         formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
                         formatBreakpointMods(spaceItems, styles, '', getBreakpoint(width)),

package/src/components/Tooltip/Tooltip.tsx

@@ -8,7 +8,6 @@ import { KeyTypes } from '../../helpers/constants';
 import tooltipMaxWidth from '@patternfly/react-tokens/dist/esm/c_tooltip_MaxWidth';
 import { ReactElement } from 'react';
 import { Popper, getOpacityTransition } from '../../helpers/Popper/Popper';
-import { Props as TippyProps } from '../../helpers/Popper/DeprecatedTippyTypes';
 
 export enum TooltipPosition {
   auto = 'auto',
@@ -134,14 +133,6 @@ export interface TooltipProps extends Omit<React.HTMLProps<HTMLDivElement>, 'con
   id?: string;
   /** CSS fade transition animation duration */
   animationDuration?: number;
-  /** @deprecated - no longer used. if you want to constrain the popper to a specific element use the appendTo prop instead */
-  boundary?: 'scrollParent' | 'window' | 'viewport' | HTMLElement;
-  /** @deprecated - no longer used */
-  isAppLauncher?: boolean;
-  /** @deprecated - no longer used */
-  tippyProps?: Partial<TippyProps>;
-  /** @beta Opt-in for updated popper that does not use findDOMNode. */
-  removeFindDomNode?: boolean;
 }
 
 // id for associating trigger with the content aria-describedby or aria-labelledby
@@ -169,22 +160,9 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   animationDuration = 300,
   reference,
   'aria-live': ariaLive = reference ? 'polite' : 'off',
-  boundary,
-  isAppLauncher,
-  tippyProps,
-  removeFindDomNode = false,
   onTooltipHidden = () => {},
   ...rest
 }: TooltipProps) => {
-  if (process.env.NODE_ENV !== 'production') {
-    boundary !== undefined &&
-      console.warn(
-        'The Tooltip boundary prop has been deprecated. If you want to constrain the popper to a specific element use the appendTo prop instead.'
-      );
-    isAppLauncher !== undefined &&
-      console.warn('The Tooltip isAppLauncher prop has been deprecated and is no longer used.');
-    tippyProps !== undefined && console.warn('The Tooltip tippyProps prop has been deprecated and is no longer used.');
-  }
   // could make this a prop in the future (true | false | 'toggle')
   const hideOnClick = true;
   const triggerOnMouseenter = trigger.includes('mouseenter');
@@ -357,7 +335,6 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
       enableFlip={enableFlip}
       zIndex={zIndex}
       flipBehavior={flipBehavior}
-      removeFindDomNode={removeFindDomNode}
     />
   );
 };

package/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap

@@ -2,8 +2,12 @@
 
 exports[`tooltip renders 1`] = `
 <DocumentFragment>
-  <div>
-    Toggle tooltip
+  <div
+    style="display: contents;"
+  >
+    <div>
+      Toggle tooltip
+    </div>
   </div>
 </DocumentFragment>
 `;

package/src/components/TreeView/TreeView.tsx

@@ -26,7 +26,7 @@ export interface TreeViewDataItem {
   /** Flag indicating if a tree view item has a badge. */
   hasBadge?: boolean;
   /** Flag indicating if a tree view item has a checkbox. */
-  hasCheck?: boolean;
+  hasCheckbox?: boolean;
   /** Default icon of a tree view item. */
   icon?: React.ReactNode;
   /** ID of a tree view item. */
@@ -59,7 +59,7 @@ export interface TreeViewProps {
   /** Flag indicating if all nodes in the tree view should have badges. */
   hasBadges?: boolean;
   /** Flag indicating if all nodes in the tree view should have checkboxes. */
-  hasChecks?: boolean;
+  hasCheckboxes?: boolean;
   /** Flag indicating if the tree view has guide lines. */
   hasGuides?: boolean;
   /** Flag indicating if the tree view is nested. */
@@ -92,7 +92,7 @@ export interface TreeViewProps {
 export const TreeView: React.FunctionComponent<TreeViewProps> = ({
   data,
   isNested = false,
-  hasChecks = false,
+  hasCheckboxes = false,
   hasBadges = false,
   hasGuides = false,
   hasSelectableNodes = false,
@@ -124,7 +124,7 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
           defaultExpanded={item.defaultExpanded !== undefined ? item.defaultExpanded : defaultAllExpanded}
           onSelect={onSelect}
           onCheck={onCheck}
-          hasCheck={item.hasCheck !== undefined ? item.hasCheck : hasChecks}
+          hasCheckbox={item.hasCheckbox !== undefined ? item.hasCheckbox : hasCheckboxes}
           checkProps={item.checkProps}
           hasBadge={item.hasBadge !== undefined ? item.hasBadge : hasBadges}
           customBadgeContent={item.customBadgeContent}
@@ -144,7 +144,7 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
                 data={item.children}
                 isNested
                 parentItem={item}
-                hasChecks={hasChecks}
+                hasCheckboxes={hasCheckboxes}
                 hasBadges={hasBadges}
                 hasGuides={hasGuides}
                 hasSelectableNodes={hasSelectableNodes}
@@ -170,7 +170,7 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
       ) : (
         <TreeViewRoot
           hasSelectableNodes={hasSelectableNodes}
-          hasChecks={hasChecks}
+          hasCheckboxes={hasCheckboxes}
           hasGuides={hasGuides}
           variant={variant}
           className={className}

package/src/components/TreeView/TreeViewListItem.tsx

@@ -32,7 +32,7 @@ export interface TreeViewListItemProps {
   /** Flag indicating if a tree view item has a badge. */
   hasBadge?: boolean;
   /** Flag indicating if a tree view item has a checkbox. */
-  hasCheck?: boolean;
+  hasCheckbox?: boolean;
   /** Default icon of a tree view item. */
   icon?: React.ReactNode;
   /** ID of a tree view item. */
@@ -75,7 +75,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
   children = null,
   onSelect,
   onCheck,
-  hasCheck = false,
+  hasCheckbox = false,
   checkProps = {
     checked: false
   },
@@ -104,26 +104,26 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
   }, [isExpanded, defaultExpanded]);
 
   let Component: 'label' | 'div' | 'button' = 'button';
-  if (hasCheck) {
+  if (hasCheckbox) {
     Component = 'label';
   } else if (isSelectable) {
     Component = 'div';
   }
 
-  const ToggleComponent = hasCheck || isSelectable ? 'button' : 'span';
+  const ToggleComponent = hasCheckbox || isSelectable ? 'button' : 'span';
 
   const renderToggle = (randomId: string) => (
     <ToggleComponent
       className={css(styles.treeViewNodeToggle)}
       onClick={(evt: React.MouseEvent) => {
-        if (isSelectable || hasCheck) {
+        if (isSelectable || hasCheckbox) {
           setIsExpanded(!internalIsExpanded);
         }
         if (isSelectable) {
           evt.stopPropagation();
         }
       }}
-      {...((hasCheck || isSelectable) && { 'aria-labelledby': `label-${randomId}` })}
+      {...((hasCheckbox || isSelectable) && { 'aria-labelledby': `label-${randomId}` })}
       tabIndex={-1}
     >
       <span className={css(styles.treeViewNodeToggleIcon)}>
@@ -196,7 +196,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
             <Component
               className={css(
                 styles.treeViewNode,
-                children && (isSelectable || hasCheck) && styles.modifiers.selectable,
+                children && (isSelectable || hasCheckbox) && styles.modifiers.selectable,
                 (!children || isSelectable) &&
                   activeItems &&
                   activeItems.length > 0 &&
@@ -205,19 +205,19 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
                   : ''
               )}
               onClick={(evt: React.MouseEvent) => {
-                if (!hasCheck) {
+                if (!hasCheckbox) {
                   onSelect && onSelect(evt, itemData, parentItem);
                   if (!isSelectable && children && evt.isDefaultPrevented() !== true) {
                     setIsExpanded(!internalIsExpanded);
                   }
                 }
               }}
-              {...(hasCheck && { htmlFor: randomId })}
-              {...((hasCheck || (isSelectable && children)) && { id: `label-${randomId}` })}
+              {...(hasCheckbox && { htmlFor: randomId })}
+              {...((hasCheckbox || (isSelectable && children)) && { id: `label-${randomId}` })}
             >
               <span className={css(styles.treeViewNodeContainer)}>
                 {children && renderToggle(randomId)}
-                {hasCheck && renderCheck(randomId)}
+                {hasCheckbox && renderCheck(randomId)}
                 {icon && iconRendered}
                 {renderNodeContent()}
                 {badgeRendered}
@@ -262,7 +262,7 @@ export const TreeViewListItem = React.memo(TreeViewListItemBase, (prevProps, nex
     prevProps.defaultExpanded !== nextProps.defaultExpanded ||
     prevProps.onSelect !== nextProps.onSelect ||
     prevProps.onCheck !== nextProps.onCheck ||
-    prevProps.hasCheck !== nextProps.hasCheck ||
+    prevProps.hasCheckbox !== nextProps.hasCheckbox ||
     prevProps.checkProps !== nextProps.checkProps ||
     prevProps.hasBadge !== nextProps.hasBadge ||
     prevProps.customBadgeContent !== nextProps.customBadgeContent ||

package/src/components/TreeView/TreeViewRoot.tsx

@@ -9,7 +9,7 @@ export interface TreeViewRootProps {
   /** Child nodes of the tree view */
   children: React.ReactNode;
   /** Flag indicating if the tree view has checkboxes. */
-  hasChecks?: boolean;
+  hasCheckboxes?: boolean;
   /** Flag indicating if tree view has guide lines. */
   hasGuides?: boolean;
   /** Variant presentation styles for the tree view. */
@@ -28,15 +28,15 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
     if (canUseDOM) {
       window.addEventListener(
         'keydown',
-        this.props.hasChecks || this.props.hasSelectableNodes ? this.handleKeysCheckbox : this.handleKeys
+        this.props.hasCheckboxes || this.props.hasSelectableNodes ? this.handleKeysCheckbox : this.handleKeys
       );
     }
-    if (this.props.hasChecks || this.props.hasSelectableNodes) {
+    if (this.props.hasCheckboxes || this.props.hasSelectableNodes) {
       const firstToggle = this.treeRef.current.getElementsByClassName('pf-c-tree-view__node-toggle')[0] as HTMLElement;
       if (firstToggle) {
         firstToggle.tabIndex = 0;
       }
-      if (this.props.hasChecks) {
+      if (this.props.hasCheckboxes) {
         const firstInput = this.treeRef.current.getElementsByTagName('INPUT')[0] as HTMLElement;
         if (firstInput) {
           firstInput.tabIndex = 0;
@@ -59,7 +59,7 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
     if (canUseDOM) {
       window.removeEventListener(
         'keydown',
-        this.props.hasChecks || this.props.hasSelectableNodes ? this.handleKeysCheckbox : this.handleKeys
+        this.props.hasCheckboxes || this.props.hasSelectableNodes ? this.handleKeysCheckbox : this.handleKeys
       );
     }
   }
@@ -188,7 +188,7 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
 
   render() {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { children, hasChecks, hasGuides, variant, className, hasSelectableNodes, ...props } = this.props;
+    const { children, hasCheckboxes, hasGuides, variant, className, hasSelectableNodes, ...props } = this.props;
     return (
       <div
         className={css(

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

@@ -67,7 +67,7 @@ const flagOptions = [
   {
     name: 'ApplicationLauncher',
     id: 'AppLaunch',
-    hasCheck: true,
+    hasCheckbox: true,
     icon: <FolderIcon />,
     expandedIcon: <FolderOpenIcon />,
     children: [
@@ -84,7 +84,7 @@ const flagOptions = [
         id: 'App2',
         hasBadge: true,
         children: [
-          { name: 'Settings', id: 'App2Settings', hasCheck: true },
+          { name: 'Settings', id: 'App2Settings', hasCheckbox: true },
           {
             name: 'Loader',
             id: 'App2Loader',
@@ -168,7 +168,7 @@ describe('tree view', () => {
   });
 
   test('renders checkboxes successfully', () => {
-    const { asFragment } = render(<TreeView data={options} activeItems={active} onSelect={jest.fn()} hasChecks />);
+    const { asFragment } = render(<TreeView data={options} activeItems={active} onSelect={jest.fn()} hasCheckboxes />);
     expect(asFragment()).toMatchSnapshot();
   });
 

package/src/components/TreeView/examples/TreeView.md

@@ -560,7 +560,7 @@ class CheckboxTreeView extends React.Component {
 
   render() {
     const mapped = this.options.map(item => this.mapTree(item));
-    return <TreeView data={mapped} onCheck={this.onCheck} hasChecks />;
+    return <TreeView data={mapped} onCheck={this.onCheck} hasCheckboxes />;
   }
 }
 ```

package/src/components/Truncate/Truncate.tsx

@@ -41,8 +41,6 @@ interface TruncateProps extends React.HTMLProps<HTMLSpanElement> {
     | 'left-end'
     | 'right-start'
     | 'right-end';
-  /** @beta Opt-in for updated popper that does not use findDOMNode. */
-  removeFindDomNode?: boolean;
 }
 
 const sliceContent = (str: string, slice: number) => [str.slice(0, str.length - slice), str.slice(-slice)];
@@ -53,10 +51,9 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
   tooltipPosition = 'top',
   trailingNumChars = 7,
   content,
-  removeFindDomNode,
   ...props
 }: TruncateProps) => (
-  <Tooltip position={tooltipPosition} content={content} removeFindDomNode={removeFindDomNode}>
+  <Tooltip position={tooltipPosition} content={content}>
     <span className={css(styles.truncate, className)} {...props}>
       {(position === TruncatePosition.end || position === TruncatePosition.start) && (
         <span className={truncateStyles[position]}>

package/src/components/Wizard/WizardFooterInternal.tsx

@@ -28,14 +28,14 @@ export const WizardFooterInternal: React.FunctionComponent<WizardFooterInternalP
   cancelButtonText
 }: WizardFooterInternalProps) => (
   <footer className={css(styles.wizardFooter)}>
-    <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={!isValid}>
-      {nextButtonText}
-    </Button>
     {!activeStep.hideBackButton && (
       <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={firstStep}>
         {backButtonText}
       </Button>
     )}
+    <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={!isValid}>
+      {nextButtonText}
+    </Button>
     {!activeStep.hideCancelButton && (
       <div className={styles.wizardFooterCancel}>
         <Button variant={ButtonVariant.link} onClick={onClose}>

package/src/components/Wizard/__tests__/Generated/__snapshots__/WizardFooterInternal.test.tsx.snap

@@ -6,25 +6,25 @@ exports[`WizardFooterInternal should match snapshot (auto-generated) 1`] = `
     class="pf-c-wizard__footer"
   >
     <button
-      aria-disabled="false"
-      class="pf-c-button pf-m-primary"
-      data-ouia-component-id="OUIA-Generated-Button-primary-1"
+      aria-disabled="true"
+      class="pf-c-button pf-m-secondary pf-m-disabled"
+      data-ouia-component-id="OUIA-Generated-Button-secondary-1"
       data-ouia-component-type="PF4/Button"
       data-ouia-safe="true"
-      type="submit"
+      disabled=""
+      type="button"
     >
       <div>
         ReactNode
       </div>
     </button>
     <button
-      aria-disabled="true"
-      class="pf-c-button pf-m-secondary pf-m-disabled"
-      data-ouia-component-id="OUIA-Generated-Button-secondary-1"
+      aria-disabled="false"
+      class="pf-c-button pf-m-primary"
+      data-ouia-component-id="OUIA-Generated-Button-primary-1"
       data-ouia-component-type="PF4/Button"
       data-ouia-safe="true"
-      disabled=""
-      type="button"
+      type="submit"
     >
       <div>
         ReactNode

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

@@ -227,16 +227,6 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
       <footer
         class="pf-c-wizard__footer"
       >
-        <button
-          aria-disabled="false"
-          class="pf-c-button pf-m-primary"
-          data-ouia-component-id="OUIA-Generated-Button-primary-2"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="submit"
-        >
-          Next
-        </button>
         <button
           aria-disabled="true"
           class="pf-c-button pf-m-secondary pf-m-disabled"
@@ -248,6 +238,16 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
         >
           Back
         </button>
+        <button
+          aria-disabled="false"
+          class="pf-c-button pf-m-primary"
+          data-ouia-component-id="OUIA-Generated-Button-primary-2"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="submit"
+        >
+          Next
+        </button>
         <div
           class="pf-c-wizard__footer-cancel"
         >
@@ -475,16 +475,6 @@ exports[`Wizard Wizard should match snapshot 1`] = `
       <footer
         class="pf-c-wizard__footer"
       >
-        <button
-          aria-disabled="false"
-          class="pf-c-button pf-m-primary"
-          data-ouia-component-id="OUIA-Generated-Button-primary-1"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="submit"
-        >
-          Next
-        </button>
         <button
           aria-disabled="true"
           class="pf-c-button pf-m-secondary pf-m-disabled"
@@ -496,6 +486,16 @@ exports[`Wizard Wizard should match snapshot 1`] = `
         >
           Back
         </button>
+        <button
+          aria-disabled="false"
+          class="pf-c-button pf-m-primary"
+          data-ouia-component-id="OUIA-Generated-Button-primary-1"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="submit"
+        >
+          Next
+        </button>
         <div
           class="pf-c-wizard__footer-cancel"
         >
@@ -604,16 +604,6 @@ exports[`Wizard bare wiz 1`] = `
       <footer
         class="pf-c-wizard__footer"
       >
-        <button
-          aria-disabled="false"
-          class="pf-c-button pf-m-primary"
-          data-ouia-component-id="OUIA-Generated-Button-primary-3"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="submit"
-        >
-          Next
-        </button>
         <button
           aria-disabled="true"
           class="pf-c-button pf-m-secondary pf-m-disabled"
@@ -625,6 +615,16 @@ exports[`Wizard bare wiz 1`] = `
         >
           Back
         </button>
+        <button
+          aria-disabled="false"
+          class="pf-c-button pf-m-primary"
+          data-ouia-component-id="OUIA-Generated-Button-primary-3"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="submit"
+        >
+          Next
+        </button>
         <div
           class="pf-c-wizard__footer-cancel"
         >

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

@@ -325,16 +325,16 @@ class ProgressiveWizard extends React.Component {
           {({ activeStep, goToStepByName, goToStepById, onNext, onBack, onClose }) => {
             return (
               <>
-                <Button variant="primary" type="submit" onClick={() => this.getNextStep(activeStep, onNext)}>
-                  {activeStep.name === 'Review' ? 'Finish' : 'Next'}
-                </Button>
                 <Button
                   variant="secondary"
                   onClick={() => this.getPreviousStep(activeStep, onBack)}
-                  className={activeStep.name === 'Get Started' ? 'pf-m-disabled' : ''}
+                  className={activeStep.name === 'Get started' ? 'pf-m-disabled' : ''}
                 >
                   Back
                 </Button>
+                <Button variant="primary" type="submit" onClick={() => this.getNextStep(activeStep, onNext)}>
+                  {activeStep.name === 'Review' ? 'Finish' : 'Next'}
+                </Button>
                 <Button variant="link" onClick={onClose}>
                   Cancel
                 </Button>