diff --git a/CHANGELOG.md b/CHANGELOG.md index 4c2d540416cc2f..0125d01135f069 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,10 +2,9 @@ ##### Breaking Changes - [Badge] Swapped primary and accent colors (#4449) -- [CircularProgress] The API has become more flexible and straightforward. `size` attribute now means the outer diameter in pixels. Line thickness is variable and should be defined via the `thickness` attribute. Default margins are eliminated. If you'd like to upgrade your existing app without changing the actual sizes of your `CircularProgress` components, here are the formulas: +- [CircularProgress] The API has become more flexible and straightforward. `size` attribute now means the outer diameter in pixels. Default margins are eliminated. If you'd like to upgrade your existing app without changing the actual sizes of your `CircularProgress` components, here are the formulas: ```js newSize = 59.5 * oldSize; -thickness = 3.5 * oldSize; margin = (oldSize < 0.71) ? ((50 - 59.5 * oldSize) / 2) : (5.25 * oldSize); @@ -18,7 +17,7 @@ Examples: // After: // Thickness is 3.5 by default - + ``` (#4705) - [core] Wrap the `propTypes` definitions so they can be removed in production (#4872) diff --git a/docs/src/app/components/pages/components/CircularProgress/ExampleDeterminate.js b/docs/src/app/components/pages/components/CircularProgress/ExampleDeterminate.js index 7167cf5098b118..5e4f57b0f0ace1 100644 --- a/docs/src/app/components/pages/components/CircularProgress/ExampleDeterminate.js +++ b/docs/src/app/components/pages/components/CircularProgress/ExampleDeterminate.js @@ -40,13 +40,11 @@ export default class CircularProgressExampleDeterminate extends React.Component mode="determinate" value={this.state.completed} size={60} - thickness={7} /> ); diff --git a/docs/src/app/components/pages/components/CircularProgress/ExampleSimple.js b/docs/src/app/components/pages/components/CircularProgress/ExampleSimple.js index ad948839de80b4..b9aeccd2e96b18 100644 --- a/docs/src/app/components/pages/components/CircularProgress/ExampleSimple.js +++ b/docs/src/app/components/pages/components/CircularProgress/ExampleSimple.js @@ -4,8 +4,8 @@ import CircularProgress from 'material-ui/CircularProgress'; const CircularProgressExampleSimple = () => (
- - + +
); diff --git a/src/CircularProgress/CircularProgress.js b/src/CircularProgress/CircularProgress.js index 8299e9905a5e94..36907f518c47df 100644 --- a/src/CircularProgress/CircularProgress.js +++ b/src/CircularProgress/CircularProgress.js @@ -2,13 +2,15 @@ import React, {Component, PropTypes} from 'react'; import autoPrefix from '../utils/autoPrefix'; import transitions from '../styles/transitions'; +const THICKNESS = 3.5; + function getRelativeValue(value, min, max) { const clampedValue = Math.min(Math.max(min, value), max); return clampedValue / (max - min); } function getArcLength(fraction, props) { - return fraction * Math.PI * (props.size - props.thickness); + return fraction * Math.PI * (props.size - THICKNESS); } function getStyles(props, context) { @@ -42,7 +44,7 @@ function getStyles(props, context) { }, path: { stroke: props.color || palette.primary1Color, - strokeLinecap: 'round', + strokeLinecap: 'square', transition: transitions.create('all', '1.5s', null, 'ease-in-out'), }, }; @@ -87,10 +89,6 @@ class CircularProgress extends Component { * Override the inline-styles of the root element. */ style: PropTypes.object, - /** - * Stroke width in pixels. - */ - thickness: PropTypes.number, /** * The value of progress, only works in determinate mode. */ @@ -103,7 +101,6 @@ class CircularProgress extends Component { min: 0, max: 100, size: 40, - thickness: 3.5, }; static contextTypes = { @@ -162,7 +159,6 @@ class CircularProgress extends Component { style, innerStyle, size, - thickness, ...other, } = this.props; @@ -181,9 +177,9 @@ class CircularProgress extends Component { style={prepareStyles(styles.path)} cx={size / 2} cy={size / 2} - r={(size - thickness) / 2} + r={(size - THICKNESS) / 2} fill="none" - strokeWidth={thickness} + strokeWidth={THICKNESS} strokeMiterlimit="20" />