ui v2: add stepper component #691
Conversation
|
|
||
| const StepConnector = styled(MuiStepConnector)((props: { completed?: boolean }) => ({ | ||
| ".MuiStepConnector-line": { | ||
| height: "5px", |
There was a problem hiding this comment.
i think the height on figma is 7px
There was a problem hiding this comment.
oh it depends on which bar you read the height from. the bar example in the last row specifies 5px.
There was a problem hiding this comment.
i think it is supposed to be 7px, left a comment on figma for clarification though
|
|
||
| const Stepper = ({ activeStep, children }: StepperProps) => ( | ||
| <div> | ||
| <MuiStepper style={{ padding: "0" }} activeStep={activeStep + 1} connector={<StepConnector />}> |
There was a problem hiding this comment.
can we push the inline styles up to the parent div and use selectors?
| </MuiStepper> | ||
| <Grid style={{ padding: "16px 0" }} container justify="space-between"> | ||
| {React.Children.map(children, (step: any, idx: number) => ( | ||
| <StepLabel item data-active={idx === activeStep}> |
There was a problem hiding this comment.
thinking about it more what about using a class name instead of data-.
There was a problem hiding this comment.
I kind of like using props here since it makes it clear what we are specifying compared to what Material is injecting
There was a problem hiding this comment.
though data won't cascade for nested selectors, i think in general we should standardize on classes. we can use a prefix to distinguish from Mui if needed.
note: (comment after merge, not a blocker)
There was a problem hiding this comment.
👍 going to make a cleanup task and add some of the standardizing bits we have talked about to it
Description
Add a stepper component. I've improvised with an error icon for now. We can update once we get finalized designs.
Once we settle on colors we can hoist these up into the palette
Testing Performed
manual via story