Merge pull request #91 from material-components/sgomes-update-google-eslint

style(js): Update styling to match latest Google styleguide.

Author: sgomes

karma.conf.js

@@ -26,18 +26,18 @@ const SL_LAUNCHERS = {
     base: 'SauceLabs',
     browserName: 'chrome',
     version: 'latest',
-    platform: 'OS X 10.11'
+    platform: 'OS X 10.11',
   },
   'sl-chrome-beta': {
     base: 'SauceLabs',
     browserName: 'chrome',
-    version: 'beta'
+    version: 'beta',
   },
   'sl-chrome-previous': {
     base: 'SauceLabs',
     browserName: 'chrome',
     version: 'latest-1',
-    platform: 'OS X 10.11'
+    platform: 'OS X 10.11',
   },
   // NOTE(traviskaufman): Disabling firefox for now as it has been consistently flaky recently. See
   // https://github.com/material-components/material-components-web/issues/5
@@ -57,13 +57,13 @@ const SL_LAUNCHERS = {
     base: 'SauceLabs',
     browserName: 'internet explorer',
     version: '11',
-    platform: 'Windows 8.1'
+    platform: 'Windows 8.1',
   },
   'sl-android-stable': {
     base: 'SauceLabs',
     browserName: 'android',
-    version: '5.0'
-  }
+    version: '5.0',
+  },
   // NOTE(traviskaufman): Temporarily disabling these browsers as they are consistently flaky using
   // Sauce Labs and almost always yield false negatives.
   // 'sl-edge': {
@@ -102,10 +102,10 @@ module.exports = function(config) {
     basePath: '',
     frameworks: ['tap'],
     files: [
-      'test/unit/index.js'
+      'test/unit/index.js',
     ],
     preprocessors: {
-      'test/unit/index.js': ['webpack', 'sourcemap']
+      'test/unit/index.js': ['webpack', 'sourcemap'],
     },
     reporters: ['dots', 'coverage'],
     port: 9876,
@@ -122,29 +122,29 @@ module.exports = function(config) {
       dir: 'coverage',
       reporters: [
         {type: 'json', subdir: '.', file: 'coverage.json'},
-        {type: 'html'}
-      ]
+        {type: 'html'},
+      ],
     },
 
     webpack: Object.assign({}, webpackConfig, {
       devtool: 'inline-source-map',
       node: {
-        fs: 'empty'
+        fs: 'empty',
       },
       module: Object.assign({}, webpackConfig.module, {
         // Cover source files when not debugging tests. Otherwise, omit coverage instrumenting to get
         // uncluttered source maps.
         loaders: webpackConfig.module.loaders.concat([config.singleRun ? {
           test: /\.js$/,
           include: path.resolve('./packages'),
-          loader: 'isparta'
-        } : undefined]).filter(Boolean)
-      })
+          loader: 'isparta',
+        } : undefined]).filter(Boolean),
+      }),
     }),
 
     webpackMiddleware: {
-      noInfo: true
-    }
+      noInfo: true,
+    },
   });
 
   // See https://github.com/karma-runner/karma-sauce-launcher/issues/73
@@ -153,11 +153,11 @@ module.exports = function(config) {
       sauceLabs: {
         testName: 'Material Components Web Unit Tests - CI',
         tunnelIdentifier: process.env.TRAVIS_JOB_NUMBER,
-        startConnect: false
+        startConnect: false,
       },
       // Attempt to de-flake Sauce Labs tests on TravisCI.
       transports: ['polling'],
-      browserDisconnectTolerance: 3
+      browserDisconnectTolerance: 3,
     });
   }
 };

package.json

@@ -37,7 +37,7 @@
     "del-cli": "^0.2.0",
     "dom-events": "^0.1.1",
     "eslint": "^3.6.1",
-    "eslint-config-google": "^0.6.0",
+    "eslint-config-google": "^0.7.1",
     "eslint-plugin-tape": "^1.1.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "ghooks": "^1.3.2",

packages/material-components-web/index.js

@@ -49,5 +49,5 @@ export {
   textfield,
   menu,
   select,
-  autoInit
+  autoInit,
 };

packages/mdc-auto-init/index.js

@@ -46,7 +46,7 @@ export default function mdcAutoInit(root = document, warn = CONSOLE_WARN) {
       value: component,
       writable: false,
       enumerable: false,
-      configurable: true
+      configurable: true,
     });
   }
 }

packages/mdc-checkbox/constants.js

@@ -26,7 +26,7 @@ export const cssClasses = {
   ANIM_CHECKED_UNCHECKED: `${ANIM}-checked-unchecked`,
   ANIM_CHECKED_INDETERMINATE: `${ANIM}-checked-indeterminate`,
   ANIM_INDETERMINATE_CHECKED: `${ANIM}-indeterminate-checked`,
-  ANIM_INDETERMINATE_UNCHECKED: `${ANIM}-indeterminate-unchecked`
+  ANIM_INDETERMINATE_UNCHECKED: `${ANIM}-indeterminate-unchecked`,
 };
 
 export const strings = {
@@ -42,9 +42,9 @@ export const strings = {
   TRANSITION_STATE_INIT: 'init',
   TRANSITION_STATE_CHECKED: 'checked',
   TRANSITION_STATE_UNCHECKED: 'unchecked',
-  TRANSITION_STATE_INDETERMINATE: 'indeterminate'
+  TRANSITION_STATE_INDETERMINATE: 'indeterminate',
 };
 
 export const numbers = {
-  ANIM_END_LATCH_MS: 100
+  ANIM_END_LATCH_MS: 100,
 };

packages/mdc-checkbox/foundation.js

@@ -42,7 +42,7 @@ export default class MDCCheckboxFoundation extends MDCFoundation {
       deregisterChangeHandler: (/* handler: EventListener */) => {},
       getNativeControl: () => /* HTMLInputElement */ {},
       forceLayout: () => {},
-      isAttachedToDOM: () => /* boolean */ {}
+      isAttachedToDOM: () => /* boolean */ {},
     };
   }
 
@@ -100,19 +100,19 @@ export default class MDCCheckboxFoundation extends MDCFoundation {
     const nativeCb = this.getNativeControl_();
     const cbProto = Object.getPrototypeOf(nativeCb);
 
-    CB_PROTO_PROPS.forEach(controlState => {
+    CB_PROTO_PROPS.forEach((controlState) => {
       const desc = Object.getOwnPropertyDescriptor(cbProto, controlState);
       // We have to check for this descriptor, since some browsers (Safari) don't support its return.
       // See: https://bugs.webkit.org/show_bug.cgi?id=49739
       if (validDescriptor(desc)) {
         Object.defineProperty(nativeCb, controlState, {
           get: desc.get,
-          set: state => {
+          set: (state) => {
             desc.set.call(nativeCb, state);
             this.transitionCheckState_();
           },
           configurable: desc.configurable,
-          enumerable: desc.enumerable
+          enumerable: desc.enumerable,
         });
       }
     });
@@ -122,7 +122,7 @@ export default class MDCCheckboxFoundation extends MDCFoundation {
     const nativeCb = this.getNativeControl_();
     const cbProto = Object.getPrototypeOf(nativeCb);
 
-    CB_PROTO_PROPS.forEach(controlState => {
+    CB_PROTO_PROPS.forEach((controlState) => {
       const desc = Object.getOwnPropertyDescriptor(cbProto, controlState);
       if (validDescriptor(desc)) {
         Object.defineProperty(nativeCb, controlState, desc);
@@ -164,7 +164,7 @@ export default class MDCCheckboxFoundation extends MDCFoundation {
     const {
       TRANSITION_STATE_INDETERMINATE,
       TRANSITION_STATE_CHECKED,
-      TRANSITION_STATE_UNCHECKED
+      TRANSITION_STATE_UNCHECKED,
     } = strings;
 
     if (nativeCb.indeterminate) {
@@ -177,7 +177,7 @@ export default class MDCCheckboxFoundation extends MDCFoundation {
     const {
       TRANSITION_STATE_INIT,
       TRANSITION_STATE_CHECKED,
-      TRANSITION_STATE_UNCHECKED
+      TRANSITION_STATE_UNCHECKED,
     } = strings;
 
     const {
@@ -186,7 +186,7 @@ export default class MDCCheckboxFoundation extends MDCFoundation {
       ANIM_CHECKED_UNCHECKED,
       ANIM_CHECKED_INDETERMINATE,
       ANIM_INDETERMINATE_CHECKED,
-      ANIM_INDETERMINATE_UNCHECKED
+      ANIM_INDETERMINATE_UNCHECKED,
     } = MDCCheckboxFoundation.cssClasses;
 
     switch (oldState) {
@@ -210,7 +210,7 @@ export default class MDCCheckboxFoundation extends MDCFoundation {
     return this.adapter_.getNativeControl() || {
       checked: false,
       indeterminate: false,
-      disabled: false
+      disabled: false,
     };
   }
 }

packages/mdc-checkbox/index.js

@@ -32,15 +32,15 @@ export class MDCCheckbox extends MDCComponent {
   getDefaultFoundation() {
     const {ANIM_END_EVENT_NAME} = MDCCheckboxFoundation.strings;
     return new MDCCheckboxFoundation({
-      addClass: className => this.root_.classList.add(className),
-      removeClass: className => this.root_.classList.remove(className),
-      registerAnimationEndHandler: handler => this.root_.addEventListener(ANIM_END_EVENT_NAME, handler),
-      deregisterAnimationEndHandler: handler => this.root_.removeEventListener(ANIM_END_EVENT_NAME, handler),
-      registerChangeHandler: handler => this.nativeCb_.addEventListener('change', handler),
-      deregisterChangeHandler: handler => this.nativeCb_.removeEventListener('change', handler),
+      addClass: (className) => this.root_.classList.add(className),
+      removeClass: (className) => this.root_.classList.remove(className),
+      registerAnimationEndHandler: (handler) => this.root_.addEventListener(ANIM_END_EVENT_NAME, handler),
+      deregisterAnimationEndHandler: (handler) => this.root_.removeEventListener(ANIM_END_EVENT_NAME, handler),
+      registerChangeHandler: (handler) => this.nativeCb_.addEventListener('change', handler),
+      deregisterChangeHandler: (handler) => this.nativeCb_.removeEventListener('change', handler),
       getNativeControl: () => this.nativeCb_,
       forceLayout: () => this.root_.offsetWidth,
-      isAttachedToDOM: () => Boolean(this.root_.parentNode)
+      isAttachedToDOM: () => Boolean(this.root_.parentNode),
     });
   }
 

packages/mdc-drawer/temporary/constants.js

@@ -20,12 +20,12 @@ export const cssClasses = {
   ROOT,
   OPEN: `${ROOT}--open`,
   ANIMATING: `${ROOT}--animating`,
-  RIGHT: `${ROOT}--right`
+  RIGHT: `${ROOT}--right`,
 };
 
 export const strings = {
   DRAWER_SELECTOR: `.${ROOT}__drawer`,
   OPACITY_VAR_NAME: `--${ROOT}-opacity`,
   FOCUSABLE_ELEMENTS: 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), ' +
-      'button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]'
+      'button:not([disabled]), iframe, object, embed, [tabindex], [contenteditable]',
 };

packages/mdc-drawer/temporary/foundation.js

@@ -52,14 +52,14 @@ export default class MDCTemporaryDrawerFoundation extends MDCFoundation {
       makeElementUntabbable: (/* el: Element */) => {},
       isRtl: () => /* boolean */ false,
       getDrawerWidth: () => /* number */ 0,
-      isDrawer: (/* el: Element */) => /* boolean */ false
+      isDrawer: (/* el: Element */) => /* boolean */ false,
     };
   }
 
   constructor(adapter) {
     super(Object.assign(MDCTemporaryDrawerFoundation.defaultAdapter, adapter));
 
-    this.transitionEndHandler_ = ev => {
+    this.transitionEndHandler_ = (ev) => {
       if (this.adapter_.isDrawer(ev.target)) {
         this.adapter_.removeClass(MDCTemporaryDrawerFoundation.cssClasses.ANIMATING);
         this.adapter_.deregisterTransitionEndHandler(this.transitionEndHandler_);
@@ -69,11 +69,11 @@ export default class MDCTemporaryDrawerFoundation extends MDCFoundation {
     this.inert_ = false;
 
     this.componentClickHandler_ = () => this.close();
-    this.drawerClickHandler_ = evt => evt.stopPropagation();
-    this.componentTouchStartHandler_ = evt => this.handleTouchStart_(evt);
-    this.componentTouchMoveHandler_ = evt => this.handleTouchMove_(evt);
-    this.componentTouchEndHandler_ = evt => this.handleTouchEnd_(evt);
-    this.documentKeydownHandler_ = evt => {
+    this.drawerClickHandler_ = (evt) => evt.stopPropagation();
+    this.componentTouchStartHandler_ = (evt) => this.handleTouchStart_(evt);
+    this.componentTouchMoveHandler_ = (evt) => this.handleTouchMove_(evt);
+    this.componentTouchEndHandler_ = (evt) => this.handleTouchEnd_(evt);
+    this.documentKeydownHandler_ = (evt) => {
       if (evt.key && evt.key === 'Escape' || evt.keyCode === 27) {
         this.close();
       }

packages/mdc-drawer/temporary/index.js

@@ -46,9 +46,9 @@ export class MDCTemporaryDrawer extends MDCComponent {
     const {FOCUSABLE_ELEMENTS, OPACITY_VAR_NAME} = MDCTemporaryDrawerFoundation.strings;
 
     return new MDCTemporaryDrawerFoundation({
-      addClass: className => this.root_.classList.add(className),
-      removeClass: className => this.root_.classList.remove(className),
-      hasClass: className => this.root_.classList.contains(className),
+      addClass: (className) => this.root_.classList.add(className),
+      removeClass: (className) => this.root_.classList.remove(className),
+      hasClass: (className) => this.root_.classList.contains(className),
       hasNecessaryDom: () => Boolean(this.drawer),
       registerInteractionHandler: (evt, handler) =>
           this.root_.addEventListener(util.remapEvent(evt), handler, util.applyPassive()),
@@ -58,24 +58,24 @@ export class MDCTemporaryDrawer extends MDCComponent {
           this.drawer.addEventListener(util.remapEvent(evt), handler),
       deregisterDrawerInteractionHandler: (evt, handler) =>
           this.drawer.removeEventListener(util.remapEvent(evt), handler),
-      registerTransitionEndHandler: handler => this.drawer.addEventListener('transitionend', handler),
-      deregisterTransitionEndHandler: handler => this.drawer.removeEventListener('transitionend', handler),
-      registerDocumentKeydownHandler: handler => document.addEventListener('keydown', handler),
-      deregisterDocumentKeydownHandler: handler => document.removeEventListener('keydown', handler),
+      registerTransitionEndHandler: (handler) => this.drawer.addEventListener('transitionend', handler),
+      deregisterTransitionEndHandler: (handler) => this.drawer.removeEventListener('transitionend', handler),
+      registerDocumentKeydownHandler: (handler) => document.addEventListener('keydown', handler),
+      deregisterDocumentKeydownHandler: (handler) => document.removeEventListener('keydown', handler),
       getDrawerWidth: () => this.drawer.offsetWidth,
-      setTranslateX: value => this.drawer.style.setProperty(
+      setTranslateX: (value) => this.drawer.style.setProperty(
           util.getTransformPropertyName(), value === null ? null : `translateX(${value}px)`),
-      updateCssVariable: value => {
+      updateCssVariable: (value) => {
         if (util.supportsCssCustomProperties()) {
           this.root_.style.setProperty(OPACITY_VAR_NAME, value);
         }
       },
       getFocusableElements: () => this.drawer.querySelectorAll(FOCUSABLE_ELEMENTS),
-      saveElementTabState: el => util.saveElementTabState(el),
-      restoreElementTabState: el => util.restoreElementTabState(el),
-      makeElementUntabbable: el => el.setAttribute('tabindex', -1),
+      saveElementTabState: (el) => util.saveElementTabState(el),
+      restoreElementTabState: (el) => util.restoreElementTabState(el),
+      makeElementUntabbable: (el) => el.setAttribute('tabindex', -1),
       isRtl: () => getComputedStyle(this.root_).getPropertyValue('direction') === 'rtl',
-      isDrawer: el => el === this.drawer
+      isDrawer: (el) => el === this.drawer,
     });
   }
 }