feat(modal): added align-top variation (#3435)

patternfly · Sep 10, 2020 · 65b5ccd · 65b5ccd
1 parent 719c302
commit 65b5ccd
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 2 deletions.
diff --git a/src/patternfly/components/ModalBox/examples/ModalBox.md b/src/patternfly/components/ModalBox/examples/ModalBox.md
@@ -179,10 +179,11 @@ 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. |
 | `.pf-c-modal-box__header` | `<header>` | Initiates a modal box header. **Required** if using a `.pf-c-modal-box__title`. |
-| `.pf-c-modal-box__title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`, `<div>` | Initiates a modal box title. |
-| `.pf-c-modal-box__description` | `<div>` | Initiates a modal box description. A modal title is **required** if using a modal description. |
+| `.pf-c-modal-box__title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`, `<div>` | Initiates a modal box title. **Required** if using a modal description. |
+| `.pf-c-modal-box__description` | `<div>` | Initiates a modal box description. |
 | `.pf-c-modal-box__body` | `<div>` | Initiates a modal box body. |
 | `.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-md` | `.pf-c-modal-box` | Modifies for a medium modal box width. |
 | `.pf-m-lg` | `.pf-c-modal-box` | Modifies for a large modal box width. |
+| `.pf-m-align-top` | `.pf-c-modal-box` | Modifies for top alignment.  |
diff --git a/src/patternfly/components/ModalBox/modal-box.scss b/src/patternfly/components/ModalBox/modal-box.scss
@@ -8,6 +8,15 @@
   --pf-c-modal-box--m-md--Width: #{pf-size-prem(840px)};
   --pf-c-modal-box--m-lg--lg--MaxWidth: #{pf-size-prem(1120px)};
   --pf-c-modal-box--MaxHeight: calc(100% - var(--pf-global--spacer--2xl)); // MaxHeight ensures that the modal will not go off the screen and instead the body will scroll
+  --pf-c-modal-box--m-align-top--spacer: var(--pf-global--spacer--sm);
+  --pf-c-modal-box--m-align-top--xl--spacer: var(--pf-global--spacer--xl);
+  --pf-c-modal-box--m-align-top--MarginTop: var(--pf-c-modal-box--m-align-top--spacer);
+  --pf-c-modal-box--m-align-top--MaxHeight: calc(100% - var(--pf-c-modal-box--m-align-top--spacer) * 2);
+  --pf-c-modal-box--m-align-top--MaxWidth: calc(100% - var(--pf-c-modal-box--m-align-top--spacer) * 2);
+
+  @media (min-width: $pf-global--breakpoint--xl) {
+    --pf-c-modal-box--m-align-top--spacer: var(--pf-c-modal-box--m-align-top--xl--spacer);
+  }
 
   // Header
   --pf-c-modal-box__header--PaddingTop: var(--pf-global--spacer--lg);
@@ -68,6 +77,13 @@
     --pf-c-modal-box--Width: var(--pf-c-modal-box--m-lg--lg--MaxWidth);
   }
 
+  &.pf-m-align-top {
+    align-self: flex-start;
+    max-width: var(--pf-c-modal-box--m-align-top--MaxWidth);
+    max-height: var(--pf-c-modal-box--m-align-top--MaxHeight);
+    margin-top: var(--pf-c-modal-box--m-align-top--MarginTop);
+  }
+
   // Close button
   > .pf-c-button {
     position: absolute;

diff --git a/src/patternfly/demos/Modal/examples/Modal.md b/src/patternfly/demos/Modal/examples/Modal.md
@@ -141,3 +141,35 @@ section: demos
   {{/backdrop}}
 {{/modal}}
 ```
+
+### Top aligned
+```hbs isFullscreen
+{{#> modal}}
+  {{#> backdrop}}
+    {{#> bullseye}}
+      {{#> modal-box modal-box--modifier="pf-m-sm pf-m-align-top" modal-box--attribute='aria-labelledby="modal-top-aligned-title" aria-describedby="modal-top-aligned-description"'}}
+        {{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close dialog"'}}
+          <i class="fas fa-times" aria-hidden="true"></i>
+        {{/button}}
+        {{#> modal-box-header}}
+          {{#> modal-box-title modal-box-title--attribute='id="modal-top-aligned-title"'}}
+            Modal header
+          {{/modal-box-title}}
+        {{/modal-box-header}}
+        {{#> modal-box-body}}
+          <p id="modal-top-aligned-description">The "aria-describedby" attribute can be applied to any text that adequately describes the modal's purpose. It does not have to be assigned to ".pf-c-modal-box__body"</p>
+          <p>Form here</p>
+        {{/modal-box-body}}
+        {{#> modal-box-footer}}
+          {{#> button button--modifier="pf-m-primary"}}
+            Save
+          {{/button}}
+          {{#> button button--modifier="pf-m-link"}}
+            Cancel
+          {{/button}}
+        {{/modal-box-footer}}
+      {{/modal-box}}
+    {{/bullseye}}
+  {{/backdrop}}
+{{/modal}}
+```