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

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

@@ -7,13 +7,12 @@ 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';
+import { KeyTypes } from '../../../../helpers';
 
 jest.spyOn(document, 'createElement');
 jest.spyOn(document.body, 'addEventListener');
 
 const props = {
-  title: 'Modal',
   onClose: jest.fn(),
   isOpen: false,
   children: 'modal content'
@@ -48,9 +47,9 @@ describe('Modal', () => {
   test('modal closes with escape', async () => {
     const user = userEvent.setup();
 
-    render(<Modal {...props} isOpen appendTo={document.body} />);
+    render(<Modal {...props} isOpen appendTo={document.body} aria-label="modal-div" />);
 
-    await user.type(screen.getByText(props.title), `{${KeyTypes.Escape}}`);
+    await user.type(screen.getByLabelText('modal-div'), `{${KeyTypes.Escape}}`);
     expect(props.onClose).toHaveBeenCalled();
   });
 
@@ -70,13 +69,17 @@ describe('Modal', () => {
     expect(document.body).not.toHaveClass(css(styles.backdropOpen));
   });
 
-  test('modal shows the close button when showClose is true (true by default)', () => {
+  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 showClose is false', () => {
-    render(<Modal {...props} isOpen showClose={false} tabIndex={0} />);
+  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();
   });
 
@@ -94,21 +97,6 @@ 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) });
 
@@ -154,59 +142,4 @@ 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/components/Modal/__tests__/ModalBoxHeader.test.tsx

@@ -1,14 +1,21 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 
-import { ModalBoxHeader } from '../ModalBoxHeader';
+import { ModalHeader } from '../ModalHeader';
 
-test('ModalBoxHeader Test', () => {
-  const { asFragment } = render(<ModalBoxHeader>This is a ModalBox header</ModalBoxHeader>);
+test('ModalHeader Test', () => {
+  const { asFragment } = render(<ModalHeader>This is a ModalBox header</ModalHeader>);
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('ModalBoxHeader help renders', () => {
-  const { asFragment } = render(<ModalBoxHeader help={<div>test</div>}>This is a ModalBox header</ModalBoxHeader>);
+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/components/Modal/__tests__/ModalBoxTitle.test.tsx

@@ -5,55 +5,33 @@ 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">
-      content
-    </ModalBoxTitle>
-  );
+  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">
-      content
-    </ModalBoxTitle>
-  );
+  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">
-      content
-    </ModalBoxTitle>
-  );
+  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">
-      content
-    </ModalBoxTitle>
-  );
+  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">
-      content
-    </ModalBoxTitle>
-  );
+  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}>
-      content
-    </ModalBoxTitle>
+    <ModalBoxTitle title="Test Modal Box custom" id="boxId" titleIconVariant={BullhornIcon} />
   );
   expect(asFragment()).toMatchSnapshot();
 });

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

@@ -6,11 +6,12 @@ import { ModalContent } from '../ModalContent';
 const modalContentProps = {
   boxId: 'boxId',
   labelId: 'labelId',
-  descriptorId: 'descriptorId'
+  descriptorId: 'descriptorId',
+  disableFocusTrap: true
 };
 test('Modal Content Test only body', () => {
   const { asFragment } = render(
-    <ModalContent title="Test Modal Content title" isOpen {...modalContentProps}>
+    <ModalContent isOpen {...modalContentProps}>
       This is a ModalBox header
     </ModalContent>
   );
@@ -19,7 +20,7 @@ test('Modal Content Test only body', () => {
 
 test('Modal Content Test isOpen', () => {
   const { asFragment } = render(
-    <ModalContent title="Test Modal Content title" isOpen {...modalContentProps}>
+    <ModalContent isOpen {...modalContentProps}>
       This is a ModalBox header
     </ModalContent>
   );
@@ -28,30 +29,7 @@ test('Modal Content Test isOpen', () => {
 
 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}>
+    <ModalContent isOpen {...modalContentProps}>
       This is a ModalBox header
     </ModalContent>
   );
@@ -60,51 +38,7 @@ test('Modal Content test without footer', () => {
 
 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}
-    >
+    <ModalContent variant="large" onClose={() => undefined} isOpen {...modalContentProps}>
       This is a ModalBox header
     </ModalContent>
   );

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

@@ -1,6 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ModalBoxHeader Test 1`] = `
+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`] = `
 <DocumentFragment>
   <header
     class="pf-v6-c-modal-box__header"
@@ -10,7 +24,7 @@ exports[`ModalBoxHeader Test 1`] = `
 </DocumentFragment>
 `;
 
-exports[`ModalBoxHeader help renders 1`] = `
+exports[`ModalHeader help renders 1`] = `
 <DocumentFragment>
   <header
     class="pf-v6-c-modal-box__header pf-m-help"