[CircularProgress] Add static variant

mui · Feb 10, 2018 · 10da9ba · 10da9ba
1 parent 938ac5f
commit 10da9ba
Show file tree

Hide file tree

Showing 31 changed files with 212 additions and 195 deletions.
diff --git a/docs/src/pages/demos/app-bar/ButtonAppBar.js b/docs/src/pages/demos/app-bar/ButtonAppBar.js
@@ -10,7 +10,7 @@ import MenuIcon from 'material-ui-icons/Menu';
 
 const styles = {
   root: {
-    width: '100%',
+    flexGrow: 1,
   },
   flex: {
     flex: 1,

diff --git a/docs/src/pages/demos/app-bar/MenuAppBar.js b/docs/src/pages/demos/app-bar/MenuAppBar.js
@@ -13,7 +13,7 @@ import Menu, { MenuItem } from 'material-ui/Menu';
 
 const styles = {
   root: {
-    width: '100%',
+    flexGrow: 1,
   },
   flex: {
     flex: 1,

diff --git a/docs/src/pages/demos/app-bar/SimpleAppBar.js b/docs/src/pages/demos/app-bar/SimpleAppBar.js
@@ -7,7 +7,7 @@ import Typography from 'material-ui/Typography';
 
 const styles = {
   root: {
-    width: '100%',
+    flexGrow: 1,
   },
 };
 

diff --git a/docs/src/pages/demos/expansion-panels/ControlledExpansionPanels.js b/docs/src/pages/demos/expansion-panels/ControlledExpansionPanels.js
@@ -10,7 +10,7 @@ import ExpandMoreIcon from 'material-ui-icons/ExpandMore';
 
 const styles = theme => ({
   root: {
-    width: '100%',
+    flexGrow: 1,
   },
   heading: {
     fontSize: theme.typography.pxToRem(15),

diff --git a/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js b/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js
@@ -15,7 +15,7 @@ import Divider from 'material-ui/Divider';
 
 const styles = theme => ({
   root: {
-    width: '100%',
+    flexGrow: 1,
   },
   heading: {
     fontSize: theme.typography.pxToRem(15),
@@ -33,7 +33,7 @@ const styles = theme => ({
     alignItems: 'center',
   },
   column: {
-    flexBasis: '33.3%',
+    flexBasis: '33.33%',
   },
   helper: {
     borderLeft: `2px solid ${theme.palette.divider}`,

diff --git a/docs/src/pages/demos/expansion-panels/SimpleExpansionPanel.js b/docs/src/pages/demos/expansion-panels/SimpleExpansionPanel.js
@@ -10,7 +10,7 @@ import ExpandMoreIcon from 'material-ui-icons/ExpandMore';
 
 const styles = theme => ({
   root: {
-    width: '100%',
+    flexGrow: 1,
   },
   heading: {
     fontSize: theme.typography.pxToRem(15),

diff --git a/docs/src/pages/demos/progress/CircularDeterminate.js b/docs/src/pages/demos/progress/CircularDeterminate.js
@@ -5,7 +5,7 @@ import { CircularProgress } from 'material-ui/Progress';
 
 const styles = theme => ({
   progress: {
-    margin: `0 ${theme.spacing.unit * 2}px`,
+    margin: theme.spacing.unit * 2,
   },
 });
 

diff --git a/docs/src/pages/demos/progress/CircularIndeterminate.js b/docs/src/pages/demos/progress/CircularIndeterminate.js
@@ -6,7 +6,7 @@ import purple from 'material-ui/colors/purple';
 
 const styles = theme => ({
   progress: {
-    margin: `0 ${theme.spacing.unit * 2}px`,
+    margin: theme.spacing.unit * 2,
   },
 });
 

diff --git a/docs/src/pages/demos/progress/CircularStatic.js b/docs/src/pages/demos/progress/CircularStatic.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import { CircularProgress } from 'material-ui/Progress';
+
+const styles = theme => ({
+  progress: {
+    margin: theme.spacing.unit * 2,
+  },
+});
+
+function CircularStatic(props) {
+  const { classes } = props;
+  return (
+    <div>
+      <CircularProgress className={classes.progress} variant="static" value={5} />
+      <CircularProgress className={classes.progress} variant="static" value={25} />
+      <CircularProgress className={classes.progress} variant="static" value={50} />
+      <CircularProgress className={classes.progress} variant="static" value={75} />
+      <CircularProgress className={classes.progress} variant="static" value={100} />
+    </div>
+  );
+}
+
+CircularStatic.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CircularStatic);
diff --git a/docs/src/pages/demos/progress/LinearBuffer.js b/docs/src/pages/demos/progress/LinearBuffer.js
@@ -5,8 +5,7 @@ import { LinearProgress } from 'material-ui/Progress';
 
 const styles = {
   root: {
-    width: '100%',
-    marginTop: 30,
+    flexGrow: 1,
   },
 };
 

diff --git a/docs/src/pages/demos/progress/LinearDeterminate.js b/docs/src/pages/demos/progress/LinearDeterminate.js
@@ -5,8 +5,7 @@ import { LinearProgress } from 'material-ui/Progress';
 
 const styles = {
   root: {
-    width: '100%',
-    marginTop: 30,
+    flexGrow: 1,
   },
 };
 

diff --git a/docs/src/pages/demos/progress/LinearIndeterminate.js b/docs/src/pages/demos/progress/LinearIndeterminate.js
@@ -5,8 +5,7 @@ import { LinearProgress } from 'material-ui/Progress';
 
 const styles = {
   root: {
-    width: '100%',
-    marginTop: 30,
+    flexGrow: 1,
   },
 };
 

diff --git a/docs/src/pages/demos/progress/LinearQuery.js b/docs/src/pages/demos/progress/LinearQuery.js
@@ -3,12 +3,11 @@ import PropTypes from 'prop-types';
 import { withStyles } from 'material-ui/styles';
 import { LinearProgress } from 'material-ui/Progress';
 
-const styles = theme => ({
+const styles = {
   root: {
-    width: '100%',
-    marginTop: theme.spacing.unit * 3,
+    flexGrow: 1,
   },
-});
+};
 
 function LinearQuery(props) {
   const { classes } = props;

diff --git a/docs/src/pages/demos/progress/progress.md b/docs/src/pages/demos/progress/progress.md
@@ -28,6 +28,10 @@ For example, a refresh operation should display either a refresh bar or an activ
 
 {{"demo": "pages/demos/progress/CircularDeterminate.js"}}
 
+### Circular Static
+
+{{"demo": "pages/demos/progress/CircularStatic.js"}}
+
 ## Linear
 
 ### Linear Indeterminate
@@ -38,11 +42,11 @@ For example, a refresh operation should display either a refresh bar or an activ
 
 {{"demo": "pages/demos/progress/LinearDeterminate.js"}}
 
-### Buffer
+### Linear Buffer
 
 {{"demo": "pages/demos/progress/LinearBuffer.js"}}
 
-### Query
+### Linear Query
 
 {{"demo": "pages/demos/progress/LinearQuery.js"}}
 

diff --git a/docs/src/pages/layout/AutoGrid.js b/docs/src/pages/layout/AutoGrid.js
@@ -7,10 +7,9 @@ import Grid from 'material-ui/Grid';
 const styles = theme => ({
   root: {
     flexGrow: 1,
-    marginTop: 30,
   },
   paper: {
-    padding: 16,
+    padding: theme.spacing.unit * 2,
     textAlign: 'center',
     color: theme.palette.text.secondary,
   },

diff --git a/docs/src/pages/layout/BreakpointDown.js b/docs/src/pages/layout/BreakpointDown.js
@@ -8,61 +8,51 @@ import withWidth from 'material-ui/utils/withWidth';
 import Typography from 'material-ui/Typography';
 
 const styles = theme => ({
-  container: {
+  root: {
     flexGrow: 1,
-    paddingTop: 30,
+  },
+  container: {
     display: 'flex',
-    flexWrap: 'wrap',
-    position: 'relative',
   },
   paper: {
-    padding: 16,
+    padding: theme.spacing.unit * 2,
     textAlign: 'center',
     color: theme.palette.text.secondary,
-    minHeight: 54,
-    flexBasis: 0,
-    flexGrow: 1,
-    maxWidth: '100%',
-    margin: 12,
-  },
-  typography: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    padding: 5,
+    flex: '1 0 auto',
+    margin: theme.spacing.unit,
   },
 });
 
 function BreakpointDown(props) {
   const { classes } = props;
 
   return (
-    <div className={classes.container}>
-      <Typography variant="subheading" className={classes.typography}>
-        Current width: {props.width}
-      </Typography>
-      <Hidden xsDown>
-        <Paper className={classes.paper}>xsDown</Paper>
-      </Hidden>
-      <Hidden smDown>
-        <Paper className={classes.paper}>smDown</Paper>
-      </Hidden>
-      <Hidden mdDown>
-        <Paper className={classes.paper}>mdDown</Paper>
-      </Hidden>
-      <Hidden lgDown>
-        <Paper className={classes.paper}>lgDown</Paper>
-      </Hidden>
-      <Hidden xlDown>
-        <Paper className={classes.paper}>xlDown</Paper>
-      </Hidden>
+    <div className={classes.root}>
+      <Typography variant="subheading">Current width: {props.width}</Typography>
+      <div className={classes.container}>
+        <Hidden xsDown>
+          <Paper className={classes.paper}>xsDown</Paper>
+        </Hidden>
+        <Hidden smDown>
+          <Paper className={classes.paper}>smDown</Paper>
+        </Hidden>
+        <Hidden mdDown>
+          <Paper className={classes.paper}>mdDown</Paper>
+        </Hidden>
+        <Hidden lgDown>
+          <Paper className={classes.paper}>lgDown</Paper>
+        </Hidden>
+        <Hidden xlDown>
+          <Paper className={classes.paper}>xlDown</Paper>
+        </Hidden>
+      </div>
     </div>
   );
 }
 
 BreakpointDown.propTypes = {
   classes: PropTypes.object.isRequired,
-  width: PropTypes.string,
+  width: PropTypes.string.isRequired,
 };
 
 export default compose(withStyles(styles), withWidth())(BreakpointDown);
diff --git a/docs/src/pages/layout/BreakpointOnly.js b/docs/src/pages/layout/BreakpointOnly.js
@@ -8,55 +8,45 @@ import withWidth from 'material-ui/utils/withWidth';
 import Typography from 'material-ui/Typography';
 
 const styles = theme => ({
-  container: {
+  root: {
     flexGrow: 1,
-    paddingTop: 30,
+  },
+  container: {
     display: 'flex',
-    flexWrap: 'wrap',
-    position: 'relative',
   },
   paper: {
-    padding: 16,
+    padding: theme.spacing.unit * 2,
     textAlign: 'center',
     color: theme.palette.text.secondary,
-    minHeight: 54,
-    flexBasis: 0,
-    flexGrow: 1,
-    maxWidth: '100%',
-    margin: 12,
-  },
-  typography: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    padding: 5,
+    flex: '1 0 auto',
+    margin: theme.spacing.unit,
   },
 });
 
 function BreakpointOnly(props) {
   const { classes } = props;
 
   return (
-    <div className={classes.container}>
-      <Typography variant="subheading" className={classes.typography}>
-        Current width: {props.width}
-      </Typography>
-      <Hidden only="lg">
-        <Paper className={classes.paper}>Hidden on lg</Paper>
-      </Hidden>
-      <Hidden only="sm">
-        <Paper className={classes.paper}>Hidden on sm</Paper>
-      </Hidden>
-      <Hidden only={['sm', 'lg']}>
-        <Paper className={classes.paper}>Hidden on sm and lg</Paper>
-      </Hidden>
+    <div className={classes.root}>
+      <Typography variant="subheading">Current width: {props.width}</Typography>
+      <div className={classes.container}>
+        <Hidden only="lg">
+          <Paper className={classes.paper}>Hidden on lg</Paper>
+        </Hidden>
+        <Hidden only="sm">
+          <Paper className={classes.paper}>Hidden on sm</Paper>
+        </Hidden>
+        <Hidden only={['sm', 'lg']}>
+          <Paper className={classes.paper}>Hidden on sm and lg</Paper>
+        </Hidden>
+      </div>
     </div>
   );
 }
 
 BreakpointOnly.propTypes = {
   classes: PropTypes.object.isRequired,
-  width: PropTypes.string,
+  width: PropTypes.string.isRequired,
 };
 
 export default compose(withStyles(styles), withWidth())(BreakpointOnly);