@patternfly/react-core 5.2.0-prerelease.5 → 5.2.0-prerelease.50

package/src/deprecated/components/Wizard/examples/WizardFinished.tsx

@@ -12,6 +12,7 @@ import {
 import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { CogsIcon } from '@patternfly/react-icons';
+import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 interface finishedProps {
   onClose: () => void;
@@ -41,7 +42,7 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
   }, [percent]);
 
   return (
-    <div className="pf-v5-l-bullseye">
+    <div className={layout.bullseye}>
       <EmptyState variant="lg">
         <EmptyStateHeader
           headingLevel="h4"

package/src/deprecated/components/Wizard/examples/WizardValidateOnButtonPress.tsx

@@ -18,6 +18,7 @@ import {
   WizardFooter as WizardFooterDeprecated,
   WizardContextConsumer as WizardContextConsumerDeprecated
 } from '@patternfly/react-core/deprecated';
+import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { CogsIcon } from '@patternfly/react-icons';
@@ -50,7 +51,7 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
   }, [percent]);
 
   return (
-    <div className="pf-v5-l-bullseye">
+    <div className={layout.bullseye}>
       <EmptyState variant="lg">
         <EmptyStateHeader
           headingLevel="h4"

package/src/helpers/GenerateId/__tests__/GenerateId.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import { GenerateId } from '../GenerateId';
 
 test('generates id', () => {
-  const { asFragment } = render(<GenerateId>{id => <div id={id}>div with random ID</div>}</GenerateId>);
+  const { asFragment } = render(<GenerateId>{(id) => <div id={id}>div with random ID</div>}</GenerateId>);
 
   expect(asFragment()).toMatchSnapshot();
 });

package/src/helpers/OUIA/__mocks__/ouia.ts

@@ -0,0 +1,6 @@
+import { OUIAProps } from '../../index';
+
+export const useOUIAProps = () => ({});
+export const getOUIAProps = () => ({});
+export const getDefaultOUIAId = () => '';
+export { OUIAProps };

package/src/helpers/Popper/Popper.tsx

@@ -5,6 +5,7 @@ import { Placement, Modifier } from './thirdparty/popper-core';
 import { clearTimeouts } from '../util';
 import { css } from '@patternfly/react-styles';
 import '@patternfly/react-styles/css/components/Popper/Popper.css';
+import { getLanguageDirection } from '../util';
 
 const hash = {
   left: 'right',
@@ -45,21 +46,6 @@ const getOppositePlacement = (placement: Placement): any =>
 export const getOpacityTransition = (animationDuration: number) =>
   `opacity ${animationDuration}ms cubic-bezier(.54, 1.5, .38, 1.11)`;
 
-export const getLanguageDirection = (targetElement: HTMLElement) => {
-  const defaultDirection = 'ltr';
-  let direction = defaultDirection;
-
-  if (targetElement) {
-    direction = getComputedStyle(targetElement).getPropertyValue('direction');
-  }
-
-  if (['ltr', 'rtl'].includes(direction)) {
-    return direction as 'ltr' | 'rtl';
-  }
-
-  return defaultDirection;
-};
-
 export interface PopperProps {
   /**
    * Trigger reference element to which the popper is relatively placed to.
@@ -186,6 +172,8 @@ export interface PopperProps {
    * Lifecycle function invoked when the popper has fully transitioned in.
    */
   onShown?: () => void;
+  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
+  preventOverflow?: boolean;
 }
 
 export const Popper: React.FunctionComponent<PopperProps> = ({
@@ -224,7 +212,8 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   onHide = () => {},
   onMount = () => {},
   onShow = () => {},
-  onShown = () => {}
+  onShown = () => {},
+  preventOverflow = false
 }) => {
   const [triggerElement, setTriggerElement] = React.useState(null);
   const [refElement, setRefElement] = React.useState<HTMLElement>(null);
@@ -289,7 +278,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
         setRefElement(triggerRef());
       }
     }
-  }, [triggerRef]);
+  }, [triggerRef, trigger]);
   React.useEffect(() => {
     // When the popperRef is defined or the popper visibility changes, ensure the popper element is up to date
     if (popperRef) {
@@ -436,7 +425,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
       },
       {
         name: 'preventOverflow',
-        enabled: false
+        enabled: preventOverflow
       },
       {
         // adds attribute [data-popper-reference-hidden] to the popper element which can be used to hide it using CSS
@@ -458,7 +447,9 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
    * TODO: Investigate into 3rd party libraries for a less limited/specific solution
    */
   React.useEffect(() => {
-    const currentPopperContent = popper?.props?.children[1]?.props?.children;
+    // currentPopperContent = {tooltip children} || {dropdown children}
+    const currentPopperContent =
+      popper?.props?.children[1]?.props?.children || popper?.props?.children?.props?.children;
     setPopperContent(currentPopperContent);
 
     if (currentPopperContent && popperContent && currentPopperContent !== popperContent) {

package/src/helpers/__mocks__/index.ts

@@ -0,0 +1,2 @@
+export * from '../OUIA/__mocks__/ouia';
+export * from './util';

package/src/helpers/__mocks__/util.ts

@@ -1,3 +1,5 @@
 export const getUniqueId = () => 'unique_id_mock';
 
 export const clearTimeouts = () => {};
+
+export const getLanguageDirection = () => 'ltr';

package/src/helpers/__tests__/fileUtils.test.ts

@@ -3,15 +3,12 @@ import { readFile, fileReaderType } from '../fileUtils';
 describe('readFile', () => {
   const file = new File(['File contents here'], 'testfile.txt');
 
-  test('text file', () => {
-    return expect(readFile(file, fileReaderType.text)).resolves.toBe('File contents here');
-  });
+  test('text file', () => expect(readFile(file, fileReaderType.text)).resolves.toBe('File contents here'));
 
-  test('dataURL file', () => {
-    return expect(readFile(file, fileReaderType.dataURL)).resolves.toBe('data:application/octet-stream;base64,RmlsZSBjb250ZW50cyBoZXJl');
-  });
+  test('dataURL file', () =>
+    expect(readFile(file, fileReaderType.dataURL)).resolves.toBe(
+      'data:application/octet-stream;base64,RmlsZSBjb250ZW50cyBoZXJl'
+    ));
 
-  test('rejects on unknown type', () => {
-    return expect(readFile(file, 'foo' as fileReaderType)).rejects.toBe('unknown type');
-  });
+  test('rejects on unknown type', () => expect(readFile(file, 'foo' as fileReaderType)).rejects.toBe('unknown type'));
 });

package/src/helpers/__tests__/util.test.ts

@@ -14,7 +14,7 @@ import styles from '@patternfly/react-styles/css/layouts/Flex/flex';
 const createMockHtmlElement = (bounds: Partial<DOMRect>) =>
   ({
     getBoundingClientRect: () => bounds
-  } as HTMLElement);
+  }) as HTMLElement;
 
 test('capitalize', () => {
   expect(capitalize('foo')).toBe('Foo');

package/src/helpers/datetimeUtils.ts

@@ -1,4 +1,4 @@
 /**
  * @param {Date} date - A date to check the validity of
  */
-export const isValidDate = (date: Date) => Boolean(date && !isNaN(date as any));
+export const isValidDate = (date?: Date) => Boolean(date && !isNaN(date as any));

package/src/helpers/util.ts

@@ -522,3 +522,25 @@ export const clearTimeouts = (timeoutRefs: React.RefObject<any>[]) => {
     }
   });
 };
+
+/**
+ * Helper function to get the language direction of a given element, useful for figuring out if left-to-right
+ * or right-to-left specific logic should be applied.
+ *
+ * @param {HTMLElement} targetElement  - Element the helper will get the language direction of
+ * @param {'ltr' | 'rtl'} defaultDirection - Language direction to assume if one can't be determined, defaults to 'ltr'
+ * @returns {'ltr' | 'rtl'} - The language direction of the target element
+ */
+export const getLanguageDirection = (targetElement: HTMLElement, defaultDirection: 'ltr' | 'rtl' = 'ltr') => {
+  if (!targetElement) {
+    return defaultDirection;
+  }
+
+  const computedDirection = getComputedStyle(targetElement).getPropertyValue('direction');
+
+  if (['ltr', 'rtl'].includes(computedDirection)) {
+    return computedDirection as 'ltr' | 'rtl';
+  }
+
+  return defaultDirection;
+};

package/src/index.ts

@@ -2,4 +2,4 @@ export * from './components';
 export * from './demos';
 export * from './layouts';
 export * from './helpers';
-export { BaseSizes, DeviceSizes } from './styles/sizes';
+export * from './styles';

package/src/layouts/Bullseye/__tests__/Bullseye.test.tsx

@@ -23,7 +23,7 @@ describe('Bullseye', () => {
   test('allows passing in a React Component as the component', () => {
     const Component: React.FunctionComponent = () => <div>Some text</div>;
 
-    render(<Bullseye component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
+    render(<Bullseye component={Component as unknown as keyof JSX.IntrinsicElements} />);
     expect(screen.getByText('Some text')).toBeInTheDocument();
   });
 });

package/src/layouts/Flex/__tests__/Flex.test.tsx

@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 
 import { Flex } from '../Flex';
 import { FlexItem } from '../FlexItem';
+import layout from '@patternfly/react-styles/css/layouts/Flex/flex';
 
 describe('Flex', () => {
   test('Simple flex with single item', () => {
@@ -134,7 +135,7 @@ describe('Flex', () => {
             </Flex>
           );
 
-          const className = screen.getByTestId('test-id').className.replace('pf-v5-l-flex', '').trim();
+          const className = screen.getByTestId('test-id').className.replace(layout.flex, '').trim();
           expect(className).not.toBe("''");
           expect(className).not.toBe('');
         })

package/src/layouts/Gallery/Gallery.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/layouts/Gallery/gallery';
+import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
+import cssGridTemplateColumnsMax from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_max';
 
 export interface GalleryProps extends React.HTMLProps<HTMLDivElement> {
   /** content rendered inside the Gallery layout */
@@ -45,18 +47,16 @@ export const Gallery: React.FunctionComponent<GalleryProps> = ({
   if (minWidths) {
     Object.entries(minWidths || {}).map(
       ([breakpoint, value]) =>
-        (minWidthStyles[
-          `--pf-v5-l-gallery--GridTemplateColumns--min${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`
-        ] = value)
+        (minWidthStyles[`${cssGridTemplateColumnsMin.name}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`] =
+          value)
     );
   }
   const maxWidthStyles: any = {};
   if (maxWidths) {
     Object.entries(maxWidths || {}).map(
       ([breakpoint, value]) =>
-        (maxWidthStyles[
-          `--pf-v5-l-gallery--GridTemplateColumns--max${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`
-        ] = value)
+        (maxWidthStyles[`${cssGridTemplateColumnsMax.name}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`] =
+          value)
     );
   }
   const widthStyles = { ...minWidthStyles, ...maxWidthStyles };

package/src/layouts/Grid/__tests__/GridItem.test.tsx

@@ -18,7 +18,7 @@ test('adds row class', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-Object.keys(DeviceSizes).forEach(size => {
+Object.keys(DeviceSizes).forEach((size) => {
   test(`adds ${size} span class`, () => {
     const props = { [size]: 4 };
     const { asFragment } = render(<GridItem {...props} />);

package/src/next/components/Modal/Modal.tsx

@@ -0,0 +1,202 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { canUseDOM, KeyTypes, PickOptional } from '../../../helpers';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
+import { ModalContent } from './ModalContent';
+import { OUIAProps, getDefaultOUIAId } from '../../../helpers';
+
+export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
+  /** The parent container to append the modal to. Defaults to "document.body". */
+  appendTo?: HTMLElement | (() => HTMLElement);
+  /** Id to use for the modal box description. This should match the ModalHeader labelId or descriptorId. */
+  'aria-describedby'?: string;
+  /**   Adds an accessible name to the modal when there is no title in the ModalHeader. */
+  'aria-label'?: string;
+  /** Id to use for the modal box label. This should include the ModalHeader labelId. */
+  'aria-labelledby'?: string;
+  /** Content rendered inside the modal. */
+  children: React.ReactNode;
+  /** Additional classes added to the modal. */
+  className?: string;
+  /** Flag to disable focus trap. */
+  disableFocusTrap?: boolean;
+  /** The element to focus when the modal opens. By default the first
+   * focusable element will receive focus.
+   */
+  elementToFocus?: HTMLElement | SVGElement | string;
+  /** An id to use for the modal box container. */
+  id?: string;
+  /** Flag to show the modal. */
+  isOpen?: boolean;
+  /** Add callback for when the close button is clicked. This prop needs to be passed to render the close button */
+  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;
+  /** Modal handles pressing of the escape key and closes the modal. If you want to handle
+   * this yourself you can use this callback function. */
+  onEscapePress?: (event: KeyboardEvent) => void;
+  /** Position of the modal. By default a modal will be positioned vertically and horizontally centered. */
+  position?: 'default' | 'top';
+  /** Offset from alternate position. Can be any valid CSS length/percentage. */
+  positionOffset?: string;
+  /** Variant of the modal. */
+  variant?: 'small' | 'medium' | 'large' | 'default';
+  /** Default width of the modal. */
+  width?: number | string;
+  /** Maximum width of the modal. */
+  maxWidth?: number | string;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
+}
+
+export enum ModalVariant {
+  small = 'small',
+  medium = 'medium',
+  large = 'large',
+  default = 'default'
+}
+
+interface ModalState {
+  container: HTMLElement;
+  ouiaStateId: string;
+}
+
+class Modal extends React.Component<ModalProps, ModalState> {
+  static displayName = 'Modal';
+  static currentId = 0;
+  boxId = '';
+
+  static defaultProps: PickOptional<ModalProps> = {
+    isOpen: false,
+    variant: 'default',
+    appendTo: () => document.body,
+    ouiaSafe: true,
+    position: 'default'
+  };
+
+  constructor(props: ModalProps) {
+    super(props);
+    const boxIdNum = Modal.currentId++;
+    this.boxId = props.id || `pf-modal-part-${boxIdNum}`;
+
+    this.state = {
+      container: undefined,
+      ouiaStateId: getDefaultOUIAId(Modal.displayName, props.variant)
+    };
+  }
+
+  handleEscKeyClick = (event: KeyboardEvent): void => {
+    const { onEscapePress } = this.props;
+    if (event.key === KeyTypes.Escape && this.props.isOpen) {
+      onEscapePress ? onEscapePress(event) : this.props.onClose?.(event);
+    }
+  };
+
+  getElement = (appendTo: HTMLElement | (() => HTMLElement)) => {
+    if (typeof appendTo === 'function') {
+      return appendTo();
+    }
+    return appendTo || document.body;
+  };
+
+  toggleSiblingsFromScreenReaders = (hide: boolean) => {
+    const { appendTo } = this.props;
+    const target: HTMLElement = this.getElement(appendTo);
+    const bodyChildren = target.children;
+    for (const child of Array.from(bodyChildren)) {
+      if (child !== this.state.container) {
+        hide ? child.setAttribute('aria-hidden', '' + hide) : child.removeAttribute('aria-hidden');
+      }
+    }
+  };
+
+  isEmpty = (value: string | null | undefined) => value === null || value === undefined || value === '';
+
+  componentDidMount() {
+    const {
+      appendTo,
+      'aria-describedby': ariaDescribedby,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby
+    } = this.props;
+    const target: HTMLElement = this.getElement(appendTo);
+    const container = document.createElement('div');
+    this.setState({ container });
+    target.appendChild(container);
+    target.addEventListener('keydown', this.handleEscKeyClick, false);
+
+    if (this.props.isOpen) {
+      target.classList.add(css(styles.backdropOpen));
+    } else {
+      target.classList.remove(css(styles.backdropOpen));
+    }
+
+    if (!ariaDescribedby && !ariaLabel && !ariaLabelledby) {
+      // eslint-disable-next-line no-console
+      console.error('Modal: Specify at least one of: aria-describedby, aria-label, aria-labelledby.');
+    }
+  }
+
+  componentDidUpdate() {
+    const { appendTo } = this.props;
+    const target: HTMLElement = this.getElement(appendTo);
+    if (this.props.isOpen) {
+      target.classList.add(css(styles.backdropOpen));
+      this.toggleSiblingsFromScreenReaders(true);
+    } else {
+      target.classList.remove(css(styles.backdropOpen));
+      this.toggleSiblingsFromScreenReaders(false);
+    }
+  }
+
+  componentWillUnmount() {
+    const { appendTo } = this.props;
+    const target: HTMLElement = this.getElement(appendTo);
+    if (this.state.container) {
+      target.removeChild(this.state.container);
+    }
+    target.removeEventListener('keydown', this.handleEscKeyClick, false);
+    target.classList.remove(css(styles.backdropOpen));
+    this.toggleSiblingsFromScreenReaders(false);
+  }
+
+  render() {
+    const {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      appendTo,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onEscapePress,
+      'aria-labelledby': ariaLabelledby,
+      'aria-label': ariaLabel,
+      'aria-describedby': ariaDescribedby,
+      ouiaId,
+      ouiaSafe,
+      position,
+      elementToFocus,
+      ...props
+    } = this.props;
+    const { container } = this.state;
+
+    if (!canUseDOM || !container) {
+      return null;
+    }
+
+    return ReactDOM.createPortal(
+      <ModalContent
+        boxId={this.boxId}
+        aria-label={ariaLabel}
+        aria-describedby={ariaDescribedby}
+        aria-labelledby={ariaLabelledby}
+        ouiaId={ouiaId !== undefined ? ouiaId : this.state.ouiaStateId}
+        ouiaSafe={ouiaSafe}
+        position={position}
+        elementToFocus={elementToFocus}
+        {...props}
+      />,
+      container
+    ) as React.ReactElement;
+  }
+}
+
+export { Modal };

package/src/next/components/Modal/ModalBody.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
+
+/** Renders content in the body of the modal */
+
+export interface ModalBodyProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content rendered inside the modal body. */
+  children?: React.ReactNode;
+  /** Additional classes added to the modal body. */
+  className?: string;
+  /** Accessible label applied to the modal body. This should be used to communicate
+   * important information about the modal body div element if needed, such as when it is scrollable.
+   */
+  'aria-label'?: string;
+  /** Accessible role applied to the modal body. This will default to "region" if the
+   * aria-label property is passed in. Set to a more appropriate role as applicable
+   * based on the modal content and context.
+   */
+  role?: string;
+}
+
+export const ModalBody: React.FunctionComponent<ModalBodyProps> = ({
+  children,
+  className,
+  'aria-label': ariaLabel,
+  role,
+  ...props
+}: ModalBodyProps) => {
+  const defaultModalBodyRole = ariaLabel ? 'region' : undefined;
+  return (
+    <div
+      aria-label={ariaLabel}
+      role={role || defaultModalBodyRole}
+      className={css(styles.modalBoxBody, className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+ModalBody.displayName = 'ModalBody';

package/src/next/components/Modal/ModalBox.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
+import topSpacer from '@patternfly/react-tokens/dist/esm/c_modal_box_m_align_top_spacer';
+
+export interface ModalBoxProps extends React.HTMLProps<HTMLDivElement> {
+  /** Id to use for the modal box description. This should match the ModalHeader labelId or descriptorId */
+  'aria-describedby'?: string;
+  /** Adds an accessible name to the modal when there is no title in the ModalHeader. */
+  'aria-label'?: string;
+  /** Id to use for the modal box label. */
+  'aria-labelledby'?: string;
+  /** Content rendered inside the modal box. */
+  children: React.ReactNode;
+  /** Additional classes added to the modal box. */
+  className?: string;
+  /** Position of the modal. By default a modal will be positioned vertically and horizontally centered. */
+  position?: 'default' | 'top';
+  /** Offset from alternate position. Can be any valid CSS length/percentage. */
+  positionOffset?: string;
+  /** Variant of the modal. */
+  variant?: 'small' | 'medium' | 'large' | 'default';
+}
+
+export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({
+  children,
+  className,
+  variant = 'default',
+  position,
+  positionOffset,
+  'aria-labelledby': ariaLabelledby,
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedby,
+  style,
+  ...props
+}: ModalBoxProps) => {
+  if (positionOffset) {
+    style = style || {};
+    (style as any)[topSpacer.name] = positionOffset;
+  }
+  return (
+    <div
+      role="dialog"
+      aria-label={ariaLabel || null}
+      aria-labelledby={ariaLabelledby || null}
+      aria-describedby={ariaDescribedby}
+      aria-modal="true"
+      className={css(
+        styles.modalBox,
+        className,
+        position === 'top' && styles.modifiers.alignTop,
+        variant === 'large' && styles.modifiers.lg,
+        variant === 'small' && styles.modifiers.sm,
+        variant === 'medium' && styles.modifiers.md
+      )}
+      style={style}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+ModalBox.displayName = 'ModalBox';

package/src/next/components/Modal/ModalBoxCloseButton.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
+import { Button } from '../../../components/Button';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import { OUIAProps } from '../../../helpers';
+
+export interface ModalBoxCloseButtonProps extends OUIAProps {
+  /** Additional classes added to the close button. */
+  className?: string;
+  /** A callback for when the close button is clicked. */
+  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;
+  /** Accessible descriptor of the close button. */
+  'aria-label'?: string;
+  /** Value to set the data-ouia-component-id.*/
+  ouiaId?: number | string;
+}
+
+export const ModalBoxCloseButton: React.FunctionComponent<ModalBoxCloseButtonProps> = ({
+  className,
+  onClose,
+  'aria-label': ariaLabel = 'Close',
+  ouiaId,
+  ...props
+}: ModalBoxCloseButtonProps) => (
+  <div className={css(styles.modalBoxClose, className)}>
+    <Button
+      variant="plain"
+      onClick={(event) => onClose(event)}
+      aria-label={ariaLabel}
+      {...(ouiaId && { ouiaId: `${ouiaId}-${ModalBoxCloseButton.displayName}` })}
+      {...props}
+    >
+      <TimesIcon />
+    </Button>
+  </div>
+);
+ModalBoxCloseButton.displayName = 'ModalBoxCloseButton';

package/src/next/components/Modal/ModalBoxDescription.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
+
+export interface ModalBoxDescriptionProps {
+  /** Content rendered inside the description. */
+  children?: React.ReactNode;
+  /** Additional classes added to the description. */
+  className?: string;
+  /** Id of the description. */
+  id?: string;
+}
+
+export const ModalBoxDescription: React.FunctionComponent<ModalBoxDescriptionProps> = ({
+  children = null,
+  className = '',
+  id = '',
+  ...props
+}: ModalBoxDescriptionProps) => (
+  <div {...props} id={id} className={css(styles.modalBoxDescription, className)}>
+    {children}
+  </div>
+);
+ModalBoxDescription.displayName = 'ModalBoxDescription';