@patternfly/react-core 6.0.0-alpha.65 → 6.0.0-alpha.67

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

@@ -0,0 +1,222 @@
+import * as React from 'react';
+import { FocusTrap } from '../../../helpers';
+import modalStyles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
+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/Backdrop';
+import { ModalBoxBody } from './ModalBoxBody';
+import { ModalBoxCloseButton } from './ModalBoxCloseButton';
+import { ModalBox } from './ModalBox';
+import { ModalBoxFooter } from './ModalBoxFooter';
+import { ModalBoxDescription } from './ModalBoxDescription';
+import { ModalBoxHeader } from './ModalBoxHeader';
+import { ModalBoxTitle, isVariantIcon } from './ModalBoxTitle';
+
+export interface ModalContentProps extends OUIAProps {
+  /** Action buttons to add to the standard modal footer. Ignored if the footer property
+   * is passed in.
+   */
+  actions?: any;
+  /** Id to use for the modal box descriptor. */
+  'aria-describedby'?: string;
+  /** Accessible descriptor of the modal. */
+  'aria-label'?: string;
+  /** Id to use for the modal box label. */
+  'aria-labelledby'?: string | null;
+  /** Accessible label applied to the modal box body. This should be used to communicate
+   * important information about the modal box body div element if needed, such as that it
+   * is scrollable.
+   */
+  bodyAriaLabel?: string;
+  /** Accessible role applied to the modal box body. This will default to "region" if the
+   * bodyAriaLabel property is passed in. Set to a more appropriate role as applicable
+   * based on the modal content and context.
+   */
+  bodyAriaRole?: 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;
+  /** Description of the modal. */
+  description?: React.ReactNode;
+  /** Id of the modal box description. */
+  descriptorId: 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;
+  /** Custom footer. */
+  footer?: React.ReactNode;
+  /** Flag indicating if modal content should be placed in a modal box body wrapper. */
+  hasNoBodyWrapper?: boolean;
+  /** Complex header (more than just text), supersedes the title property for header content. */
+  header?: React.ReactNode;
+  /** Optional help section for the modal header. */
+  help?: React.ReactNode;
+  /** Flag to show the modal. */
+  isOpen?: boolean;
+  /** Id of the modal box title. */
+  labelId: string;
+  /** 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;
+  /** Flag to show the close button in the header area of the modal. */
+  showClose?: boolean;
+  /** Simple text content of the modal header. Also used for the aria-label on the body. */
+  title?: string;
+  /** Optional alert icon (or other) to show before the title of the modal header. 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. */
+  titleLabel?: 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,
+  header = null,
+  help = null,
+  description = null,
+  title = '',
+  titleIconVariant = null,
+  titleLabel = '',
+  'aria-label': ariaLabel = '',
+  'aria-describedby': ariaDescribedby,
+  'aria-labelledby': ariaLabelledby,
+  bodyAriaLabel,
+  bodyAriaRole,
+  showClose = true,
+  footer = null,
+  actions = [],
+  onClose = () => undefined as any,
+  variant = 'default',
+  position,
+  positionOffset,
+  width,
+  maxWidth,
+  boxId,
+  labelId,
+  descriptorId,
+  disableFocusTrap = false,
+  hasNoBodyWrapper = false,
+  ouiaId,
+  ouiaSafe = true,
+  elementToFocus,
+  ...props
+}: ModalContentProps) => {
+  if (!isOpen) {
+    return null;
+  }
+
+  const modalBoxHeader = header ? (
+    <ModalBoxHeader help={help}>{header}</ModalBoxHeader>
+  ) : (
+    title && (
+      <ModalBoxHeader help={help}>
+        <ModalBoxTitle title={title} titleIconVariant={titleIconVariant} titleLabel={titleLabel} id={labelId} />
+        {description && <ModalBoxDescription id={descriptorId}>{description}</ModalBoxDescription>}
+      </ModalBoxHeader>
+    )
+  );
+
+  const modalBoxFooter = footer ? (
+    <ModalBoxFooter>{footer}</ModalBoxFooter>
+  ) : (
+    actions.length > 0 && <ModalBoxFooter>{actions}</ModalBoxFooter>
+  );
+
+  const defaultModalBodyAriaRole = bodyAriaLabel ? 'region' : undefined;
+
+  const hasNoDescription = !description && !ariaDescribedby;
+  const id = hasNoDescription ? descriptorId : undefined;
+
+  const modalBody = hasNoBodyWrapper ? (
+    children
+  ) : (
+    <ModalBoxBody aria-label={bodyAriaLabel} role={bodyAriaRole || defaultModalBodyAriaRole} {...props} id={id}>
+      {children}
+    </ModalBoxBody>
+  );
+  const ariaLabelledbyFormatted = (): null | string => {
+    if (ariaLabelledby === null) {
+      return null;
+    }
+    const idRefList: string[] = [];
+    if ((ariaLabel && boxId) !== '') {
+      idRefList.push(ariaLabel && boxId);
+    }
+    if (ariaLabelledby) {
+      idRefList.push(ariaLabelledby);
+    }
+    if (title) {
+      idRefList.push(labelId);
+    }
+    return idRefList.join(' ');
+  };
+
+  const modalBox = (
+    <ModalBox
+      id={boxId}
+      className={css(className, isVariantIcon(titleIconVariant) && modalStyles.modifiers[titleIconVariant])}
+      variant={variant}
+      position={position}
+      positionOffset={positionOffset}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledbyFormatted()}
+      aria-describedby={ariaDescribedby || (hasNoBodyWrapper ? null : descriptorId)}
+      {...getOUIAProps(ModalContent.displayName, ouiaId, ouiaSafe)}
+      style={
+        {
+          ...(width && { '--pf-v6-c-modal-box--Width': typeof width !== 'number' ? width : `${width}px` }),
+          ...(maxWidth && {
+            '--pf-v6-c-modal-box--MaxWidth': typeof maxWidth !== 'number' ? maxWidth : `${maxWidth}px`
+          })
+        } as React.CSSProperties
+      }
+    >
+      {showClose && <ModalBoxCloseButton onClose={(event) => onClose(event)} ouiaId={ouiaId} />}
+      {modalBoxHeader}
+      {modalBody}
+      {modalBoxFooter}
+    </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 → deprecated}/components/Modal/__tests__/Modal.test.tsx

@@ -13,6 +13,7 @@ jest.spyOn(document, 'createElement');
 jest.spyOn(document.body, 'addEventListener');
 
 const props = {
+  title: 'Modal',
   onClose: jest.fn(),
   isOpen: false,
   children: 'modal content'
@@ -47,9 +48,9 @@ describe('Modal', () => {
   test('modal closes with escape', async () => {
     const user = userEvent.setup();
 
-    render(<Modal {...props} isOpen appendTo={document.body} aria-label="modal-div" />);
+    render(<Modal {...props} isOpen appendTo={document.body} />);
 
-    await user.type(screen.getByLabelText('modal-div'), `{${KeyTypes.Escape}}`);
+    await user.type(screen.getByText(props.title), `{${KeyTypes.Escape}}`);
     expect(props.onClose).toHaveBeenCalled();
   });
 
@@ -69,17 +70,13 @@ describe('Modal', () => {
     expect(document.body).not.toHaveClass(css(styles.backdropOpen));
   });
 
-  test('modal shows the close button when onClose prop is passed (true by default)', () => {
+  test('modal shows the close button when showClose is true (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>
-    );
+  test('modal does not show the close button when showClose is false', () => {
+    render(<Modal {...props} isOpen showClose={false} tabIndex={0} />);
     expect(screen.queryByRole('button', { name: 'Close' })).toBeNull();
   });
 
@@ -97,6 +94,21 @@ describe('Modal', () => {
     expect(consoleErrorMock).toHaveBeenCalled();
   });
 
+  test('modal generates console warning when conflicting accessible name strategies are provided', () => {
+    const props = {
+      hasNoBodyWrapper: true,
+      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) });
 
@@ -142,4 +154,59 @@ describe('Modal', () => {
     expect(asideSibling).not.toHaveAttribute('aria-hidden');
     expect(articleSibling).not.toHaveAttribute('aria-hidden');
   });
+  test('The modalBoxBody has no aria-label when bodyAriaLabel is not passed', () => {
+    const props = {
+      isOpen: true
+    };
+
+    render(<Modal {...props}>This is a ModalBox</Modal>);
+
+    const modalBoxBody = screen.getByText('This is a ModalBox');
+    expect(modalBoxBody).not.toHaveAccessibleName('modal box body aria label');
+  });
+
+  test('The modalBoxBody has the expected aria-label when bodyAriaLabel is passed', () => {
+    const props = {
+      isOpen: true
+    };
+
+    render(
+      <Modal bodyAriaLabel="modal box body aria label" {...props}>
+        This is a ModalBox
+      </Modal>
+    );
+
+    const modalBoxBody = screen.getByText('This is a ModalBox');
+    expect(modalBoxBody).toHaveAccessibleName('modal box body aria label');
+  });
+
+  test('The modalBoxBody has the expected aria role when bodyAriaLabel is passed and bodyAriaRole is not', () => {
+    const props = {
+      isOpen: true
+    };
+
+    render(
+      <Modal bodyAriaLabel="modal box body aria label" {...props}>
+        This is a ModalBox
+      </Modal>
+    );
+
+    const modalBoxBody = screen.getByRole('region', { name: 'modal box body aria label' });
+    expect(modalBoxBody).toBeInTheDocument();
+  });
+
+  test('The modalBoxBody has the expected aria role when bodyAriaRole is passed', () => {
+    const props = {
+      isOpen: true
+    };
+
+    render(
+      <Modal bodyAriaLabel="modal box body aria label" bodyAriaRole="article" {...props}>
+        This is a ModalBox
+      </Modal>
+    );
+
+    const modalBoxBody = screen.getByRole('article', { name: 'modal box body aria label' });
+    expect(modalBoxBody).toBeInTheDocument();
+  });
 });

package/src/deprecated/components/Modal/__tests__/ModalBoxHeader.test.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+import { ModalBoxHeader } from '../ModalBoxHeader';
+
+test('ModalBoxHeader Test', () => {
+  const { asFragment } = render(<ModalBoxHeader>This is a ModalBox header</ModalBoxHeader>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('ModalBoxHeader help renders', () => {
+  const { asFragment } = render(<ModalBoxHeader help={<div>test</div>}>This is a ModalBox header</ModalBoxHeader>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/{next → deprecated}/components/Modal/__tests__/ModalBoxTitle.test.tsx

@@ -5,33 +5,55 @@ import { ModalBoxTitle } from '../ModalBoxTitle';
 import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
 
 test('ModalBoxTitle alert variant', () => {
-  const { asFragment } = render(<ModalBoxTitle title="Test Modal Box warning" id="boxId" titleIconVariant="warning" />);
+  const { asFragment } = render(
+    <ModalBoxTitle title="Test Modal Box warning" id="boxId" titleIconVariant="warning">
+      content
+    </ModalBoxTitle>
+  );
   expect(asFragment()).toMatchSnapshot();
 });
 
 test('ModalBoxTitle info variant', () => {
-  const { asFragment } = render(<ModalBoxTitle title="Test Modal Box info" id="boxId" titleIconVariant="info" />);
+  const { asFragment } = render(
+    <ModalBoxTitle title="Test Modal Box info" id="boxId" titleIconVariant="info">
+      content
+    </ModalBoxTitle>
+  );
   expect(asFragment()).toMatchSnapshot();
 });
 
 test('ModalBoxTitle danger variant', () => {
-  const { asFragment } = render(<ModalBoxTitle title="Test Modal Box danger" id="boxId" titleIconVariant="danger" />);
+  const { asFragment } = render(
+    <ModalBoxTitle title="Test Modal Box danger" id="boxId" titleIconVariant="danger">
+      content
+    </ModalBoxTitle>
+  );
   expect(asFragment()).toMatchSnapshot();
 });
 
 test('ModalBoxTitle custom variant', () => {
-  const { asFragment } = render(<ModalBoxTitle title="Test Modal Box warning" id="boxId" titleIconVariant="custom" />);
+  const { asFragment } = render(
+    <ModalBoxTitle title="Test Modal Box warning" id="boxId" titleIconVariant="custom">
+      content
+    </ModalBoxTitle>
+  );
   expect(asFragment()).toMatchSnapshot();
 });
 
 test('ModalBoxTitle success variant', () => {
-  const { asFragment } = render(<ModalBoxTitle title="Test Modal Box success" id="boxId" titleIconVariant="success" />);
+  const { asFragment } = render(
+    <ModalBoxTitle title="Test Modal Box success" id="boxId" titleIconVariant="success">
+      content
+    </ModalBoxTitle>
+  );
   expect(asFragment()).toMatchSnapshot();
 });
 
 test('ModalBoxTitle custom icon variant', () => {
   const { asFragment } = render(
-    <ModalBoxTitle title="Test Modal Box custom" id="boxId" titleIconVariant={BullhornIcon} />
+    <ModalBoxTitle title="Test Modal Box custom" id="boxId" titleIconVariant={BullhornIcon}>
+      content
+    </ModalBoxTitle>
   );
   expect(asFragment()).toMatchSnapshot();
 });

package/src/deprecated/components/Modal/__tests__/ModalContent.test.tsx

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+import { ModalContent } from '../ModalContent';
+
+const modalContentProps = {
+  boxId: 'boxId',
+  labelId: 'labelId',
+  descriptorId: 'descriptorId'
+};
+test('Modal Content Test only body', () => {
+  const { asFragment } = render(
+    <ModalContent title="Test Modal Content title" isOpen {...modalContentProps}>
+      This is a ModalBox header
+    </ModalContent>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Modal Content Test isOpen', () => {
+  const { asFragment } = render(
+    <ModalContent title="Test Modal Content title" isOpen {...modalContentProps}>
+      This is a ModalBox header
+    </ModalContent>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Modal Content Test description', () => {
+  const { asFragment } = render(
+    <ModalContent
+      title="Test Modal Content title"
+      isOpen
+      description="This is a test description."
+      {...modalContentProps}
+    >
+      This is a ModalBox header
+    </ModalContent>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Modal Content Test with footer', () => {
+  const { asFragment } = render(
+    <ModalContent title="Test Modal Content title" isOpen actions={['Testing']} {...modalContentProps}>
+      This is a ModalBox header
+    </ModalContent>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Modal Content test without footer', () => {
+  const { asFragment } = render(
+    <ModalContent title="Test Modal Content title" isOpen {...modalContentProps}>
+      This is a ModalBox header
+    </ModalContent>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Modal Content Test with onclose', () => {
+  const { asFragment } = render(
+    <ModalContent
+      title="Test Modal Content title"
+      actions={['Testing footer']}
+      variant="large"
+      onClose={() => undefined}
+      isOpen
+      {...modalContentProps}
+    >
+      This is a ModalBox header
+    </ModalContent>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Modal Test with custom header', () => {
+  const header = <span id="test-custom-header">TEST</span>;
+
+  const { asFragment } = render(
+    <ModalContent
+      header={header}
+      title="test-custom-header-modal"
+      actions={['Testing footer']}
+      variant="large"
+      onClose={() => undefined}
+      isOpen
+      {...modalContentProps}
+    >
+      This is a ModalBox header
+    </ModalContent>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Modal Test with custom footer', () => {
+  const footer = <span id="test-custom-footer">TEST</span>;
+
+  const { asFragment } = render(
+    <ModalContent
+      footer={footer}
+      title="Test Modal Custom Footer"
+      variant="large"
+      onClose={() => undefined}
+      isOpen
+      {...modalContentProps}
+    >
+      This is a ModalBox header
+    </ModalContent>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/{next → deprecated}/components/Modal/__tests__/__snapshots__/ModalBoxHeader.test.tsx.snap

@@ -1,20 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Modal Test with custom header 1`] = `
-<DocumentFragment>
-  <header
-    class="pf-v6-c-modal-box__header"
-  >
-    <span
-      id="test-custom-header"
-    >
-      TEST
-    </span>
-  </header>
-</DocumentFragment>
-`;
-
-exports[`ModalHeader Test 1`] = `
+exports[`ModalBoxHeader Test 1`] = `
 <DocumentFragment>
   <header
     class="pf-v6-c-modal-box__header"
@@ -24,7 +10,7 @@ exports[`ModalHeader Test 1`] = `
 </DocumentFragment>
 `;
 
-exports[`ModalHeader help renders 1`] = `
+exports[`ModalBoxHeader help renders 1`] = `
 <DocumentFragment>
   <header
     class="pf-v6-c-modal-box__header pf-m-help"