@patternfly/react-core 5.2.0-prerelease.40 → 5.2.0-prerelease.41

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';

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

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import modalStyles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
+import { css } from '@patternfly/react-styles';
+import { capitalize } from '../../../helpers';
+import { Tooltip } from '../../../components/Tooltip';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import { useIsomorphicLayoutEffect } from '../../../helpers';
+
+export const isVariantIcon = (icon: any): icon is string =>
+  ['success', 'danger', 'warning', 'info', 'custom'].includes(icon as string);
+
+export interface ModalBoxTitleProps {
+  /** Additional classes added to the modal box title. */
+  className?: string;
+  /** Id of the modal box title. */
+  id?: string;
+  /** Content rendered inside the modal box title. */
+  title: React.ReactNode;
+  /** Optional alert icon (or other) to show before the title. When the predefined alert types
+   * are used the default styling will be automatically applied. */
+  titleIconVariant?: 'success' | 'danger' | 'warning' | 'info' | 'custom' | React.ComponentType<any>;
+  /** Optional title label text for screen readers. */
+  titleScreenReaderText?: string;
+}
+
+export const ModalBoxTitle: React.FunctionComponent<ModalBoxTitleProps> = ({
+  className,
+  id,
+  title,
+  titleIconVariant,
+  titleScreenReaderText,
+  ...props
+}: ModalBoxTitleProps) => {
+  const [hasTooltip, setHasTooltip] = React.useState(false);
+  const h1 = React.useRef<HTMLHeadingElement>(null);
+  const label =
+    titleScreenReaderText ||
+    (isVariantIcon(titleIconVariant) ? `${capitalize(titleIconVariant)} alert:` : titleScreenReaderText);
+  const variantIcons = {
+    success: <CheckCircleIcon />,
+    danger: <ExclamationCircleIcon />,
+    warning: <ExclamationTriangleIcon />,
+    info: <InfoCircleIcon />,
+    custom: <BellIcon />
+  };
+  const CustomIcon = !isVariantIcon(titleIconVariant) && titleIconVariant;
+
+  useIsomorphicLayoutEffect(() => {
+    setHasTooltip(h1.current && h1.current.offsetWidth < h1.current.scrollWidth);
+  }, []);
+
+  const content = (
+    <h1
+      id={id}
+      ref={h1}
+      className={css(modalStyles.modalBoxTitle, titleIconVariant && modalStyles.modifiers.icon, className)}
+      {...props}
+    >
+      {titleIconVariant && (
+        <span className={css(modalStyles.modalBoxTitleIcon)}>
+          {isVariantIcon(titleIconVariant) ? variantIcons[titleIconVariant] : <CustomIcon />}
+        </span>
+      )}
+      {label && <span className="pf-v5-screen-reader">{label}</span>}
+      <span className={css(modalStyles.modalBoxTitleText)}>{title}</span>
+    </h1>
+  );
+
+  return hasTooltip ? <Tooltip content={title}>{content}</Tooltip> : content;
+};
+ModalBoxTitle.displayName = 'ModalBoxTitle';

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

@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { FocusTrap } from '../../../helpers';
+import bullsEyeStyles from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
+import { css } from '@patternfly/react-styles';
+import { getOUIAProps, OUIAProps } from '../../../helpers';
+import { Backdrop } from '../../../components/Backdrop';
+import { ModalBoxCloseButton } from './ModalBoxCloseButton';
+import { ModalBox } from './ModalBox';
+
+export interface ModalContentProps extends OUIAProps {
+  /** Id to use for the modal box description. This should match the ModalHeader labelId or descriptorId. */
+  'aria-describedby'?: string;
+  /** Accessible descriptor of the modal. */
+  'aria-label'?: string;
+  /** Id to use for the modal box label. This should include the ModalHeader labelId. */
+  'aria-labelledby'?: string;
+  /** Id of the modal box container. */
+  boxId: string;
+  /** Content rendered inside the modal. */
+  children: React.ReactNode;
+  /** Additional classes added to the modal box. */
+  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;
+  /** Flag to show the modal. */
+  isOpen?: boolean;
+  /** A callback for when the close button is clicked. */
+  onClose?: (event: KeyboardEvent | React.MouseEvent) => 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 const ModalContent: React.FunctionComponent<ModalContentProps> = ({
+  children,
+  className,
+  isOpen = false,
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedby,
+  'aria-labelledby': ariaLabelledby,
+  onClose,
+  variant = 'default',
+  position,
+  positionOffset,
+  width,
+  maxWidth,
+  boxId,
+  disableFocusTrap = false,
+  ouiaId,
+  ouiaSafe = true,
+  elementToFocus,
+  ...props
+}: ModalContentProps) => {
+  if (!isOpen) {
+    return null;
+  }
+
+  const ariaLabelledbyFormatted = (): string => {
+    const idRefList: string[] = [];
+    if (ariaLabel && boxId) {
+      idRefList.push(ariaLabel && boxId);
+    }
+    if (ariaLabelledby) {
+      idRefList.push(ariaLabelledby);
+    }
+    if (idRefList.length === 0) {
+      return undefined;
+    } else {
+      return idRefList.join(' ');
+    }
+  };
+
+  const modalBox = (
+    <ModalBox
+      className={css(className)}
+      variant={variant}
+      position={position}
+      positionOffset={positionOffset}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledbyFormatted()}
+      aria-describedby={ariaDescribedby}
+      {...getOUIAProps(ModalContent.displayName, ouiaId, ouiaSafe)}
+      style={
+        {
+          ...(width && { '--pf-v5-c-modal-box--Width': typeof width !== 'number' ? width : `${width}px` }),
+          ...(maxWidth && {
+            '--pf-v5-c-modal-box--MaxWidth': typeof maxWidth !== 'number' ? maxWidth : `${maxWidth}px`
+          })
+        } as React.CSSProperties
+      }
+      {...props}
+      id={boxId}
+    >
+      {onClose && <ModalBoxCloseButton onClose={(event) => onClose(event)} ouiaId={ouiaId} />}
+      {children}
+    </ModalBox>
+  );
+  return (
+    <Backdrop>
+      <FocusTrap
+        active={!disableFocusTrap}
+        focusTrapOptions={{
+          clickOutsideDeactivates: true,
+          tabbableOptions: { displayCheck: 'none' },
+          // FocusTrap's initialFocus can accept false as a value to prevent initial focus.
+          // We want to prevent this in case false is ever passed in.
+          initialFocus: elementToFocus || undefined
+        }}
+        className={css(bullsEyeStyles.bullseye)}
+      >
+        {modalBox}
+      </FocusTrap>
+    </Backdrop>
+  );
+};
+ModalContent.displayName = 'ModalContent';

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

@@ -0,0 +1,23 @@
+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 footer of the modal */
+
+export interface ModalFooterProps {
+  /** Content rendered inside the modal footer. */
+  children?: React.ReactNode;
+  /** Additional classes added to the modal footer. */
+  className?: string;
+}
+
+export const ModalFooter: React.FunctionComponent<ModalFooterProps> = ({
+  children,
+  className,
+  ...props
+}: ModalFooterProps) => (
+  <footer {...props} className={css(styles.modalBoxFooter, className)}>
+    {children}
+  </footer>
+);
+ModalFooter.displayName = 'ModalFooter';

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

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
+import { ModalBoxDescription } from './ModalBoxDescription';
+import { ModalBoxTitle } from './ModalBoxTitle';
+
+/** Renders content in the header of the modal */
+
+export interface ModalHeaderProps {
+  /** Custom content rendered inside the modal header. If children are supplied then the tile, tileIconVariant and titleScreenReaderText props are ignored. */
+  children?: React.ReactNode;
+  /** Additional classes added to the modal header. */
+  className?: string;
+  /** Description of the modal. */
+  description?: React.ReactNode;
+  /** Id of the modal description. */
+  descriptorId?: string;
+  /** Optional help section for the modal header. */
+  help?: React.ReactNode;
+  /** Id of the modal title. */
+  labelId?: string;
+  /** Content rendered inside the modal title. */
+  title?: React.ReactNode;
+  /** Optional alert icon (or other) to show before the title. When the predefined alert types
+   * are used the default styling will be automatically applied. */
+  titleIconVariant?: 'success' | 'danger' | 'warning' | 'info' | 'custom' | React.ComponentType<any>;
+  /** Optional title label text for screen readers. */
+  titleScreenReaderText?: string;
+}
+
+export const ModalHeader: React.FunctionComponent<ModalHeaderProps> = ({
+  children,
+  className,
+  descriptorId,
+  description,
+  labelId,
+  title,
+  titleIconVariant,
+  titleScreenReaderText,
+  help,
+  ...props
+}: ModalHeaderProps) => {
+  const headerContent = children ? (
+    children
+  ) : (
+    <>
+      <ModalBoxTitle
+        title={title}
+        titleIconVariant={titleIconVariant}
+        titleScreenReaderText={titleScreenReaderText}
+        id={labelId}
+      />
+      {description && <ModalBoxDescription id={descriptorId}>{description}</ModalBoxDescription>}
+    </>
+  );
+
+  // TODO: apply variant modifier for icon styling.  Core fix needed first.  similar to this:
+  // className={css(className, isVariantIcon(titleIconVariant) && modalStyles.modifiers[titleIconVariant])}
+  return (
+    <header className={css(styles.modalBoxHeader, help && styles.modifiers.help, className)} {...props}>
+      {help && (
+        <>
+          <div className={css(styles.modalBoxHeaderMain)}>{headerContent}</div>
+          <div className={`${styles.modalBoxHeader}-help`}>{help}</div>
+        </>
+      )}
+      {!help && headerContent}
+    </header>
+  );
+};
+ModalHeader.displayName = 'ModalHeader';

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

@@ -0,0 +1,145 @@
+import * as React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { css } from '../../../../../../react-styles/dist/js';
+import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
+
+import { Modal } from '../Modal';
+import { KeyTypes } from '../../../../helpers';
+
+jest.spyOn(document, 'createElement');
+jest.spyOn(document.body, 'addEventListener');
+
+const props = {
+  onClose: jest.fn(),
+  isOpen: false,
+  children: 'modal content'
+};
+
+const target = document.createElement('div');
+
+const ModalWithSiblings = () => {
+  const [isOpen, setIsOpen] = React.useState(true);
+  const [isModalMounted, setIsModalMounted] = React.useState(true);
+  const modalProps = { ...props, isOpen, appendTo: target, onClose: () => setIsOpen(false) };
+
+  return (
+    <>
+      <aside>Aside sibling</aside>
+      <article>Section sibling</article>
+      {isModalMounted && (
+        <Modal {...modalProps}>
+          <button onClick={() => setIsModalMounted(false)}>Unmount Modal</button>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+describe('Modal', () => {
+  test('Modal creates a container element once for div', () => {
+    render(<Modal {...props} />);
+    expect(document.createElement).toHaveBeenCalledWith('div');
+  });
+
+  test('modal closes with escape', async () => {
+    const user = userEvent.setup();
+
+    render(<Modal {...props} isOpen appendTo={document.body} aria-label="modal-div" />);
+
+    await user.type(screen.getByLabelText('modal-div'), `{${KeyTypes.Escape}}`);
+    expect(props.onClose).toHaveBeenCalled();
+  });
+
+  test('modal does not call onClose for esc key if it is not open', () => {
+    render(<Modal {...props} />);
+    expect(screen.queryByRole('dialog')).toBeNull();
+    expect(props.onClose).not.toHaveBeenCalled();
+  });
+
+  test('modal has body backdropOpen class when open', () => {
+    render(<Modal {...props} isOpen />);
+    expect(document.body).toHaveClass(css(styles.backdropOpen));
+  });
+
+  test('modal has no body backdropOpen class when not open', () => {
+    render(<Modal {...props} />);
+    expect(document.body).not.toHaveClass(css(styles.backdropOpen));
+  });
+
+  test('modal shows the close button when onClose prop is passed (true by default)', () => {
+    render(<Modal {...props} isOpen />);
+    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
+  });
+
+  test('modal does not show the close button when onClose not passed', () => {
+    render(
+      <Modal isOpen disableFocusTrap>
+        No close button{' '}
+      </Modal>
+    );
+    expect(screen.queryByRole('button', { name: 'Close' })).toBeNull();
+  });
+
+  test('modal generates console error when no accessible name is provided', () => {
+    const props = {
+      onClose: jest.fn(),
+      isOpen: true,
+      children: 'modal content'
+    };
+    const consoleErrorMock = jest.fn();
+    global.console = { error: consoleErrorMock } as any;
+
+    render(<Modal {...props} />);
+
+    expect(consoleErrorMock).toHaveBeenCalled();
+  });
+
+  test('modal adds aria-hidden attribute to its siblings when open', () => {
+    render(<ModalWithSiblings />, { container: document.body.appendChild(target) });
+
+    const asideSibling = screen.getByRole('complementary', { hidden: true });
+    const articleSibling = screen.getByRole('article', { hidden: true });
+
+    expect(asideSibling).toHaveAttribute('aria-hidden');
+    expect(articleSibling).toHaveAttribute('aria-hidden');
+  });
+
+  test('modal removes the aria-hidden attribute from its siblings when closed', async () => {
+    const user = userEvent.setup();
+
+    render(<ModalWithSiblings />, { container: document.body.appendChild(target) });
+
+    const asideSibling = screen.getByRole('complementary', { hidden: true });
+    const articleSibling = screen.getByRole('article', { hidden: true });
+    const closeButton = screen.getByRole('button', { name: 'Close' });
+
+    expect(articleSibling).toHaveAttribute('aria-hidden');
+    expect(asideSibling).toHaveAttribute('aria-hidden');
+
+    await user.click(closeButton);
+
+    expect(articleSibling).not.toHaveAttribute('aria-hidden');
+    expect(asideSibling).not.toHaveAttribute('aria-hidden');
+  });
+
+  test('modal removes the aria-hidden attribute from its siblings when unmounted', async () => {
+    const user = userEvent.setup();
+
+    render(<ModalWithSiblings />, { container: document.body.appendChild(target) });
+
+    const asideSibling = screen.getByRole('complementary', { hidden: true });
+    const articleSibling = screen.getByRole('article', { hidden: true });
+    const unmountButton = screen.getByRole('button', { name: 'Unmount Modal' });
+
+    expect(asideSibling).toHaveAttribute('aria-hidden');
+    expect(articleSibling).toHaveAttribute('aria-hidden');
+
+    await user.click(unmountButton);
+
+    expect(asideSibling).not.toHaveAttribute('aria-hidden');
+    expect(articleSibling).not.toHaveAttribute('aria-hidden');
+  });
+});

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { ModalBody } from '../ModalBody';
+
+describe('ModalBody tests', () => {
+  test('ModalBody renders', () => {
+    const { asFragment } = render(
+      <ModalBody id="id" className="test-box-class">
+        This is a Modal body
+      </ModalBody>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('The ModalBody has the expected aria-label when it is passed', () => {
+    const props = {
+      isOpen: true
+    };
+
+    render(
+      <ModalBody aria-label="modal body aria label" {...props}>
+        This is a ModalBox
+      </ModalBody>
+    );
+
+    const modalBoxBody = screen.getByText('This is a ModalBox');
+    expect(modalBoxBody).toHaveAccessibleName('modal body aria label');
+  });
+
+  test('The modalBoxBody has the expected aria role when aria-label is passed and role is not', () => {
+    const props = {
+      isOpen: true
+    };
+
+    render(
+      <ModalBody aria-label="modal body aria label" {...props}>
+        This is a ModalBox
+      </ModalBody>
+    );
+
+    const modalBoxBody = screen.getByRole('region', { name: 'modal body aria label' });
+    expect(modalBoxBody).toBeInTheDocument();
+  });
+
+  test('The modalBoxBody has the expected aria role when bodyAriaRole is passed', () => {
+    const props = {
+      isOpen: true
+    };
+
+    render(
+      <ModalBody aria-label="modal body aria label" role="article" {...props}>
+        This is a ModalBox
+      </ModalBody>
+    );
+
+    const modalBoxBody = screen.getByRole('article', { name: 'modal body aria label' });
+    expect(modalBoxBody).toBeInTheDocument();
+  });
+});