[StepConnector] Customize connector based on internal states #13023
Conversation
The properties are used to render classNames for the line element of the `StepConnector`.
| @@ -38,10 +38,25 @@ export const styles = theme => ({ | |||
| borderLeftWidth: 1, | |||
| minHeight: 24, | |||
| }, | |||
| /* Styles applied to the line element if `active={true}`. */ | |||
| lineActive: {}, | |||
There was a problem hiding this comment.
What do you think of moving the state variant to the root element so people can write advanced logic?
There was a problem hiding this comment.
What do you mean by root element? The div element on the StepConnector component? So basically move these
[classes.lineActive]: active,
[classes.lineCompleted]: completed,
[classes.lineDisabled]: disabled,
to className instead of the lineClassName? So they are applied to the root element?
There was a problem hiding this comment.
Yes, what do you think about it.
There was a problem hiding this comment.
I tried that! However, the following doesn't work anymore
lineActive: {
borderColor: theme.palette.secondary.main,
},
lineCompleted: {
borderColor: theme.palette.primary.main,
},
<StepConnector
classes={{ lineActive: classes.lineActive, lineCompleted: classes.lineCompleted }}
/>because the div element doesn't have a borderColor. How can we apply a borderColor in this case with a class on the div element instead of the span element? How can we style the line with a class on the div element? Maybe I am missing something.
There was a problem hiding this comment.
Ok, there is a way to accomplish that! I updated the PR!
| @@ -87,6 +117,9 @@ StepConnector.propTypes = { | |||
| StepConnector.defaultProps = { | |||
| alternativeLabel: false, | |||
| orientation: 'horizontal', | |||
| active: false, | |||
There was a problem hiding this comment.
Do we need the default value if they are not documented?
There was a problem hiding this comment.
You are right, we don't need to define default values. The default value is undefined anyway so [classes.lineActive]: active will work as expected.
| @@ -66,12 +66,21 @@ function Stepper(props) { | |||
| connector: connectorProp, | |||
| }; | |||
|
|
|||
| const connectorProps = { | |||
There was a problem hiding this comment.
Can we reuse a state object between the connetor and control element?
oliviertassinari
added
new feature
spirosikmd
force-pushed
the
step-connector-customize
branch
from
bd38e10 to
f9862d3
Compare
oliviertassinari
changed the title
| @@ -64,6 +62,12 @@ Labels can be placed below the step icon by setting the `alternativeLabel` prope | |||
|
|
|||
| {{"demo": "pages/demos/steppers/VerticalLinearStepper.js"}} | |||
|
|
|||
| ## Customized Stepper | |||
|
|
|||
| The example also uses a customized `StepConnector` element that changes border color based on the `active` and `completed` state. | |||
There was a problem hiding this comment.
The text is a bit off now that we moved it to its own section. Maybe
This component uses a customized `StepConnector` element that changes border color based on the `active` and `completed` state.
|
@spirosikmd Thank you! |
* [StepConnector] Introduce active, completed, and disabled properties The properties are used to render classNames for the line element of the `StepConnector`. * [Stepper] Pass active, completed, disabled props to connectors * [StepConnector] Update api docs * [Stepper] Use state object for control and connector * [StepConnector] Remove default boolean state values * [StepConnector] Apply state classes to root element * let's merge * Update steppers.md * remove regressions
|
@oliviertassinari Would it be possible to include an error class here as well? |
Closes #13010
This can be accomplished with the following example:
or with using
createMuiTheme:Before
After