@patternfly/react-core 4.234.3 → 4.235.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.234.3",
+  "version": "4.235.1",
   "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",
@@ -50,9 +50,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.85.3",
-    "@patternfly/react-styles": "^4.84.3",
-    "@patternfly/react-tokens": "^4.86.3",
+    "@patternfly/react-icons": "^4.86.1",
+    "@patternfly/react-styles": "^4.85.1",
+    "@patternfly/react-tokens": "^4.87.1",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -76,5 +76,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "f996263c7d744850e33d19bacb6fd19d109dc1af"
+  "gitHead": "7261b4ef06344b8f4bad002e5c36b140a478d538"
 }

package/src/components/Card/examples/Card.md

@@ -9,101 +9,130 @@ ouia: true
 import pfLogo from './pfLogo.svg';
 import pfLogoSmall from './pf-logo-small.svg';
 
-## Examples
 
-### Basic
+## Examples 
+
+### Basic cards
+
+Basic cards typically have a `<CardTitle>`, `<CardBody>` and `<CardFooter>`. You may omit these components as needed, but it is recommended to at least include a `<CardBody>` to provide details about the card item.
 
 ```ts file='./CardBasic.tsx'
 ```
 
-### With modifiers
+### Modifiers
+
+You can further modify the styling of the card's content by using the properties outlined below. In this example, you can enable each modifier by selecting its respective checkbox.
+
+Most modifiers can be used in combination with each other, except for `isCompact` and `isLarge`, since they are contradictory.
 
 ```ts file='./CardWithModifiers.tsx'
 ```
 
-### With image and actions
+| Modifier | Description |
+| --- | --- |
+| isCompact | Modifies the card to include compact styling. Should not be used with isLarge. |
+| isFlat | Modifies the card to include flat styling. |
+| isRounded | Modifies the card to include rounded border styling. |
+| isLarge | Modifies the card to be large. Should not be used with isCompact. |
+| isFullHeight | Modifies the card so that it fills the total available height of its container. |
+| isPlain | Modifies the card to include plain styling, which removes the border and background. | 
 
-```ts file='./CardWithImageAndActions.tsx'
-```
 
-### Header in card head
+### Header images and actions
 
-```ts file='./CardHeaderInCardHead.tsx'
-```
+You can include header images within `<CardHeaderMain>` and header actions within `<CardActions>`. The following example includes an image using the [Brand](/components/brand) component, and also includes a kebab dropdown and a checkbox in `<CardActions>`.
 
-### Only actions in card head (no header/footer)
+`<CardActions>` includes the `hasNoOffset` property, which is `false` by default. When `hasNoOffset` is `false`, a negative margin is applied to help align default-sized card titles with `<CardActions>`. 
 
-```ts file='./CardOnlyActionsInCardHead.tsx'
-```
+You may use `hasNoOffset` to remove this negative margin, which better aligns `<CardActions>` in implementations that use large card titles or tall header images, for example. 
 
-### Only image in card head
+Select the "actions hasNoOffset" checkbox in the example below to illustrate this behavior.
 
-```ts file='./CardOnlyImageInCardHead.tsx'
+```ts file='./CardWithImageAndActions.tsx'
 ```
 
-### With no footer
+### Title inline with images and actions
 
-```ts file='./CardWithNoFooter.tsx'
+Moving `<CardTitle>` within the `<CardHeader>` will style it inline with any images or actions.
+
+```ts file='./CardHeaderInCardHead.tsx'
 ```
 
-### With no header
+### Card header without title
 
-```ts file='./CardWithNoHeader.tsx'
+`<CardActions>` can be placed in the card header even without a `<CardTitle>`.
+
+Images can also be placed in the card header within `<CardHeaderMain>` without a `<CardTitle>`.
+
+```ts file='./CardOnlyActionsInCardHead.tsx'
 ```
 
-### With only a body section
+### With HTML heading element
+
+You may use the `component` property to place the card's title within an HTML heading element.
 
-```ts file='./CardWithOnlyBodySection.tsx'
+```ts file='./CardWithHeadingElement.tsx'
 ```
 
 ### With multiple body sections
 
+You may use multiple body sections to visually separate blocks of content.
+
 ```ts file='./CardWithMultipleBodySections.tsx'
 ```
 
-### With only a body section that fills
+### With a primary body section that fills
+
+`<CardBody>` sections will fill the available height of the card when `isFilled` equals `{true}`, which is the default value. Set `isFilled` to `{false}` to disable this behavior for one or more body sections. The remaining available height of the card will be split between any `<CardBody>` section that does not set `isFilled` to `{false}`.
+
+A common use case of this is to set all but one body section to `isFilled={false}` so that a primary body section fills the available space of the card as seen in the example below. This example has 3 `<CardBody>` sections, two of which set `isFilled` to `{false}`. The third `<CardBody>` fills the remaining height of the card. 
 
 ```ts file='./CardWithBodySectionFills.tsx'
 ```
 
-### Selectable
+### Selectable cards
+
+Selectable cards can only be selected one at a time, and are intended for use with [primary-detail layout](/demos/primary-detail).
 
 ```ts file='./CardSelectable.tsx'
 ```
 
-### Selectable accessibility highlight
+### Legacy selectable cards
+
+The following example shows a legacy implementation of selectable cards. This example uses the `isSelectable` property instead of `isSelectableRaised`, which is the current recommendation for implementation. `isSelectable` applies selectable styling, but does not apply raised styling on hover and selection as `isSelectableRaised` does.
+
+```ts file='./CardLegacySelectable.tsx'
+```
 
-This example demonstrates how the `hasSelectableInput` and `onSelectableInputChange` props improve accessibility for selectable cards.
+### Selectable card accessibility features
 
-The first card sets `hasSelectableInput` to true, which renders a checkbox input that is only visible to, and navigable by, screen readers. This input communicates to assistive technology users that a card is selectable, and if so, it communicates the current selection state as well.
+The following cards demonstrate how the `hasSelectableInput` and `onSelectableInputChange` properties improve accessibility for selectable cards.
 
-By default this input will have an aria-label that corresponds to the title given to the card if using the card title component. If you don't use the card title component in your selectable card, you must pass a custom aria-label for this input using the `selectableInputAriaLabel` prop.
+The first card sets `hasSelectableInput` to true, which renders a checkbox input that is only visible to, and navigable by, screen readers. This input communicates to assistive technology users that a card is selectable, and if so, also communicates the current selection state.
 
-The first card also (by passing an onchange callback to `onSelectableInputChange`) enables the selection/deselection of the associated card by checking/unchecking the checkbox input.
+By default, this input will have an aria-label that corresponds to the `<CardTitle>`. If this isn't defined, then you must pass a custom aria-label using the `selectableInputAriaLabel` property.
 
-The second card does not set `hasSelectableInput` to true, so the input is not rendered. It does not communicate to screen reader users that it is selectable or if it is currently selected.
+The first card passes an onChange callback to `onSelectableInputChange` to enable the selection/deselection of the associated card via checkbox input.
 
-To best understand this example it is encouraged that you navigate both of these cards using a screen reader.
+The second card does not set `hasSelectableInput` to true, so neither the input nor the selection state is communicated to users of assistive technologies. 
+
+We recommend navigating this example using a screen reader to best understand both cards.
 
 ```ts file='./CardSelectableA11yHighlight.tsx'
 ```
 
-### With heading element
+### Expandable cards
 
-```ts file='./CardWithHeadingElement.tsx'
-```
+A card can be made expandable using the `isExpanded` property. In the collapsed state, only the card header is shown, and the user can click the caret to view the rest of the card content. 
 
-### Expandable
+Place any content that you want to be hidden within the `<CardExpandableContent>` component.
 
 ```ts file='./CardExpandable.tsx'
 ```
 
 ### Expandable with icon
 
-```ts file='./CardExpandableWithIcon.tsx'
-```
-
-### Legacy selectable
+An image can be placed in the card header to show users an icon beside the expansion caret.
 
-```ts file='./CardLegacySelectable.tsx'
+```ts file='./CardExpandableWithIcon.tsx'
 ```

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

@@ -13,6 +13,8 @@ import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-ico
 import FinishedStep from './FinishedStep';
 import SampleForm from './SampleForm';
 
+If you seek a wizard solution that allows for more composition, see the [React next](/components/wizard/react-next) tab.
+
 ## Examples
 
 ### Basic
@@ -54,7 +56,7 @@ class SimpleWizard extends React.Component {
   render() {
     const steps = [
       { name: 'First step', component: <p>Step 1 content</p> },
-      { name: 'Second step', component: <p>Step 2 content</p>, isDisabled: true},
+      { name: 'Second step', component: <p>Step 2 content</p>, isDisabled: true },
       { name: 'Third step', component: <p>Step 3 content</p> },
       { name: 'Fourth step', component: <p>Step 4 content</p>, isDisabled: true },
       { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
@@ -145,9 +147,24 @@ class IncrementallyEnabledStepsWizard extends React.Component {
 
     const steps = [
       { id: 'incrementally-enabled-1', name: 'First step', component: <p>Step 1 content</p> },
-      { id: 'incrementally-enabled-2', name: 'Second step', component: <p>Step 2 content</p>, canJumpTo: stepIdReached >= 2 },
-      { id: 'incrementally-enabled-3', name: 'Third step', component: <p>Step 3 content</p>, canJumpTo: stepIdReached >= 3 },
-      { id: 'incrementally-enabled-4', name: 'Fourth step', component: <p>Step 4 content</p>, canJumpTo: stepIdReached >= 4 },
+      {
+        id: 'incrementally-enabled-2',
+        name: 'Second step',
+        component: <p>Step 2 content</p>,
+        canJumpTo: stepIdReached >= 2
+      },
+      {
+        id: 'incrementally-enabled-3',
+        name: 'Third step',
+        component: <p>Step 3 content</p>,
+        canJumpTo: stepIdReached >= 3
+      },
+      {
+        id: 'incrementally-enabled-4',
+        name: 'Fourth step',
+        component: <p>Step 4 content</p>,
+        canJumpTo: stepIdReached >= 4
+      },
       {
         id: 'incrementally-enabled-5',
         name: 'Review',

package/src/demos/CardDemos.md

@@ -18,6 +18,8 @@ import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_r
 
 ### Horizontal card grid
 
+The following demo shows how you may use a `<Grid>` within a card for scenarios that require multiple subsections. 
+
 ```js
 import React from 'react';
 import {
@@ -263,6 +265,8 @@ class CardGridDemo extends React.Component {
 
 ### Horizontal split
 
+The following demo shows how you may utilize `<Grid>` to split a card into two halves, one with an image, and one with text content.
+
 ```js
 import React from 'react';
 import { Card, CardTitle, CardBody, CardFooter, Grid, GridItem, Button } from '@patternfly/react-core';

package/src/next/components/Wizard/Wizard.tsx

@@ -0,0 +1,184 @@
+import React from 'react';
+
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+
+import {
+  DefaultWizardFooterProps,
+  DefaultWizardNavProps,
+  isCustomWizardFooter,
+  isWizardParentStep,
+  WizardNavStepFunction,
+  CustomWizardNavFunction
+} from './types';
+import { buildSteps, normalizeNavStep } from './utils';
+import { useWizardContext, WizardContextProvider } from './WizardContext';
+import { WizardStepProps } from './WizardStep';
+import { WizardFooter } from './WizardFooter';
+import { WizardToggle } from './WizardToggle';
+
+/**
+ * Wrapper for all steps and hosts state, including navigation helpers, within context.
+ * The WizardContext provided by default gives any child of wizard access to those resources.
+ */
+
+export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
+  /** Step components */
+  children: React.ReactElement<WizardStepProps> | React.ReactElement<WizardStepProps>[];
+  /** Wizard header */
+  header?: React.ReactNode;
+  /** Wizard footer */
+  footer?: DefaultWizardFooterProps | React.ReactElement;
+  /** Default wizard nav props or a custom WizardNav (with callback) */
+  nav?: DefaultWizardNavProps | CustomWizardNavFunction;
+  /** The initial index the wizard is to start on (1 or higher). Defaults to 1. */
+  startIndex?: number;
+  /** Additional classes spread to the wizard */
+  className?: string;
+  /** Custom width of the wizard */
+  width?: number | string;
+  /** Custom height of the wizard */
+  height?: number | string;
+  /** Callback function when a step in the nav is clicked */
+  onNavByIndex?: WizardNavStepFunction;
+  /** Callback function after next button is clicked */
+  onNext?: WizardNavStepFunction;
+  /** Callback function after back button is clicked */
+  onBack?: WizardNavStepFunction;
+  /** Callback function to save at the end of the wizard, if not specified uses onClose */
+  onSave?: () => void;
+  /** Callback function to close the wizard */
+  onClose?: () => void;
+}
+
+export const Wizard = (props: WizardProps) => {
+  const { startIndex = 1, children, footer, onNavByIndex, onNext, onBack, onSave, onClose, ...internalProps } = props;
+  const [currentStepIndex, setCurrentStepIndex] = React.useState(startIndex);
+  const steps = buildSteps(children);
+
+  const goToStepByIndex = (index: number) => {
+    const lastStepIndex = steps.length;
+
+    if (index < 1) {
+      index = 1;
+    } else if (index > lastStepIndex) {
+      index = lastStepIndex;
+    }
+
+    const currStep = steps[index - 1];
+    const prevStep = steps[currentStepIndex - 1];
+    setCurrentStepIndex(index);
+
+    return onNavByIndex?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
+  };
+
+  const goToNextStep = () => {
+    // Save when on the last step, otherwise close
+    if (currentStepIndex >= steps.length) {
+      if (onSave) {
+        return onSave();
+      }
+
+      return onClose?.();
+    }
+
+    let currStep = steps[currentStepIndex];
+    let newStepIndex = currentStepIndex + 1;
+    const prevStep = steps[currentStepIndex - 1];
+
+    // Skip parent step and focus on the first sub-step if they exist
+    if (isWizardParentStep(currStep)) {
+      newStepIndex += 1;
+      currStep = steps[currentStepIndex + 1];
+    }
+
+    setCurrentStepIndex(newStepIndex);
+    return onNext?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
+  };
+
+  const goToPrevStep = () => {
+    if (steps.length < currentStepIndex) {
+      // Previous step was removed, just update the currentStep state
+      setCurrentStepIndex(steps.length);
+    } else {
+      let currStep = steps[currentStepIndex - 2];
+      let newStepIndex = currentStepIndex - 1;
+      const prevStep = steps[currentStepIndex - 1];
+
+      // // Skip parent step and focus on the step prior
+      if (isWizardParentStep(currStep)) {
+        newStepIndex -= 1;
+        currStep = steps[currentStepIndex - 3];
+      }
+
+      setCurrentStepIndex(newStepIndex);
+      return onBack?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
+    }
+  };
+
+  const goToStepById = (id: number | string) => {
+    const stepIndex = steps.findIndex(step => step.id === id) + 1;
+    stepIndex > 0 && setCurrentStepIndex(stepIndex);
+  };
+
+  const goToStepByName = (name: string) => {
+    const stepIndex = steps.findIndex(step => step.name === name) + 1;
+    stepIndex > 0 && setCurrentStepIndex(stepIndex);
+  };
+
+  return (
+    <WizardContextProvider
+      steps={steps}
+      currentStepIndex={currentStepIndex}
+      footer={isCustomWizardFooter(footer) && footer}
+      onNext={goToNextStep}
+      onBack={goToPrevStep}
+      onClose={onClose}
+      goToStepById={goToStepById}
+      goToStepByName={goToStepByName}
+      goToStepByIndex={goToStepByIndex}
+    >
+      <WizardInternal {...internalProps} footer={footer}>
+        {children}
+      </WizardInternal>
+    </WizardContextProvider>
+  );
+};
+
+// eslint-disable-next-line patternfly-react/no-anonymous-functions
+const WizardInternal = ({ height, width, className, header, footer, nav, ...divProps }: WizardProps) => {
+  const { activeStep, steps, footer: customFooter, onNext, onBack, onClose, goToStepByIndex } = useWizardContext();
+
+  const wizardFooter = customFooter || (
+    <WizardFooter
+      activeStep={activeStep}
+      onNext={onNext}
+      onBack={onBack}
+      onClose={onClose}
+      disableBackButton={activeStep?.id === steps[0]?.id}
+      {...footer}
+    />
+  );
+
+  return (
+    <div
+      className={css(styles.wizard, className)}
+      style={{
+        ...(height ? { height } : {}),
+        ...(width ? { width } : {})
+      }}
+      {...divProps}
+    >
+      {header}
+      <WizardToggle
+        steps={steps}
+        activeStep={activeStep}
+        footer={wizardFooter}
+        nav={nav}
+        goToStepByIndex={goToStepByIndex}
+      />
+    </div>
+  );
+};
+
+Wizard.displayName = 'Wizard';

package/src/next/components/Wizard/WizardBody.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import { css } from '@patternfly/react-styles';
+
+/**
+ * Used as a wrapper for WizardStep content, where the wrapping element is customizable.
+ */
+
+export interface WizardBodyProps {
+  children?: React.ReactNode | React.ReactNode[];
+  /** Set to true to remove the default body padding */
+  hasNoBodyPadding?: boolean;
+  /** An aria-label to use for the wrapper element */
+  'aria-label'?: string;
+  /** Sets the aria-labelledby attribute for the wrapper element */
+  'aria-labelledby'?: string;
+  /** Component used as the wrapping content container */
+  wrapperElement?: React.ElementType;
+}
+
+export const WizardBody = ({
+  children,
+  hasNoBodyPadding = false,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  wrapperElement: Wrapper = 'div'
+}: WizardBodyProps) => (
+  <Wrapper aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} className={css(styles.wizardMain)}>
+    <div className={css(styles.wizardMainBody, hasNoBodyPadding && styles.modifiers.noPadding)}>{children}</div>
+  </Wrapper>
+);
+
+WizardBody.displayName = 'WizardBody';

package/src/next/components/Wizard/WizardContext.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { WizardControlStep } from './types';
+import { getActiveStep } from './utils';
+
+export interface WizardContextProps {
+  /** List of steps */
+  steps: WizardControlStep[];
+  /** Active step */
+  activeStep: WizardControlStep;
+  /** Footer element */
+  footer: React.ReactElement;
+  /** Navigate to the next step */
+  onNext: () => void;
+  /** Navigate to the previous step */
+  onBack: () => void;
+  /** Close the wizard */
+  onClose: () => void;
+  /** Navigate to step by ID */
+  goToStepById: (id: number | string) => void;
+  /** Navigate to step by name */
+  goToStepByName: (name: string) => void;
+  /** Navigate to step by index */
+  goToStepByIndex: (index: number) => void;
+  /** Update the footer with any react element */
+  setFooter: (footer: React.ReactElement) => void;
+}
+
+export const WizardContext = React.createContext({} as WizardContextProps);
+
+interface WizardContextRenderProps {
+  steps: WizardControlStep[];
+  activeStep: WizardControlStep;
+  footer: React.ReactElement;
+  onNext(): void;
+  onBack(): void;
+  onClose(): void;
+}
+
+export interface WizardContextProviderProps {
+  steps: WizardControlStep[];
+  currentStepIndex: number;
+  footer: React.ReactElement;
+  children: React.ReactElement | ((props: WizardContextRenderProps) => React.ReactElement);
+  onNext(): void;
+  onBack(): void;
+  onClose(): void;
+  goToStepById(id: number | string): void;
+  goToStepByName(name: string): void;
+  goToStepByIndex(index: number): void;
+}
+
+// eslint-disable-next-line patternfly-react/no-anonymous-functions
+export const WizardContextProvider: React.FunctionComponent<WizardContextProviderProps> = ({
+  steps: initialSteps,
+  footer: initialFooter,
+  currentStepIndex,
+  children,
+  onNext,
+  onBack,
+  onClose,
+  goToStepById,
+  goToStepByName,
+  goToStepByIndex
+}) => {
+  const [steps, setSteps] = React.useState(initialSteps);
+  const [footer, setFooter] = React.useState(initialFooter);
+  const activeStep = getActiveStep(steps, currentStepIndex);
+
+  // When the active step changes and the newly active step isn't visited, set the visited flag to true.
+  React.useEffect(() => {
+    if (activeStep && !activeStep?.visited) {
+      setSteps(prevSteps =>
+        prevSteps.map(step => {
+          if (step.id === activeStep.id) {
+            return { ...step, visited: true };
+          }
+
+          return step;
+        })
+      );
+    }
+  }, [activeStep]);
+
+  return (
+    <WizardContext.Provider
+      value={{
+        steps,
+        activeStep,
+        footer,
+        onNext,
+        onBack,
+        onClose,
+        goToStepById,
+        goToStepByName,
+        goToStepByIndex,
+        setFooter
+      }}
+    >
+      {typeof children === 'function' ? children({ activeStep, steps, footer, onNext, onBack, onClose }) : children}
+    </WizardContext.Provider>
+  );
+};
+
+export const useWizardContext = () => React.useContext(WizardContext);

package/src/next/components/Wizard/WizardFooter.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+
+import { Button, ButtonVariant } from '../../../components/Button';
+import { WizardControlStep, WizardNavStepFunction } 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 {
+  /** The currently active WizardStep */
+  activeStep: WizardControlStep;
+  /** Next button callback */
+  onNext: () => WizardNavStepFunction | void;
+  /** Back button callback */
+  onBack: () => WizardNavStepFunction | void;
+  /** Cancel link callback */
+  onClose: () => void;
+  /** Custom text for the Next button. The activeStep'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;
+  /** Optional flag to disable the first step's back button */
+  disableBackButton?: boolean;
+}
+
+export const WizardFooter = ({
+  onNext,
+  onBack,
+  onClose,
+  activeStep,
+  disableBackButton,
+  nextButtonText = 'Next',
+  backButtonText = 'Back',
+  cancelButtonText = 'Cancel'
+}: WizardFooterProps) => (
+  <footer className={css(styles.wizardFooter)}>
+    <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={activeStep?.disableNext}>
+      {activeStep?.nextButtonText || nextButtonText}
+    </Button>
+
+    {!activeStep?.hideBackButton && (
+      <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={disableBackButton}>
+        {backButtonText}
+      </Button>
+    )}
+
+    {!activeStep?.hideCancelButton && (
+      <div className={styles.wizardFooterCancel}>
+        <Button variant={ButtonVariant.link} onClick={onClose}>
+          {cancelButtonText}
+        </Button>
+      </div>
+    )}
+  </footer>
+);
+
+WizardFooter.displayName = 'WizardFooter';