Update default sizes and add a notice in CHANGELOG.md

chowdream · Jul 16, 2016 · 4bd8b88 · 4bd8b88
1 parent 53b804d
commit 4bd8b88
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,25 @@
 
 ##### 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:
+```js
+newSize = 59.5 * oldSize;
+thickness = 3.5 * oldSize;
+margin = (oldSize < 0.71) ?
+  ((50 - 59.5 * oldSize) / 2) :
+  (5.25 * oldSize);
+```
+
+Examples:
+```
+// Before:
+<CircularProgress />
+<CircularProgress size={2} />
+
+// After:
+<CircularProgress size={59.5} style={{margin: 5.25}} /> // Thickness is 3.5 by default
+<CircularProgress size={119} thickness={7} style={{margin: 10.5}} />
+```
 
 ## 0.15.2
 ###### _Jul 7, 2016_

diff --git a/docs/src/app/components/pages/components/CircularProgress/ExampleDeterminate.js b/docs/src/app/components/pages/components/CircularProgress/ExampleDeterminate.js
@@ -39,13 +39,13 @@ export default class CircularProgressExampleDeterminate extends React.Component
         <CircularProgress
           mode="determinate"
           value={this.state.completed}
-          size={75}
+          size={60}
           thickness={7}
         />
         <CircularProgress
           mode="determinate"
           value={this.state.completed}
-          size={100}
+          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
@@ -4,8 +4,8 @@ import CircularProgress from 'material-ui/CircularProgress';
 const CircularProgressExampleSimple = () => (
   <div>
     <CircularProgress />
-    <CircularProgress size={75} thickness={7} />
-    <CircularProgress size={100} thickness={5} />
+    <CircularProgress size={60} thickness={7} />
+    <CircularProgress size={80} thickness={5} />
   </div>
 );
 

diff --git a/src/CircularProgress/CircularProgress.js b/src/CircularProgress/CircularProgress.js
@@ -102,8 +102,8 @@ class CircularProgress extends Component {
     value: 0,
     min: 0,
     max: 100,
-    size: 50,
-    thickness: 2.5,
+    size: 40,
+    thickness: 3.5,
   };
 
   static contextTypes = {