feat(modal-box): added modal description element

src/patternfly/components/ModalBox/examples/ModalBox.md

@@ -76,6 +76,26 @@ cssPrefix: pf-c-modal-box
 {{/modal-box}}
 ```
 
+```hbs title=With-description
+{{#> modal-box modal-box--attribute='aria-labelledby="modal-with-description-title" aria-describedby="modal-with-description-description"'}}
+  {{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close"'}}
+   <i class="fas fa-times" aria-hidden="true"></i>
+  {{/button}}
+  {{#> title titleType="h1" title--modifier="pf-m-2xl" title--attribute='id="modal-with-description-title"'}}
+    Modal header
+  {{/title}}
+  {{#> modal-box-description modal-box-description--attribute='id="modal-with-description-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.
+  {{/modal-box-description}}
+  {{#> modal-box-body}}
+    To support screen reader user awareness of the dialog text, the dialog text is wrapped in a div that is referenced by aria-describedby.
+  {{/modal-box-body}}
+  {{#> modal-box-footer modal-box-footer--modifier="pf-m-align-left"}}
+    Modal footer
+  {{/modal-box-footer}}
+{{/modal-box}}
+```
+
 ## Documentation
 ### Overview
 A modal box is a generic rectangular container that can be used to build modals. A modal box can have three sections: header, body, and footer. Header or body is required. If no `.pf-c-title` is used, `aria-label="[title of modal]"` must be provided for `.pf-c-modal-box`.
@@ -98,7 +118,8 @@ A modal box is a generic rectangular container that can be used to build modals.
 | `.pf-c-modal-box` | `<div>` | Initiates a modal box. **Required** |
 | `.pf-c-button.pf-m-plain` | `<button>` | Initiates a modal box close button. **Required** |
 | `.pf-c-title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>` |  Initiates a title. Always use it with a modifier class. |
-| `.pf-c-modal-box__body` | `<div>` | Initiates a modal box body. A modal box body is **required** if there is no modal box header. |
+| `.pf-c-modal-box__description` | `<div>` | Initiates a modal box description. A modal title and modal body are **required** if using a modal description. |
+| `.pf-c-modal-box__body` | `<div>` | Initiates a modal box body. A modal box body is **required** if there is no modal box title. |
 | `.pf-c-modal-box__footer` | `<footer>` | Initiates a modal box footer. |
 | `.pf-m-sm` | `.pf-c-modal-box` | Modifies for a small modal box width. |
 | `.pf-m-lg` | `.pf-c-modal-box` | Modifies for a large modal box width. |

src/patternfly/components/ModalBox/modal-box-description.hbs

@@ -0,0 +1,6 @@
+<div class="pf-c-modal-box__description{{#if modal-box-description--modifier}} {{modal-box-description--modifier}}{{/if}}"
+  {{#if modal-box-description--attribute}}
+    {{{modal-box-description--attribute}}}
+  {{/if}}>
+  {{> @partial-block}}
+</div>

src/patternfly/components/ModalBox/modal-box.scss

@@ -14,8 +14,12 @@
   --pf-c-modal-box--m-lg--lg--MaxWidth: #{pf-size-prem(1120px)};
   --pf-c-modal-box--MaxHeight: calc(100vh - var(--pf-global--spacer--2xl)); // MaxHeight ensures that the modal will not go off the screen and instead the body will scroll
 
+  // Description
+  --pf-c-modal-box__c-title--description--MarginTop: var(--pf-global--spacer--sm);
+
   // Body
   --pf-c-modal-box--body--MinHeight: calc(var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md)); // Allow for at least 1 line of content in the body
+  --pf-c-modal-box__description--body--MarginTop: var(--pf-global--spacer--lg);
   --pf-c-modal-box--c-title--body--MarginTop: var(--pf-global--spacer--lg);
 
   // Close
@@ -70,17 +74,27 @@
     }
   }
 
-  .pf-c-title {
+  > .pf-c-title {
     @include pf-text-overflow;
 
     flex: 0 0 auto;
 
+    + .pf-c-modal-box__description {
+      margin-top: var(--pf-c-modal-box__c-title--description--MarginTop);
+    }
+
     + .pf-c-modal-box__body {
       margin-top: var(--pf-c-modal-box--c-title--body--MarginTop);
     }
   }
 }
 
+.pf-c-modal-box__description {
+  + .pf-c-modal-box__body {
+    margin-top: var(--pf-c-modal-box__description--body--MarginTop);
+  }
+}
+
 // Body
 .pf-c-modal-box__body {
   flex: 1 1 auto;

src/patternfly/demos/Modal/examples/Modal.md

@@ -42,8 +42,12 @@ section: demos
           <i class="fas fa-times" aria-hidden="true"></i>
         {{/button}}
         {{#> title titleType="h1" title--modifier="pf-m-2xl" title--attribute='id="modal-scroll-title"'}}
-          This is a long header title that will truncate because modal titles should be very short. Use the modal body to provide more info.        {{/title}}
-        {{#> modal-box-body modal-box-body--attribute='id="modal-scroll-description"'}}
+          This is a long header title that will truncate because modal titles should be very short. Use the modal body to provide more info.
+        {{/title}}
+        {{#> modal-box-description modal-box-description--attribute='id="modal-scroll-description"'}}
+          This is a modal description. The description will not scroll with the body contents.
+        {{/modal-box-description}}
+        {{#> modal-box-body}}
           <p>general_modal_final_finalfinal_v9_actualfinal.sketch</p>
           <p>A file with this name already exists, would you like to overwrite the existing file or save a new copy?</p>
           <p>Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Integer tincidunt. Integer tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>