feat(Modal): add description property

packages/react-core/src/components/Modal/Modal.tsx

@@ -44,6 +44,8 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement> {
   appendTo?: HTMLElement | (() => HTMLElement);
   /** Flag to disable focus trap */
   disableFocusTrap?: boolean;
+  /** Description of the modal */
+  description?: React.ReactNode;
 }
 
 interface ModalState {

packages/react-core/src/components/Modal/ModalContent.tsx

@@ -7,6 +7,7 @@ const FocusTrap: any = require('focus-trap-react');
 
 import styles from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 import titleStyles from '@patternfly/react-styles/css/components/Title/title';
+import modalStyles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
 import { css } from '@patternfly/react-styles';
 
 import { Backdrop } from '../Backdrop/Backdrop';
@@ -29,6 +30,8 @@ export interface ModalContentProps {
   isOpen?: boolean;
   /** Complex header (more than just text), supersedes title for header content */
   header?: React.ReactNode;
+  /** Description of the modal */
+  description?: React.ReactNode;
   /** Simple text content of the Modal Header, also used for aria-label on the body */
   title: string;
   /** Flag to show the title (ignored for custom headers) */
@@ -58,6 +61,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   className = '',
   isOpen = false,
   header = null,
+  description = null,
   title,
   hideTitle = false,
   showClose = true,
@@ -100,7 +104,12 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
     >
       {showClose && <ModalBoxCloseButton onClose={onClose} />}
       {modalBoxHeader}
-      <ModalBoxBody {...props} id={id}>
+      {description && (
+        <div className={css(modalStyles.modalBoxDescription)} id={id}>
+          {description}
+        </div>
+      )}
+      <ModalBoxBody {...props} {...(!description && { id })}>
         {children}
       </ModalBoxBody>
       {modalBoxFooter}

packages/react-core/src/components/Modal/__tests__/ModalContent.test.tsx

@@ -21,6 +21,15 @@ test('Modal Content Test isOpen', () => {
   expect(view).toMatchSnapshot();
 });
 
+test('Modal Content Test description', () => {
+  const view = shallow(
+    <ModalContent title="Test Modal Content title" id="id" isOpen description="This is a test description.">
+      This is a ModalBox header
+    </ModalContent>
+  );
+  expect(view).toMatchSnapshot();
+});
+
 test('Modal Content Test with footer', () => {
   const view = shallow(
     <ModalContent title="Test Modal Content title" id="id" isOpen actions={['Testing']}>

packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap

@@ -1,5 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Modal Content Test description 1`] = `
+<Backdrop>
+  <FocusTrap
+    _createFocusTrap={[Function]}
+    active={true}
+    className="pf-l-bullseye"
+    focusTrapOptions={
+      Object {
+        "clickOutsideDeactivates": true,
+      }
+    }
+    paused={false}
+    tag="div"
+  >
+    <ModalBox
+      className=""
+      id="id"
+      isLarge={false}
+      isSmall={false}
+      style={Object {}}
+      title="Test Modal Content title"
+    >
+      <ModalBoxCloseButton
+        onClose={[Function]}
+      />
+      <ModalBoxHeader
+        hideTitle={false}
+      >
+
+        Test Modal Content title
+
+      </ModalBoxHeader>
+      <div
+        className="pf-c-modal-box__description"
+        id="id"
+      >
+        This is a test description.
+      </div>
+      <ModalBoxBody>
+        This is a ModalBox header
+      </ModalBoxBody>
+    </ModalBox>
+  </FocusTrap>
+</Backdrop>
+`;
+
 exports[`Modal Content Test isOpen 1`] = `
 <Backdrop>
   <FocusTrap

packages/react-core/src/components/Modal/examples/Modal.md

@@ -3,14 +3,16 @@ title: 'Modal'
 section: components
 cssPrefix: 'pf-c-modal-box'
 typescript: true
-propComponents: ['Modal', 'ModalBox', 'ModalBoxBody', 'ModalBoxCloseButton', 'ModalBoxFooter', 'ModalBoxHeader', 'ModalContent']
+propComponents:
+  ['Modal', 'ModalBox', 'ModalBoxBody', 'ModalBoxCloseButton', 'ModalBoxFooter', 'ModalBoxHeader', 'ModalContent']
 optIn: In a future breaking-change release, the modal footer buttons will default to be left aligned. You can opt into this now by setting the Modal isFooterLeftAligned prop to true.
 ---
 
 import { Modal, Button, BaseSizes, TitleLevel } from '@patternfly/react-core';
 import { WarningTriangleIcon } from '@patternfly/react-icons';
 
 ## Examples
+
 ```js title=Basic
 import React from 'react';
 import { Modal, Button } from '@patternfly/react-core';
@@ -62,6 +64,58 @@ class SimpleModal extends React.Component {
 }
 ```
 
+```js title=With-description
+import React from 'react';
+import { Modal, Button } from '@patternfly/react-core';
+
+class SimpleModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isModalOpen: false
+    };
+    this.handleModalToggle = () => {
+      this.setState(({ isModalOpen }) => ({
+        isModalOpen: !isModalOpen
+      }));
+    };
+  }
+
+  render() {
+    const { isModalOpen } = this.state;
+
+    return (
+      <React.Fragment>
+        <Button variant="primary" onClick={this.handleModalToggle}>
+          Show Modal
+        </Button>
+        <Modal
+          title="Modal Header"
+          isOpen={isModalOpen}
+          onClose={this.handleModalToggle}
+          description="A description is used when you want to provide more info about the modal than the title is able to describe. The content in the description is static and will not scroll with the rest of the modal body."
+          actions={[
+            <Button key="confirm" variant="primary" onClick={this.handleModalToggle}>
+              Confirm
+            </Button>,
+            <Button key="cancel" variant="link" onClick={this.handleModalToggle}>
+              Cancel
+            </Button>
+          ]}
+          isFooterLeftAligned
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </Modal>
+      </React.Fragment>
+    );
+  }
+}
+```
+
 ```js title=Small
 import React from 'react';
 import { Modal, Button } from '@patternfly/react-core';
@@ -241,19 +295,17 @@ class CustomHeaderFooter extends React.Component {
 
     const header = (
       <React.Fragment>
-        <Title headingLevel={TitleLevel.h1} size={BaseSizes["2xl"]}>
+        <Title headingLevel={TitleLevel.h1} size={BaseSizes['2xl']}>
           Custom Modal Header/Footer
         </Title>
-        <p className="pf-u-pt-sm">
-          Allows for custom content in the header and/or footer by passing components.
-        </p>
+        <p className="pf-u-pt-sm">Allows for custom content in the header and/or footer by passing components.</p>
       </React.Fragment>
     );
 
     const footer = (
       <Title headingLevel={TitleLevel.h4} size={BaseSizes.sm}>
         <WarningTriangleIcon />
-        <span  className="pf-u-pl-sm">Custom modal footer.</span>
+        <span className="pf-u-pl-sm">Custom modal footer.</span>
       </Title>
     );
 
@@ -278,9 +330,9 @@ class CustomHeaderFooter extends React.Component {
           </span>
           <br />
           <br />
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+          aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+          occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </Modal>
       </React.Fragment>
     );
@@ -307,11 +359,7 @@ class NoHeader extends React.Component {
 
   render() {
     const { isModalOpen } = this.state;
-    const footer = (
-      <React.Fragment>
-        Modal Footer
-      </React.Fragment>
-    );
+    const footer = <React.Fragment>Modal Footer</React.Fragment>;
 
     return (
       <React.Fragment>
@@ -335,9 +383,9 @@ class NoHeader extends React.Component {
           </span>
           <br />
           <br />
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+          aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+          occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </Modal>
       </React.Fragment>
     );

packages/react-integration/cypress/integration/modal.spec.ts

@@ -24,6 +24,25 @@ describe('Modal Test', () => {
     });
   });
 
+  it('Verify Description Modal', () => {
+    cy.get('#showDescriptionModalButton').then((modalButton: JQuery<HTMLButtonElement>) => {
+      cy.wrap(modalButton).click();
+      cy.get('.pf-c-modal-box')
+        .then(() => {
+          cy.get('.pf-c-modal-box .pf-c-button[aria-label="Close"]').then(closeButton => {
+            cy.wrap(closeButton).click();
+            cy.get('.pf-c-modal-box').should('not.exist');
+          });
+        })
+        .then(() => {
+          cy.wrap(modalButton).click();
+          cy.get('.pf-c-modal-box').should('exist');
+          cy.get('body').trigger('keydown', { keyCode: 27, which: 27 });
+          cy.get('.pf-c-modal-box').should('not.exist');
+        });
+    });
+  });
+
   it('Verify Small Modal', () => {
     cy.get('#showSmallModalButton').then((modalButton: JQuery<HTMLButtonElement>) => {
       cy.wrap(modalButton).click();

packages/react-integration/demo-app-ts/src/components/demos/ModalDemo/ModalDemo.tsx

@@ -4,6 +4,7 @@ import WarningTriangleIcon from '@patternfly/react-icons/dist/js/icons/warning-t
 
 interface ModalDemoState {
   isModalOpen: boolean;
+  isModalDescriptionOpen: boolean;
   isSmallModalOpen: boolean;
   isLargeModalOpen: boolean;
   isHalfWidthModalOpen: boolean;
@@ -14,6 +15,7 @@ interface ModalDemoState {
 export class ModalDemo extends React.Component<React.HTMLProps<HTMLDivElement>, ModalDemoState> {
   state = {
     isModalOpen: false,
+    isModalDescriptionOpen: false,
     isSmallModalOpen: false,
     isLargeModalOpen: false,
     isHalfWidthModalOpen: false,
@@ -27,6 +29,12 @@ export class ModalDemo extends React.Component<React.HTMLProps<HTMLDivElement>,
     }));
   };
 
+  handleModalDescriptionToggle = () => {
+    this.setState(({ isModalDescriptionOpen }) => ({
+      isModalDescriptionOpen: !isModalDescriptionOpen
+    }));
+  };
+
   handleSmallModalToggle = () => {
     this.setState(({ isSmallModalOpen }) => ({
       isSmallModalOpen: !isSmallModalOpen
@@ -88,6 +96,35 @@ export class ModalDemo extends React.Component<React.HTMLProps<HTMLDivElement>,
     );
   }
 
+  renderModalWithDescription() {
+    const { isModalDescriptionOpen } = this.state;
+
+    return (
+      <Modal
+        title="Modal Header"
+        isOpen={isModalDescriptionOpen}
+        onClose={this.handleModalDescriptionToggle}
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua."
+        actions={[
+          <Button key="cancel" variant="secondary" onClick={this.handleModalDescriptionToggle}>
+            Cancel
+          </Button>,
+          <Button key="confirm" variant="primary" onClick={this.handleModalDescriptionToggle}>
+            Confirm
+          </Button>
+        ]}
+        isFooterLeftAligned
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    );
+  }
+
   renderSmallModal() {
     const { isSmallModalOpen } = this.state;
 
@@ -283,13 +320,22 @@ export class ModalDemo extends React.Component<React.HTMLProps<HTMLDivElement>,
           >
             Show No Header Modal
           </Button>
+          <Button
+            style={buttonStyle}
+            variant="primary"
+            onClick={this.handleModalDescriptionToggle}
+            id="showDescriptionModalButton"
+          >
+            Show Modal with Description
+          </Button>
         </div>
         {this.renderModal()}
         {this.renderSmallModal()}
         {this.renderLargeModal()}
         {this.renderHalfWidthModal()}
         {this.renderCustomHeaderFooterModal()}
         {this.renderNoHeaderModal()}
+        {this.renderModalWithDescription()}
       </React.Fragment>
     );
   }