diff --git a/docs/src/pages/component-api/Progress/CircularProgress.md b/docs/src/pages/component-api/Progress/CircularProgress.md index e4ddc264813aee..e9cf8b9ce30593 100644 --- a/docs/src/pages/component-api/Progress/CircularProgress.md +++ b/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: 'primary'
 'accent'
| '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: 'determinate'
 'indeterminate'
| '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` diff --git a/docs/src/pages/component-api/Progress/LinearProgress.md b/docs/src/pages/component-api/Progress/LinearProgress.md index db725d45b1e8d0..3325ad59b9aade 100644 --- a/docs/src/pages/component-api/Progress/LinearProgress.md +++ b/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: 'primary'
 'accent'
| 'primary' | The color of the component. It's using the theme palette when that makes sense. | | mode | enum: 'determinate'
 'indeterminate'
 'buffer'
 'query'
| '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` diff --git a/docs/src/pages/component-demos/progress/CircularDeterminate.js b/docs/src/pages/component-demos/progress/CircularDeterminate.js index bcd853631af838..3bc83212c27a65 100644 --- a/docs/src/pages/component-demos/progress/CircularDeterminate.js +++ b/docs/src/pages/component-demos/progress/CircularDeterminate.js @@ -24,6 +24,16 @@ function CircularDeterminate(props) { min={0} max={50} /> + + ); } diff --git a/docs/src/pages/component-demos/progress/CircularIndeterminate.js b/docs/src/pages/component-demos/progress/CircularIndeterminate.js index 8af2adc516925a..f82cd375a5f6d8 100644 --- a/docs/src/pages/component-demos/progress/CircularIndeterminate.js +++ b/docs/src/pages/component-demos/progress/CircularIndeterminate.js @@ -17,6 +17,8 @@ function CircularIndeterminate(props) {
+ +
); } diff --git a/docs/src/pages/component-demos/progress/LinearBuffer.js b/docs/src/pages/component-demos/progress/LinearBuffer.js index 4f193f4c0e0bce..96f9cd233e6897 100644 --- a/docs/src/pages/component-demos/progress/LinearBuffer.js +++ b/docs/src/pages/component-demos/progress/LinearBuffer.js @@ -44,6 +44,8 @@ class LinearBuffer extends Component { return (
+
+
); } diff --git a/docs/src/pages/component-demos/progress/LinearDeterminate.js b/docs/src/pages/component-demos/progress/LinearDeterminate.js index 5773839eb2852e..4812d0decc0e5f 100644 --- a/docs/src/pages/component-demos/progress/LinearDeterminate.js +++ b/docs/src/pages/component-demos/progress/LinearDeterminate.js @@ -41,6 +41,8 @@ class LinearDeterminate extends Component { return (
+
+
); } diff --git a/docs/src/pages/component-demos/progress/LinearIndeterminate.js b/docs/src/pages/component-demos/progress/LinearIndeterminate.js index 5ccf5fe596d62e..648c530a7e0778 100644 --- a/docs/src/pages/component-demos/progress/LinearIndeterminate.js +++ b/docs/src/pages/component-demos/progress/LinearIndeterminate.js @@ -17,6 +17,8 @@ function LinearIndeterminate(props) { return (
+
+
); } diff --git a/docs/src/pages/component-demos/progress/LinearQuery.js b/docs/src/pages/component-demos/progress/LinearQuery.js index 0bd82618ea8fb4..50d0be8b979559 100644 --- a/docs/src/pages/component-demos/progress/LinearQuery.js +++ b/docs/src/pages/component-demos/progress/LinearQuery.js @@ -17,6 +17,8 @@ function LinearQuery(props) { return (
+
+
); } diff --git a/src/Progress/CircularProgress.js b/src/Progress/CircularProgress.js index ced1c6d39f5ad2..b18769be9f2461 100644 --- a/src/Progress/CircularProgress.js +++ b/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 (
', () => { assert.strictEqual(wrapper.name(), 'div'); }); + it('should render with the primary color by default', () => { + const wrapper = shallow(); + assert.strictEqual( + wrapper.hasClass(classes.primaryColor), + true, + 'should have the primaryColor class', + ); + }); + + it('should render with the primary color', () => { + const wrapper = shallow(); + assert.strictEqual( + wrapper.hasClass(classes.primaryColor), + true, + 'should have the primaryColor class', + ); + }); + + it('should render with the accent color', () => { + const wrapper = shallow(); + assert.strictEqual( + wrapper.hasClass(classes.accentColor), + true, + 'should have the accentColor class', + ); + }); + it('should render with the user and root classes', () => { const wrapper = shallow(); assert.strictEqual(wrapper.hasClass('woof'), true); diff --git a/src/Progress/LinearProgress.js b/src/Progress/LinearProgress.js index ddb870291f8954..eba11be2f0438c 100644 --- a/src/Progress/LinearProgress.js +++ b/src/Progress/LinearProgress.js @@ -13,13 +13,30 @@ export const styleSheet = createStyleSheet('MuiLinearProgress', theme => ({ position: 'relative', overflow: 'hidden', height: 5, + }, + primaryColor: { backgroundColor: theme.palette.primary[100], }, - rootBuffer: { - backgroundColor: 'transparent', + primaryColorBar: { + backgroundColor: theme.palette.primary[500], }, - rootQuery: { - transform: 'rotate(180deg)', + primaryDashed: { + background: `radial-gradient(${theme.palette.primary[100]} 0%, ${theme.palette + .primary[100]} 16%, transparent 42%)`, + backgroundSize: '10px 10px', + backgroundPosition: '0px -23px', + }, + accentColor: { + backgroundColor: theme.palette.accent.A100, + }, + accentColorBar: { + backgroundColor: theme.palette.accent.A400, + }, + accentDashed: { + background: `radial-gradient(${theme.palette.accent.A100} 0%, ${theme.palette.accent + .A100} 16%, transparent 42%)`, + backgroundSize: '10px 10px', + backgroundPosition: '0px -23px', }, bar: { position: 'absolute', @@ -27,19 +44,23 @@ export const styleSheet = createStyleSheet('MuiLinearProgress', theme => ({ 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', }, + bufferBar2: { + transition: `width .${transitionDuration}s linear`, + }, + rootBuffer: { + backgroundColor: 'transparent', + }, + rootQuery: { + transform: 'rotate(180deg)', + }, indeterminateBar1: { willChange: 'left, right', animation: 'mui-indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite', @@ -57,10 +78,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 +131,37 @@ 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.dashed, { + [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, { + [classes.primaryColorBar]: color === 'primary', + [classes.accentColorBar]: color === 'accent', [classes.indeterminateBar1]: mode === 'indeterminate' || mode === 'query', [classes.determinateBar1]: mode === 'determinate', [classes.bufferBar1]: mode === 'buffer', }); const secondaryClasses = classNames(classes.bar, { - [classes.indeterminateBar2]: mode === 'indeterminate' || mode === 'query', [classes.bufferBar2]: mode === 'buffer', + [classes.primaryColorBar]: color === 'primary' && mode !== 'buffer', + [classes.primaryColor]: color === 'primary' && mode === 'buffer', + [classes.accentColorBar]: color === 'accent' && mode !== 'buffer', + [classes.accentColor]: color === 'accent' && mode === 'buffer', + [classes.indeterminateBar2]: mode === 'indeterminate' || mode === 'query', }); const styles = { primary: {}, secondary: {} }; const rootProps = {}; @@ -137,7 +176,7 @@ function LinearProgress(props) { return (
- {mode === 'buffer' ?
: null} + {mode === 'buffer' ?
: null}
{mode === 'determinate' ? null @@ -155,6 +194,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 +216,7 @@ LinearProgress.propTypes = { }; LinearProgress.defaultProps = { + color: 'primary', mode: 'indeterminate', value: 0, }; diff --git a/src/Progress/LinearProgress.spec.js b/src/Progress/LinearProgress.spec.js index 7bf4382cf417fc..07ba89d312d63d 100644 --- a/src/Progress/LinearProgress.spec.js +++ b/src/Progress/LinearProgress.spec.js @@ -28,14 +28,22 @@ describe('', () => { it('should render intermediate mode by default', () => { const wrapper = shallow(); - assert.strictEqual(wrapper.hasClass(classes.root), true); - assert.strictEqual(wrapper.childAt(0).hasClass(classes.bar), true, 'should have the bar class'); + assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class'); + assert.strictEqual( + wrapper.childAt(0).hasClass(classes.primaryColorBar), + true, + 'should have the primaryColorBar class', + ); assert.strictEqual( wrapper.childAt(0).hasClass(classes.indeterminateBar1), true, 'should have the indeterminateBar1 class', ); - assert.strictEqual(wrapper.childAt(1).hasClass(classes.bar), true, 'should have the bar class'); + assert.strictEqual( + wrapper.childAt(1).hasClass(classes.primaryColorBar), + true, + 'should have the primaryColorBar class', + ); assert.strictEqual( wrapper.childAt(1).hasClass(classes.indeterminateBar2), true, @@ -43,10 +51,74 @@ describe('', () => { ); }); - it('should render with determinate classes', () => { + it('should render for the primary color', () => { + const wrapper = shallow(); + assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class'); + assert.strictEqual( + wrapper.childAt(0).hasClass(classes.primaryColorBar), + true, + 'should have the primaryColorBar class', + ); + assert.strictEqual( + wrapper.childAt(1).hasClass(classes.primaryColorBar), + true, + 'should have the primaryColorBar class', + ); + }); + + it('should render for the accent color', () => { + const wrapper = shallow(); + assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class'); + assert.strictEqual( + wrapper.childAt(0).hasClass(classes.accentColorBar), + true, + 'should have the accentColorBar class', + ); + assert.strictEqual( + wrapper.childAt(1).hasClass(classes.accentColorBar), + true, + 'should have the accentColorBar class', + ); + }); + + it('should render with determinate classes for the primary color by default', () => { const wrapper = shallow(); - assert.strictEqual(wrapper.hasClass(classes.root), true); - assert.strictEqual(wrapper.childAt(0).hasClass(classes.bar), true, 'should have the bar class'); + assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class'); + assert.strictEqual( + wrapper.childAt(0).hasClass(classes.primaryColorBar), + true, + 'should have the primaryColorBar class', + ); + assert.strictEqual( + wrapper.childAt(0).hasClass(classes.determinateBar1), + true, + 'should have the determinateBar1 class', + ); + }); + + it('should render with determinate classes for the primary color', () => { + const wrapper = shallow(); + assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class'); + assert.strictEqual( + wrapper.childAt(0).hasClass(classes.primaryColorBar), + true, + 'should have the primaryColorBar class', + ); + assert.strictEqual( + wrapper.childAt(0).hasClass(classes.determinateBar1), + true, + 'should have the determinateBar1 class', + ); + }); + + it('should render with determinate classes for the accent color', () => { + const wrapper = shallow(); + assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class'); + assert.strictEqual( + wrapper.childAt(0).hasClass(classes.accentColorBar), + true, + 'should have the accentColorBar class', + ); assert.strictEqual( wrapper.childAt(0).hasClass(classes.determinateBar1), true, @@ -61,21 +133,89 @@ describe('', () => { assert.strictEqual(wrapper.props()['aria-valuenow'], 77); }); - it('should render with buffer classes', () => { + it('should render with buffer classes for the primary color by default', () => { const wrapper = shallow(); assert.strictEqual(wrapper.hasClass(classes.root), true); assert.strictEqual( - wrapper.childAt(0).hasClass(classes.dashed), + wrapper.childAt(0).hasClass(classes.primaryDashed), + true, + 'should have the primaryDashed class', + ); + assert.strictEqual( + wrapper.childAt(1).hasClass(classes.primaryColorBar), true, - 'should have the dashed class', + 'should have the primaryColorBar class', ); - assert.strictEqual(wrapper.childAt(1).hasClass(classes.bar), true, 'should have the bar class'); assert.strictEqual( wrapper.childAt(1).hasClass(classes.bufferBar1), true, 'should have the bufferBar1 class', ); - assert.strictEqual(wrapper.childAt(2).hasClass(classes.bar), true, 'should have the bar class'); + assert.strictEqual( + wrapper.childAt(2).hasClass(classes.primaryColor), + true, + 'should have the primaryColor class', + ); + assert.strictEqual( + wrapper.childAt(2).hasClass(classes.bufferBar2), + true, + 'should have the bufferBar2 class', + ); + }); + + it('should render with buffer classes for the primary color', () => { + const wrapper = shallow(); + assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class'); + assert.strictEqual( + wrapper.childAt(0).hasClass(classes.primaryDashed), + true, + 'should have the primaryDashed class', + ); + assert.strictEqual( + wrapper.childAt(1).hasClass(classes.primaryColorBar), + true, + 'should have the primaryColorBar class', + ); + assert.strictEqual( + wrapper.childAt(1).hasClass(classes.bufferBar1), + true, + 'should have the bufferBar1 class', + ); + assert.strictEqual( + wrapper.childAt(2).hasClass(classes.primaryColor), + true, + 'should have the primaryColor class', + ); + assert.strictEqual( + wrapper.childAt(2).hasClass(classes.bufferBar2), + true, + 'should have the bufferBar2 class', + ); + }); + + it('should render with buffer classes for the accent color', () => { + const wrapper = shallow(); + assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class'); + assert.strictEqual( + wrapper.childAt(0).hasClass(classes.accentDashed), + true, + 'should have the accentDashed class', + ); + assert.strictEqual( + wrapper.childAt(1).hasClass(classes.accentColorBar), + true, + 'should have the accentColorBar class', + ); + assert.strictEqual( + wrapper.childAt(1).hasClass(classes.bufferBar1), + true, + 'should have the bufferBar1 class', + ); + assert.strictEqual( + wrapper.childAt(2).hasClass(classes.accentColor), + true, + 'should have the accentColor class', + ); assert.strictEqual( wrapper.childAt(2).hasClass(classes.bufferBar2), true, @@ -98,13 +238,21 @@ describe('', () => { true, 'should have the rootQuery class', ); - assert.strictEqual(wrapper.childAt(0).hasClass(classes.bar), true, 'should have the bar class'); + assert.strictEqual( + wrapper.childAt(0).hasClass(classes.primaryColorBar), + true, + 'should have the primaryColorBar class', + ); assert.strictEqual( wrapper.childAt(0).hasClass(classes.indeterminateBar1), true, 'should have the indeterminateBar1 class', ); - assert.strictEqual(wrapper.childAt(1).hasClass(classes.bar), true, 'should have the bar class'); + assert.strictEqual( + wrapper.childAt(1).hasClass(classes.primaryColorBar), + true, + 'should have the primaryColorBar class', + ); assert.strictEqual( wrapper.childAt(1).hasClass(classes.indeterminateBar2), true,