feat: create Stepper component #2098
Conversation
bityutskiyAO
commented
Feb 7, 2025
bityutskiyAO
commented
- create Stepper component
- create stories for Stepper
- add README files for both languages (en, ru)
|
Preview is ready. |
|
Visual Tests Report is ready. |
bityutskiyAO
force-pushed
the
feat/create-stepper-component
branch
from
0a4369b to
9d1480e
Compare
src/components/Stepper/README.md
Outdated
| | qa | `data-qa` HTML attribute, used for testing. | `string` | | | ||
| | separator | Custom separator node. | `React.ReactNode` | | | ||
| | className | CSS class name for the element. | `string` | | | ||
| | style | Sets the inline style for the element. | `CSSProperties` | | |
There was a problem hiding this comment.
I think we may clarify that we are talking about a container
src/components/Stepper/Stepper.scss
Outdated
| background-color: var(--g-color-base-generic); | ||
| } | ||
|
|
||
| &__text { |
There was a problem hiding this comment.
That is not valid naming according to bem methodology. There we have &__item__text, block in a block. Could add it as a separate block?
src/components/Stepper/Stepper.scss
Outdated
| @include mixins.overflow-ellipsis(); | ||
| } | ||
|
|
||
| &__icon { |
There was a problem hiding this comment.
The same issue about block in a block
| @@ -0,0 +1,23 @@ | |||
| import type {StepperItemProps} from '../StepperItem'; | |||
|
|
|||
| export const useRelativeSteps = ( | |||
There was a problem hiding this comment.
It seems that this code doesn't used. Why we need it?
There was a problem hiding this comment.
When we talking about 2 types of steps "relative" and "non relative", we discuss, that it may be helpfull for end-users to have this hook for auto disabling steps after selected
There was a problem hiding this comment.
I think we can skip it for the first iteration because we don't know real user cases
| }; | ||
|
|
||
| return ( | ||
| <button |
There was a problem hiding this comment.
I think we can use gravity Button here
| separator?: React.ReactNode; | ||
| }; | ||
|
|
||
| export const StepperSeparator = ({separator}: StepperSeparatorProps) => { |
There was a problem hiding this comment.
We can use smth like BreadcrumbsSeparator
src/components/Stepper/Stepper.tsx
Outdated
| } | ||
|
|
||
| export const Stepper = (props: StepperProps) => { | ||
| const {children, value = 0, size = 's', className, onUpdate, separator} = props; |
There was a problem hiding this comment.
Is it possible to use component without initial value?
There was a problem hiding this comment.
u mean without value = 0? I guess, it can
There was a problem hiding this comment.
Yep. So, it looks like an uncontrolled state if we need to set value=undefined, otherwise we need some special value to have such behaviour in controlled state
src/components/Stepper/Stepper.tsx
Outdated
| }, [children, value, size, onUpdate, separator]); | ||
|
|
||
| return ( | ||
| <ol className={b(null, className)} style={props.style} data-qa={props.qa}> |
There was a problem hiding this comment.
Component can receive DOMProps and AriaLabelingProps, but u don't use it here. U can get Breadcrumbs as an example
src/components/Stepper/Stepper.tsx
Outdated
| separator?: React.ReactNode; | ||
| } | ||
|
|
||
| function Item(_props: StepperItemProps): React.ReactElement | null { |
There was a problem hiding this comment.
I think we don't need this component, so u can use StepperItem directly
There was a problem hiding this comment.
I try to remove it, but it usefull because of the fact, that i need to add some props to StepperItem (selected, onUpdate, size) that should not be directly accessible via StepItem (root component pass it)
src/components/Stepper/Stepper.tsx
Outdated
| const stepItems = React.useMemo(() => { | ||
| const items: React.ReactElement<StepperItemProps>[] = []; | ||
|
|
||
| React.Children.forEach(children, (child, index) => { |
There was a problem hiding this comment.
Do we actually need this logic? I think we can get all the children and StepperSeparator ti them without cloning them
