feat(Modal): move description to separate component (#3897)

* feat(Modal): move description to separate component

* feat(Modal): fix property descriptions

Author: kmcfaul

packages/react-core/src/components/Modal/ModalBoxDescription.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';
+
+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>
+);

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

@@ -7,7 +7,6 @@ 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';
@@ -16,6 +15,7 @@ import { ModalBoxHeader } from './ModalBoxHeader';
 import { ModalBoxCloseButton } from './ModalBoxCloseButton';
 import { ModalBox } from './ModalBox';
 import { ModalBoxFooter } from './ModalBoxFooter';
+import { ModalBoxDescription } from './ModalBoxDescription';
 
 export interface ModalContentProps {
   /** Content rendered inside the Modal. */
@@ -104,11 +104,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
     >
       {showClose && <ModalBoxCloseButton onClose={onClose} />}
       {modalBoxHeader}
-      {description && (
-        <div className={css(modalStyles.modalBoxDescription)} id={id}>
-          {description}
-        </div>
-      )}
+      {description && <ModalBoxDescription id={id}>{description}</ModalBoxDescription>}
       <ModalBoxBody {...props} {...(!description && { id })}>
         {children}
       </ModalBoxBody>

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

@@ -32,12 +32,11 @@ exports[`Modal Content Test description 1`] = `
         Test Modal Content title
          
       </ModalBoxHeader>
-      <div
-        className="pf-c-modal-box__description"
+      <ModalBoxDescription
         id="id"
       >
         This is a test description.
-      </div>
+      </ModalBoxDescription>
       <ModalBoxBody>
         This is a ModalBox header
       </ModalBoxBody>