Skip to content

Commit

Permalink
fix(drawer): allow drawer below top app bar (#4028)
Browse files Browse the repository at this point in the history
  • Loading branch information
Matt Goo authored Nov 7, 2018
1 parent acb9443 commit ebdb084
Show file tree
Hide file tree
Showing 7 changed files with 340 additions and 32 deletions.
50 changes: 49 additions & 1 deletion packages/mdc-drawer/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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.
Expand All @@ -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:
Expand Down
1 change: 0 additions & 1 deletion packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@

display: none;
position: absolute;
top: 0;

&.mdc-drawer--open {
display: flex;
Expand Down
16 changes: 12 additions & 4 deletions test/screenshot/golden.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down Expand Up @@ -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": {
Expand Down
55 changes: 29 additions & 26 deletions test/screenshot/spec/mdc-dialog/classes/baseline-alert-above-drawer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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. -->
Expand Down
14 changes: 14 additions & 0 deletions test/screenshot/spec/mdc-dialog/fixture.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
Loading

0 comments on commit ebdb084

Please sign in to comment.