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"
/>