[CircularProgress] Remove min & max props (#11211)

* [CircularProgress] Remove min & max props

Makes the API consistant with LinearProgress

* Remove redundant test

* Fix API docs. Good CI makes developers lazy. :)

* Add non-standard ranges docs description

* fix typo

* fix typo v2

docs/src/pages/demos/progress/progress.md

@@ -50,6 +50,28 @@ For example, a refresh operation should display either a refresh bar or an activ
 
 {{"demo": "pages/demos/progress/LinearQuery.js"}}
 
+## Non-standard ranges
+
+The progress components accept a value in the range 0 - 100. This simplifies things for screen-reader users, where these are the default min / max values. Sometimes, however, you might be working with a data source where the values fall outside this range. Here's how you can easily transform a value in any range to a scale of 0 - 100:
+
+```jsx
+const MIN = x; // Minimum expected value
+const MAX = y; // Maximium expected value
+
+// Function to normalise the values (MIN / MAX could be integrated)
+const normalise = value => (value - MIN) * (MAX - MIN);
+
+// Example component that utilizes the `normalise` function at the point of render.
+function Progress(props) {
+  return (
+    <React.Fragment>
+      <CircularProgress variant="determinate" value={normalise(props.value)} />
+      <LinearProgress variant="determinate" value={normalise(props.value)} />
+    </React.Fragment>
+  )
+}
+```
+
 ## Delaying appearance
 
 There are [3 important limits](http://www.nngroup.com/articles/response-times-3-important-limits/) to know around response time.

packages/material-ui/src/Progress/CircularProgress.js

@@ -75,38 +75,25 @@ export const styles = theme => ({
  * attribute to `true` on that region until it has finished loading.
  */
 function CircularProgress(props) {
-  const {
-    classes,
-    className,
-    color,
-    max,
-    min,
-    size,
-    style,
-    thickness,
-    value,
-    variant,
-    ...other
-  } = props;
+  const { classes, className, color, size, style, thickness, value, variant, ...other } = props;
 
   const circleStyle = {};
   const rootStyle = {};
   const rootProps = {};
 
   if (variant === 'determinate' || variant === 'static') {
-    const relVal = getRelativeValue(value, min, max) * 100;
     const circumference = 2 * Math.PI * (SIZE / 2 - 5);
     circleStyle.strokeDasharray = circumference.toFixed(3);
-    rootProps['aria-valuenow'] = Math.round(relVal);
+    rootProps['aria-valuenow'] = Math.round(value);
 
     if (variant === 'static') {
-      circleStyle.strokeDashoffset = `${((100 - relVal) / 100 * circumference).toFixed(3)}px`;
+      circleStyle.strokeDashoffset = `${((100 - value) / 100 * circumference).toFixed(3)}px`;
       rootStyle.transform = 'rotate(-90deg)';
     } else {
-      circleStyle.strokeDashoffset = `${(easeIn((100 - relVal) / 100) * circumference).toFixed(
+      circleStyle.strokeDashoffset = `${(easeIn((100 - value) / 100) * circumference).toFixed(
         3,
       )}px`;
-      rootStyle.transform = `rotate(${(easeOut(relVal / 70) * 270).toFixed(3)}deg)`;
+      rootStyle.transform = `rotate(${(easeOut(value / 70) * 270).toFixed(3)}deg)`;
     }
   }
 
@@ -127,7 +114,6 @@ function CircularProgress(props) {
       <svg
         className={classNames(classes.svg, {
           [classes.svgIndeterminate]: variant === 'indeterminate',
-          [classes.svgStatic]: variant === 'static',
         })}
         viewBox={`0 0 ${SIZE} ${SIZE}`}
       >
@@ -160,14 +146,6 @@ CircularProgress.propTypes = {
    * The color of the component. It supports those theme colors that make sense for this component.
    */
   color: PropTypes.oneOf(['primary', 'secondary', 'inherit']),
-  /**
-   * The max value of progress in determinate variant.
-   */
-  max: PropTypes.number,
-  /**
-   * The min value of progress in determinate variant.
-   */
-  min: PropTypes.number,
   /**
    * The size of the circle.
    */
@@ -194,8 +172,6 @@ CircularProgress.propTypes = {
 
 CircularProgress.defaultProps = {
   color: 'primary',
-  max: 100,
-  min: 0,
   size: 40,
   thickness: 3.6,
   value: 0,

packages/material-ui/src/Progress/CircularProgress.test.js

@@ -109,17 +109,5 @@ describe('<CircularProgress />', () => {
       assert.strictEqual(style.strokeDashoffset, '11.310px', 'should have strokeDashoffset set');
       assert.strictEqual(wrapper.props()['aria-valuenow'], 70);
     });
-
-    it('should set strokeDasharray of circle based on min max', () => {
-      const wrapper = shallow(
-        <CircularProgress variant="determinate" value={5} min={0} max={10} />,
-      );
-      assert.strictEqual(wrapper.hasClass(classes.root), true);
-      const svg = wrapper.childAt(0);
-      const style = svg.childAt(0).props().style;
-      assert.strictEqual(style.strokeDasharray, '125.664', 'should have strokeDasharray set');
-      assert.strictEqual(style.strokeDashoffset, '31.416px', 'should have strokeDashoffset set');
-      assert.strictEqual(wrapper.props()['aria-valuenow'], 50);
-    });
   });
 });

pages/api/circular-progress.md

@@ -18,8 +18,6 @@ attribute to `true` on that region until it has finished loading.
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
 | <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'&nbsp;&#124;<br>&nbsp;'inherit'<br> | <span class="prop-default">'primary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
-| <span class="prop-name">max</span> | <span class="prop-type">number | <span class="prop-default">100</span> | The max value of progress in determinate variant. |
-| <span class="prop-name">min</span> | <span class="prop-type">number | <span class="prop-default">0</span> | The min value of progress in determinate variant. |
 | <span class="prop-name">size</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;string<br> | <span class="prop-default">40</span> | The size of the circle. |
 | <span class="prop-name">thickness</span> | <span class="prop-type">number | <span class="prop-default">3.6</span> | The thickness of the circle. |
 | <span class="prop-name">value</span> | <span class="prop-type">number | <span class="prop-default">0</span> | The value of the progress indicator for the determinate and static variants. Value between 0 and 100. |