From 3f301ac828c28a04bb40373d127ba3e348513042 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Fri, 12 Aug 2016 20:42:40 +0200
Subject: [PATCH] [CircularProgress] Remove the thickness property

We are taking advantage of the CSS animation on the next branch
to render the component. One of the main advantage is to make the
component works without a js runtime. That's quite useful when the
component is rendered server side.
However, that's making the implementation of a thickness more complex.
The material specification doesn't seems to use different thickness.
Hence, I think that it would be better to make the master branch closer
to the next one.
---
 CHANGELOG.md                                     |  5 ++---
 .../CircularProgress/ExampleDeterminate.js       |  2 --
 .../components/CircularProgress/ExampleSimple.js |  4 ++--
 src/CircularProgress/CircularProgress.js         | 16 ++++++----------
 4 files changed, 10 insertions(+), 17 deletions(-)

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