fix(toolbar): Fix icon padding for ripples, and vertical alignment in…

… FF/IE/Edge (#2138)
material-components · Feb 23, 2018 · d2c9726 · d2c9726
1 parent b996b7f
commit d2c9726
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 37 deletions.
diff --git a/demos/toolbar/index.html b/demos/toolbar/index.html
@@ -189,6 +189,7 @@ <h2 class="demo-toolbar-example-heading">
       </section>
     </main>
 
+    <script src="/assets/material-components-web.js" async></script>
     <script src="/assets/common.js" async></script>
     <script>
       [].forEach.call(document.querySelectorAll('.examples button'), function(button) {
@@ -197,6 +198,10 @@ <h2 class="demo-toolbar-example-heading">
           iframeMainEl.setAttribute('dir', iframeMainEl.getAttribute('dir') === 'rtl' ? 'ltr' : 'rtl');
         });
       });
+
+      demoReady(function() {
+        mdc.toolbar.MDCToolbar.attachTo(document.querySelector('.hero .mdc-toolbar'));
+      });
     </script>
   </body>
 </html>
diff --git a/demos/toolbar/toolbar.scss b/demos/toolbar/toolbar.scss
@@ -18,6 +18,7 @@
 @import "../../packages/mdc-button/mdc-button";
 @import "../../packages/mdc-list/mdc-list";
 @import "../../packages/mdc-menu/mdc-menu";
+@import "../../packages/mdc-ripple/mdc-ripple";
 @import "../../packages/mdc-theme/color-palette";
 
 .demo-toolbar-example-heading {

diff --git a/packages/mdc-toolbar/_mixins.scss b/packages/mdc-toolbar/_mixins.scss
@@ -32,10 +32,15 @@
 @mixin mdc-toolbar-fill-color-accessible($color) {
   @include mdc-toolbar-fill-color($color);
   @include mdc-toolbar-ink-color(mdc-theme-accessible-ink-color($color));
+
+  .mdc-toolbar__icon {
+    @include mdc-toolbar-icon-ink-color(mdc-theme-accessible-ink-color($color));
+  }
 }
 
 @mixin mdc-toolbar-icon-ink-color($color) {
   @include mdc-theme-prop(color, $color);
+  @include mdc-states($color);
 }
 
 //
@@ -46,11 +51,20 @@
 // Both .mdc-toolbar__icon and .mdc-toolbar__menu-icon share all styles except for
 // horizontal padding.
 @mixin mdc-toolbar-icon_() {
+  @include mdc-ripple-surface;
+  @include mdc-ripple-radius-unbounded;
+
+  // mdc-states is included within the mdc-toolbar-icon-ink-color mixin
+
   display: flex;
-  align-items: center;
+  position: relative;
+  align-items: start;
   justify-content: center;
-  padding: $mdc-toolbar-element-vertical-padding;
+  width: $mdc-toolbar-icon-size;
+  height: $mdc-toolbar-icon-size;
+  padding: $mdc-toolbar-icon-padding;
   border: none;
+  outline: none;
   background-color: transparent;
   color: inherit;
   text-decoration: none;

diff --git a/packages/mdc-toolbar/_variables.scss b/packages/mdc-toolbar/_variables.scss
@@ -18,7 +18,9 @@ $mdc-toolbar-row-height: 64px;
 $mdc-toolbar-mobile-row-height: 56px;
 $mdc-toolbar-mobile-landscape-row-height: 48px;
 
-$mdc-toolbar-element-vertical-padding: 16px;
+$mdc-toolbar-element-section-padding: 8px;
+$mdc-toolbar-element-mobile-section-padding: 4px;
+
 $mdc-toolbar-element-horizontal-padding-desktop: 24px;
 $mdc-toolbar-element-horizontal-padding-mobile: 16px;
 $mdc-toolbar-title-margin-to-menu-icon-desktop: 8px;
@@ -28,3 +30,9 @@ $mdc-toolbar-ratio-to-extend-flexible: 4 !default;
 
 $mdc-toolbar-mobile-landscape-width-breakpoint: 959px;
 $mdc-toolbar-mobile-breakpoint: 599px;
+
+$mdc-toolbar-icon-padding: 12px;
+$mdc-toolbar-section-horizontal-padding: 12px;
+$mdc-toolbar-mobile-section-horizontal-padding: 4px;
+
+$mdc-toolbar-icon-size: 24px;
diff --git a/packages/mdc-toolbar/constants.js b/packages/mdc-toolbar/constants.js
@@ -26,6 +26,7 @@ export const cssClasses = {
 
 export const strings = {
   TITLE_SELECTOR: '.mdc-toolbar__title',
+  ICON_SELECTOR: '.mdc-toolbar__icon',
   FIRST_ROW_SELECTOR: '.mdc-toolbar__row:first-child',
   CHANGE_EVENT: 'MDCToolbar:change',
 };

diff --git a/packages/mdc-toolbar/index.js b/packages/mdc-toolbar/index.js
@@ -15,6 +15,7 @@
  */
 
 import {MDCComponent} from '@material/base/index';
+import {MDCRipple} from '@material/ripple/index';
 
 import MDCToolbarFoundation from './foundation';
 import * as util from './util';
@@ -44,6 +45,22 @@ export class MDCToolbar extends MDCComponent {
     return this.fixedAdjustElement_;
   }
 
+  initialize() {
+    this.ripples_ = [].map.call(this.root_.querySelectorAll(MDCToolbarFoundation.strings.ICON_SELECTOR), (icon) => {
+      const ripple = MDCRipple.attachTo(icon);
+      ripple.unbounded = true;
+      return ripple;
+    });
+  }
+
+  destroy() {
+    this.ripples_.forEach((ripple) => {
+      ripple.destroy();
+    });
+    super.destroy();
+  }
+
+
   getDefaultFoundation() {
     return new MDCToolbarFoundation({
       hasClass: (className) => this.root_.classList.contains(className),

diff --git a/packages/mdc-toolbar/mdc-toolbar.scss b/packages/mdc-toolbar/mdc-toolbar.scss
@@ -15,6 +15,7 @@
 //
 
 @import "@material/elevation/mixins";
+@import "@material/ripple/mixins";
 @import "@material/rtl/mixins";
 @import "@material/theme/mixins";
 @import "@material/typography/mixins";
@@ -56,20 +57,53 @@
   &__section {
     display: inline-flex;
     flex: 1;
-    align-items: flex-start;
+    align-items: start;
     justify-content: center;
+    box-sizing: border-box;
     min-width: 0;
     height: 100%;
+    padding: $mdc-toolbar-element-section-padding;
     z-index: 1;
 
+    @media (max-width: $mdc-toolbar-mobile-landscape-width-breakpoint)
+      and (orientation: landscape) {
+      padding: 0 0;
+    }
+
+    @media (max-width: $mdc-toolbar-mobile-breakpoint) {
+      padding: $mdc-toolbar-element-mobile-section-padding 0;
+    }
+
     &--align-start {
+      @include mdc-rtl-reflexive-box(padding, "left", $mdc-toolbar-section-horizontal-padding);
+
       justify-content: flex-start;
       order: -1;
+
+      @media (max-width: $mdc-toolbar-mobile-landscape-width-breakpoint)
+        and (orientation: landscape) {
+        @include mdc-rtl-reflexive-box(padding, "left", $mdc-toolbar-mobile-section-horizontal-padding);
+      }
+
+      @media (max-width: $mdc-toolbar-mobile-breakpoint) {
+        @include mdc-rtl-reflexive-box(padding, "left", $mdc-toolbar-mobile-section-horizontal-padding);
+      }
     }
 
     &--align-end {
+      @include mdc-rtl-reflexive-box(padding, "right", $mdc-toolbar-section-horizontal-padding);
+
       justify-content: flex-end;
       order: 1;
+
+      @media (max-width: $mdc-toolbar-mobile-landscape-width-breakpoint)
+        and (orientation: landscape) {
+        @include mdc-rtl-reflexive-box(padding, "right", $mdc-toolbar-mobile-section-horizontal-padding);
+      }
+
+      @media (max-width: $mdc-toolbar-mobile-breakpoint) {
+        @include mdc-rtl-reflexive-box(padding, "right", $mdc-toolbar-mobile-section-horizontal-padding);
+      }
     }
   }
 
@@ -79,27 +113,14 @@
     @include mdc-rtl-reflexive-box(margin, left, $mdc-toolbar-element-horizontal-padding-desktop);
 
     align-self: center;
-    padding: $mdc-toolbar-element-vertical-padding 0;
+    padding: 12px 0;
     line-height: 1.5rem;
     z-index: 1;
   }
 
-  &__icon {
-    @include mdc-toolbar-icon_;
-
-    padding-right: $mdc-toolbar-element-horizontal-padding-desktop / 2;
-    padding-left: $mdc-toolbar-element-horizontal-padding-desktop / 2;
-  }
-
-  &__icon:last-of-type {
-    @include mdc-rtl-reflexive-property(padding, $mdc-toolbar-element-horizontal-padding-desktop / 2, $mdc-toolbar-element-horizontal-padding-desktop);
-  }
-
+  &__icon,
   &__menu-icon {
     @include mdc-toolbar-icon_;
-
-    padding-right: $mdc-toolbar-element-horizontal-padding-desktop;
-    padding-left: $mdc-toolbar-element-horizontal-padding-desktop;
   }
 }
 
@@ -111,24 +132,6 @@
   .mdc-toolbar__title {
     @include mdc-rtl-reflexive-box(margin, left, $mdc-toolbar-element-horizontal-padding-mobile);
   }
-
-  .mdc-toolbar__icon {
-    padding-right: $mdc-toolbar-element-horizontal-padding-mobile / 2;
-    padding-left: $mdc-toolbar-element-horizontal-padding-mobile / 2;
-  }
-
-  .mdc-toolbar__icon:last-of-type {
-    @include mdc-rtl-reflexive-property(padding, $mdc-toolbar-element-horizontal-padding-mobile / 2, $mdc-toolbar-element-horizontal-padding-mobile);
-  }
-
-  .mdc-toolbar__menu-icon {
-    padding-right: $mdc-toolbar-element-horizontal-padding-mobile;
-    padding-left: $mdc-toolbar-element-horizontal-padding-mobile;
-  }
-
-  .mdc-toolbar__menu-icon + .mdc-toolbar__title {
-    @include mdc-rtl-reflexive-box(margin, left, $mdc-toolbar-title-margin-to-menu-icon-mobile);
-  }
 }
 
 .mdc-toolbar--fixed {

diff --git a/packages/mdc-toolbar/package.json b/packages/mdc-toolbar/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "@material/base": "^0.29.0",
     "@material/elevation": "^0.28.0",
+    "@material/ripple": "^0.31.0",
     "@material/rtl": "^0.30.0",
     "@material/theme": "^0.30.0",
     "@material/typography": "^0.28.0"