[CircularProgress] Remove the thickness property

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:
 <CircularProgress size={59.5} style={{margin: 5.25}} /> // Thickness is 3.5 by default
-<CircularProgress size={119} thickness={7} style={{margin: 10.5}} />
+<CircularProgress size={119} style={{margin: 10.5}} />
 ```
 (#4705)
 - [core] Wrap the `propTypes` definitions so they can be removed in production (#4872)

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}
         />
         <CircularProgress
           mode="determinate"
           value={this.state.completed}
           size={80}
-          thickness={5}
         />
       </div>
     );

docs/src/app/components/pages/components/CircularProgress/ExampleSimple.js

@@ -4,8 +4,8 @@ import CircularProgress from 'material-ui/CircularProgress';
 const CircularProgressExampleSimple = () => (
   <div>
     <CircularProgress />
-    <CircularProgress size={60} thickness={7} />
-    <CircularProgress size={80} thickness={5} />
+    <CircularProgress size={60} />
+    <CircularProgress size={80} />
   </div>
 );
 

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