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

Commit 247f75f

Browse files
abhiomkarabhiomkar
authored
feat(drawer): Allow customizing drawer width (#3459)
1 parent 60cf6c5 commit 247f75f

File tree

14 files changed

+451
-246
lines changed

14 files changed

+451
-246
lines changed

‎demos/drawer/drawer.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@
7878
}
7979

8080
.demo-content {
81+
position: relative;
8182
flex: auto;
8283
overflow: auto;
8384
background: #fff;

‎demos/drawer/permanent-drawer.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,11 +104,14 @@ <h6 class="mdc-list-group__subheader">Labels</h6>
104104
</div>
105105
</aside>
106106
<div class="demo-content" id="demo-content">
107-
<header class="mdc-top-app-bar" id="app-bar">
107+
<header class="mdc-top-app-bar demo-top-app-bar" id="app-bar">
108108
<div class="mdc-top-app-bar__row">
109109
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
110110
<span class="mdc-top-app-bar__title">Permanent Drawer</span>
111111
</section>
112+
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
113+
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
114+
</section>
112115
</div>
113116
</header>
114117

‎packages/mdc-drawer/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -335,6 +335,7 @@ Mixin | Description
335335
`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.
336336
`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.
337337
`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.
338+
`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.
338339

339340
## Accessibility
340341

‎packages/mdc-drawer/_mixins.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,3 +122,11 @@
122122
@mixin mdc-drawer-z-index($value) {
123123
z-index: $value;
124124
}
125+
126+
@mixin mdc-drawer-width($width) {
127+
width: $width;
128+
129+
&.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content {
130+
@include mdc-rtl-reflexive-box(margin, left, $width);
131+
}
132+
}

‎packages/mdc-drawer/common.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,12 @@
4141
@include mdc-drawer-item-activated-text-ink-color($mdc-drawer-item-activated-ink-color);
4242
@include mdc-drawer-item-corner-radius(4px);
4343
@include mdc-drawer-z-index($mdc-drawer-z-index);
44+
@include mdc-drawer-width($mdc-drawer-width);
4445

4546
display: flex;
4647
flex-direction: column;
4748
flex-shrink: 0;
4849
box-sizing: border-box;
49-
width: $mdc-drawer-width;
50-
max-width: $mdc-drawer-width;
5150
height: 100%;
5251
transition-property: transform;
5352
transition-timing-function: $mdc-animation-standard-curve-timing-function;

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,6 @@
4242

4343
position: relative;
4444

45-
.mdc-drawer--open + & {
46-
@include mdc-rtl-reflexive-box(margin, left, $mdc-drawer-width);
47-
}
48-
4945
.mdc-drawer--closing + & {
5046
@include mdc-rtl-reflexive-box(margin, left, 0);
5147
}

‎test/screenshot/golden.json

Lines changed: 34 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -198,48 +198,57 @@
198198
}
199199
},
200200
"spec/mdc-drawer/classes/dismissible.html": {
201-
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/dismissible.html",
201+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/dismissible.html?utm_source=golden_json",
202202
"screenshots": {
203-
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/dismissible.html.windows_chrome_68.png",
204-
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/dismissible.html.windows_edge_17.png",
205-
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/dismissible.html.windows_firefox_61.png",
206-
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/dismissible.html.windows_ie_11.png"
203+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/dismissible.html.windows_chrome_68.png",
204+
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/dismissible.html.windows_edge_17.png",
205+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/dismissible.html.windows_firefox_61.png",
206+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/dismissible.html.windows_ie_11.png"
207207
}
208208
},
209209
"spec/mdc-drawer/classes/modal.html": {
210-
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/modal.html",
210+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/modal.html?utm_source=golden_json",
211211
"screenshots": {
212-
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/modal.html.windows_chrome_68.png",
213-
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/modal.html.windows_edge_17.png",
214-
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/modal.html.windows_firefox_61.png",
215-
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/modal.html.windows_ie_11.png"
212+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/modal.html.windows_chrome_68.png",
213+
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/modal.html.windows_edge_17.png",
214+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/modal.html.windows_firefox_61.png",
215+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/modal.html.windows_ie_11.png"
216216
}
217217
},
218218
"spec/mdc-drawer/classes/permanent.html": {
219-
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/permanent.html",
219+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/permanent.html?utm_source=golden_json",
220220
"screenshots": {
221-
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/permanent.html.windows_chrome_68.png",
222-
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/permanent.html.windows_edge_17.png",
223-
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/permanent.html.windows_firefox_61.png",
224-
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/permanent.html.windows_ie_11.png"
221+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/permanent.html.windows_chrome_68.png",
222+
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/permanent.html.windows_edge_17.png",
223+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/permanent.html.windows_firefox_61.png",
224+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/classes/permanent.html.windows_ie_11.png"
225225
}
226226
},
227227
"spec/mdc-drawer/mixins/fill-color-accessible.html": {
228-
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color-accessible.html",
228+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color-accessible.html?utm_source=golden_json",
229229
"screenshots": {
230-
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_chrome_68.png",
231-
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_edge_17.png",
232-
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_firefox_61.png",
233-
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_ie_11.png"
230+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_chrome_68.png",
231+
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_edge_17.png",
232+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_firefox_61.png",
233+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color-accessible.html.windows_ie_11.png"
234234
}
235235
},
236236
"spec/mdc-drawer/mixins/fill-color.html": {
237-
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color.html",
237+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color.html?utm_source=golden_json",
238238
"screenshots": {
239-
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color.html.windows_chrome_68.png",
240-
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color.html.windows_edge_17.png",
241-
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color.html.windows_firefox_61.png",
242-
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/mixins/fill-color.html.windows_ie_11.png"
239+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color.html.windows_chrome_68.png",
240+
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color.html.windows_edge_17.png",
241+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color.html.windows_firefox_61.png",
242+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/fill-color.html.windows_ie_11.png"
243+
}
244+
},
245+
"spec/mdc-drawer/mixins/width.html": {
246+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/width.html?utm_source=golden_json",
247+
"screenshots": {
248+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/width.html.windows_chrome_68.png",
249+
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/width.html.windows_edge_17.png",
250+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/width.html.windows_firefox_61.png",
251+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/08/29/20_29_11_479/spec/mdc-drawer/mixins/width.html.windows_ie_11.png"
243252
}
244253
},
245254
"spec/mdc-elevation/classes/baseline-large.html": {

‎test/screenshot/spec/mdc-drawer/classes/dismissible.html

Lines changed: 47 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -48,58 +48,63 @@
4848
<div class="mdc-drawer__title">Title here</div>
4949
<div class="mdc-drawer__subtitle">Subtext</div>
5050
</header>
51-
<nav class="mdc-list">
52-
<a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true" tabindex="0">
53-
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
54-
<span class="mdc-list-item__text">Inbox</span>
55-
</a>
56-
<a class="mdc-list-item" href="#">
57-
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
58-
<span class="mdc-list-item__text">Star</span>
59-
</a>
60-
<a class="mdc-list-item" href="#">
61-
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
62-
<span class="mdc-list-item__text">Sent Mail</span>
63-
</a>
64-
<a class="mdc-list-item" href="#">
65-
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
66-
<span class="mdc-list-item__text">Drafts</span>
67-
</a>
51+
<div class="mdc-drawer__content">
52+
<nav class="mdc-list">
53+
<a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true" tabindex="0">
54+
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
55+
<span class="mdc-list-item__text">Inbox</span>
56+
</a>
57+
<a class="mdc-list-item" href="#">
58+
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
59+
<span class="mdc-list-item__text">Star</span>
60+
</a>
61+
<a class="mdc-list-item" href="#">
62+
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
63+
<span class="mdc-list-item__text">Sent Mail</span>
64+
</a>
65+
<a class="mdc-list-item" href="#">
66+
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
67+
<span class="mdc-list-item__text">Drafts</span>
68+
</a>
6869

69-
<hr class="mdc-list-divider">
70-
<h6 class="mdc-list-group__subheader">Labels</h6>
71-
<a class="mdc-list-item" href="#">
72-
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
73-
<span class="mdc-list-item__text">Family</span>
74-
</a>
75-
<a class="mdc-list-item" href="#">
76-
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
77-
<span class="mdc-list-item__text">Friends</span>
78-
</a>
79-
<a class="mdc-list-item" href="#">
80-
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
81-
<span class="mdc-list-item__text">Work</span>
82-
</a>
70+
<hr class="mdc-list-divider">
71+
<h6 class="mdc-list-group__subheader">Labels</h6>
72+
<a class="mdc-list-item" href="#">
73+
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
74+
<span class="mdc-list-item__text">Family</span>
75+
</a>
76+
<a class="mdc-list-item" href="#">
77+
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
78+
<span class="mdc-list-item__text">Friends</span>
79+
</a>
80+
<a class="mdc-list-item" href="#">
81+
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
82+
<span class="mdc-list-item__text">Work</span>
83+
</a>
8384

84-
<hr class="mdc-list-divider">
85-
<a class="mdc-list-item" href="#">
86-
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
87-
<span class="mdc-list-item__text">Settings</span>
88-
</a>
89-
<a class="mdc-list-item" href="#">
90-
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>
91-
<span class="mdc-list-item__text">Help & feedback</span>
92-
</a>
93-
</nav>
85+
<hr class="mdc-list-divider">
86+
<a class="mdc-list-item" href="#">
87+
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
88+
<span class="mdc-list-item__text">Settings</span>
89+
</a>
90+
<a class="mdc-list-item" href="#">
91+
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>
92+
<span class="mdc-list-item__text">Help & feedback</span>
93+
</a>
94+
</nav>
95+
</div>
9496
</aside>
9597

9698
<div class="mdc-drawer-app-content test-drawer-app-content">
97-
<header class="mdc-top-app-bar">
99+
<header class="mdc-top-app-bar test-drawer-top-app-bar">
98100
<div class="mdc-top-app-bar__row">
99101
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
100102
<button class="material-icons mdc-top-app-bar__navigation-icon" id="test-drawer-menu-button">menu</button>
101103
<span class="mdc-top-app-bar__title">Dismissible Drawer</span>
102104
</section>
105+
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
106+
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
107+
</section>
103108
</div>
104109
</header>
105110

0 commit comments

Comments
 (0)