diff --git a/packages/material-ui/src/Step/Step.d.ts b/packages/material-ui/src/Step/Step.d.ts index 14f33160abe81c..77a9a4f67ec8ff 100644 --- a/packages/material-ui/src/Step/Step.d.ts +++ b/packages/material-ui/src/Step/Step.d.ts @@ -11,6 +11,7 @@ export interface StepProps connector?: React.ReactElement; disabled?: boolean; index?: number; + last?: boolean; orientation?: Orientation; } diff --git a/packages/material-ui/src/Step/Step.js b/packages/material-ui/src/Step/Step.js index 3d41f19e295513..a382245d18b03c 100644 --- a/packages/material-ui/src/Step/Step.js +++ b/packages/material-ui/src/Step/Step.js @@ -40,6 +40,7 @@ function Step(props) { connector, disabled, index, + last, orientation, ...other } = props; @@ -85,6 +86,7 @@ function Step(props) { alternativeLabel, completed, disabled, + last, icon: index + 1, orientation, ...child.props, @@ -136,6 +138,10 @@ Step.propTypes = { * Used internally for numbering. */ index: PropTypes.number, + /** + * @ignore + */ + last: PropTypes.bool, /** * @ignore */ diff --git a/packages/material-ui/src/StepLabel/StepLabel.js b/packages/material-ui/src/StepLabel/StepLabel.js index 97bdda7712be9a..e0970ac7fd9f98 100644 --- a/packages/material-ui/src/StepLabel/StepLabel.js +++ b/packages/material-ui/src/StepLabel/StepLabel.js @@ -75,6 +75,7 @@ function StepLabel(props) { disabled, error, icon, + last, optional, orientation, StepIconComponent: StepIconComponentProp, @@ -177,6 +178,10 @@ StepLabel.propTypes = { * Override the default icon. */ icon: PropTypes.node, + /** + * @ignore + */ + last: PropTypes.bool, /** * The optional node to display. */ @@ -201,6 +206,7 @@ StepLabel.defaultProps = { completed: false, disabled: false, error: false, + last: false, orientation: 'horizontal', }; diff --git a/packages/material-ui/src/Stepper/Stepper.js b/packages/material-ui/src/Stepper/Stepper.js index bf3260f9477844..97687863120003 100644 --- a/packages/material-ui/src/Stepper/Stepper.js +++ b/packages/material-ui/src/Stepper/Stepper.js @@ -56,9 +56,10 @@ function Stepper(props) { const childrenArray = React.Children.toArray(children); const steps = childrenArray.map((step, index) => { const controlProps = { - orientation, alternativeLabel, connector: connectorProp, + last: index + 1 === childrenArray.length, + orientation, }; const state = { diff --git a/packages/material-ui/src/Stepper/Stepper.test.js b/packages/material-ui/src/Stepper/Stepper.test.js index 8f967c9e0cd70b..09f6c4f0dfb96d 100644 --- a/packages/material-ui/src/Stepper/Stepper.test.js +++ b/packages/material-ui/src/Stepper/Stepper.test.js @@ -4,7 +4,9 @@ import CheckCircle from '../internal/svg-icons/CheckCircle'; import { createShallow, createMount } from '../test-utils'; import Paper from '../Paper'; import Step from '../Step'; +import StepLabel from '../StepLabel'; import StepConnector from '../StepConnector'; +import StepContent from '../StepContent'; import Stepper from './Stepper'; describe('', () => { @@ -212,4 +214,33 @@ describe('', () => { assert.strictEqual(wrapper.find('.child-1').props().active, true); assert.strictEqual(wrapper.find('.child-2').props().active, false); }); + + it('should hide the last connector', () => { + const wrapper = mount( + + + one + + + + two + + + , + ); + assert.strictEqual( + wrapper + .find(StepContent) + .at(0) + .props().last, + false, + ); + assert.strictEqual( + wrapper + .find(StepContent) + .at(1) + .props().last, + true, + ); + }); });