Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit ebdb084

Browse files
author
Matt Goo
authoredNov 7, 2018
fix(drawer): allow drawer below top app bar (#4028)
1 parent acb9443 commit ebdb084

File tree

7 files changed

+340
-32
lines changed

7 files changed

+340
-32
lines changed
 

‎packages/mdc-drawer/README.md

+49-1
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,8 @@ Dismissible drawers are by default hidden off screen, and can slide into view. D
197197
198198
#### Usage with Top App Bar
199199

200+
##### Dismissible Drawer Full Height Drawer
201+
200202
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.
201203

202204
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
241243
</body>
242244
```
243245

244-
The CSS to match it looks like this:
246+
##### Dismissible Drawer Below Top App Bar
247+
248+
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.
249+
250+
```html
251+
<body>
252+
<header class="mdc-top-app-bar app-bar" id="app-bar">
253+
<div class="mdc-top-app-bar__row">
254+
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
255+
<a href="#" class="demo-menu material-icons mdc-top-app-bar__navigation-icon">menu</a>
256+
<span class="mdc-top-app-bar__title">Dismissible Drawer</span>
257+
</section>
258+
</div>
259+
</header>
260+
<aside class="mdc-drawer mdc-drawer--dismissible mdc-top-app-bar--fixed-adjust">
261+
<div class="mdc-drawer__content">
262+
<div class="mdc-list">
263+
<a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true">
264+
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
265+
<span class="mdc-list-item__text">Inbox</span>
266+
</a>
267+
<a class="mdc-list-item" href="#">
268+
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
269+
<span class="mdc-list-item__text">Outgoing</span>
270+
</a>
271+
<a class="mdc-list-item" href="#">
272+
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
273+
<span class="mdc-list-item__text">Drafts</span>
274+
</a>
275+
</div>
276+
</div>
277+
</aside>
278+
279+
<div class="mdc-drawer-app-content mdc-top-app-bar--fixed-adjust">
280+
<main class="main-content" id="main-content">
281+
App Content
282+
</main>
283+
</div>
284+
</body>
285+
```
286+
287+
The CSS to match either case looks like this:
245288

246289
```scss
247290
// Note: these styles do not account for any paddings/margins that you may need.
@@ -265,6 +308,11 @@ body {
265308
.app-bar {
266309
position: absolute;
267310
}
311+
312+
// only apply this style if below top app bar
313+
.mdc-top-app-bar {
314+
z-index: 7;
315+
}
268316
```
269317

270318
The JavaScript to toggle the drawer when the navigation button is clicked looks like this:

‎packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss

-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@
3030

3131
display: none;
3232
position: absolute;
33-
top: 0;
3433

3534
&.mdc-drawer--open {
3635
display: flex;

‎test/screenshot/golden.json

+12-4
Original file line numberDiff line numberDiff line change
@@ -387,12 +387,12 @@
387387
}
388388
},
389389
"spec/mdc-dialog/classes/baseline-alert-above-drawer.html": {
390-
"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",
390+
"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",
391391
"screenshots": {
392-
"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",
392+
"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",
393393
"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",
394-
"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",
395-
"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"
394+
"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",
395+
"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"
396396
}
397397
},
398398
"spec/mdc-dialog/classes/baseline-alert-with-title.html": {
@@ -556,6 +556,14 @@
556556
"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"
557557
}
558558
},
559+
"spec/mdc-drawer/classes/dismissible-below-top-app-bar.html": {
560+
"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",
561+
"screenshots": {
562+
"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",
563+
"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",
564+
"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"
565+
}
566+
},
559567
"spec/mdc-drawer/classes/dismissible.html": {
560568
"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",
561569
"screenshots": {

‎test/screenshot/spec/mdc-dialog/classes/baseline-alert-above-drawer.html

+29-26
Original file line numberDiff line numberDiff line change
@@ -36,32 +36,7 @@
3636
</head>
3737

3838
<body class="test-container test-container--edge-fonts mdc-dialog-scroll-lock">
39-
<main class="test-viewport test-viewport--center">
40-
41-
<button class="test-dialog-open-button" data-test-dialog-id="test-dialog" autofocus>Open Dialog</button>
42-
43-
<div class="mdc-dialog mdc-dialog--open test-dialog"
44-
role="alertdialog"
45-
aria-modal="true"
46-
aria-describedby="test-dialog__content--alert"
47-
id="test-dialog">
48-
<div class="mdc-dialog__scrim"></div>
49-
<div class="mdc-dialog__container">
50-
<div class="mdc-dialog__surface">
51-
<div class="mdc-dialog__content test-dialog__content" id="test-dialog__content--alert">
52-
<div class="test-dialog__content-rect">Alert</div>
53-
</div>
54-
<footer class="mdc-dialog__actions">
55-
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
56-
<span class="test-font--redact-all">Cancel</span>
57-
</button>
58-
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
59-
<span class="test-font--redact-all">Discard</span>
60-
</button>
61-
</footer>
62-
</div>
63-
</div>
64-
</div>
39+
<main class="test-viewport test-viewport--drawer">
6540

6641
<aside class="mdc-drawer mdc-drawer--dismissible mdc-drawer--open">
6742
<header class="mdc-drawer__header">
@@ -114,6 +89,34 @@ <h6 class="mdc-list-group__subheader">Labels</h6>
11489
</nav>
11590
</div>
11691
</aside>
92+
<div class="mdc-drawer-app-content test-drawer-app-content--center">
93+
<div>
94+
<button class="test-dialog-open-button" data-test-dialog-id="test-dialog" autofocus>Open Dialog</button>
95+
</div>
96+
97+
<div class="mdc-dialog mdc-dialog--open test-dialog"
98+
role="alertdialog"
99+
aria-modal="true"
100+
aria-describedby="test-dialog__content--alert"
101+
id="test-dialog">
102+
<div class="mdc-dialog__scrim"></div>
103+
<div class="mdc-dialog__container">
104+
<div class="mdc-dialog__surface">
105+
<div class="mdc-dialog__content test-dialog__content" id="test-dialog__content--alert">
106+
<div class="test-dialog__content-rect">Alert</div>
107+
</div>
108+
<footer class="mdc-dialog__actions">
109+
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
110+
<span class="test-font--redact-all">Cancel</span>
111+
</button>
112+
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
113+
<span class="test-font--redact-all">Discard</span>
114+
</button>
115+
</footer>
116+
</div>
117+
</div>
118+
</div>
119+
</div>
117120
</main>
118121

119122
<!-- Automatically provides/replaces `Promise` if missing or broken. -->

‎test/screenshot/spec/mdc-dialog/fixture.scss

+14
Original file line numberDiff line numberDiff line change
@@ -88,3 +88,17 @@ $custom-dialog-color: $material-color-red-300;
8888
@include mdc-dialog-min-width(600px);
8989
@include mdc-dialog-max-width(300px, 30px);
9090
}
91+
92+
.test-viewport--drawer {
93+
display: flex;
94+
flex-direction: row;
95+
height: 100vh;
96+
overflow: hidden;
97+
}
98+
99+
.test-drawer-app-content--center {
100+
display: flex;
101+
align-items: center;
102+
justify-content: center;
103+
width: 100%;
104+
}

0 commit comments

Comments
 (0)