[MobileStepper] Add a LinearProgressProps property (#12404)

mui · Aug 3, 2018 · cbc6828 · cbc6828
1 parent 81c8d84
commit cbc6828
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 0 deletions.
diff --git a/packages/material-ui/src/MobileStepper/MobileStepper.d.ts b/packages/material-ui/src/MobileStepper/MobileStepper.d.ts
@@ -2,10 +2,12 @@ import * as React from 'react';
 import { StandardProps } from '..';
 import { PaperProps } from '../Paper';
 import { ButtonProps } from '../Button';
+import { LinearProgressProps } from '../LinearProgress';
 
 export interface MobileStepperProps extends StandardProps<PaperProps, MobileStepperClassKey> {
   activeStep?: number;
   backButton: React.ReactElement<any>;
+  LinearProgressProps?: Partial<LinearProgressProps>;
   nextButton: React.ReactElement<any>;
   position?: 'bottom' | 'top' | 'static';
   steps: number;

diff --git a/packages/material-ui/src/MobileStepper/MobileStepper.js b/packages/material-ui/src/MobileStepper/MobileStepper.js
@@ -65,6 +65,7 @@ function MobileStepper(props) {
     backButton,
     classes,
     className: classNameProp,
+    LinearProgressProps,
     nextButton,
     position,
     steps,
@@ -97,6 +98,7 @@ function MobileStepper(props) {
           className={classes.progress}
           variant="determinate"
           value={Math.ceil((activeStep / (steps - 1)) * 100)}
+          {...LinearProgressProps}
         />
       )}
       {nextButton}
@@ -123,6 +125,10 @@ MobileStepper.propTypes = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * Properties applied to the `LinearProgress` element.
+   */
+  LinearProgressProps: PropTypes.object,
   /**
    * A next button element. For instance, it can be be a `Button` or a `IconButton`.
    */

diff --git a/pages/api/mobile-stepper.md b/pages/api/mobile-stepper.md
@@ -18,6 +18,7 @@ title: MobileStepper API
 | <span class="prop-name">activeStep</span> | <span class="prop-type">number | <span class="prop-default">0</span> | Set the active step (zero based index). Defines which dot is highlighted when the variant is 'dots'. |
 | <span class="prop-name">backButton</span> | <span class="prop-type">node |   | A back button element. For instance, it can be be a `Button` or a `IconButton`. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
+| <span class="prop-name">LinearProgressProps</span> | <span class="prop-type">object |   | Properties applied to the `LinearProgress` element. |
 | <span class="prop-name">nextButton</span> | <span class="prop-type">node |   | A next button element. For instance, it can be be a `Button` or a `IconButton`. |
 | <span class="prop-name">position</span> | <span class="prop-type">enum:&nbsp;'bottom'&nbsp;&#124;<br>&nbsp;'top'&nbsp;&#124;<br>&nbsp;'static'<br> | <span class="prop-default">'bottom'</span> | Set the positioning type. |
 | <span class="prop-name required">steps *</span> | <span class="prop-type">number |   | The total steps. |