golden test

Card/Card.jsx

@@ -25,6 +25,12 @@ class CardMedia extends MaterialComponent {
     this.componentName = 'card__media';
     this._mdcProps = ['square', '16-9'];
   }
+  materialDom(props) {
+    if (props.sixteenByNine) {
+      props.className = 'mdc-card__media--16-9';
+    }
+    return super.materialDom(props);
+  }
 }
 
 class CardActionButton extends Button {

Card/index.d.ts

@@ -24,6 +24,6 @@ declare class ActionIcon extends Icon<JSX.HTMLAttributes, {}> {}
 declare class CardMediaContent extends MaterialComponent<IActionsProps, {}> {}
 
 declare interface IMediaProps extends JSX.HTMLAttributes {
-  x?: 'square' | '16-9';
+  x?: 'square' | 'sixteenByNine';
 }
 declare class Media extends MaterialComponent<IMediaProps, {}> {}

ImageList/index.d.ts

@@ -11,7 +11,7 @@ export default class ImageList extends MaterialComponent<IImageListProps, {}> {
   static Image: typeof ImageListImage;
   static Supporting: typeof ImageListSupporting;
   static Label: typeof ImageListLabel;
-  static Aspectcontainer: typeof ImageListAspectcontainer;
+  static AspectContainer: typeof ImageListAspectcontainer;
 }
 
 export class ImageListAspectcontainer extends MaterialComponent<

docs/package.json

@@ -49,7 +49,7 @@
     "webpack": "^3.8.1"
   },
   "dependencies": {
-    "preact": "^8.2.1",
+    "preact": "^8.2.9",
     "preact-cli": "^2.2.1",
     "preact-router": "^2.6.1"
   }

docs/src/components/app/index.js

@@ -208,6 +208,12 @@ export default class Home extends Component {
     this.state = {
       darkMode: false
     };
+    if (typeof window !== "undefined") {
+      this.state.toolbarTitle =
+        window.location.pathname === '/'
+        ? null
+        : (menuItems.find(item => item.link === window.location.pathname) ||{}).text;
+    }
   }
 
   closeDrawer() {
@@ -225,29 +231,13 @@ export default class Home extends Component {
     }
   }
 
-  componentDidMount() {
+  handleRoute_ = url => {
     this.setState({
       toolbarTitle:
-        window.location.pathname === '/'
+        url === '/'
           ? null
-          : (
-              menuItems.find(item => item.link === window.location.pathname) ||
-              {}
-            ).text
+          : (menuItems.find(item => item.link === url) || {}).text
     });
-  }
-
-  _handleRoute = e => {
-    setTimeout(
-      () =>
-        this.setState({
-          toolbarTitle:
-            e.url === '/'
-              ? null
-              : (menuItems.find(item => item.link === e.url) || {}).text
-        }),
-      100
-    );
   };
 
   render() {
@@ -381,15 +371,14 @@ export default class Home extends Component {
             preact-material-components
           </div>
         </div>
-        <Menu items={menuItems} ref={menu => (this.menu = menu)} />
+        <Menu items={menuItems} ref={menu => (this.menu = menu)} onSelect={this.handleRoute_} />
         <LayoutGrid className="content">
           <LayoutGrid.Inner>
             <LayoutGrid.Cell cols="12">
-              <Router onChange={this._handleRoute}>
+              <Router>
                 {menuItems.map(({component: Element, link}) => (
                   <Element path={link} />
                 ))}
-                <HomePage default />
               </Router>
             </LayoutGrid.Cell>
           </LayoutGrid.Inner>

docs/src/components/menu/index.js

@@ -26,6 +26,7 @@ export default class Menu extends Component {
       return;
 
     // attempt to route, if no match simply cede control to browser
+    this.props.onSelect && this.props.onSelect(href);
     return route(href);
   }
 

docs/src/routes/card/index.js

@@ -49,7 +49,7 @@ export default class CardPage extends Component {
             description: 'Makes Media aspect ratio 1:1.'
           },
           {
-            name: '16-9',
+            name: 'sixteenByNine',
             description: 'Makes Media aspect ratio 16:9.'
           }
         ]

docs/tests/visdiff.js

@@ -209,7 +209,7 @@ function compareScreenshots(fileName) {
         img1.width,
         img1.height,
         {
-          threshold: 0.1
+          threshold: 0.2
         }
       );