fix: fix issues

gravity-ui · Mar 4, 2025 · bc8e38c · bc8e38c
1 parent 5367c7b
commit bc8e38c
Show file tree

Hide file tree

Showing 10 changed files with 149 additions and 80 deletions.
diff --git a/src/components/Stepper/README-ru.md b/src/components/Stepper/README-ru.md
@@ -170,6 +170,27 @@ const Separator = () => {
 
 <!--/GITHUB_BLOCK-->
 
+### Step with floating element
+
+<!--GITHUB_BLOCK-->
+
+```jsx
+<Stepper {...args} separator={<Separator />}>
+  <Tooltip content="fancy step with tooltip">
+    <Stepper.Item>Step 1</Stepper.Item>
+  </Tooltip>
+  <Stepper.Item view="error">Step 2</Stepper.Item>
+  <Stepper.Item view="success">Step 3</Stepper.Item>
+  <Stepper.Item>Step 4 with very long title</Stepper.Item>
+</Stepper>
+```
+
+<!-- Storybook example -->
+
+<StepperWithFloatingElements/>
+
+<!--/GITHUB_BLOCK-->
+
 ## Properties
 
 | Name             | Description                                                                         | Type                                   | Default |

diff --git a/src/components/Stepper/README.md b/src/components/Stepper/README.md
@@ -170,6 +170,29 @@ const Separator = () => {
 
 <!--/GITHUB_BLOCK-->
 
+<!--/GITHUB_BLOCK-->
+
+### Step with floating element
+
+<!--GITHUB_BLOCK-->
+
+```jsx
+<Stepper {...args} separator={<Separator />}>
+  <Tooltip content="fancy step with tooltip">
+    <Stepper.Item>Step 1</Stepper.Item>
+  </Tooltip>
+  <Stepper.Item view="error">Step 2</Stepper.Item>
+  <Stepper.Item view="success">Step 3</Stepper.Item>
+  <Stepper.Item>Step 4 with very long title</Stepper.Item>
+</Stepper>
+```
+
+<!-- Storybook example -->
+
+<StepperWithFloatingElements/>
+
+<!--/GITHUB_BLOCK-->
+
 ## Properties
 
 | Name             | Description                                               | Type                                   | Default |

diff --git a/src/components/Stepper/Stepper.scss b/src/components/Stepper/Stepper.scss
@@ -11,9 +11,6 @@ $block: '.#{variables.$ns}stepper';
     display: flex;
     gap: var(--_--step-gap);
 
-    flex-wrap: nowrap;
-    overflow-x: auto;
-
     &__list-item {
         display: flex;
         flex-wrap: nowrap;
@@ -22,10 +19,6 @@ $block: '.#{variables.$ns}stepper';
     }
 
     &__item {
-        &:hover:not(&_disabled) {
-            background-color: var(--g-color-base-generic);
-        }
-
         &_selected:not(&_disabled) {
             border-color: var(--g-color-line-info);
         }

diff --git a/src/components/Stepper/Stepper.tsx b/src/components/Stepper/Stepper.tsx
@@ -6,17 +6,17 @@ import type {AriaLabelingProps, DOMProps, QAProps} from '../types';
 import {filterDOMProps} from '../utils/filterDOMProps';
 
 import {StepperItem} from './StepperItem';
-import type {StepperItemProps} from './StepperItem';
 import {StepperSeparator} from './StepperSeparator';
+import {StepperContext} from './context';
 import type {StepperSize} from './types';
 import {b} from './utils';
 
 import './Stepper.scss';
 
 export interface StepperProps extends DOMProps, AriaLabelingProps, QAProps {
-    children: React.ReactElement<StepperItemProps> | React.ReactElement<StepperItemProps>[];
+    children: React.ReactElement | React.ReactElement[];
     value?: number | string;
-    onUpdate: (id?: number | string) => void;
+    onUpdate?: (id?: number | string) => void;
     size?: StepperSize;
     separator?: React.ReactNode;
 }
@@ -26,42 +26,33 @@ export const Stepper = (props: StepperProps) => {
 
     const stepItems = React.useMemo(() => {
         return React.Children.map(children, (child, index) => {
-            const id = child.props.id ?? index;
+            const itemId = child.props?.id || index;
+            const clonedChild = React.cloneElement(child, {id: itemId});
 
             return (
-                <li key={id} className={b('list-item')}>
-                    <StepperItem
-                        {...child.props}
-                        id={id}
-                        size={size}
-                        selected={value}
-                        onUpdate={onUpdate}
-                    />
+                <li key={itemId} className={b('list-item')}>
+                    {clonedChild}
                     {Boolean(index !== React.Children.count(children) - 1) && (
                         <StepperSeparator separator={separator} />
                     )}
                 </li>
             );
         });
-    }, [children, value, size, onUpdate, separator]);
+    }, [children, separator]);
 
     return (
-        <ol
-            {...filterDOMProps(props, {labelable: true})}
-            className={b(null, className)}
-            style={props.style}
-            data-qa={props.qa}
-        >
-            {stepItems}
-        </ol>
+        <StepperContext.Provider value={{size, onUpdate, value}}>
+            <ol
+                {...filterDOMProps(props, {labelable: true})}
+                className={b(null, className)}
+                style={props.style}
+                data-qa={props.qa}
+            >
+                {stepItems}
+            </ol>
+        </StepperContext.Provider>
     );
 };
 
-function Item(_props: StepperItemProps): React.ReactElement | null {
-    return null;
-}
-
-Stepper.Item = Item;
+Stepper.Item = StepperItem;
 Stepper.displayName = 'Stepper';
-
-export default Stepper;
diff --git a/src/components/Stepper/StepperItem.tsx b/src/components/Stepper/StepperItem.tsx
@@ -3,42 +3,38 @@ import * as React from 'react';
 import {CircleCheck, CircleDashed, CircleExclamation} from '@gravity-ui/icons';
 
 import {Button} from '../Button';
+import type {ButtonButtonProps} from '../Button';
 import {Icon} from '../Icon';
 import type {SVGIconData} from '../Icon/types';
 import {Text} from '../Text';
 
-import type {StepperProps} from './Stepper';
+import {useStepperContext} from './context';
 import type {StepperItemView} from './types';
 import {b} from './utils';
 
-import './Stepper.scss';
-
-export interface StepperItemProps {
+export type StepperItemProps = Omit<ButtonButtonProps, 'view'> & {
     id?: string | number;
     children: React.ReactNode;
     view?: StepperItemView;
     disabled?: boolean;
     icon?: SVGIconData;
     onClick?: (event: React.MouseEvent) => void;
     className?: string;
-}
-
-type ComponentProps = StepperItemProps &
-    Pick<StepperProps, 'size' | 'onUpdate'> & {selected?: string | number};
+};
 
-export const StepperItem = (props: ComponentProps) => {
+export const StepperItem = React.forwardRef<HTMLButtonElement, StepperItemProps>((props, ref) => {
     const {
         id,
-        size,
         children,
         view = 'idle',
         disabled = false,
-        selected = false,
         className,
-        onUpdate,
         icon: customIcon,
+        ...restButtonProps
     } = props;
 
+    const {onUpdate, value, size} = useStepperContext();
+
     const onClick = (e: React.MouseEvent) => {
         props.onClick?.(e);
 
@@ -66,10 +62,12 @@ export const StepperItem = (props: ComponentProps) => {
         }
     }, [view, customIcon]);
 
-    const selectedItem = id === selected;
+    const selectedItem = id === undefined ? false : id === value;
 
     return (
         <Button
+            ref={ref}
+            {...restButtonProps}
             width="auto"
             title={typeof children === 'string' ? children : undefined}
             className={b('item', {view, disabled, selected: selectedItem, size}, className)}
@@ -82,4 +80,6 @@ export const StepperItem = (props: ComponentProps) => {
             <Text className={b('item-text')}>{children}</Text>
         </Button>
     );
-};
+});
+
+StepperItem.displayName = 'StepperItem';
diff --git a/src/components/Stepper/StepperSeparator.tsx b/src/components/Stepper/StepperSeparator.tsx
@@ -1,19 +1,19 @@
-import {ChevronRight} from '@gravity-ui/icons';
+import {ChevronLeft, ChevronRight} from '@gravity-ui/icons';
 
 import {Icon} from '../Icon';
+import {useDirection} from '../theme';
 
 import {b} from './utils';
 
-import './Stepper.scss';
-
 type StepperSeparatorProps = {
     separator?: React.ReactNode;
 };
 
 export const StepperSeparator = ({separator}: StepperSeparatorProps) => {
+    const direction = useDirection();
     return (
         <div className={b('separator')} aria-hidden={true}>
-            {separator ?? <Icon data={ChevronRight} />}
+            {separator ?? <Icon data={direction === 'rtl' ? ChevronLeft : ChevronRight} />}
         </div>
     );
 };
diff --git a/src/components/Stepper/__stories__/Docs.mdx b/src/components/Stepper/__stories__/Docs.mdx
@@ -17,6 +17,9 @@ export const StepperCustomSeparator = () => (
     <Canvas of={Stories.CustomSeparator} sourceState="none" />
 );
 export const StepperDisabled = () => <Canvas of={Stories.Disabled} sourceState="none" />;
+export const StepperWithFloatingElements = () => (
+    <Canvas of={Stories.WithFloatingElements} sourceState="none" />
+);
 export const StepperInteractiveShowcase = () => (
     <Canvas of={Stories.InteractiveShowcase} sourceState="none" />
 );
@@ -36,6 +39,7 @@ export const StepperInteractiveShowcase = () => (
             StepperCustomSeparator,
             StepperDisabled,
             StepperInteractiveShowcase,
+            StepperWithFloatingElements,
         },
     }}
 >

diff --git a/src/components/Stepper/__stories__/Stepper.stories.tsx b/src/components/Stepper/__stories__/Stepper.stories.tsx
@@ -2,10 +2,10 @@ import {Cloud, CreditCard, Rocket} from '@gravity-ui/icons';
 import type {Meta, StoryObj} from '@storybook/react';
 
 import {Text} from '../../Text';
-import {Flex} from '../../layout';
+import {Tooltip} from '../../Tooltip';
 import {Stepper} from '../Stepper';
 
-import {StepperShowcase} from './StepperShowcase';
+import {StepperInteractiveShowcase, StepperSizeShowcase} from './StepperShowcase';
 
 export default {
     title: 'Components/Navigation/Stepper',
@@ -59,28 +59,8 @@ export const View = {
 } satisfies Story;
 
 export const Size = {
-    render: (args) => {
-        return (
-            <Flex direction="column" gap={4}>
-                <Stepper {...args} size="s">
-                    <Stepper.Item>Step 1</Stepper.Item>
-                    <Stepper.Item>Step 2</Stepper.Item>
-                    <Stepper.Item>Step 3</Stepper.Item>
-                </Stepper>
-
-                <Stepper {...args} size="m">
-                    <Stepper.Item>Step 1</Stepper.Item>
-                    <Stepper.Item>Step 2</Stepper.Item>
-                    <Stepper.Item>Step 3</Stepper.Item>
-                </Stepper>
-
-                <Stepper {...args} size="l">
-                    <Stepper.Item>Step 1</Stepper.Item>
-                    <Stepper.Item>Step 2</Stepper.Item>
-                    <Stepper.Item>Step 3</Stepper.Item>
-                </Stepper>
-            </Flex>
-        );
+    render: () => {
+        return <StepperSizeShowcase />;
     },
 } satisfies Story;
 
@@ -133,6 +113,21 @@ export const CustomSeparator = {
 
 export const InteractiveShowcase = {
     render: (args) => {
-        return <StepperShowcase {...args} />;
+        return <StepperInteractiveShowcase {...args} />;
+    },
+} satisfies Story;
+
+export const WithFloatingElements = {
+    render: (args) => {
+        return (
+            <Stepper {...args} separator={<Separator />}>
+                <Tooltip content="fancy step with tooltip">
+                    <Stepper.Item>Step 1</Stepper.Item>
+                </Tooltip>
+                <Stepper.Item view="error">Step 2</Stepper.Item>
+                <Stepper.Item view="success">Step 3</Stepper.Item>
+                <Stepper.Item>Step 4 with very long title</Stepper.Item>
+            </Stepper>
+        );
     },
 } satisfies Story;
diff --git a/src/components/Stepper/__stories__/StepperShowcase.tsx b/src/components/Stepper/__stories__/StepperShowcase.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 
-import Stepper from '../Stepper';
+import {Flex} from '../../layout/Flex/Flex';
+import {Stepper} from '../Stepper';
 import type {StepperProps} from '../Stepper';
 
-export const StepperShowcase = (props: StepperProps) => {
+export const StepperInteractiveShowcase = (props: StepperProps) => {
     const [value, setValue] = React.useState<number | string | undefined>(0);
 
     return (
@@ -15,3 +16,27 @@ export const StepperShowcase = (props: StepperProps) => {
         </Stepper>
     );
 };
+
+export const StepperSizeShowcase = () => {
+    return (
+        <Flex direction="column" gap={4}>
+            <Stepper size="s">
+                <Stepper.Item>Step 1</Stepper.Item>
+                <Stepper.Item>Step 2</Stepper.Item>
+                <Stepper.Item>Step 3</Stepper.Item>
+            </Stepper>
+
+            <Stepper size="m">
+                <Stepper.Item>Step 1</Stepper.Item>
+                <Stepper.Item>Step 2</Stepper.Item>
+                <Stepper.Item>Step 3</Stepper.Item>
+            </Stepper>
+
+            <Stepper size="l">
+                <Stepper.Item>Step 1</Stepper.Item>
+                <Stepper.Item>Step 2</Stepper.Item>
+                <Stepper.Item>Step 3</Stepper.Item>
+            </Stepper>
+        </Flex>
+    );
+};
diff --git a/src/components/Stepper/context.ts b/src/components/Stepper/context.ts
@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+import type {StepperProps} from './Stepper';
+
+export type StepperContextProps = Pick<StepperProps, 'size' | 'onUpdate' | 'value'>;
+
+export const StepperContext = React.createContext<StepperContextProps>({
+    size: 'm',
+    onUpdate: undefined,
+    value: undefined,
+});
+
+export const useStepperContext = () => {
+    const data = React.useContext(StepperContext);
+
+    return data;
+};