@patternfly/react-core 5.0.0-alpha.70 → 5.0.0-alpha.72

package/src/components/Wizard/WizardBody.tsx

@@ -1,56 +1,50 @@
-import * as React from 'react';
+import React from 'react';
+
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
-import { WizardDrawerWrapper } from './WizardDrawerWrapper';
-import { Drawer, DrawerContent } from '../Drawer';
-import { WizardStep } from './Wizard';
+import { WizardContext } from './WizardContext';
 import { debounce } from '../../helpers/util';
 import { getResizeObserver } from '../../helpers/resizeObserver';
 
+/**
+ * Used as a wrapper for WizardStep content, where the wrapping element is customizable.
+ */
+
 export interface WizardBodyProps {
   /** Anything that can be rendered in the Wizard body */
-  children: any;
-  /** Set to true to remove the default body padding */
-  hasNoBodyPadding: boolean;
-  /** Adds an accessible name to the wizard body when the body content overflows and renders
+  children: React.ReactNode | 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
    * a scrollbar.
    */
   'aria-label'?: string;
-  /** Adds an accessible name to the wizard body by passing the the id of one or more elements.
-   * The aria-labelledby will only be applied when the body content overflows and renders a scrollbar.
+  /** Adds an accessible name to the wrapper element by passing the the id of one or more elements.
+   * The aria-labelledby will only be applied when the content overflows and renders a scrollbar.
    */
-  'aria-labelledby': string;
-  /** Component used as the primary content container */
-  mainComponent?: React.ElementType;
-  /** The currently active WizardStep */
-  activeStep: WizardStep;
-  hasDrawer?: boolean;
-  /** Flag indicating the wizard drawer is expanded */
-  isDrawerExpanded?: boolean;
-  /** Callback function for when the drawer is toggled */
-  onExpandDrawer?: () => void;
+  'aria-labelledby'?: string;
+  /** Component used as the wrapping content container */
+  component?: React.ElementType;
 }
 
-export const WizardBody: React.FunctionComponent<WizardBodyProps> = ({
+export const WizardBody = ({
   children,
-  hasNoBodyPadding = false,
+  hasNoPadding = false,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
-  mainComponent = 'div',
-  hasDrawer,
-  isDrawerExpanded,
-  onExpandDrawer,
-  activeStep
+  component = 'div'
 }: WizardBodyProps) => {
-  const MainComponent = mainComponent;
   const [hasScrollbar, setHasScrollbar] = React.useState(false);
   const [previousWidth, setPreviousWidth] = React.useState<number | undefined>(undefined);
-  const wizardBodyRef = React.useRef(null);
+  const wrapperRef = React.useRef(null);
+  const WrapperComponent = component;
+  const { activeStep } = React.useContext(WizardContext);
+  const defaultAriaLabel = ariaLabel || `${activeStep?.name} content`;
 
   React.useEffect(() => {
     const resize = () => {
-      if (wizardBodyRef?.current) {
-        const { offsetWidth, offsetHeight, scrollHeight } = wizardBodyRef.current;
+      if (wrapperRef?.current) {
+        const { offsetWidth, offsetHeight, scrollHeight } = wrapperRef.current;
 
         if (previousWidth !== offsetWidth) {
           setPreviousWidth(offsetWidth);
@@ -62,12 +56,12 @@ export const WizardBody: React.FunctionComponent<WizardBodyProps> = ({
     const handleResizeWithDelay = debounce(resize, 250);
     let observer = () => {};
 
-    if (wizardBodyRef?.current) {
-      observer = getResizeObserver(wizardBodyRef.current, handleResizeWithDelay);
-      const { offsetHeight, scrollHeight } = wizardBodyRef.current;
+    if (wrapperRef?.current) {
+      observer = getResizeObserver(wrapperRef.current, handleResizeWithDelay);
+      const { offsetHeight, scrollHeight } = wrapperRef.current;
 
       setHasScrollbar(offsetHeight < scrollHeight);
-      setPreviousWidth((wizardBodyRef.current as HTMLElement).offsetWidth);
+      setPreviousWidth((wrapperRef.current as HTMLElement).offsetWidth);
     }
 
     return () => {
@@ -76,23 +70,15 @@ export const WizardBody: React.FunctionComponent<WizardBodyProps> = ({
   }, []);
 
   return (
-    <MainComponent
-      {...(mainComponent === 'div' && hasScrollbar && { role: 'region' })}
-      {...(hasScrollbar && { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, tabIndex: 0 })}
-      ref={wizardBodyRef}
+    <WrapperComponent
+      ref={wrapperRef}
+      {...(component === 'div' && hasScrollbar && { role: 'region' })}
+      {...(hasScrollbar && { 'aria-label': defaultAriaLabel, 'aria-labelledby': ariaLabelledBy, tabIndex: 0 })}
       className={css(styles.wizardMain)}
     >
-      <WizardDrawerWrapper
-        hasDrawer={hasDrawer && activeStep.drawerPanelContent}
-        wrapper={(children: React.ReactNode) => (
-          <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpandDrawer}>
-            <DrawerContent panelContent={activeStep.drawerPanelContent}>{children}</DrawerContent>
-          </Drawer>
-        )}
-      >
-        <div className={css(styles.wizardMainBody, hasNoBodyPadding && styles.modifiers.noPadding)}>{children}</div>
-      </WizardDrawerWrapper>
-    </MainComponent>
+      <div className={css(styles.wizardMainBody, hasNoPadding && styles.modifiers.noPadding)}>{children}</div>
+    </WrapperComponent>
   );
 };
+
 WizardBody.displayName = 'WizardBody';

package/src/components/Wizard/WizardFooter.tsx

@@ -1,13 +1,89 @@
-import * as React from 'react';
+import React from 'react';
+
 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';
+
+/**
+ * Hosts the standard structure of a footer with ties to the active step so that text for buttons can vary from step to step.
+ */
+
 export interface WizardFooterProps {
-  /** Buttons in the footer */
-  children: any;
+  /** The active step */
+  activeStep: WizardStepType;
+  /** Next button callback */
+  onNext: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
+  /** Back button callback */
+  onBack: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
+  /** Cancel link callback */
+  onClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /** Custom text for the Next button. The current step's nextButtonText takes precedence. */
+  nextButtonText?: React.ReactNode;
+  /** Custom text for the Back button */
+  backButtonText?: React.ReactNode;
+  /** Custom text for the Cancel link */
+  cancelButtonText?: React.ReactNode;
+  /** Flag to disable the next button */
+  isNextDisabled?: boolean;
+  /** Flag to disable the back button */
+  isBackDisabled?: boolean;
+  /** Flag to hide the back button */
+  isBackHidden?: boolean;
+  /** Flag to hide the cancel button */
+  isCancelHidden?: boolean;
+}
+
+/**
+ * Applies default wizard footer styling any number of child elements.
+ */
+
+interface WizardFooterWrapperProps {
+  children: React.ReactNode;
 }
 
-export const WizardFooter: React.FunctionComponent<WizardFooterProps> = ({ children }: WizardFooterProps) => (
+export const WizardFooterWrapper = ({ children }: WizardFooterWrapperProps) => (
   <footer className={css(styles.wizardFooter)}>{children}</footer>
 );
+
+export const WizardFooter = ({ activeStep, ...internalProps }: WizardFooterProps) => {
+  const activeStepFooter = !isCustomWizardFooter(activeStep?.footer) && activeStep?.footer;
+  return <InternalWizardFooter {...internalProps} {...activeStepFooter} />;
+};
+
+const InternalWizardFooter = ({
+  onNext,
+  onBack,
+  onClose,
+  isNextDisabled,
+  isBackDisabled,
+  isBackHidden,
+  isCancelHidden,
+  nextButtonText = 'Next',
+  backButtonText = 'Back',
+  cancelButtonText = 'Cancel'
+}: Omit<WizardFooterProps, 'activeStep'>) => (
+  <WizardFooterWrapper>
+    {!isBackHidden && (
+      <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={isBackDisabled}>
+        {backButtonText}
+      </Button>
+    )}
+
+    <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={isNextDisabled}>
+      {nextButtonText}
+    </Button>
+
+    {!isCancelHidden && (
+      <div className={styles.wizardFooterCancel}>
+        <Button variant={ButtonVariant.link} onClick={onClose}>
+          {cancelButtonText}
+        </Button>
+      </div>
+    )}
+  </WizardFooterWrapper>
+);
+
+WizardFooterWrapper.displayName = 'WizardFooterWrapper';
 WizardFooter.displayName = 'WizardFooter';

package/src/components/Wizard/WizardHeader.tsx

@@ -7,7 +7,7 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export interface WizardHeaderProps {
   /** Callback function called when the X (Close) button is clicked */
-  onClose?: () => void;
+  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /** Title of the wizard */
   title: string;
   /** Description of the wizard */
@@ -15,7 +15,7 @@ export interface WizardHeaderProps {
   /** Component type of the description */
   descriptionComponent?: 'div' | 'p';
   /** Flag indicating whether the close button should be in the header */
-  hideClose?: boolean;
+  isCloseHidden?: boolean;
   /** Aria-label applied to the X (Close) button */
   closeButtonAriaLabel?: string;
   /** id for the title */
@@ -28,21 +28,23 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   onClose = () => undefined,
   title,
   description,
-  hideClose,
+  isCloseHidden,
   closeButtonAriaLabel,
   titleId,
   descriptionComponent: Component = 'p',
   descriptionId
 }: WizardHeaderProps) => (
   <div className={css(styles.wizardHeader)}>
-    {!hideClose && (
+    {!isCloseHidden && (
       <Button variant="plain" className={css(styles.wizardClose)} aria-label={closeButtonAriaLabel} onClick={onClose}>
         <TimesIcon aria-hidden="true" />
       </Button>
     )}
+
     <Title headingLevel="h2" size="3xl" className={css(styles.wizardTitle)} aria-label={title} id={titleId}>
       {title || <>&nbsp;</>}
     </Title>
+
     {description && (
       <Component className={css(styles.wizardDescription)} id={descriptionId}>
         {description}
@@ -50,4 +52,5 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
     )}
   </div>
 );
+
 WizardHeader.displayName = 'WizardHeader';

package/src/components/Wizard/WizardNav.tsx

@@ -1,48 +1,40 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
-import { useOUIAProps, OUIAProps } from '../../helpers';
 
-export interface WizardNavProps extends OUIAProps {
+export interface WizardNavProps {
   /** children should be WizardNavItem components */
   children?: any;
-  /** Aria-label applied to the nav element */
+  /** Aria-label applied to the navigation element */
   'aria-label'?: string;
-  /** Sets the aria-labelledby attribute on the nav element */
+  /** Sets the aria-labelledby attribute on the navigation element */
   'aria-labelledby'?: string;
-  /** Whether the nav is expanded */
-  isOpen?: boolean;
-  /** True to return the inner list without the wrapping nav element */
-  returnList?: boolean;
+  /** Whether the navigation is expanded */
+  isExpanded?: boolean;
+  /** True to return the inner list without the wrapping navigation element */
+  isInnerList?: boolean;
 }
 
 export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
   children,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
-  isOpen = false,
-  returnList = false,
-  ouiaId,
-  ouiaSafe = true
+  isExpanded = false,
+  isInnerList = false
 }: WizardNavProps) => {
-  const ouiaProps = useOUIAProps(WizardNav.displayName, ouiaId, ouiaSafe);
-
-  const innerList = (
-    <ol className={css(styles.wizardNavList)} role="list">
-      {children}
-    </ol>
-  );
-
-  if (returnList) {
-    return innerList;
+  if (isInnerList) {
+    return (
+      <ol className={css(styles.wizardNavList)} role="list">
+        {children}
+      </ol>
+    );
   }
 
   return (
     <nav
-      className={css(styles.wizardNav, isOpen && styles.modifiers.expanded)}
+      className={css(styles.wizardNav, isExpanded && styles.modifiers.expanded)}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
-      {...ouiaProps}
     >
       <ol className={css(styles.wizardNavList)} role="list">
         {children}
@@ -50,4 +42,5 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
     </nav>
   );
 };
+
 WizardNav.displayName = 'WizardNav';

package/src/components/Wizard/WizardNavItem.tsx

@@ -1,70 +1,87 @@
 import * as React from 'react';
+
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import { useOUIAProps, OUIAProps } from '../../helpers';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+
+import { OUIAProps, useOUIAProps } from '../../helpers';
+import { WizardNavItemStatus } from './types';
 
 export interface WizardNavItemProps extends OUIAProps {
   /** Can nest a WizardNav component for substeps */
   children?: React.ReactNode;
-  /** The content to display in the nav item */
+  /** The content to display in the navigation item */
   content?: React.ReactNode;
-  /** Whether the nav item is the currently active item */
+  /** Whether the navigation item is the currently active item */
   isCurrent?: boolean;
-  /** Whether the nav item is disabled */
+  /** Whether the navigation item is disabled */
   isDisabled?: boolean;
-  /** The step passed into the onNavItemClick callback */
-  step: number;
-  /** Callback for when the nav item is clicked */
-  onNavItemClick?: (step: number) => any;
+  /** Whether the navigation item has been visited */
+  isVisited?: boolean;
+  /** The step index passed into the onNavItemClick callback */
+  stepIndex: number;
+  /** Callback for when the navigation item is clicked */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>, index: number) => any;
   /** Component used to render WizardNavItem */
-  navItemComponent?: 'button' | 'a';
+  component?: 'button' | 'a';
   /** An optional url to use for when using an anchor component */
   href?: string;
+  /** Where to display the linked URL when using an anchor component */
+  target?: React.HTMLAttributeAnchorTarget;
   /** Flag indicating that this NavItem has child steps and is expandable */
   isExpandable?: boolean;
-  /** The id for the nav item */
+  /** The id for the navigation item */
   id?: string | number;
+  /** Used to determine the icon displayed next to content. Default has no icon. */
+  status?: 'default' | 'error';
 }
 
-export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
+export const WizardNavItem = ({
   children = null,
   content = '',
   isCurrent = false,
   isDisabled = false,
-  step,
-  onNavItemClick = () => undefined,
-  navItemComponent = 'button',
-  href = null,
+  isVisited = false,
+  stepIndex,
+  onClick,
+  component: NavItemComponent = 'button',
+  href,
   isExpandable = false,
   id,
+  status = 'default',
+  target,
   ouiaId,
-  ouiaSafe = true,
-  ...rest
+  ouiaSafe = true
 }: WizardNavItemProps) => {
-  const ouiaProps = useOUIAProps(WizardNavItem.displayName, ouiaId, ouiaSafe);
-  const NavItemComponent = navItemComponent;
-
   const [isExpanded, setIsExpanded] = React.useState(false);
+  const ouiaProps = useOUIAProps(WizardNavItem.displayName, ouiaId, ouiaSafe);
 
   React.useEffect(() => {
     setIsExpanded(isCurrent);
   }, [isCurrent]);
 
-  if (navItemComponent === 'a' && !href && process.env.NODE_ENV !== 'production') {
+  if (NavItemComponent === 'a' && !href && process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line no-console
     console.error('WizardNavItem: When using an anchor, please provide an href');
   }
 
-  const btnProps = {
-    disabled: isDisabled,
-    type: 'button' as const
-  };
+  const ariaLabel = React.useMemo(() => {
+    if (status === WizardNavItemStatus.Error || (isVisited && !isCurrent)) {
+      let label = content.toString();
+
+      if (status === WizardNavItemStatus.Error) {
+        label += `, ${status}`;
+      }
 
-  const linkProps = {
-    tabIndex: isDisabled ? -1 : undefined,
-    href
-  };
+      // No need to signify step is visited if current
+      if (isVisited && !isCurrent) {
+        label += ', visited';
+      }
+
+      return label;
+    }
+  }, [content, isCurrent, isVisited, status]);
 
   return (
     <li
@@ -75,10 +92,14 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
       )}
     >
       <NavItemComponent
-        {...rest}
-        {...(navItemComponent === 'a' ? { ...linkProps } : { ...btnProps })}
+        {...(NavItemComponent === 'a'
+          ? { tabIndex: isDisabled ? -1 : undefined, href, target }
+          : { disabled: isDisabled })}
         {...(id && { id: id.toString() })}
-        onClick={() => (isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onNavItemClick(step))}
+        onClick={e => {
+          e.stopPropagation();
+          isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onClick?.(e, stepIndex);
+        }}
         className={css(
           styles.wizardNavLink,
           isCurrent && styles.modifiers.current,
@@ -87,6 +108,7 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
         aria-disabled={isDisabled ? true : null}
         aria-current={isCurrent && !children ? 'step' : false}
         {...(isExpandable && { 'aria-expanded': isExpanded })}
+        {...(ariaLabel && { 'aria-label': ariaLabel })}
         {...ouiaProps}
       >
         {isExpandable ? (
@@ -94,16 +116,25 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
             <span className={css(styles.wizardNavLinkText)}>{content}</span>
             <span className={css(styles.wizardNavLinkToggle)}>
               <span className={css(styles.wizardNavLinkToggleIcon)}>
-                <AngleRightIcon />
+                <AngleRightIcon aria-label={`${isCurrent ? 'Collapse' : 'Expand'} step icon`} />
               </span>
             </span>
           </>
         ) : (
-          content
+          <>
+            {content}
+            {/* TODO, patternfly/patternfly#5142 */}
+            {status === WizardNavItemStatus.Error && (
+              <span style={{ marginLeft: 'var(--pf-global--spacer--sm)' }}>
+                <ExclamationCircleIcon color="var(--pf-global--danger-color--100)" />
+              </span>
+            )}
+          </>
         )}
       </NavItemComponent>
       {children}
     </li>
   );
 };
+
 WizardNavItem.displayName = 'WizardNavItem';