@patternfly/react-core 6.0.0-alpha.2 → 6.0.0-alpha.20

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();
+  });
+});

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

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+import { ModalBox } from '../ModalBox';
+
+test('ModalBox Test', () => {
+  const { asFragment } = render(
+    <ModalBox aria-describedby="Test Modal Box" id="boxId">
+      This is a ModalBox
+    </ModalBox>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('ModalBox Test large', () => {
+  const { asFragment } = render(
+    <ModalBox aria-describedby="Test Modal Box" id="boxId" variant="large">
+      This is a ModalBox
+    </ModalBox>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('ModalBox Test medium', () => {
+  const { asFragment } = render(
+    <ModalBox aria-describedby="Test Modal Box" id="boxId" variant="medium">
+      This is a ModalBox
+    </ModalBox>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('ModalBox Test small', () => {
+  const { asFragment } = render(
+    <ModalBox aria-describedby="Test Modal Box" id="boxId" variant="small">
+      This is a ModalBox
+    </ModalBox>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('ModalBox Test top aligned', () => {
+  const { asFragment } = render(
+    <ModalBox aria-describedby="Test Modal Box" id="boxId" position="top">
+      This is a ModalBox
+    </ModalBox>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('ModalBox Test top aligned distance', () => {
+  const { asFragment } = render(
+    <ModalBox aria-describedby="Test Modal Box" id="boxId" position="top" positionOffset="50px">
+      This is a ModalBox
+    </ModalBox>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { ModalBoxCloseButton } from '../ModalBoxCloseButton';
+
+describe('ModalBoxCloseButton', () => {
+  test('onClose called when clicked', async () => {
+    const onClose = jest.fn();
+    const user = userEvent.setup();
+
+    render(<ModalBoxCloseButton className="test-box-close-button-class" onClose={onClose} />);
+
+    await user.click(screen.getByRole('button'));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});

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

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

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+import { ModalHeader } from '../ModalHeader';
+
+test('ModalHeader Test', () => {
+  const { asFragment } = render(<ModalHeader>This is a ModalBox header</ModalHeader>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('ModalHeader help renders', () => {
+  const { asFragment } = render(<ModalHeader help={<div>test</div>}>This is a ModalBox header</ModalHeader>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Modal Test with custom header', () => {
+  const header = <span id="test-custom-header">TEST</span>;
+
+  const { asFragment } = render(<ModalHeader>{header}</ModalHeader>);
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+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" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('ModalBoxTitle info variant', () => {
+  const { asFragment } = render(<ModalBoxTitle title="Test Modal Box info" id="boxId" titleIconVariant="info" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('ModalBoxTitle danger variant', () => {
+  const { asFragment } = render(<ModalBoxTitle title="Test Modal Box danger" id="boxId" titleIconVariant="danger" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('ModalBoxTitle custom variant', () => {
+  const { asFragment } = render(<ModalBoxTitle title="Test Modal Box warning" id="boxId" titleIconVariant="custom" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('ModalBoxTitle success variant', () => {
+  const { asFragment } = render(<ModalBoxTitle title="Test Modal Box success" id="boxId" titleIconVariant="success" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('ModalBoxTitle custom icon variant', () => {
+  const { asFragment } = render(
+    <ModalBoxTitle title="Test Modal Box custom" id="boxId" titleIconVariant={BullhornIcon} />
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+import { ModalContent } from '../ModalContent';
+
+const modalContentProps = {
+  boxId: 'boxId',
+  labelId: 'labelId',
+  descriptorId: 'descriptorId',
+  disableFocusTrap: true
+};
+test('Modal Content Test only body', () => {
+  const { asFragment } = render(
+    <ModalContent isOpen {...modalContentProps}>
+      This is a ModalBox header
+    </ModalContent>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Modal Content Test isOpen', () => {
+  const { asFragment } = render(
+    <ModalContent isOpen {...modalContentProps}>
+      This is a ModalBox header
+    </ModalContent>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Modal Content Test description', () => {
+  const { asFragment } = render(
+    <ModalContent isOpen {...modalContentProps}>
+      This is a ModalBox header
+    </ModalContent>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Modal Content Test with onclose', () => {
+  const { asFragment } = render(
+    <ModalContent variant="large" onClose={() => undefined} isOpen {...modalContentProps}>
+      This is a ModalBox header
+    </ModalContent>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { ModalFooter } from '../ModalFooter';
+
+test('ModalFooter Test', () => {
+  const { asFragment } = render(<ModalFooter className="test-box-footer-class">This is a ModalBox Footer</ModalFooter>);
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalBody tests ModalBody renders 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-modal-box__body test-box-class"
+    id="id"
+  >
+    This is a Modal body
+  </div>
+</DocumentFragment>
+`;

package/src/next/components/Modal/__tests__/__snapshots__/ModalBox.test.tsx.snap

@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalBox Test 1`] = `
+<DocumentFragment>
+  <div
+    aria-describedby="Test Modal Box"
+    aria-modal="true"
+    class="pf-v5-c-modal-box"
+    id="boxId"
+    role="dialog"
+  >
+    This is a ModalBox
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ModalBox Test large 1`] = `
+<DocumentFragment>
+  <div
+    aria-describedby="Test Modal Box"
+    aria-modal="true"
+    class="pf-v5-c-modal-box pf-m-lg"
+    id="boxId"
+    role="dialog"
+  >
+    This is a ModalBox
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ModalBox Test medium 1`] = `
+<DocumentFragment>
+  <div
+    aria-describedby="Test Modal Box"
+    aria-modal="true"
+    class="pf-v5-c-modal-box pf-m-md"
+    id="boxId"
+    role="dialog"
+  >
+    This is a ModalBox
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ModalBox Test small 1`] = `
+<DocumentFragment>
+  <div
+    aria-describedby="Test Modal Box"
+    aria-modal="true"
+    class="pf-v5-c-modal-box pf-m-sm"
+    id="boxId"
+    role="dialog"
+  >
+    This is a ModalBox
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ModalBox Test top aligned 1`] = `
+<DocumentFragment>
+  <div
+    aria-describedby="Test Modal Box"
+    aria-modal="true"
+    class="pf-v5-c-modal-box pf-m-align-top"
+    id="boxId"
+    role="dialog"
+  >
+    This is a ModalBox
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ModalBox Test top aligned distance 1`] = `
+<DocumentFragment>
+  <div
+    aria-describedby="Test Modal Box"
+    aria-modal="true"
+    class="pf-v5-c-modal-box pf-m-align-top"
+    id="boxId"
+    role="dialog"
+    style="--pf-v5-c-modal-box--m-align-top--spacer: 50px;"
+  >
+    This is a ModalBox
+  </div>
+</DocumentFragment>
+`;

package/src/next/components/Modal/__tests__/__snapshots__/ModalBoxDescription.test.tsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalBoxDescription Test 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-modal-box__description"
+    id=""
+  >
+    This is a ModalBox Description
+  </div>
+</DocumentFragment>
+`;

package/src/next/components/Modal/__tests__/__snapshots__/ModalBoxHeader.test.tsx.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modal Test with custom header 1`] = `
+<DocumentFragment>
+  <header
+    class="pf-v5-c-modal-box__header"
+  >
+    <span
+      id="test-custom-header"
+    >
+      TEST
+    </span>
+  </header>
+</DocumentFragment>
+`;
+
+exports[`ModalHeader Test 1`] = `
+<DocumentFragment>
+  <header
+    class="pf-v5-c-modal-box__header"
+  >
+    This is a ModalBox header
+  </header>
+</DocumentFragment>
+`;
+
+exports[`ModalHeader help renders 1`] = `
+<DocumentFragment>
+  <header
+    class="pf-v5-c-modal-box__header pf-m-help"
+  >
+    <div
+      class="pf-v5-c-modal-box__header-main"
+    >
+      This is a ModalBox header
+    </div>
+    <div
+      class="pf-v5-c-modal-box__header-help"
+    >
+      <div>
+        test
+      </div>
+    </div>
+  </header>
+</DocumentFragment>
+`;