fix(drawer): allow drawer below top app bar (#4028)

(cherry picked from commit ebdb084)
material-components · Nov 14, 2018 · 1eff602 · 1eff602
1 parent 875b159
commit 1eff602
Show file tree

Hide file tree

Showing 7 changed files with 340 additions and 32 deletions.
diff --git a/packages/mdc-drawer/README.md b/packages/mdc-drawer/README.md
@@ -197,6 +197,8 @@ Dismissible drawers are by default hidden off screen, and can slide into view. D
 
 #### Usage with Top App Bar
 
+##### Dismissible Drawer Full Height Drawer
+
 In cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.
 
 In the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:
@@ -241,7 +243,48 @@ In the following example, the `mdc-drawer__content` and `main-content` elements
 </body>
 ```
 
-The CSS to match it looks like this:
+##### Dismissible Drawer Below Top App Bar
+
+In cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.
+
+```html
+<body>
+  <header class="mdc-top-app-bar app-bar" id="app-bar">
+    <div class="mdc-top-app-bar__row">
+      <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
+        <a href="#" class="demo-menu material-icons mdc-top-app-bar__navigation-icon">menu</a>
+        <span class="mdc-top-app-bar__title">Dismissible Drawer</span>
+      </section>
+    </div>
+  </header>
+  <aside class="mdc-drawer mdc-drawer--dismissible mdc-top-app-bar--fixed-adjust">
+    <div class="mdc-drawer__content">
+      <div class="mdc-list">
+        <a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true">
+          <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
+          <span class="mdc-list-item__text">Inbox</span>
+        </a>
+        <a class="mdc-list-item" href="#">
+          <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
+          <span class="mdc-list-item__text">Outgoing</span>
+        </a>
+        <a class="mdc-list-item" href="#">
+          <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
+          <span class="mdc-list-item__text">Drafts</span>
+        </a>
+      </div>
+    </div>
+  </aside>
+
+  <div class="mdc-drawer-app-content mdc-top-app-bar--fixed-adjust">
+    <main class="main-content" id="main-content">
+      App Content
+    </main>
+  </div>
+</body>
+```
+
+The CSS to match either case looks like this:
 
 ```scss
 // Note: these styles do not account for any paddings/margins that you may need.
@@ -265,6 +308,11 @@ body {
 .app-bar {
   position: absolute;
 }
+
+// only apply this style if below top app bar
+.mdc-top-app-bar {
+  z-index: 7;
+}
 ```
 
 The JavaScript to toggle the drawer when the navigation button is clicked looks like this:

diff --git a/packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss b/packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss
@@ -30,7 +30,6 @@
 
   display: none;
   position: absolute;
-  top: 0;
 
   &.mdc-drawer--open {
     display: flex;

diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
@@ -387,12 +387,12 @@
     }
   },
   "spec/mdc-dialog/classes/baseline-alert-above-drawer.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/21/16_50_45_748/spec/mdc-dialog/classes/baseline-alert-above-drawer.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/07/18_47_36_705/spec/mdc-dialog/classes/baseline-alert-above-drawer.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/21/16_50_45_748/spec/mdc-dialog/classes/baseline-alert-above-drawer.html.windows_chrome_69.png",
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/07/18_47_36_705/spec/mdc-dialog/classes/baseline-alert-above-drawer.html.windows_chrome_69.png",
       "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/21/16_50_45_748/spec/mdc-dialog/classes/baseline-alert-above-drawer.html.windows_edge_17.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/21/16_50_45_748/spec/mdc-dialog/classes/baseline-alert-above-drawer.html.windows_firefox_62.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/21/16_50_45_748/spec/mdc-dialog/classes/baseline-alert-above-drawer.html.windows_ie_11.png"
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/07/18_47_36_705/spec/mdc-dialog/classes/baseline-alert-above-drawer.html.windows_firefox_62.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/07/18_47_36_705/spec/mdc-dialog/classes/baseline-alert-above-drawer.html.windows_ie_11.png"
     }
   },
   "spec/mdc-dialog/classes/baseline-alert-with-title.html": {
@@ -556,6 +556,14 @@
       "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/21/16_50_45_748/spec/mdc-dialog/mixins/title-ink-color.html.windows_ie_11.png"
     }
   },
+  "spec/mdc-drawer/classes/dismissible-below-top-app-bar.html": {
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/06/18_54_18_117/spec/mdc-drawer/classes/dismissible-below-top-app-bar.html?utm_source=golden_json",
+    "screenshots": {
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/06/18_54_18_117/spec/mdc-drawer/classes/dismissible-below-top-app-bar.html.windows_chrome_69.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/06/18_54_18_117/spec/mdc-drawer/classes/dismissible-below-top-app-bar.html.windows_firefox_62.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/06/18_54_18_117/spec/mdc-drawer/classes/dismissible-below-top-app-bar.html.windows_ie_11.png"
+    }
+  },
   "spec/mdc-drawer/classes/dismissible.html": {
     "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/26/06_08_27_877/spec/mdc-drawer/classes/dismissible.html?utm_source=golden_json",
     "screenshots": {

diff --git a/test/screenshot/spec/mdc-dialog/classes/baseline-alert-above-drawer.html b/test/screenshot/spec/mdc-dialog/classes/baseline-alert-above-drawer.html
@@ -36,32 +36,7 @@
   </head>
 
   <body class="test-container test-container--edge-fonts mdc-dialog-scroll-lock">
-    <main class="test-viewport test-viewport--center">
-
-      <button class="test-dialog-open-button" data-test-dialog-id="test-dialog" autofocus>Open Dialog</button>
-
-      <div class="mdc-dialog mdc-dialog--open test-dialog"
-           role="alertdialog"
-           aria-modal="true"
-           aria-describedby="test-dialog__content--alert"
-           id="test-dialog">
-        <div class="mdc-dialog__scrim"></div>
-        <div class="mdc-dialog__container">
-          <div class="mdc-dialog__surface">
-            <div class="mdc-dialog__content test-dialog__content" id="test-dialog__content--alert">
-              <div class="test-dialog__content-rect">Alert</div>
-            </div>
-            <footer class="mdc-dialog__actions">
-              <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
-                <span class="test-font--redact-all">Cancel</span>
-              </button>
-              <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
-                <span class="test-font--redact-all">Discard</span>
-              </button>
-            </footer>
-          </div>
-        </div>
-      </div>
+    <main class="test-viewport test-viewport--drawer">
 
       <aside class="mdc-drawer mdc-drawer--dismissible mdc-drawer--open">
         <header class="mdc-drawer__header">
@@ -114,6 +89,34 @@ <h6 class="mdc-list-group__subheader">Labels</h6>
           </nav>
         </div>
       </aside>
+      <div class="mdc-drawer-app-content test-drawer-app-content--center">
+          <div>
+            <button class="test-dialog-open-button" data-test-dialog-id="test-dialog" autofocus>Open Dialog</button>
+          </div>
+
+          <div class="mdc-dialog mdc-dialog--open test-dialog"
+               role="alertdialog"
+               aria-modal="true"
+               aria-describedby="test-dialog__content--alert"
+               id="test-dialog">
+            <div class="mdc-dialog__scrim"></div>
+            <div class="mdc-dialog__container">
+              <div class="mdc-dialog__surface">
+                <div class="mdc-dialog__content test-dialog__content" id="test-dialog__content--alert">
+                  <div class="test-dialog__content-rect">Alert</div>
+                </div>
+                <footer class="mdc-dialog__actions">
+                  <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
+                    <span class="test-font--redact-all">Cancel</span>
+                  </button>
+                  <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
+                    <span class="test-font--redact-all">Discard</span>
+                  </button>
+                </footer>
+              </div>
+            </div>
+          </div>
+        </div>
     </main>
 
     <!-- Automatically provides/replaces `Promise` if missing or broken. -->

diff --git a/test/screenshot/spec/mdc-dialog/fixture.scss b/test/screenshot/spec/mdc-dialog/fixture.scss
@@ -88,3 +88,17 @@ $custom-dialog-color: $material-color-red-300;
   @include mdc-dialog-min-width(600px);
   @include mdc-dialog-max-width(300px, 30px);
 }
+
+.test-viewport--drawer {
+  display: flex;
+  flex-direction: row;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.test-drawer-app-content--center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}