[Progress] Add color property

docs/src/pages/component-api/Progress/CircularProgress.md

@@ -8,6 +8,7 @@
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | classes | object |  | Useful to extend the style applied to components. |
+| color | enum:&nbsp;'primary'<br>&nbsp;'accent'<br> | 'primary' | The color of the component. It's using the theme palette when that makes sense. |
 | max | number | 100 | The max value of progress in determinate mode. |
 | min | number | 0 | The min value of progress in determinate mode. |
 | mode | enum:&nbsp;'determinate'<br>&nbsp;'indeterminate'<br> | 'indeterminate' | The mode of show your progress. Indeterminate for when there is no value for progress. Determinate for controlled progress value. |
@@ -21,6 +22,8 @@ Any other properties supplied will be spread to the root element.
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 - `root`
+- `primaryColor`
+- `accentColor`
 - `svg`
 - `indeterminateSvg`
 - `circle`

docs/src/pages/component-api/Progress/LinearProgress.md

@@ -8,6 +8,7 @@
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | classes | object |  | Useful to extend the style applied to components. |
+| color | enum:&nbsp;'primary'<br>&nbsp;'accent'<br> | 'primary' | The color of the component. It's using the theme palette when that makes sense. |
 | mode | enum:&nbsp;'determinate'<br>&nbsp;'indeterminate'<br>&nbsp;'buffer'<br>&nbsp;'query'<br> | 'indeterminate' | The mode of show your progress, indeterminate for when there is no value for progress. |
 | value | number | 0 | The value of progress, only works in determinate and buffer mode. Value between 0 and 100. |
 | valueBuffer | number |  | The value of buffer, only works in buffer mode. Value between 0 and 100. |
@@ -19,15 +20,22 @@ Any other properties supplied will be spread to the root element.
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 - `root`
+- `primaryColor`
+- `accentColor`
+- `primaryBar`
+- `primaryDashed`
+- `primaryBufferBar2`
+- `accentBar`
+- `accentDashed`
+- `accentBufferBar2`
 - `rootBuffer`
 - `rootQuery`
-- `bar`
-- `dashed`
 - `indeterminateBar1`
 - `indeterminateBar2`
 - `determinateBar1`
 - `bufferBar1`
-- `bufferBar2`
+- `bufferBar2Primary`
+- `bufferBar2Accent`
 - `@keyframes mui-indeterminate1`
 - `@keyframes mui-indeterminate2`
 - `@keyframes buffer`

docs/src/pages/component-demos/progress/CircularDeterminate.js

@@ -24,6 +24,16 @@ function CircularDeterminate(props) {
         min={0}
         max={50}
       />
+      <CircularProgress className={classes.progress} color="accent" mode="determinate" value={75} />
+      <CircularProgress
+        className={classes.progress}
+        color="accent"
+        size={50}
+        mode="determinate"
+        value={25}
+        min={0}
+        max={50}
+      />
     </div>
   );
 }

docs/src/pages/component-demos/progress/CircularIndeterminate.js

@@ -17,6 +17,8 @@ function CircularIndeterminate(props) {
     <div>
       <CircularProgress className={classes.progress} />
       <CircularProgress className={classes.progress} size={50} />
+      <CircularProgress color="accent" className={classes.progress} />
+      <CircularProgress color="accent" className={classes.progress} size={50} />
     </div>
   );
 }

docs/src/pages/component-demos/progress/LinearBuffer.js

@@ -44,6 +44,8 @@ class LinearBuffer extends Component {
     return (
       <div className={classes.root}>
         <LinearProgress mode="buffer" value={completed} valueBuffer={buffer} />
+        <br />
+        <LinearProgress color="accent" mode="buffer" value={completed} valueBuffer={buffer} />
       </div>
     );
   }

docs/src/pages/component-demos/progress/LinearDeterminate.js

@@ -41,6 +41,8 @@ class LinearDeterminate extends Component {
     return (
       <div className={classes.root}>
         <LinearProgress mode="determinate" value={this.state.completed} />
+        <br />
+        <LinearProgress color="accent" mode="determinate" value={this.state.completed} />
       </div>
     );
   }

docs/src/pages/component-demos/progress/LinearIndeterminate.js

@@ -17,6 +17,8 @@ function LinearIndeterminate(props) {
   return (
     <div className={classes.root}>
       <LinearProgress />
+      <br />
+      <LinearProgress color="accent" />
     </div>
   );
 }

docs/src/pages/component-demos/progress/LinearQuery.js

@@ -17,6 +17,8 @@ function LinearQuery(props) {
   return (
     <div className={classes.root}>
       <LinearProgress mode="query" />
+      <br />
+      <LinearProgress color="accent" mode="query" />
     </div>
   );
 }

src/Progress/CircularProgress.js

@@ -17,8 +17,13 @@ function getRelativeValue(value, min, max) {
 export const styleSheet = createStyleSheet('MuiCircularProgress', theme => ({
   root: {
     display: 'inline-block',
+  },
+  primaryColor: {
     color: theme.palette.primary[500],
   },
+  accentColor: {
+    color: theme.palette.accent.A200,
+  },
   svg: {
     transform: 'rotate(-90deg)',
   },
@@ -67,7 +72,7 @@ export const styleSheet = createStyleSheet('MuiCircularProgress', theme => ({
 }));
 
 function CircularProgress(props) {
-  const { classes, className, size, mode, value, min, max, ...other } = props;
+  const { classes, className, color, size, mode, value, min, max, ...other } = props;
   const radius = size / 2;
   const rootProps = {};
   const svgClasses = classNames(classes.svg, {
@@ -90,9 +95,11 @@ function CircularProgress(props) {
     rootProps['aria-valuemax'] = max;
   }
 
+  const colorClass = classes[`${color}Color`];
+
   return (
     <div
-      className={classNames(classes.root, className)}
+      className={classNames(classes.root, colorClass, className)}
       style={{ width: size, height: size }}
       role="progressbar"
       {...rootProps}
@@ -123,6 +130,10 @@ CircularProgress.propTypes = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * The color of the component. It's using the theme palette when that makes sense.
+   */
+  color: PropTypes.oneOf(['primary', 'accent']),
   /**
    * The max value of progress in determinate mode.
    */
@@ -148,6 +159,7 @@ CircularProgress.propTypes = {
 };
 
 CircularProgress.defaultProps = {
+  color: 'primary',
   size: 40,
   mode: 'indeterminate',
   value: 0,

src/Progress/CircularProgress.spec.js

@@ -19,6 +19,33 @@ describe('<CircularProgress />', () => {
     assert.strictEqual(wrapper.name(), 'div');
   });
 
+  it('should render with the primary color by default', () => {
+    const wrapper = shallow(<CircularProgress />);
+    assert.strictEqual(
+      wrapper.hasClass(classes.primaryColor),
+      true,
+      'should have the primaryColor class',
+    );
+  });
+
+  it('should render with the primary color', () => {
+    const wrapper = shallow(<CircularProgress color="primary" />);
+    assert.strictEqual(
+      wrapper.hasClass(classes.primaryColor),
+      true,
+      'should have the primaryColor class',
+    );
+  });
+
+  it('should render with the accent color', () => {
+    const wrapper = shallow(<CircularProgress color="accent" />);
+    assert.strictEqual(
+      wrapper.hasClass(classes.accentColor),
+      true,
+      'should have the accentColor class',
+    );
+  });
+
   it('should render with the user and root classes', () => {
     const wrapper = shallow(<CircularProgress className="woof" />);
     assert.strictEqual(wrapper.hasClass('woof'), true, 'should have the "woof" class');

src/Progress/LinearProgress.js

@@ -8,38 +8,56 @@ import withStyles from '../styles/withStyles';
 
 const transitionDuration = 4; // 400ms
 
+const getBar = color => ({
+  position: 'absolute',
+  left: 0,
+  bottom: 0,
+  top: 0,
+  transition: 'transform 0.2s linear',
+  backgroundColor: color,
+});
+
+const getDashed = color => ({
+  position: 'absolute',
+  marginTop: 0,
+  height: '100%',
+  width: '100%',
+  background: `radial-gradient(${color} 0%, ${color} 16%, transparent 42%)`,
+  backgroundSize: '10px 10px',
+  backgroundPosition: '0px -23px',
+  animation: 'buffer 3s infinite linear',
+});
+
+const getBufferBar2 = color => ({
+  transition: `width .${transitionDuration}s linear`,
+  backgroundColor: color,
+});
+
 export const styleSheet = createStyleSheet('MuiLinearProgress', theme => ({
   root: {
     position: 'relative',
     overflow: 'hidden',
     height: 5,
+  },
+  primaryColor: {
     backgroundColor: theme.palette.primary[100],
   },
+  accentColor: {
+    backgroundColor: theme.palette.accent.A100,
+  },
+  // support for color property
+  primaryBar: getBar(theme.palette.primary[500]),
+  primaryDashed: getDashed(theme.palette.primary[100]),
+  primaryBufferBar2: getBufferBar2(theme.palette.primary[100]),
+  accentBar: getBar(theme.palette.accent.A200),
+  accentDashed: getDashed(theme.palette.accent.A100),
+  accentBufferBar2: getBufferBar2(theme.palette.accent.A100),
   rootBuffer: {
     backgroundColor: 'transparent',
   },
   rootQuery: {
     transform: 'rotate(180deg)',
   },
-  bar: {
-    position: 'absolute',
-    left: 0,
-    bottom: 0,
-    top: 0,
-    transition: 'transform 0.2s linear',
-    backgroundColor: theme.palette.primary[500],
-  },
-  dashed: {
-    position: 'absolute',
-    marginTop: 0,
-    height: '100%',
-    width: '100%',
-    background: `radial-gradient(${theme.palette.primary[100]} 0%, ${theme.palette
-      .primary[100]} 16%, transparent 42%)`,
-    backgroundSize: '10px 10px',
-    backgroundPosition: '0px -23px',
-    animation: 'buffer 3s infinite linear',
-  },
   indeterminateBar1: {
     willChange: 'left, right',
     animation: 'mui-indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite',
@@ -57,10 +75,14 @@ export const styleSheet = createStyleSheet('MuiLinearProgress', theme => ({
     zIndex: 1,
     transition: `width .${transitionDuration}s linear`,
   },
-  bufferBar2: {
+  bufferBar2Primary: {
     transition: `width .${transitionDuration}s linear`,
     backgroundColor: theme.palette.primary[100],
   },
+  bufferBar2Accent: {
+    transition: `width .${transitionDuration}s linear`,
+    backgroundColor: theme.palette.accent.A100,
+  },
   '@keyframes mui-indeterminate1': {
     '0%': {
       left: '-35%',
@@ -106,23 +128,36 @@ export const styleSheet = createStyleSheet('MuiLinearProgress', theme => ({
 }));
 
 function LinearProgress(props) {
-  const { classes, className, mode, value, valueBuffer, ...other } = props;
+  const { classes, className, color, mode, value, valueBuffer, ...other } = props;
+
+  const dashedClass = classNames({
+    [classes.primaryDashed]: color === 'primary',
+    [classes.accentDashed]: color === 'accent',
+  });
+
   const rootClasses = classNames(
     classes.root,
     {
+      [classes.primaryColor]: color === 'primary',
+      [classes.accentColor]: color === 'accent',
       [classes.rootBuffer]: mode === 'buffer',
       [classes.rootQuery]: mode === 'query',
     },
     className,
   );
-  const primaryClasses = classNames(classes.bar, {
+  const primaryClasses = classNames({
+    [classes.primaryBar]: color === 'primary',
+    [classes.accentBar]: color === 'accent',
     [classes.indeterminateBar1]: mode === 'indeterminate' || mode === 'query',
     [classes.determinateBar1]: mode === 'determinate',
     [classes.bufferBar1]: mode === 'buffer',
   });
-  const secondaryClasses = classNames(classes.bar, {
+  const secondaryClasses = classNames({
+    [classes.primaryBar]: color === 'primary',
+    [classes.primaryBufferBar2]: color === 'primary' && mode === 'buffer',
+    [classes.accentBar]: color === 'accent',
+    [classes.accentBufferBar2]: color === 'accent' && mode === 'buffer',
     [classes.indeterminateBar2]: mode === 'indeterminate' || mode === 'query',
-    [classes.bufferBar2]: mode === 'buffer',
   });
   const styles = { primary: {}, secondary: {} };
   const rootProps = {};
@@ -137,7 +172,7 @@ function LinearProgress(props) {
 
   return (
     <div className={rootClasses} {...rootProps} {...other}>
-      {mode === 'buffer' ? <div className={classes.dashed} /> : null}
+      {mode === 'buffer' ? <div className={dashedClass} /> : null}
       <div className={primaryClasses} style={styles.primary} />
       {mode === 'determinate'
         ? null
@@ -155,6 +190,10 @@ LinearProgress.propTypes = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * The color of the component. It's using the theme palette when that makes sense.
+   */
+  color: PropTypes.oneOf(['primary', 'accent']),
   /**
    * The mode of show your progress, indeterminate
    * for when there is no value for progress.
@@ -173,6 +212,7 @@ LinearProgress.propTypes = {
 };
 
 LinearProgress.defaultProps = {
+  color: 'primary',
   mode: 'indeterminate',
   value: 0,
 };