@patternfly/react-core 6.0.0-alpha.84 → 6.0.0-alpha.86

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.83","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.85","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.83","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.85","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.83","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.85","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.84",
+  "version": "6.0.0-alpha.86",
   "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",
@@ -64,5 +64,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "d49fbd742aef4dadd4a1863265e596d9084fed7d"
+  "gitHead": "25a8747bbb2bd86419ea3ee470535709f6e7fe26"
 }

package/src/components/Accordion/AccordionContent.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 import { AccordionContext, AccordionItemContext } from './AccordionContext';
-import { AccordionExpandableContentBody } from './AccordionExpandableContentBody';
+import { AccordionExpandableContentBody, AccordionExpandableContentBodyProps } from './AccordionExpandableContentBody';
 
 export interface AccordionContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the Accordion  */
@@ -21,6 +21,8 @@ export interface AccordionContentProps extends React.HTMLProps<HTMLDivElement> {
   component?: React.ElementType;
   /** Flag indicating content is custom. Expanded content Body wrapper will be removed from children.  This allows multiple bodies to be rendered as content. */
   isCustomContent?: React.ReactNode;
+  /** Props passed to the AccordionExpandableContentBody **/
+  contentBodyProps?: AccordionExpandableContentBodyProps;
 }
 
 export const AccordionContent: React.FunctionComponent<AccordionContentProps> = ({
@@ -32,6 +34,7 @@ export const AccordionContent: React.FunctionComponent<AccordionContentProps> =
   'aria-label': ariaLabel = '',
   'aria-labelledby': ariaLabelledby,
   component,
+  contentBodyProps,
   ...props
 }: AccordionContentProps) => {
   const [hasScrollbar, setHasScrollbar] = React.useState(false);
@@ -64,7 +67,11 @@ export const AccordionContent: React.FunctionComponent<AccordionContentProps> =
             {...(hasScrollbar && Container === 'div' && { role: 'region' })}
             {...props}
           >
-            {isCustomContent ? children : <AccordionExpandableContentBody>{children}</AccordionExpandableContentBody>}
+            {isCustomContent ? (
+              children
+            ) : (
+              <AccordionExpandableContentBody {...contentBodyProps}>{children}</AccordionExpandableContentBody>
+            )}
           </Container>
         );
       }}

package/src/components/Accordion/AccordionExpandableContentBody.tsx

@@ -2,12 +2,17 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 
-export interface AccordionExpandableContentBodyProps {
+export interface AccordionExpandableContentBodyProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the accordion content body  */
   children?: React.ReactNode;
 }
 
 export const AccordionExpandableContentBody: React.FunctionComponent<AccordionExpandableContentBodyProps> = ({
-  children = null
-}: AccordionExpandableContentBodyProps) => <div className={css(styles.accordionExpandableContentBody)}>{children}</div>;
+  children = null,
+  ...props
+}: AccordionExpandableContentBodyProps) => (
+  <div className={css(styles.accordionExpandableContentBody)} {...props}>
+    {children}
+  </div>
+);
 AccordionExpandableContentBody.displayName = 'AccordionExpandableContentBody';

package/src/components/Accordion/AccordionItem.tsx

@@ -3,7 +3,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 import { AccordionItemContext } from './AccordionContext';
 
-export interface AccordionItemProps {
+export interface AccordionItemProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the accordion item. */
   children?: React.ReactNode;
   /** Additional classes added to the accordion item. */
@@ -15,14 +15,17 @@ export interface AccordionItemProps {
 export const AccordionItem: React.FunctionComponent<AccordionItemProps> = ({
   children = null,
   className,
-  isExpanded: isExpandedProp = false
+  isExpanded: isExpandedProp = false,
+  ...props
 }: AccordionItemProps) => (
   <AccordionItemContext.Provider
     value={{
       isExpanded: isExpandedProp
     }}
   >
-    <div className={css(styles.accordionItem, isExpandedProp && styles.modifiers.expanded, className)}>{children}</div>
+    <div className={css(styles.accordionItem, isExpandedProp && styles.modifiers.expanded, className)} {...props}>
+      {children}
+    </div>
   </AccordionItemContext.Provider>
 );
 AccordionItem.displayName = 'AccordionItem';

package/src/components/Accordion/__tests__/AccordionItem.test.tsx

@@ -28,6 +28,12 @@ test(`Renders with additional classes when className is passed`, () => {
   expect(screen.getByText('Test')).toHaveClass('custom-class');
 });
 
+test(`Spreads props if others are passed`, () => {
+  render(<AccordionItem data-testId="testId">Test</AccordionItem>);
+
+  expect(screen.getByTestId('testId')).toBeInTheDocument();
+});
+
 test('Matches the snapshot', () => {
   const { asFragment } = render(<AccordionItem>Test</AccordionItem>);
   expect(asFragment()).toMatchSnapshot();

package/src/components/Wizard/WizardNavItem.tsx

@@ -4,6 +4,7 @@ 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 ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
 import { OUIAProps, useOUIAProps } from '../../helpers';
 import { WizardNavItemStatus } from './types';
@@ -38,7 +39,7 @@ export interface WizardNavItemProps
   /** 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';
+  status?: 'default' | 'error' | 'success';
 }
 
 export const WizardNavItem = ({
@@ -96,18 +97,20 @@ export const WizardNavItem = ({
           styles.wizardNavLink,
           isCurrent && styles.modifiers.current,
           isDisabled && styles.modifiers.disabled,
-          status === WizardNavItemStatus.Error && styles.modifiers.danger
+          status === WizardNavItemStatus.Error && styles.modifiers.danger,
+          status === WizardNavItemStatus.Success && styles.modifiers.success
         )}
         aria-disabled={isDisabled ? true : null}
         aria-current={isCurrent && !children ? 'step' : false}
         {...(isExpandable && { 'aria-expanded': isExpanded })}
         {...ouiaProps}
       >
-        {status === WizardNavItemStatus.Error && (
+        {status !== WizardNavItemStatus.Default && (
           <>
             <span className="pf-v6-screen-reader">, {status}</span>
             <span className={css(styles.wizardNavLinkStatusIcon)}>
-              <ExclamationCircleIcon />
+              {status === WizardNavItemStatus.Error && <ExclamationCircleIcon />}
+              {status === WizardNavItemStatus.Success && <CheckCircleIcon />}
             </span>
           </>
         )}

package/src/components/Wizard/WizardStep.tsx

@@ -29,7 +29,7 @@ export interface WizardStepProps {
   /** Replaces the step's footer. The step's footer takes precedance over the wizard's footer. */
   footer?: React.ReactElement | Partial<WizardFooterProps>;
   /** Used to determine icon next to the step's navigation item */
-  status?: 'default' | 'error';
+  status?: 'default' | 'error' | 'success';
   /** Flag to determine whether parent steps can expand or not. Defaults to false. */
   isExpandable?: boolean;
 }

package/src/components/Wizard/WizardToggle.tsx

@@ -5,6 +5,7 @@ import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
 import { KeyTypes } from '../../helpers/constants';
 import { WizardStepType, isWizardSubStep } from './types';
@@ -91,12 +92,24 @@ export const WizardToggle = ({
         aria-expanded={isNavExpanded}
       >
         <span className={css(styles.wizardToggleList)}>
-          <span className={css(styles.wizardToggleListItem, isActiveStepStatus === 'error' && styles.modifiers.danger)}>
-            {isActiveStepStatus === 'error' ? (
+          <span
+            className={css(
+              styles.wizardToggleListItem,
+              isActiveStepStatus === 'error' && styles.modifiers.danger,
+              isActiveStepStatus === 'success' && styles.modifiers.success
+            )}
+          >
+            {isActiveStepStatus === 'error' && (
               <span className={css(styles.wizardToggleStatusIcon)}>
                 <ExclamationCircleIcon />
               </span>
-            ) : (
+            )}
+            {isActiveStepStatus === 'success' && (
+              <span className={css(styles.wizardToggleStatusIcon)}>
+                <CheckCircleIcon />
+              </span>
+            )}
+            {isActiveStepStatus !== 'success' && isActiveStepStatus !== 'error' && (
               <span className={css(styles.wizardToggleNum)}>{wizardToggleIndex}</span>
             )}{' '}
             {parentStep?.name || activeStep?.name}

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

@@ -59,3 +59,9 @@ test(`Renders screen reader text and danger icon when status is error`, () => {
   expect(screen.getByRole('button')).toHaveClass(styles.modifiers.danger);
   expect(screen.getByText(', error')).toBeInTheDocument();
 });
+
+test(`Renders screen reader text and success icon when status is success`, () => {
+  render(<WizardNavItem status="success" />);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.success);
+  expect(screen.getByText(', success')).toBeInTheDocument();
+});

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

@@ -70,4 +70,6 @@ test('updates "navItem" in context when the value changes', () => {
 test('updates "status" in context when the value changes', () => {
   render(<WizardStep {...testStep} status="error" />);
   expect(setStep).toHaveBeenCalledWith({ ...testStepProps, status: 'error', isVisited: true });
+  render(<WizardStep {...testStep} status="success" />);
+  expect(setStep).toHaveBeenCalledWith({ ...testStepProps, status: 'success', isVisited: true });
 });

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

@@ -165,9 +165,9 @@ To focus the main content element of the `Wizard`, pass in the `shouldFocusConte
 
 ```
 
-### Step error status
+### Step status
 
-```ts file="./WizardStepErrorStatus.tsx"
+```ts file="./WizardStepStatus.tsx"
 
 ```
 

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

@@ -0,0 +1,82 @@
+import React from 'react';
+
+import { Radio, Wizard, WizardStep } from '@patternfly/react-core';
+
+interface SomeContextProps {
+  errorMessage: string | undefined;
+  setErrorMessage(error: string | undefined): void;
+  successMessage: string | undefined;
+  setSuccessMessage(error: string | undefined): void;
+}
+type SomeContextRenderProps = Pick<SomeContextProps, 'successMessage', 'errorMessage'>;
+interface SomeContextProviderProps {
+  children: (context: SomeContextRenderProps) => React.ReactElement;
+}
+
+const SomeContext: React.Context<SomeContextProps> = React.createContext({} as SomeContextProps);
+
+const SomeContextProvider = ({ children }: SomeContextProviderProps) => {
+  const [errorMessage, setErrorMessage] = React.useState<string>();
+  const [successMessage, setSuccessMessage] = React.useState<string>();
+
+  return (
+    <SomeContext.Provider value={{ errorMessage, setErrorMessage, successMessage, setSuccessMessage }}>
+      {children({ errorMessage, successMessage })}
+    </SomeContext.Provider>
+  );
+};
+
+const StepContentWithAction = () => {
+  const { errorMessage, setErrorMessage, successMessage, setSuccessMessage } = React.useContext(SomeContext);
+
+  return (
+    <>
+      <Radio
+        label="Give step 1 an error status"
+        isChecked={!!errorMessage}
+        onChange={(_event, checked) => {
+          setErrorMessage(checked ? 'Some error message' : undefined);
+          setSuccessMessage(!checked ? 'Some error message' : undefined);
+        }}
+        id="toggle-error-checkbox"
+        name="Toggle Status"
+      />
+      <Radio
+        label="Give step 1 a success status"
+        isChecked={!!successMessage}
+        onChange={(_event, checked) => {
+          setSuccessMessage(checked ? 'Some success message' : undefined);
+          setErrorMessage(!checked ? 'Some success message' : undefined);
+        }}
+        id="toggle-success-checkbox"
+        name="Toggle Status"
+      />
+    </>
+  );
+};
+
+export const WizardStepStatus: React.FunctionComponent = () => (
+  <SomeContextProvider>
+    {({ errorMessage, successMessage }) => {
+      let status = 'default';
+      if (errorMessage) {
+        status = 'error';
+      } else if (successMessage) {
+        status = 'success';
+      }
+      return (
+        <Wizard height={400} title="Step status wizard">
+          <WizardStep status={status} id="status-step-1" name="Step 1">
+            Step 1 content
+          </WizardStep>
+          <WizardStep name="Status step" id="error-status-step-2">
+            <StepContentWithAction />
+          </WizardStep>
+          <WizardStep name="Review" id="status-review-step" footer={{ nextButtonText: 'Finish' }}>
+            Review step content
+          </WizardStep>
+        </Wizard>
+      );
+    }}
+  </SomeContextProvider>
+);

package/src/components/Wizard/types.tsx

@@ -23,12 +23,13 @@ export interface WizardBasicStep {
   /** Replaces the step's footer. The step's footer takes precedance over the wizard's footer. */
   footer?: React.ReactElement | Partial<WizardFooterProps>;
   /** Used to determine icon next to the step's navItem */
-  status?: 'default' | 'error';
+  status?: 'default' | 'error' | 'success';
 }
 
 export enum WizardNavItemStatus {
   Default = 'default',
-  Error = 'error'
+  Error = 'error',
+  Success = 'success'
 }
 
 /** Type for customizing a button (next, back or cancel) in a Wizard footer. It omits some props which either have a default value or are passed directly via WizardFooterProps. */

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

@@ -1,54 +0,0 @@
-import React from 'react';
-
-import { Checkbox, Wizard, WizardStep } from '@patternfly/react-core';
-
-interface SomeContextProps {
-  errorMessage: string | undefined;
-  setErrorMessage(error: string | undefined): void;
-}
-type SomeContextRenderProps = Pick<SomeContextProps, 'errorMessage'>;
-interface SomeContextProviderProps {
-  children: (context: SomeContextRenderProps) => React.ReactElement;
-}
-
-const SomeContext: React.Context<SomeContextProps> = React.createContext({} as SomeContextProps);
-
-const SomeContextProvider = ({ children }: SomeContextProviderProps) => {
-  const [errorMessage, setErrorMessage] = React.useState<string>();
-
-  return (
-    <SomeContext.Provider value={{ errorMessage, setErrorMessage }}>{children({ errorMessage })}</SomeContext.Provider>
-  );
-};
-
-const StepContentWithAction = () => {
-  const { errorMessage, setErrorMessage } = React.useContext(SomeContext);
-
-  return (
-    <Checkbox
-      label="Give step 1 an error status"
-      isChecked={!!errorMessage}
-      onChange={(_event, checked) => setErrorMessage(checked ? 'Some error message' : undefined)}
-      id="toggle-error-checkbox"
-      name="Toggle Error Checkbox"
-    />
-  );
-};
-
-export const WizardStepErrorStatus: React.FunctionComponent = () => (
-  <SomeContextProvider>
-    {({ errorMessage }) => (
-      <Wizard height={400} title="Step error status wizard">
-        <WizardStep status={errorMessage ? 'error' : 'default'} id="error-status-step-1" name="Step 1">
-          Step 1 content
-        </WizardStep>
-        <WizardStep name="Error action step" id="error-status-step-2">
-          <StepContentWithAction />
-        </WizardStep>
-        <WizardStep name="Review" id="error-status-review-step" footer={{ nextButtonText: 'Finish' }}>
-          Review step content
-        </WizardStep>
-      </Wizard>
-    )}
-  </SomeContextProvider>
-);