Release cut for 1.3.7 (#627)

* Class name fix (#624)

* added readme changes

* adding tests and class name fix

* fixing tests

* more fixes

* random trial

* work travis

* work travis work

* werk werk werk travis

* oh god why travis

* new server

* unique class names

* fucked up logging

* test fix trial 2

* few changes

* fixing pics

* Upload snapshots to GH after test (#626)

* [POC][WIP] Upload snapshots to GH after test

* Upload archive to file.io

* Run `test:travis` if it exists

* Fix prettier

* Replace pictures

* Change test script

* Try out higher timeout

* Make fullpage screenshots

* Remove second `browser.close();` (failed merge)

* Change resolution

* Fix typo

* Update pictures

* Skip LinearProgress

.gitignore

@@ -47,3 +47,6 @@ jspm_packages
 # Ignores all index.js files for all components since they are auto-generated.
 **/index.js
 !/index.js
+
+# Ignore generated test screenshots
+/docs/tests/generated

.travis.yml

@@ -1,12 +1,13 @@
 language: node_js
 node_js:
-  - "7"
   - "8"
 
 env:
   - TEST_DIR=
   - TEST_DIR=docs
 
+os: osx
+
 # Skip npm install because our script takes care of that
 install: true
 script: ./scripts/travis.sh $TEST_DIR
@@ -24,11 +25,15 @@ deploy:
   domain: material.preactjs.com
   skip_cleanup: true
   on:
-    branch: master
+    branch: release
     condition: $(./scripts/has-changes.sh docs) = "yes" && $TEST_DIR = "docs"
     node: "8"
 
 # blocklist
 branches:
   except:
-    - gh-pages
+    - gh-pages
+
+sudo: required
+addons:
+ chrome: stable

Button/Button.jsx

@@ -23,7 +23,7 @@ class Button extends MaterialComponent {
   }
   materialDom(props) {
     const ButtonElement = props.href ? "a" : "button";
-    let className = props.class || props.className || "";
+    let className = "";
     this.themeProps.forEach(themeProp => {
       if (themeProp in props && props[themeProp] !== false)
         className += generateThemeClass(themeProp) + " ";

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 1.3.7
+- Fix className bug in SSR
+- Added CardActionIcons
+- Added Puppeteer visual diff tests
+
 ## 1.3.6
 - Updated to mdc 0.31.0
 - New Component: `Chips, Line Ripple`.

Card/Card.jsx

@@ -47,15 +47,20 @@ class CardActionButton extends Button {
   }
 }
 
+class CardActionIcons extends MaterialComponent {
+  constructor() {
+    super();
+    this.componentName = "card__action-icons";
+  }
+}
+
 class CardActionIcon extends Icon {
   constructor() {
     super();
     this.componentName = "card__action";
   }
   materialDom(props) {
-    props.className = props.className
-      ? props.className + " mdc-card__action--icon"
-      : props.className;
+    props.className = "mdc-card__action--icon";
     return super.materialDom(props);
   }
 }
@@ -69,6 +74,7 @@ class CardMediaContent extends MaterialComponent {
 
 Card.Actions = CardActions;
 Card.ActionButton = CardActionButton;
+Card.ActionIcons = CardActionIcons;
 Card.ActionIcon = CardActionIcon;
 Card.Media = CardMedia;
 Card.CardMediaContent = CardMediaContent;

Fab/Fab.jsx

@@ -23,13 +23,13 @@ class Fab extends MaterialComponent {
       if (themeProp in props && props[themeProp] !== false)
         classNames.push(generateThemeClass(themeProp));
     });
-    let className = classNames.join(" ");
+    let classNameString = classNames.join(" ");
 
     return (
       <button
         ref={control => (this.control = control)}
         {...props}
-        className={className}
+        className={classNameString}
       >
         {props.children}
       </button>

Icon/Icon.jsx

@@ -11,9 +11,8 @@ export default class Icon extends MaterialComponent {
   }
   materialDom(props) {
     let classes = ["material-icons"];
-    if (props.className) {
-      classes.push(props.className);
-    }
+    // CardActionIcon sends className
+    props.className && classes.push(props.className);
     return (
       <i {...props} className={classes.join(" ")}>
         {props.children}

IconToggle/IconToggle.jsx

@@ -32,7 +32,7 @@ export default class IconToggle extends MaterialComponent {
     return (
       <i
         {...props}
-        className={"material-icons " + props.className || ""}
+        className="material-icons"
         ref={control => {
           this.control = control;
         }}

LayoutGrid/LayoutGrid.jsx

@@ -94,10 +94,6 @@ class LayoutGridCell extends MaterialComponent {
       classes.push(baseClass + "align-" + props[this._propsDict.align]);
     }
 
-    if (props.className) {
-      classes.push(props.className);
-    }
-
     return classes.join(" ");
   }
   materialDom(props) {

MaterialComponent.js

@@ -25,9 +25,12 @@ export default class MaterialComponent extends Component {
       MDCRipple.attachTo(this.control);
     }
   }
-  // Build the className
-  buildClassName(props) {
+  // Build the className based on component names and mdc props
+  buildClassName() {
+    // Class name based on component name
     this.classText = "mdc-" + this.componentName;
+
+    // Loop over mdcProps to turn them into classNames
     for (let propKey in this.props) {
       if (this.props.hasOwnProperty(propKey)) {
         const prop = this.props[propKey];
@@ -39,6 +42,7 @@ export default class MaterialComponent extends Component {
       }
     }
   }
+
   getClassName(element) {
     if (!element) {
       return "";
@@ -53,23 +57,34 @@ export default class MaterialComponent extends Component {
     }
     return classText;
   }
+
   // Components must implement this method for their specific DOM structure
   materialDom(props) {
     return h("div", Object.assign({}, props), props.children);
   }
+
   render() {
     this.buildClassName();
     // Fetch a VNode
     const componentProps = this.props;
-    if (componentProps.class) {
-      // We delete class prop here so that any sub node's class doesn't get over-ridden from this
-      delete componentProps.class;
-    }
+    const userDefinedClasses =
+      componentProps.className || componentProps.class || "";
+    // We delete class props and add them later in the final
+    // step so every component does not need to handle user specified classes.
+    if (componentProps["class"]) delete componentProps["class"];
+    if (componentProps["className"]) delete componentProps["className"];
+
     const element = this.materialDom(componentProps);
     element.attributes = element.attributes || {};
-    // Fix for className
-    element.attributes.class = this.getClassName(element);
-    // element.attributes.className = this.getClassName(element);
+
+    element.attributes.className = `${userDefinedClasses} ${this.getClassName(
+      element
+    )}`
+      .split(" ")
+      .filter(
+        (value, index, self) => self.indexOf(value) === index && value !== ""
+      ) // Unique + exclude empty class names
+      .join(" ");
     // Clean this shit of proxy attributes
     this._mdcProps.forEach(prop => {
       delete element.attributes[prop];