WIP: Work on closure

material-components · Feb 15, 2018 · 5b47a3f · 5b47a3f
1 parent 9778668
commit 5b47a3f
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 25 deletions.
diff --git a/packages/mdc-top-app-bar/_mixins.scss b/packages/mdc-top-app-bar/_mixins.scss
@@ -57,6 +57,7 @@
  display: flex;
  align-items: center;
  justify-content: center;
+ padding: $mdc-top-app-bar-icon-padding;
  border: none;
  background-color: transparent;
  color: inherit;

diff --git a/packages/mdc-top-app-bar/_variables.scss b/packages/mdc-top-app-bar/_variables.scss
@@ -15,15 +15,18 @@
 //
 
 $mdc-top-app-bar-row-height: 64px;
-$mdc-top-app-bar-icon-vertical-padding: 20px;
+$mdc-top-app-bar-icon-vertical-padding: 8px;
 $mdc-top-app-bar-icon-horizontal-padding: 24px;
 $mdc-top-app-bar-title-left-padding: 8px;
 $mdc-top-app-bar-section-horizontal-padding: 12px;
 
+$mdc-top-app-bar-icon-padding: 12px;
+
 $mdc-top-app-bar-mobile-breakpoint: 599px;
 
 $mdc-top-app-bar-mobile-row-height: 56px;
-$mdc-top-app-bar-mobile-icon-vertical-padding: 16px;
+$mdc-top-app-bar-mobile-icon-vertical-padding: 4px;
 $mdc-top-app-bar-mobile-icon-horizontal-padding: 24px;
 $mdc-top-app-bar-mobile-title-left-padding: 8px;
 $mdc-top-app-bar-mobile-section-horizontal-padding: 4px;
+
diff --git a/packages/mdc-top-app-bar/foundation.js b/packages/mdc-top-app-bar/foundation.js
@@ -20,7 +20,7 @@ import MDCTopAppBarAdapter from './adapter';
 import MDCFoundation from '@material/base/foundation';
 
 /**
- * @extends {MDCFoundation<!MDCTopAppBarFoundation>}
+ * @extends {MDCFoundation<!MDCTopAppBarAdapter>}
  * @final
  */
 class MDCTopAppBarFoundation extends MDCFoundation {

diff --git a/packages/mdc-top-app-bar/index.js b/packages/mdc-top-app-bar/index.js
@@ -1,4 +1,5 @@
 /**
+ * @license
  * Copyright 2018 Google Inc. All Rights Reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -21,7 +22,7 @@ import {MDCRipple} from '@material/ripple/index';
 import {strings} from './constants';
 
 /**
- * @extends {MDCComponent<!MDCTopAppBar>}
+ * @extends {MDCComponent<!MDCTopAppBarFoundation>}
  * @final
  */
 class MDCTopAppBar extends MDCComponent {
@@ -30,10 +31,11 @@ class MDCTopAppBar extends MDCComponent {
  */
  constructor(...args) {
  super(...args);
+ /** @private {?Element} */
  this.navIcon_;
- /** @private {Array} */
+ /** @type {?Array<MDCRipple>} */
  this.iconRipples_;
- /** @private {EventListener} */
+ /** @private {function(!Event)} */
  this.navIconClick_;
  }
 
@@ -46,10 +48,10 @@ class MDCTopAppBar extends MDCComponent {
  }
 
  // Get all icons in the toolbar and instantiate the ripples
- this.iconRipples_ = [].slice.call(this.root_.querySelectorAll(strings.ACTION_ICON_SELECTOR));
- this.iconRipples_.push(this.navIcon_);
+ const icons = [].slice.call(this.root_.querySelectorAll(strings.ACTION_ICON_SELECTOR));
+ icons.push(this.navIcon_);
 
- this.iconRipples_.map(function(icon) {
+ this.iconRipples_ = icons.map(function(icon) {
  const ripple = MDCRipple.attachTo(icon);
  ripple.unbounded = true;
  return ripple;
@@ -61,13 +63,17 @@ class MDCTopAppBar extends MDCComponent {
  this.navIcon_.removeEventListener('click', this.navIconClick_);
  }
 
- this.iconRipples_.slice.call(function(iconRipple) {
+ this.iconRipples_.forEach(function(iconRipple) {
  iconRipple.destroy();
  });
  }
 
- navigationEvent_() {
- this.emit(strings.NAVIGATION_EVENT, {});
+ /**
+ * @param {!Event} event
+ * @private
+ */
+ navigationEvent_(event) {
+ this.emit(strings.NAVIGATION_EVENT, event);
  }
 
  /**
@@ -93,4 +99,4 @@ class MDCTopAppBar extends MDCComponent {
  }
 }
 
-export {MDCTopAppBar};
+export {MDCTopAppBar, MDCTopAppBarFoundation};
diff --git a/packages/mdc-top-app-bar/mdc-top-app-bar.scss b/packages/mdc-top-app-bar/mdc-top-app-bar.scss
@@ -73,16 +73,10 @@
 
  &__icon {
  @include mdc-top-app-bar-icon_;
-
- padding-right: $mdc-top-app-bar-icon-horizontal-padding / 2;
- padding-left: $mdc-top-app-bar-icon-horizontal-padding / 2;
  }
 
  &__menu-icon {
  @include mdc-top-app-bar-icon_;
-
- padding-right: $mdc-top-app-bar-icon-horizontal-padding / 2;
- padding-left: $mdc-top-app-bar-icon-horizontal-padding / 2;
  }
 
  @media (max-width: $mdc-top-app-bar-mobile-breakpoint) {
@@ -97,11 +91,5 @@
  .mdc-top-app-bar__title {
  @include mdc-rtl-reflexive-box(margin, left, $mdc-top-app-bar-mobile-title-left-padding);
  }
-
- .mdc-top-app-bar__icon,
- .mdc-top-app-bar__menu-icon {
- padding-right: $mdc-top-app-bar-mobile-icon-horizontal-padding / 2;
- padding-left: $mdc-top-app-bar-mobile-icon-horizontal-padding / 2;
- }
  }
 }