docs(StepGroup): API Decision #2124
Conversation
|
|
✅ PR title follows Conventional Commits specification. |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 2ba0aec:
|
|
|
||
| ```jsx | ||
| const InteractiveStepGroup = () => { | ||
| const [selectedIndex, setSelectedIndex] = React.useState(-1); |
There was a problem hiding this comment.
How to handle interactive + nested step group?
There was a problem hiding this comment.
this index is anyway consumer-side only so they can either just give 1, 2, 3, 4, indexes in sequential manner indepdent of nesting and handle
Or they can keep state like useState('1-2') to represent second item in first StepGroup. Either way eventually they just have to give isSelected to selected item somehow
| | size | Size of StepGroup | 'medium' \| 'large' | 'medium' | | ||
| | orientation | Orientation of StepGroup | 'horizontal' \| 'vertical' | 'vertical' | | ||
|
|
||
| ### StepItem |
There was a problem hiding this comment.
Where's children for StepItem?
Slot ka content kaha jayga?
There was a problem hiding this comment.
ops forgot to add in this table. will add
|
|
||
| - ### Should we add `isInteractive` prop? | ||
|
|
||
| In the proposed API, I have proposed that we can turn item into interactive or static based on whether it has `onClick` or `href` or nothing. Is it intuitive enough? or should we add more explict prop called `isInteractive` like we have in design |
There was a problem hiding this comment.
I think this is Okay, similar thing we are doing on Card too. where adding href/onClick makes the card interactive without an explicit prop.
|
|
||
| - ### Alternative to `leading` | ||
|
|
||
| Currently I have proposed `leading` prop where we can add Icon or indicator. Although in horizontal orientation, its not exactly "leading". It comes on top. Its also not very equivalent to leading we have in other components. |
There was a problem hiding this comment.
what happens to trailing on horizontal variant?
There was a problem hiding this comment.
There is no trailing in horizontal
| </StepGroup> | ||
| ``` | ||
|
|
||
| Q. Should we go with 1st, 2nd, or 3rd approach? |
There was a problem hiding this comment.
3rd approach has a slightly better DX. With the first approach I'll have to manually pass isSelected prop to each nested step group.
But the 1st approach is a bit more flexible, imagine if user wants to add some other conditional logic on isSelected with 1st approach they can.
<StepItem isSelected={!orderExpired && selectedIndex === 3} />
or have multiple selected? If we even want to support it
<StepItem isSelected={selectedIndex.includes(1)} />
<StepItem isSelected={selectedIndex.includes(2)} />There was a problem hiding this comment.
Yup I am also leaning towards 1st one because of flexibility. I don't think so multiple selections is a usecase but that additional condition seems fair.
Also biggest reason is if we go with 3rd or 2nd, we have to define how we want to handle nested + interactive. So might have to define some strange index like selected="1-2"
Which is not the concern in 1st - #2124 (comment)
saurabhdaware
requested review from
chaitanyadeorukhkar,
kamleshchandnani and
snitin315
as code owners
✨ Formatted Document ✨