Josh & Matt reviews

mui · Apr 1, 2019 · 45bf57f · 45bf57f
1 parent 8447637
commit 45bf57f
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 8 deletions.
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -50,6 +50,7 @@ const styles = theme => ({
     },
   },
   demo: {
+    margin: 'auto',
     borderRadius: theme.shape.borderRadius,
     backgroundColor:
       theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900],
@@ -349,6 +350,9 @@ class Demo extends React.Component {
           })}
           onMouseEnter={this.handleDemoHover}
           onMouseLeave={this.handleDemoHover}
+          style={{
+            maxWidth: demoOptions.maxWidth,
+          }}
         >
           <Frame>
             <DemoComponent />

diff --git a/docs/src/pages/demos/app-bar/app-bar.md b/docs/src/pages/demos/app-bar/app-bar.md
@@ -41,4 +41,4 @@ A side searchbar.
 
 ## Bottom App Bar
 
-{{"demo": "pages/demos/app-bar/BottomAppBar.js", "iframe": true}}
+{{"demo": "pages/demos/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 600}}
diff --git a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js
@@ -18,6 +18,7 @@ const useStyles = makeStyles(theme => ({
   },
   appFrame: {
     height: 356,
+    background: theme.palette.background.paper,
   },
   menuButton: {
     marginRight: theme.spacing(2),

diff --git a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.tsx b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.tsx
@@ -18,6 +18,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   appFrame: {
     height: 356,
+    background: theme.palette.background.paper,
   },
   menuButton: {
     marginRight: theme.spacing(2),

diff --git a/docs/src/pages/demos/snackbars/TransitionsSnackbar.js b/docs/src/pages/demos/snackbars/TransitionsSnackbar.js
@@ -3,11 +3,16 @@ import Button from '@material-ui/core/Button';
 import Snackbar from '@material-ui/core/Snackbar';
 import Fade from '@material-ui/core/Fade';
 import Slide from '@material-ui/core/Slide';
+import Grow from '@material-ui/core/Grow';
 
-function TransitionSlide(props) {
+function SlideTransition(props) {
   return <Slide {...props} direction="up" />;
 }
 
+function GrowTransition(props) {
+  return <Grow {...props} />;
+}
+
 function TransitionsSnackbar() {
   const [state, setState] = React.useState({
     open: false,
@@ -31,7 +36,8 @@ function TransitionsSnackbar() {
   return (
     <div>
       <Button onClick={handleClick(Fade)}>Fade Transition</Button>
-      <Button onClick={handleClick(TransitionSlide)}>Slide Transition</Button>
+      <Button onClick={handleClick(SlideTransition)}>Slide Transition</Button>
+      <Button onClick={handleClick(GrowTransition)}>Grow Transition</Button>
       <Snackbar
         open={state.open}
         onClose={handleClose}

diff --git a/docs/src/pages/demos/snackbars/TransitionsSnackbar.tsx b/docs/src/pages/demos/snackbars/TransitionsSnackbar.tsx
@@ -3,12 +3,17 @@ import Button from '@material-ui/core/Button';
 import Snackbar from '@material-ui/core/Snackbar';
 import Fade from '@material-ui/core/Fade';
 import Slide from '@material-ui/core/Slide';
+import Grow from '@material-ui/core/Grow';
 import { TransitionProps } from '@material-ui/core/transitions/transition';
 
-function TransitionSlide(props: TransitionProps) {
+function SlideTransition(props: TransitionProps) {
   return <Slide {...props} direction="up" />;
 }
 
+function GrowTransition(props: TransitionProps) {
+  return <Grow {...props} />;
+}
+
 function TransitionsSnackbar() {
   const [state, setState] = React.useState({
     open: false,
@@ -32,7 +37,8 @@ function TransitionsSnackbar() {
   return (
     <div>
       <Button onClick={handleClick(Fade)}>Fade Transition</Button>
-      <Button onClick={handleClick(TransitionSlide)}>Slide Transition</Button>
+      <Button onClick={handleClick(SlideTransition)}>Slide Transition</Button>
+      <Button onClick={handleClick(GrowTransition)}>Grow Transition</Button>
       <Snackbar
         open={state.open}
         onClose={handleClose}

diff --git a/docs/src/pages/demos/snackbars/snackbars.md b/docs/src/pages/demos/snackbars/snackbars.md
@@ -56,7 +56,7 @@ When multiple snackbar updates are necessary, they should appear one at a time.
 
 Snackbars should appear above FABs (on mobile).
 
-{{"demo": "pages/demos/snackbars/FabIntegrationSnackbar.js", "iframe": true}}
+{{"demo": "pages/demos/snackbars/FabIntegrationSnackbar.js", "iframe": true, "maxWidth": 600}}
 
 ### Control Direction
 

diff --git a/packages/material-ui/src/Slide/Slide.js b/packages/material-ui/src/Slide/Slide.js
@@ -70,7 +70,7 @@ export function setTranslateValue(props, node) {
 }
 
 /**
- * The Slide transition is used by the [Snackbar](/demos/snackbars/) component.
+ * The Slide transition is used by the [Drawer](/demos/drawers/) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 class Slide extends React.Component {

diff --git a/pages/api/slide.md b/pages/api/slide.md
@@ -12,7 +12,7 @@ filename: /packages/material-ui/src/Slide/Slide.js
 import Slide from '@material-ui/core/Slide';
 ```
 
-The Slide transition is used by the [Snackbar](/demos/snackbars/) component.
+The Slide transition is used by the [Drawer](/demos/drawers/) component.
 It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
 
 ## Props
Original file line number	Diff line number	Diff line change
Expand Up		@@ -41,4 +41,4 @@ A side searchbar.

		## Bottom App Bar

		{{"demo": "pages/demos/app-bar/BottomAppBar.js", "iframe": true}}
		{{"demo": "pages/demos/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 600}}