feat(drawer): Allow customizing drawer width (#3459)

material-components · Aug 30, 2018 · 247f75f · 247f75f
1 parent 60cf6c5
commit 247f75f
Show file tree

Hide file tree

Showing 14 changed files with 451 additions and 246 deletions.
diff --git a/demos/drawer/drawer.scss b/demos/drawer/drawer.scss
@@ -78,6 +78,7 @@
 }
 
 .demo-content {
+  position: relative;
   flex: auto;
   overflow: auto;
   background: #fff;

diff --git a/demos/drawer/permanent-drawer.html b/demos/drawer/permanent-drawer.html
@@ -104,11 +104,14 @@ <h6 class="mdc-list-group__subheader">Labels</h6>
       </div>
     </aside>
     <div class="demo-content" id="demo-content">
-      <header class="mdc-top-app-bar" id="app-bar">
+      <header class="mdc-top-app-bar demo-top-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">
             <span class="mdc-top-app-bar__title">Permanent Drawer</span>
           </section>
+          <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
+            <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
+          </section>
         </div>
       </header>
 

diff --git a/packages/mdc-drawer/README.md b/packages/mdc-drawer/README.md
@@ -335,6 +335,7 @@ Mixin | Description
 `mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.
 `mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.
 `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.
+`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`.
 
 ## Accessibility
 

diff --git a/packages/mdc-drawer/_mixins.scss b/packages/mdc-drawer/_mixins.scss
@@ -122,3 +122,11 @@
 @mixin mdc-drawer-z-index($value) {
   z-index: $value;
 }
+
+@mixin mdc-drawer-width($width) {
+  width: $width;
+
+  &.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content {
+    @include mdc-rtl-reflexive-box(margin, left, $width);
+  }
+}
diff --git a/packages/mdc-drawer/common.scss b/packages/mdc-drawer/common.scss
@@ -41,13 +41,12 @@
   @include mdc-drawer-item-activated-text-ink-color($mdc-drawer-item-activated-ink-color);
   @include mdc-drawer-item-corner-radius(4px);
   @include mdc-drawer-z-index($mdc-drawer-z-index);
+  @include mdc-drawer-width($mdc-drawer-width);
 
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
   box-sizing: border-box;
-  width: $mdc-drawer-width;
-  max-width: $mdc-drawer-width;
   height: 100%;
   transition-property: transform;
   transition-timing-function: $mdc-animation-standard-curve-timing-function;

diff --git a/packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss b/packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss
@@ -42,10 +42,6 @@
 
   position: relative;
 
-  .mdc-drawer--open + & {
-    @include mdc-rtl-reflexive-box(margin, left, $mdc-drawer-width);
-  }
-
   .mdc-drawer--closing + & {
     @include mdc-rtl-reflexive-box(margin, left, 0);
   }

diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
@@ -198,48 +198,57 @@
     }
   },
   "spec/mdc-drawer/classes/dismissible.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/dismissible.html",
+    "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",
     "screenshots": {
-      "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",
-      "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",
-      "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",
-      "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"
+      "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",
+      "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",
+      "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",
+      "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"
     }
   },
   "spec/mdc-drawer/classes/modal.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/modal.html",
+    "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",
     "screenshots": {
-      "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",
-      "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",
-      "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",
-      "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"
+      "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",
+      "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",
+      "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",
+      "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"
     }
   },
   "spec/mdc-drawer/classes/permanent.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/29/10_31_51_582/spec/mdc-drawer/classes/permanent.html",
+    "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",
     "screenshots": {
-      "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",
-      "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",
-      "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",
-      "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"
+      "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",
+      "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",
+      "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",
+      "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"
     }
   },
   "spec/mdc-drawer/mixins/fill-color-accessible.html": {
-    "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",
+    "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",
     "screenshots": {
-      "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",
-      "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",
-      "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",
-      "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"
+      "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",
+      "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",
+      "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",
+      "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"
     }
   },
   "spec/mdc-drawer/mixins/fill-color.html": {
-    "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",
+    "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",
     "screenshots": {
-      "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",
-      "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",
-      "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",
-      "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"
+      "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",
+      "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",
+      "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",
+      "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"
+    }
+  },
+  "spec/mdc-drawer/mixins/width.html": {
+    "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",
+    "screenshots": {
+      "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",
+      "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",
+      "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",
+      "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"
     }
   },
   "spec/mdc-elevation/classes/baseline-large.html": {

diff --git a/test/screenshot/spec/mdc-drawer/classes/dismissible.html b/test/screenshot/spec/mdc-drawer/classes/dismissible.html
@@ -48,58 +48,63 @@
           <div class="mdc-drawer__title">Title here</div>
           <div class="mdc-drawer__subtitle">Subtext</div>
         </header>
-        <nav class="mdc-list">
-          <a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true" tabindex="0">
-            <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">star</i>
-            <span class="mdc-list-item__text">Star</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">Sent Mail</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 class="mdc-drawer__content">
+          <nav class="mdc-list">
+            <a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true" tabindex="0">
+              <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">star</i>
+              <span class="mdc-list-item__text">Star</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">Sent Mail</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>
 
-          <hr class="mdc-list-divider">
-          <h6 class="mdc-list-group__subheader">Labels</h6>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
-            <span class="mdc-list-item__text">Family</span>
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
-            <span class="mdc-list-item__text">Friends</span>
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
-            <span class="mdc-list-item__text">Work</span>
-          </a>
+            <hr class="mdc-list-divider">
+            <h6 class="mdc-list-group__subheader">Labels</h6>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
+              <span class="mdc-list-item__text">Family</span>
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
+              <span class="mdc-list-item__text">Friends</span>
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
+              <span class="mdc-list-item__text">Work</span>
+            </a>
 
-          <hr class="mdc-list-divider">
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
-            <span class="mdc-list-item__text">Settings</span>
-          </a>
-          <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>
-            <span class="mdc-list-item__text">Help & feedback</span>
-          </a>
-        </nav>
+            <hr class="mdc-list-divider">
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
+              <span class="mdc-list-item__text">Settings</span>
+            </a>
+            <a class="mdc-list-item" href="#">
+              <i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>
+              <span class="mdc-list-item__text">Help & feedback</span>
+            </a>
+          </nav>
+        </div>
       </aside>
 
       <div class="mdc-drawer-app-content test-drawer-app-content">
-        <header class="mdc-top-app-bar">
+        <header class="mdc-top-app-bar test-drawer-top-app-bar">
           <div class="mdc-top-app-bar__row">
             <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
               <button class="material-icons mdc-top-app-bar__navigation-icon" id="test-drawer-menu-button">menu</button>
               <span class="mdc-top-app-bar__title">Dismissible Drawer</span>
             </section>
+            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
+              <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
+            </section>
           </div>
         </header>