From 39e9ee2b0249db667dd124df5663f95e398cd0c1 Mon Sep 17 00:00:00 2001 From: AlbetItrum <113897836+AlbetItrum@users.noreply.github.com> Date: Mon, 17 Jun 2024 18:33:23 +0300 Subject: [PATCH 1/7] feat(Stepper): add new component --- .../src/components/Stepper/Step/Step.api.mdx | 37 ++++ .../components/Stepper/Step/Step.classes.ts | 40 +++++ .../src/components/Stepper/Step/Step.tsx | 153 +++++++++++++++++ .../src/components/Stepper/Step/Step.types.ts | 43 +++++ .../src/components/Stepper/Step/index.ts | 3 + .../Stepper/StepLabel/StepLabel.api.mdx | 37 ++++ .../Stepper/StepLabel/StepLabel.classes.ts | 14 ++ .../Stepper/StepLabel/StepLabel.tsx | 47 +++++ .../Stepper/StepLabel/StepLabel.types.ts | 15 ++ .../src/components/Stepper/StepLabel/index.ts | 3 + .../src/components/Stepper/Stepper.api.mdx | 37 ++++ .../src/components/Stepper/Stepper.classes.ts | 30 ++++ .../components/Stepper/Stepper.stories.tsx | 77 +++++++++ .../react/src/components/Stepper/Stepper.tsx | 160 ++++++++++++++++++ .../src/components/Stepper/Stepper.types.ts | 31 ++++ .../react/src/components/Stepper/index.ts | 5 + packages/react/src/components/index.ts | 3 +- packages/react/src/overrides.d.ts | 27 +++ 18 files changed, 760 insertions(+), 2 deletions(-) create mode 100644 packages/react/src/components/Stepper/Step/Step.api.mdx create mode 100644 packages/react/src/components/Stepper/Step/Step.classes.ts create mode 100644 packages/react/src/components/Stepper/Step/Step.tsx create mode 100644 packages/react/src/components/Stepper/Step/Step.types.ts create mode 100644 packages/react/src/components/Stepper/Step/index.ts create mode 100644 packages/react/src/components/Stepper/StepLabel/StepLabel.api.mdx create mode 100644 packages/react/src/components/Stepper/StepLabel/StepLabel.classes.ts create mode 100644 packages/react/src/components/Stepper/StepLabel/StepLabel.tsx create mode 100644 packages/react/src/components/Stepper/StepLabel/StepLabel.types.ts create mode 100644 packages/react/src/components/Stepper/StepLabel/index.ts create mode 100644 packages/react/src/components/Stepper/Stepper.api.mdx create mode 100644 packages/react/src/components/Stepper/Stepper.classes.ts create mode 100644 packages/react/src/components/Stepper/Stepper.stories.tsx create mode 100644 packages/react/src/components/Stepper/Stepper.tsx create mode 100644 packages/react/src/components/Stepper/Stepper.types.ts create mode 100644 packages/react/src/components/Stepper/index.ts diff --git a/packages/react/src/components/Stepper/Step/Step.api.mdx b/packages/react/src/components/Stepper/Step/Step.api.mdx new file mode 100644 index 000000000..045916384 --- /dev/null +++ b/packages/react/src/components/Stepper/Step/Step.api.mdx @@ -0,0 +1,37 @@ +import { Meta } from '@storybook/blocks'; +import LinkTo from '@storybook/addon-links/react'; +import { TableInterface } from '~storybook/components/TableInterface'; + + + +# Dropzone API + +```js +import { Step } from '@elonkit/react'; +``` + +## Component name + +The name `ESStep` can be used when providing default props or style overrides in the theme. + +## Props + + + +
+ +## CSS + + + +
+ +## Demos + + diff --git a/packages/react/src/components/Stepper/Step/Step.classes.ts b/packages/react/src/components/Stepper/Step/Step.classes.ts new file mode 100644 index 000000000..981e3b9f0 --- /dev/null +++ b/packages/react/src/components/Stepper/Step/Step.classes.ts @@ -0,0 +1,40 @@ +import { generateUtilityClass, generateUtilityClasses } from '@mui/material'; + +export type StepClasses = { + /** Styles applied to the root element. */ + root: string; + /** Styles applied to the root element if component disabled. */ + disabled: string; + /** Styles applied to the size element. */ + size: string; + /** Styles applied to the completed element. */ + completed: string; + /** State class applied to the root element if `error={true}`. */ + error: string; + /** Styles applied to the activeStep element. */ + activeStep: string; + /** Styles applied to the root element if position='bottom'. */ + positionBottom: string; + /** Styles applied to the root element if position='default'. */ + positionDefault: string; + /** Styles applied to the orientation element. */ + vertical: string; +}; + +export type StepClassKey = keyof StepClasses; + +export function getStepUtilityClass(slot: string): string { + return generateUtilityClass('ESStep', slot); +} + +export const stepClasses: StepClasses = generateUtilityClasses('ESStep', [ + 'root', + 'disabled', + 'size', + 'completed', + 'positionBottom', + 'positionDefault', + 'vertical', + 'error', + 'activeStep', +]); diff --git a/packages/react/src/components/Stepper/Step/Step.tsx b/packages/react/src/components/Stepper/Step/Step.tsx new file mode 100644 index 000000000..65d67bdf5 --- /dev/null +++ b/packages/react/src/components/Stepper/Step/Step.tsx @@ -0,0 +1,153 @@ +import { StepProps } from './Step.types'; + +import clsx from 'clsx'; +import { getStepUtilityClass, stepClasses } from './Step.classes'; + +import { unstable_composeClasses as composeClasses } from '@mui/base'; + +import { styled, useThemeProps } from '@mui/material/styles'; +import { capitalize } from '@mui/material'; + +import { IconCheckW500, IconExclamation } from '../../../icons'; +import { Button } from '../../Button'; + +type StepOwnerState = { + classes?: StepProps['classes']; + error?: boolean; + completed?: boolean; + size?: string; + activeStep?: number; + disabled?: boolean; + position?: 'default' | 'bottom'; + orientation?: 'horizontal' | 'vertical'; +}; + +const useUtilityClasses = (ownerState: StepOwnerState) => { + const { classes, completed, error, size, position, orientation } = ownerState; + + const slots = { + root: [ + 'root', + completed && 'completed', + error && 'error', + size && 'size', + position && `position${capitalize(position)}`, + orientation, + ], + button: ['button'], + circle: ['circle'], + }; + + return composeClasses(slots, getStepUtilityClass, classes); +}; + +const StepRoot = styled(Button, { + name: 'ESStepRoot', + slot: 'Root', + overridesResolver: (_props, styles) => { + const { + ownerState: { orientation, position }, + } = _props; + return [styles.wrapper, styles[orientation], position && styles[`position${capitalize(position)}`]]; + }, +})<{ ownerState: StepOwnerState }>(() => ({ + minHeight: '57px', + height: '100%', + position: 'relative', + '& .ESButtonBase-wrapper': { + display: 'flex', + justifyContent: 'flex-start', + }, + + [`&.${stepClasses.positionBottom}`]: { + [`&:not(.${stepClasses.vertical})`]: { + '& .ESButtonBase-wrapper': { + flexDirection: 'column', + height: 'auto', + marginTop: '21px', + }, + }, + }, +})); + +const StepCircle = styled('div', { + name: 'ESStepCircle', + slot: 'Circle', + overridesResolver: (props, styles) => { + const { + ownerState: { completed, error, disabled }, + } = props; + return [styles.button, completed && styles.completed, error && styles.error, disabled && styles.disabled]; + }, +})<{ ownerState: StepOwnerState }>(({ theme, ownerState }) => ({ + marginRight: '12px', + marginLeft: '8px', + borderRadius: '50%', + width: `${ownerState.size}px`, + color: theme.palette.monoB[500], + height: `${ownerState.size}px`, + display: 'flex', + minWidth: `${ownerState.size}px`, + alignItems: 'center', + justifyContent: 'center', + background: theme.palette.monoA.A500, + + ...((ownerState.completed || ownerState.activeStep) && { + background: theme.palette.primary[300], + }), + + ...(ownerState.error && { + background: theme.palette.error[300], + }), + + ...(ownerState.disabled && { + background: theme.palette.monoA.A300, + }), +})); + +export const Step = (inProps: StepProps) => { + const { + sx, + className, + disabled, + children, + error, + stepIndex, + completed, + activeStep, + position, + size = '32', + orientation, + ...props + } = useThemeProps({ + props: inProps, + name: 'ESStep', + }); + const ownerState = { + ...props, + size, + error, + completed, + activeStep, + disabled, + position, + orientation, + }; + + const classes = useUtilityClasses(ownerState); + + return ( + + + {completed ? ( + + ) : error ? ( + + ) : ( + stepIndex + )} + + {children} + + ); +}; diff --git a/packages/react/src/components/Stepper/Step/Step.types.ts b/packages/react/src/components/Stepper/Step/Step.types.ts new file mode 100644 index 000000000..46958bffd --- /dev/null +++ b/packages/react/src/components/Stepper/Step/Step.types.ts @@ -0,0 +1,43 @@ +import { ReactNode } from 'react'; + +import { StepClasses } from './Step.classes'; + +import { SxProps, Theme } from '@mui/material'; + +export interface StepProps { + children?: ReactNode; + /** Class applied to the root element. */ + className?: string; + /** Override or extend the styles applied to the component. */ + classes?: Partial; + /** The system prop that allows defining system overrides as well as additional CSS styles. */ + sx?: SxProps; + /** + * Avatar size. + * @default 32 + */ + size?: '24' | '32'; + /** Styles applied to the track element. */ + completed?: boolean; + /** Is the step complete */ + activeStep?: number; + /** + * If `true`, the component is error. + */ + error?: boolean; + + stepIndex?: number; + /** If true, the step is disabled. */ + disabled?: boolean; + + /** + * The component position. + * @default 'default' + */ + position?: 'default' | 'bottom'; + /** + * The component position. + * @default 'horizontal' + */ + orientation?: 'horizontal' | 'vertical'; +} diff --git a/packages/react/src/components/Stepper/Step/index.ts b/packages/react/src/components/Stepper/Step/index.ts new file mode 100644 index 000000000..a0bf2dafc --- /dev/null +++ b/packages/react/src/components/Stepper/Step/index.ts @@ -0,0 +1,3 @@ +export { Step } from './Step'; +export { StepClasses, stepClasses, StepClassKey } from './Step.classes'; +export { StepProps } from './Step.types'; diff --git a/packages/react/src/components/Stepper/StepLabel/StepLabel.api.mdx b/packages/react/src/components/Stepper/StepLabel/StepLabel.api.mdx new file mode 100644 index 000000000..50f743245 --- /dev/null +++ b/packages/react/src/components/Stepper/StepLabel/StepLabel.api.mdx @@ -0,0 +1,37 @@ +import { Meta } from '@storybook/blocks'; +import LinkTo from '@storybook/addon-links/react'; +import { TableInterface } from '~storybook/components/TableInterface'; + + + +# Dropzone API + +```js +import { StepLabel } from '@elonkit/react'; +``` + +## Component name + +The name `ESStepLabel` can be used when providing default props or style overrides in the theme. + +## Props + + + +
+ +## CSS + + + +
+ +## Demos + +
    +
  • + + StepLabel + +
    • +
diff --git a/packages/react/src/components/Stepper/StepLabel/StepLabel.classes.ts b/packages/react/src/components/Stepper/StepLabel/StepLabel.classes.ts new file mode 100644 index 000000000..857bd3304 --- /dev/null +++ b/packages/react/src/components/Stepper/StepLabel/StepLabel.classes.ts @@ -0,0 +1,14 @@ +import { generateUtilityClass, generateUtilityClasses } from '@mui/material'; + +export type StepLabelClasses = { + /** Styles applied to the root element. */ + root: string; +}; + +export type StepLabelClassKey = keyof StepLabelClasses; + +export function getStepLabelUtilityClass(slot: string): string { + return generateUtilityClass('ESStepLabel', slot); +} + +export const stepLabelClasses: StepLabelClasses = generateUtilityClasses('ESStepLabel', ['root']); diff --git a/packages/react/src/components/Stepper/StepLabel/StepLabel.tsx b/packages/react/src/components/Stepper/StepLabel/StepLabel.tsx new file mode 100644 index 000000000..6a72857d3 --- /dev/null +++ b/packages/react/src/components/Stepper/StepLabel/StepLabel.tsx @@ -0,0 +1,47 @@ +import { StepLabelProps } from './StepLabel.types'; + +import clsx from 'clsx'; + +import { unstable_composeClasses as composeClasses } from '@mui/base'; + +import { styled, useThemeProps } from '@mui/material/styles'; +import { getStepLabelUtilityClass, Typography } from '@mui/material'; + +type StepLabelOwnerState = { + classes?: StepLabelProps['classes']; +}; + +const useUtilityClasses = (ownerState: StepLabelOwnerState) => { + const { classes } = ownerState; + + const slots = { + root: ['root'], + }; + + return composeClasses(slots, getStepLabelUtilityClass, classes); +}; + +const StepLabelRoot = styled(Typography, { + name: 'ESStepLabelRoot', + slot: 'Indicator', + overridesResolver: (props, styles) => styles.root, +})<{ ownerState: StepLabelOwnerState }>(({ theme }) => ({ + color: theme.palette.monoA.A900, + textTransform: 'none', +})); + +export const StepLabel = (inProps: StepLabelProps) => { + const { className, children, ...props } = useThemeProps({ + props: inProps, + name: 'ESStepLabel', + }); + + const ownerState = { ...props }; + const classes = useUtilityClasses(ownerState); + + return ( + + {children} + + ); +}; diff --git a/packages/react/src/components/Stepper/StepLabel/StepLabel.types.ts b/packages/react/src/components/Stepper/StepLabel/StepLabel.types.ts new file mode 100644 index 000000000..f0ef5c6f5 --- /dev/null +++ b/packages/react/src/components/Stepper/StepLabel/StepLabel.types.ts @@ -0,0 +1,15 @@ +import { ReactNode } from 'react'; + +import { StepLabelClasses } from './StepLabel.classes'; + +import { SxProps, Theme } from '@mui/material'; + +export interface StepLabelProps { + children?: ReactNode; + /** Class applied to the root element. */ + className?: string; + /** Override or extend the styles applied to the component. */ + classes?: Partial; + /** The system prop that allows defining system overrides as well as additional CSS styles. */ + sx?: SxProps; +} diff --git a/packages/react/src/components/Stepper/StepLabel/index.ts b/packages/react/src/components/Stepper/StepLabel/index.ts new file mode 100644 index 000000000..2238a8c71 --- /dev/null +++ b/packages/react/src/components/Stepper/StepLabel/index.ts @@ -0,0 +1,3 @@ +export { StepLabel } from './StepLabel'; +export { StepLabelClasses, stepLabelClasses, StepLabelClassKey } from './StepLabel.classes'; +export { StepLabelProps } from './StepLabel.types'; diff --git a/packages/react/src/components/Stepper/Stepper.api.mdx b/packages/react/src/components/Stepper/Stepper.api.mdx new file mode 100644 index 000000000..d4161ff00 --- /dev/null +++ b/packages/react/src/components/Stepper/Stepper.api.mdx @@ -0,0 +1,37 @@ +import { Meta } from '@storybook/blocks'; +import LinkTo from '@storybook/addon-links/react'; +import { TableInterface } from '~storybook/components/TableInterface'; + + + +# Dropzone API + +```js +import { Stepper } from '@elonkit/react'; +``` + +## Component name + +The name `ESStepper` can be used when providing default props or style overrides in the theme. + +## Props + + + +
+ +## CSS + + + +
+ +## Demos + +
    +
  • + + Stepper + +
    • +
diff --git a/packages/react/src/components/Stepper/Stepper.classes.ts b/packages/react/src/components/Stepper/Stepper.classes.ts new file mode 100644 index 000000000..249ed45d0 --- /dev/null +++ b/packages/react/src/components/Stepper/Stepper.classes.ts @@ -0,0 +1,30 @@ +import { generateUtilityClass, generateUtilityClasses } from '@mui/material'; + +export type StepperClasses = { + /** Styles applied to the root element. */ + root: string; + /** Styles applied to the root element if component disabled. */ + disabled: string; + /** Styles applied to the orientation element. */ + horizontal: string; + /** Styles applied to the orientation element. */ + vertical: string; + /** Styles applied to the size element. */ + size: string; + size24: string; +}; + +export type StepperClassKey = keyof StepperClasses; + +export function getStepperUtilityClass(slot: string): string { + return generateUtilityClass('ESStepper', slot); +} + +export const stepperClasses: StepperClasses = generateUtilityClasses('ESStepper', [ + 'root', + 'disabled', + 'horizontal', + 'vertical', + 'size', + 'size24', +]); diff --git a/packages/react/src/components/Stepper/Stepper.stories.tsx b/packages/react/src/components/Stepper/Stepper.stories.tsx new file mode 100644 index 000000000..e0b7e0b1b --- /dev/null +++ b/packages/react/src/components/Stepper/Stepper.stories.tsx @@ -0,0 +1,77 @@ +import { Meta, StoryContext, StoryObj } from '@storybook/react'; + +import { Step } from './Step/Step'; +import { StepLabel } from './StepLabel'; +import { Stepper } from '.'; + +const getText = (context: StoryContext) => { + return context.globals.locale === 'en' ? 'Button' : 'Кнопка'; +}; + +const meta: Meta = { + tags: ['autodocs'], + component: Stepper, + parameters: { + references: ['Stepper'], + }, + argTypes: { + children: { + control: { + type: 'text', + }, + }, + size: { + options: ['24', '32'], + control: { + type: 'select', + }, + }, + activeStep: { + control: { type: 'number' }, + }, + orientation: { + options: ['horizontal', 'vertical'], + control: { + type: 'select', + }, + }, + }, + args: { + size: '32', + orientation: 'horizontal', + }, +}; + +export default meta; +type Story = StoryObj; + +type StepStatus = 'completed' | 'inProgress' | 'error'; + +export interface Step { + id: number; + title: string; + status: StepStatus; + content?: React.ReactNode; +} + +export const Demo: Story = { + render: (args, context) => { + const text = getText(context); + return ( + + + {text} + + + {text} + + + {text} + + + {text} + + + ); + }, +}; diff --git a/packages/react/src/components/Stepper/Stepper.tsx b/packages/react/src/components/Stepper/Stepper.tsx new file mode 100644 index 000000000..bbd39288b --- /dev/null +++ b/packages/react/src/components/Stepper/Stepper.tsx @@ -0,0 +1,160 @@ +import React from 'react'; + +import { StepperProps } from './Stepper.types'; + +import clsx from 'clsx'; +import { getStepperUtilityClass, stepperClasses } from './Stepper.classes'; + +import { unstable_composeClasses as composeClasses } from '@mui/base'; + +import { styled, useThemeProps } from '@mui/material/styles'; + +type StepperOwnerState = { + classes?: StepperProps['classes']; + orientation?: 'horizontal' | 'vertical'; + activeStep?: StepperProps['activeStep']; + size?: StepperProps['size']; + position?: 'default' | 'bottom'; + size24?: boolean; +}; + +const useUtilityClasses = (ownerState: StepperOwnerState) => { + const { classes, orientation, size24 } = ownerState; + + const slots = { + root: ['root', orientation, size24 && 'size24'], + container: ['container'], + activeStep: ['activeStep'], + size: ['size'], + }; + + return composeClasses(slots, getStepperUtilityClass, classes); +}; + +const StepperRoot = styled('div', { + name: 'ESStepperContainer', + slot: 'Container', + overridesResolver: (props, styles) => { + const { + ownerState: { orientation }, + } = props; + + return [styles.container, styles[orientation]]; + }, +})<{ ownerState: StepperOwnerState }>(() => ({ + display: 'flex', + [`&.${stepperClasses.horizontal}`]: { + flexDirection: 'row', + alignItems: 'center', + }, + [`&.${stepperClasses.vertical}`]: { + flexDirection: 'column', + alignItems: 'initial', + gap: '8px', + }, +})); + +const StepperConnectorRoot = styled('div', { + name: 'ESStepperConnectorLine', + slot: 'Line', + overridesResolver: (props, styles) => styles.container, +})(() => ({ + position: 'relative', + width: '100%', +})); + +const StepperContainer = styled('div', { + name: 'ESStepContainer', + slot: 'Container', + overridesResolver: (props, styles) => styles.container, +})(() => ({})); + +const StepperConnectorLine = styled('div', { + name: 'ESStepperConnectorLine', + slot: 'Line', + overridesResolver: (props, styles) => { + const { + ownerState: { orientation, size, size24 }, + } = props; + + return [styles.line, styles[orientation], styles[size], styles[size24]]; + }, +})<{ ownerState: StepperOwnerState; isActive: boolean }>(({ theme, isActive }) => ({ + position: 'absolute', + height: '1px', + backgroundColor: isActive ? theme.palette.primary[300] : theme.palette.monoA.A300, + + [`&.${stepperClasses.horizontal}`]: { + width: '100%', + marginLeft: '-4px', + }, + + [`&.${stepperClasses.vertical}`]: { + left: '15px', + right: '-16px', + width: '34px', + transform: 'rotate(90deg)', + }, + [`&.${stepperClasses.size24}`]: { + [`&.${stepperClasses.vertical}`]: { + left: '12px', + width: '34px', + transform: 'rotate(90deg)', + }, + }, +})); + +export const Stepper = (inProps: StepperProps) => { + const { + className, + sx, + children, + activeStep, + orientation = 'horizontal', + position = 'default', + size = '32', + ...props + } = useThemeProps({ + props: inProps, + name: 'ESStepper', + }); + + const ownerState = { + ...props, + position, + orientation, + activeStep, + size, + size24: size === '24', + }; + + const classes = useUtilityClasses(ownerState); + + return ( + + {React.Children.map(children, (child, index) => ( + <> + + {React.cloneElement(child as React.ReactElement, { + ...props, + activeStep: activeStep === index, + orientation, + position, + size, + stepIndex: index + 1, + })} + + {index < React.Children.count(children) - 1 && ( + + + + )} + + ))} + + ); +}; diff --git a/packages/react/src/components/Stepper/Stepper.types.ts b/packages/react/src/components/Stepper/Stepper.types.ts new file mode 100644 index 000000000..f7cace758 --- /dev/null +++ b/packages/react/src/components/Stepper/Stepper.types.ts @@ -0,0 +1,31 @@ +import { ReactNode } from 'react'; + +import { StepperClasses } from './Stepper.classes'; + +import { SxProps, Theme } from '@mui/material'; + +export interface StepperProps { + className?: string; + /** Override or extend the styles applied to the component. */ + children: ReactNode; + classes?: Partial; + /** The system prop that allows defining system overrides as well as additional CSS styles. */ + sx?: SxProps; + /** + * Avatar size. + * @default 32 + */ + size?: '24' | '32'; + /** Count the active step. */ + activeStep: number; + /** + * The component orientation. + * @default 'horizontal' + */ + orientation?: 'horizontal' | 'vertical'; + /** + * The component orientation. + * @default 'default' + */ + position?: 'default' | 'bottom'; +} diff --git a/packages/react/src/components/Stepper/index.ts b/packages/react/src/components/Stepper/index.ts new file mode 100644 index 000000000..0899cc55a --- /dev/null +++ b/packages/react/src/components/Stepper/index.ts @@ -0,0 +1,5 @@ +export * from './Step'; +export * from './StepLabel'; +export { Stepper } from './Stepper'; +export { StepperClasses, stepperClasses, StepperClassKey } from './Stepper.classes'; +export { StepperProps } from './Stepper.types'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 206915895..0453dc467 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -54,10 +54,9 @@ export * from './Sidenav'; export * from './Snackbar'; export * from './SortingMenu'; export * from './Spinner'; -export * from './Spinner'; +export * from './Stepper'; export * from './SvgIcon'; export * from './Swiper'; -export * from './Swiper'; export * from './Switch'; export * from './SwitchBase'; export * from './TabBar'; diff --git a/packages/react/src/overrides.d.ts b/packages/react/src/overrides.d.ts index 7f1d55e63..def40ceaf 100644 --- a/packages/react/src/overrides.d.ts +++ b/packages/react/src/overrides.d.ts @@ -255,6 +255,15 @@ import { } from './components/Swiper'; import { SwitchClassKey, SwitchProps } from './components/Switch'; import { SwitchBaseClassKey, SwitchBaseProps } from './components/SwitchBase'; +import { + StepperClassKey, + StepperProps, + StepClassKey, + StepProps, + StepLabelClassKey, + StepLabelProps, +} from './components/Stepper'; + import { TabBarClassKey, TabBarItemClassKey, TabBarItemProps, TabBarProps } from './components/TabBar'; import { TableActionsClassKey, @@ -474,6 +483,9 @@ declare module '@mui/material/styles/props' { ESSwiper: SwiperProps; ESSwitch: SwitchProps; ESSwitchBase: SwitchBaseProps; + ESStepper: StepperProps; + ESStep: StepProps; + ESStepLabel: StepLabelProps; ESSwiperButton: SwiperButtonProps; ESSwiperPagination: SwiperPaginationProps; ESTabBar: TabBarProps; @@ -622,6 +634,9 @@ declare module '@mui/material/styles/overrides' { ESSwiper: SwiperClassKey; ESSwitch: SwitchClassKey; ESSwitchBase: SwitchBaseClassKey; + ESStepper: StepperClassKey; + ESStep: StepClassKey; + ESStepLabel: StepLabelClassKey; ESSwiperButton: SwiperButtonClassKey; ESSwiperPagination: SwiperPaginationClassKey; ESTabBar: TabBarClassKey; @@ -900,6 +915,18 @@ declare module '@mui/material/styles/components' { defaultProps?: ComponentsProps['ESSwitchBase']; styleOverrides?: ComponentsOverrides['ESSwitchBase']; }; + ESStepper?: { + defaultProps?: ComponentsProps['ESStepper']; + styleOverrides?: ComponentsOverrides['ESStepper']; + }; + ESStep?: { + defaultProps?: ComponentsProps['ESStep']; + styleOverrides?: ComponentsOverrides['ESStep']; + }; + ESStepLabel?: { + defaultProps?: ComponentsProps['ESStepLabel']; + styleOverrides?: ComponentsOverrides['ESStepLabel']; + }; ESSwiperButton?: { defaultProps?: ComponentsProps['ESSwiperButton']; styleOverrides?: ComponentsOverrides['ESSwiperButton']; From 2fb8f44852a2b0f7950131ef94476324da534f48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B0=D1=80=D1=8C=D1=8F=20=D0=90=D0=BB=D0=B5=D1=85?= =?UTF-8?q?=D0=B8=D0=BD=D0=B0?= Date: Mon, 26 May 2025 15:41:06 +0300 Subject: [PATCH 2/7] fix(web): fix ownerState --- .../src/components/Stepper/Step/Step.tsx | 10 +-- .../src/components/Stepper/Step/index.ts | 5 +- .../Stepper/StepLabel/StepLabel.tsx | 2 +- .../src/components/Stepper/StepLabel/index.ts | 5 +- .../components/Stepper/Stepper.stories.tsx | 3 +- .../react/src/components/Stepper/Stepper.tsx | 72 ++++++++++++++----- .../react/src/components/Stepper/index.ts | 5 +- 7 files changed, 70 insertions(+), 32 deletions(-) diff --git a/packages/react/src/components/Stepper/Step/Step.tsx b/packages/react/src/components/Stepper/Step/Step.tsx index 65d67bdf5..09365ccd5 100644 --- a/packages/react/src/components/Stepper/Step/Step.tsx +++ b/packages/react/src/components/Stepper/Step/Step.tsx @@ -84,24 +84,24 @@ const StepCircle = styled('div', { marginLeft: '8px', borderRadius: '50%', width: `${ownerState.size}px`, - color: theme.palette.monoB[500], + color: theme.vars.palette.monoB[500], height: `${ownerState.size}px`, display: 'flex', minWidth: `${ownerState.size}px`, alignItems: 'center', justifyContent: 'center', - background: theme.palette.monoA.A500, + background: theme.vars.palette.monoA.A500, ...((ownerState.completed || ownerState.activeStep) && { - background: theme.palette.primary[300], + background: theme.vars.palette.primary[300], }), ...(ownerState.error && { - background: theme.palette.error[300], + background: theme.vars.palette.error[300], }), ...(ownerState.disabled && { - background: theme.palette.monoA.A300, + background: theme.vars.palette.monoA.A300, }), })); diff --git a/packages/react/src/components/Stepper/Step/index.ts b/packages/react/src/components/Stepper/Step/index.ts index a0bf2dafc..b2e70e749 100644 --- a/packages/react/src/components/Stepper/Step/index.ts +++ b/packages/react/src/components/Stepper/Step/index.ts @@ -1,3 +1,4 @@ export { Step } from './Step'; -export { StepClasses, stepClasses, StepClassKey } from './Step.classes'; -export { StepProps } from './Step.types'; +export type { StepClasses, StepClassKey } from './Step.classes'; +export { stepClasses } from './Step.classes'; +export type { StepProps } from './Step.types'; diff --git a/packages/react/src/components/Stepper/StepLabel/StepLabel.tsx b/packages/react/src/components/Stepper/StepLabel/StepLabel.tsx index 6a72857d3..a107efc13 100644 --- a/packages/react/src/components/Stepper/StepLabel/StepLabel.tsx +++ b/packages/react/src/components/Stepper/StepLabel/StepLabel.tsx @@ -26,7 +26,7 @@ const StepLabelRoot = styled(Typography, { slot: 'Indicator', overridesResolver: (props, styles) => styles.root, })<{ ownerState: StepLabelOwnerState }>(({ theme }) => ({ - color: theme.palette.monoA.A900, + color: theme.vars.palette.monoA.A900, textTransform: 'none', })); diff --git a/packages/react/src/components/Stepper/StepLabel/index.ts b/packages/react/src/components/Stepper/StepLabel/index.ts index 2238a8c71..81fb812af 100644 --- a/packages/react/src/components/Stepper/StepLabel/index.ts +++ b/packages/react/src/components/Stepper/StepLabel/index.ts @@ -1,3 +1,4 @@ export { StepLabel } from './StepLabel'; -export { StepLabelClasses, stepLabelClasses, StepLabelClassKey } from './StepLabel.classes'; -export { StepLabelProps } from './StepLabel.types'; +export type { StepLabelClasses, StepLabelClassKey } from './StepLabel.classes'; +export { stepLabelClasses } from './StepLabel.classes'; +export type { StepLabelProps } from './StepLabel.types'; diff --git a/packages/react/src/components/Stepper/Stepper.stories.tsx b/packages/react/src/components/Stepper/Stepper.stories.tsx index e0b7e0b1b..c8ff93e25 100644 --- a/packages/react/src/components/Stepper/Stepper.stories.tsx +++ b/packages/react/src/components/Stepper/Stepper.stories.tsx @@ -43,7 +43,6 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; type StepStatus = 'completed' | 'inProgress' | 'error'; @@ -54,6 +53,8 @@ export interface Step { content?: React.ReactNode; } +type Story = StoryObj; + export const Demo: Story = { render: (args, context) => { const text = getText(context); diff --git a/packages/react/src/components/Stepper/Stepper.tsx b/packages/react/src/components/Stepper/Stepper.tsx index bbd39288b..e88772de5 100644 --- a/packages/react/src/components/Stepper/Stepper.tsx +++ b/packages/react/src/components/Stepper/Stepper.tsx @@ -82,26 +82,60 @@ const StepperConnectorLine = styled('div', { })<{ ownerState: StepperOwnerState; isActive: boolean }>(({ theme, isActive }) => ({ position: 'absolute', height: '1px', - backgroundColor: isActive ? theme.palette.primary[300] : theme.palette.monoA.A300, - - [`&.${stepperClasses.horizontal}`]: { - width: '100%', - marginLeft: '-4px', - }, - - [`&.${stepperClasses.vertical}`]: { - left: '15px', - right: '-16px', - width: '34px', - transform: 'rotate(90deg)', - }, - [`&.${stepperClasses.size24}`]: { - [`&.${stepperClasses.vertical}`]: { - left: '12px', - width: '34px', - transform: 'rotate(90deg)', + backgroundColor: isActive ? theme.vars.palette.primary[300] : theme.vars.palette.monoA.A300, + + // [`&.${stepperClasses.horizontal}`]: { + // width: '100%', + // marginLeft: '-4px', + // }, + + // [`&.${stepperClasses.vertical}`]: { + // left: '15px', + // right: '-16px', + // width: '34px', + // transform: 'rotate(90deg)', + // }, + // [`&.${stepperClasses.size24}`]: { + // [`&.${stepperClasses.vertical}`]: { + // left: '12px', + // width: '34px', + // transform: 'rotate(90deg)', + // }, + // }, + + variants: [ + { + props: { + orientation: 'horizontal', + }, + style: { + width: '100%', + marginLeft: '-4px', + }, }, - }, + { + props: { + orientation: 'vertical', + }, + style: { + left: '15px', + right: '-16px', + width: '34px', + transform: 'rotate(90deg)', + }, + }, + { + props: { + orientation: 'vertical', + size24: true, + }, + style: { + left: '12px', + width: '34px', + transform: 'rotate(90deg)', + }, + }, + ], })); export const Stepper = (inProps: StepperProps) => { diff --git a/packages/react/src/components/Stepper/index.ts b/packages/react/src/components/Stepper/index.ts index 0899cc55a..626ca3d0b 100644 --- a/packages/react/src/components/Stepper/index.ts +++ b/packages/react/src/components/Stepper/index.ts @@ -1,5 +1,6 @@ export * from './Step'; export * from './StepLabel'; export { Stepper } from './Stepper'; -export { StepperClasses, stepperClasses, StepperClassKey } from './Stepper.classes'; -export { StepperProps } from './Stepper.types'; +export type { StepperClasses, StepperClassKey } from './Stepper.classes'; +export { stepperClasses } from './Stepper.classes'; +export type { StepperProps } from './Stepper.types'; From ff6212760419aa1f159692509dfe974298593749 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B0=D1=80=D1=8C=D1=8F=20=D0=90=D0=BB=D0=B5=D1=85?= =?UTF-8?q?=D0=B8=D0=BD=D0=B0?= Date: Mon, 26 May 2025 18:31:45 +0300 Subject: [PATCH 3/7] fix(web): fix StepperRoot --- .../src/components/Stepper/Step/Step.tsx | 67 +++++++++++++------ .../react/src/components/Stepper/Stepper.tsx | 21 +----- 2 files changed, 49 insertions(+), 39 deletions(-) diff --git a/packages/react/src/components/Stepper/Step/Step.tsx b/packages/react/src/components/Stepper/Step/Step.tsx index 09365ccd5..a3fe8b0c0 100644 --- a/packages/react/src/components/Stepper/Step/Step.tsx +++ b/packages/react/src/components/Stepper/Step/Step.tsx @@ -1,7 +1,7 @@ import { StepProps } from './Step.types'; import clsx from 'clsx'; -import { getStepUtilityClass, stepClasses } from './Step.classes'; +import { getStepUtilityClass } from './Step.classes'; import { unstable_composeClasses as composeClasses } from '@mui/base'; @@ -59,15 +59,21 @@ const StepRoot = styled(Button, { justifyContent: 'flex-start', }, - [`&.${stepClasses.positionBottom}`]: { - [`&:not(.${stepClasses.vertical})`]: { - '& .ESButtonBase-wrapper': { - flexDirection: 'column', - height: 'auto', - marginTop: '21px', + variants: [ + { + props: { + position: 'bottom', + orientation: 'horizontal', + }, + style: { + '& .ESButtonBase-wrapper': { + flexDirection: 'column', + height: 'auto', + marginTop: '21px', + }, }, }, - }, + ], })); const StepCircle = styled('div', { @@ -92,17 +98,40 @@ const StepCircle = styled('div', { justifyContent: 'center', background: theme.vars.palette.monoA.A500, - ...((ownerState.completed || ownerState.activeStep) && { - background: theme.vars.palette.primary[300], - }), - - ...(ownerState.error && { - background: theme.vars.palette.error[300], - }), - - ...(ownerState.disabled && { - background: theme.vars.palette.monoA.A300, - }), + variants: [ + { + props: { + completed: true, + }, + style: { + background: theme.vars.palette.primary[300], + }, + }, + { + props: { + activeStep: true, + }, + style: { + background: theme.vars.palette.primary[300], + }, + }, + { + props: { + error: true, + }, + style: { + background: theme.vars.palette.error[300], + }, + }, + { + props: { + disabled: true, + }, + style: { + background: theme.vars.palette.monoA.A300, + }, + }, + ], })); export const Step = (inProps: StepProps) => { diff --git a/packages/react/src/components/Stepper/Stepper.tsx b/packages/react/src/components/Stepper/Stepper.tsx index e88772de5..a02d8eb64 100644 --- a/packages/react/src/components/Stepper/Stepper.tsx +++ b/packages/react/src/components/Stepper/Stepper.tsx @@ -64,7 +64,7 @@ const StepperConnectorRoot = styled('div', { })); const StepperContainer = styled('div', { - name: 'ESStepContainer', + name: 'ESStepperContainer', slot: 'Container', overridesResolver: (props, styles) => styles.container, })(() => ({})); @@ -84,25 +84,6 @@ const StepperConnectorLine = styled('div', { height: '1px', backgroundColor: isActive ? theme.vars.palette.primary[300] : theme.vars.palette.monoA.A300, - // [`&.${stepperClasses.horizontal}`]: { - // width: '100%', - // marginLeft: '-4px', - // }, - - // [`&.${stepperClasses.vertical}`]: { - // left: '15px', - // right: '-16px', - // width: '34px', - // transform: 'rotate(90deg)', - // }, - // [`&.${stepperClasses.size24}`]: { - // [`&.${stepperClasses.vertical}`]: { - // left: '12px', - // width: '34px', - // transform: 'rotate(90deg)', - // }, - // }, - variants: [ { props: { From eb879ea4d5c4682dd057ad446f5f89a43da82780 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B0=D1=80=D1=8C=D1=8F=20=D0=90=D0=BB=D0=B5=D1=85?= =?UTF-8?q?=D0=B8=D0=BD=D0=B0?= Date: Wed, 28 May 2025 14:23:50 +0300 Subject: [PATCH 4/7] fix(Stepper): fixes after review --- .../src/components/Stepper/Step/Step.tsx | 20 +++++++------------ .../Stepper/StepLabel/StepLabel.api.mdx | 2 +- .../Stepper/StepLabel/StepLabel.tsx | 2 +- 3 files changed, 9 insertions(+), 15 deletions(-) diff --git a/packages/react/src/components/Stepper/Step/Step.tsx b/packages/react/src/components/Stepper/Step/Step.tsx index a3fe8b0c0..1126cbe1e 100644 --- a/packages/react/src/components/Stepper/Step/Step.tsx +++ b/packages/react/src/components/Stepper/Step/Step.tsx @@ -9,7 +9,7 @@ import { styled, useThemeProps } from '@mui/material/styles'; import { capitalize } from '@mui/material'; import { IconCheckW500, IconExclamation } from '../../../icons'; -import { Button } from '../../Button'; +import { ButtonBase, buttonBaseClasses } from '../../ButtonBase'; type StepOwnerState = { classes?: StepProps['classes']; @@ -30,7 +30,7 @@ const useUtilityClasses = (ownerState: StepOwnerState) => { 'root', completed && 'completed', error && 'error', - size && 'size', + `size${size}`, position && `position${capitalize(position)}`, orientation, ], @@ -41,7 +41,7 @@ const useUtilityClasses = (ownerState: StepOwnerState) => { return composeClasses(slots, getStepUtilityClass, classes); }; -const StepRoot = styled(Button, { +const StepRoot = styled(ButtonBase, { name: 'ESStepRoot', slot: 'Root', overridesResolver: (_props, styles) => { @@ -54,7 +54,7 @@ const StepRoot = styled(Button, { minHeight: '57px', height: '100%', position: 'relative', - '& .ESButtonBase-wrapper': { + [`& .${buttonBaseClasses.wrapper}`]: { display: 'flex', justifyContent: 'flex-start', }, @@ -66,7 +66,7 @@ const StepRoot = styled(Button, { orientation: 'horizontal', }, style: { - '& .ESButtonBase-wrapper': { + [`& .${buttonBaseClasses.wrapper}`]: { flexDirection: 'column', height: 'auto', marginTop: '21px', @@ -167,14 +167,8 @@ export const Step = (inProps: StepProps) => { return ( - - {completed ? ( - - ) : error ? ( - - ) : ( - stepIndex - )} + + {completed ? : error ? : stepIndex} {children} diff --git a/packages/react/src/components/Stepper/StepLabel/StepLabel.api.mdx b/packages/react/src/components/Stepper/StepLabel/StepLabel.api.mdx index 50f743245..20366f653 100644 --- a/packages/react/src/components/Stepper/StepLabel/StepLabel.api.mdx +++ b/packages/react/src/components/Stepper/StepLabel/StepLabel.api.mdx @@ -30,7 +30,7 @@ The name `ESStepLabel` can be used when providing default props or style overrid
  • - + StepLabel
    • diff --git a/packages/react/src/components/Stepper/StepLabel/StepLabel.tsx b/packages/react/src/components/Stepper/StepLabel/StepLabel.tsx index a107efc13..37b929767 100644 --- a/packages/react/src/components/Stepper/StepLabel/StepLabel.tsx +++ b/packages/react/src/components/Stepper/StepLabel/StepLabel.tsx @@ -23,7 +23,7 @@ const useUtilityClasses = (ownerState: StepLabelOwnerState) => { const StepLabelRoot = styled(Typography, { name: 'ESStepLabelRoot', - slot: 'Indicator', + slot: 'Root', overridesResolver: (props, styles) => styles.root, })<{ ownerState: StepLabelOwnerState }>(({ theme }) => ({ color: theme.vars.palette.monoA.A900, From dbe4030b5259706ad0d60000ed5042fac76c9b0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B0=D1=80=D1=8C=D1=8F=20=D0=90=D0=BB=D0=B5=D1=85?= =?UTF-8?q?=D0=B8=D0=BD=D0=B0?= Date: Wed, 28 May 2025 15:28:21 +0300 Subject: [PATCH 5/7] fix(Stepper): fixes after review --- .../src/components/Stepper/Step/Step.api.mdx | 2 +- .../src/components/Stepper/Step/Step.tsx | 26 ++++++++++++++----- .../src/components/Stepper/Step/Step.types.ts | 6 +++++ .../Stepper/StepLabel/StepLabel.api.mdx | 2 +- .../Stepper/StepLabel/StepLabel.tsx | 2 +- .../react/src/components/Stepper/Stepper.tsx | 26 ++++++++++++------- 6 files changed, 44 insertions(+), 20 deletions(-) diff --git a/packages/react/src/components/Stepper/Step/Step.api.mdx b/packages/react/src/components/Stepper/Step/Step.api.mdx index 045916384..68536a080 100644 --- a/packages/react/src/components/Stepper/Step/Step.api.mdx +++ b/packages/react/src/components/Stepper/Step/Step.api.mdx @@ -31,7 +31,7 @@ The name `ESStep` can be used when providing default props or style overrides in
    • - Step + Stepper
    diff --git a/packages/react/src/components/Stepper/Step/Step.tsx b/packages/react/src/components/Stepper/Step/Step.tsx index 1126cbe1e..67b3ac786 100644 --- a/packages/react/src/components/Stepper/Step/Step.tsx +++ b/packages/react/src/components/Stepper/Step/Step.tsx @@ -54,7 +54,7 @@ const StepRoot = styled(ButtonBase, { minHeight: '57px', height: '100%', position: 'relative', - [`& .${buttonBaseClasses.wrapper}`]: { + [`&.${buttonBaseClasses.wrapper}`]: { display: 'flex', justifyContent: 'flex-start', }, @@ -66,7 +66,7 @@ const StepRoot = styled(ButtonBase, { orientation: 'horizontal', }, style: { - [`& .${buttonBaseClasses.wrapper}`]: { + [`&.${buttonBaseClasses.wrapper}`]: { flexDirection: 'column', height: 'auto', marginTop: '21px', @@ -85,20 +85,30 @@ const StepCircle = styled('div', { } = props; return [styles.button, completed && styles.completed, error && styles.error, disabled && styles.disabled]; }, -})<{ ownerState: StepOwnerState }>(({ theme, ownerState }) => ({ +})<{ ownerState: StepOwnerState }>(({ theme }) => ({ marginRight: '12px', marginLeft: '8px', borderRadius: '50%', - width: `${ownerState.size}px`, color: theme.vars.palette.monoB[500], - height: `${ownerState.size}px`, + height: '32px', + width: '32px', + minWidth: '32px', display: 'flex', - minWidth: `${ownerState.size}px`, alignItems: 'center', justifyContent: 'center', background: theme.vars.palette.monoA.A500, variants: [ + { + props: { + size: '24', + }, + style: { + height: '24px', + width: '24px', + minWidth: '24px', + }, + }, { props: { completed: true, @@ -147,6 +157,8 @@ export const Step = (inProps: StepProps) => { position, size = '32', orientation, + iconCompleted = , + iconError = , ...props } = useThemeProps({ props: inProps, @@ -168,7 +180,7 @@ export const Step = (inProps: StepProps) => { return ( - {completed ? : error ? : stepIndex} + {completed ? iconCompleted : error ? iconError : stepIndex} {children} diff --git a/packages/react/src/components/Stepper/Step/Step.types.ts b/packages/react/src/components/Stepper/Step/Step.types.ts index 46958bffd..fb94b74f2 100644 --- a/packages/react/src/components/Stepper/Step/Step.types.ts +++ b/packages/react/src/components/Stepper/Step/Step.types.ts @@ -40,4 +40,10 @@ export interface StepProps { * @default 'horizontal' */ orientation?: 'horizontal' | 'vertical'; + + /** Icon to display with completed step. */ + iconCompleted?: ReactNode; + + /** Icon to display with error step. */ + iconError?: ReactNode; } diff --git a/packages/react/src/components/Stepper/StepLabel/StepLabel.api.mdx b/packages/react/src/components/Stepper/StepLabel/StepLabel.api.mdx index 20366f653..0a32a6335 100644 --- a/packages/react/src/components/Stepper/StepLabel/StepLabel.api.mdx +++ b/packages/react/src/components/Stepper/StepLabel/StepLabel.api.mdx @@ -31,7 +31,7 @@ The name `ESStepLabel` can be used when providing default props or style overrid
    • - StepLabel + Stepper
    diff --git a/packages/react/src/components/Stepper/StepLabel/StepLabel.tsx b/packages/react/src/components/Stepper/StepLabel/StepLabel.tsx index 37b929767..74a7bf70a 100644 --- a/packages/react/src/components/Stepper/StepLabel/StepLabel.tsx +++ b/packages/react/src/components/Stepper/StepLabel/StepLabel.tsx @@ -22,7 +22,7 @@ const useUtilityClasses = (ownerState: StepLabelOwnerState) => { }; const StepLabelRoot = styled(Typography, { - name: 'ESStepLabelRoot', + name: 'ESStepLabel', slot: 'Root', overridesResolver: (props, styles) => styles.root, })<{ ownerState: StepLabelOwnerState }>(({ theme }) => ({ diff --git a/packages/react/src/components/Stepper/Stepper.tsx b/packages/react/src/components/Stepper/Stepper.tsx index a02d8eb64..828390c0f 100644 --- a/packages/react/src/components/Stepper/Stepper.tsx +++ b/packages/react/src/components/Stepper/Stepper.tsx @@ -32,7 +32,7 @@ const useUtilityClasses = (ownerState: StepperOwnerState) => { }; const StepperRoot = styled('div', { - name: 'ESStepperContainer', + name: 'ESStepper', slot: 'Container', overridesResolver: (props, styles) => { const { @@ -65,7 +65,7 @@ const StepperConnectorRoot = styled('div', { const StepperContainer = styled('div', { name: 'ESStepperContainer', - slot: 'Container', + slot: 'Root', overridesResolver: (props, styles) => styles.container, })(() => ({})); @@ -79,19 +79,27 @@ const StepperConnectorLine = styled('div', { return [styles.line, styles[orientation], styles[size], styles[size24]]; }, -})<{ ownerState: StepperOwnerState; isActive: boolean }>(({ theme, isActive }) => ({ +})<{ ownerState: StepperOwnerState & { isActive: boolean } }>(({ theme }) => ({ position: 'absolute', height: '1px', - backgroundColor: isActive ? theme.vars.palette.primary[300] : theme.vars.palette.monoA.A300, + backgroundColor: theme.vars.palette.monoA.A300, variants: [ + { + props: { + isActive: true, + }, + style: { + backgroundColor: theme.vars.palette.primary[300], + }, + }, { props: { orientation: 'horizontal', }, style: { width: '100%', - marginLeft: '-4px', + left: '3px', }, }, { @@ -99,8 +107,7 @@ const StepperConnectorLine = styled('div', { orientation: 'vertical', }, style: { - left: '15px', - right: '-16px', + left: '7px', width: '34px', transform: 'rotate(90deg)', }, @@ -111,7 +118,7 @@ const StepperConnectorLine = styled('div', { size24: true, }, style: { - left: '12px', + left: '4px', width: '34px', transform: 'rotate(90deg)', }, @@ -163,8 +170,7 @@ export const Stepper = (inProps: StepperProps) => { )} From 61b560bd8a82505544f32ace673c720cbd03f1df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B0=D1=80=D1=8C=D1=8F=20=D0=90=D0=BB=D0=B5=D1=85?= =?UTF-8?q?=D0=B8=D0=BD=D0=B0?= Date: Wed, 28 May 2025 21:58:49 +0300 Subject: [PATCH 6/7] fix(Stepper): fix names --- .../src/components/Stepper/Step/Step.tsx | 37 +++++++++++++++---- .../Stepper/StepLabel/StepLabel.tsx | 3 +- .../react/src/components/Stepper/Stepper.tsx | 32 ++++++++-------- 3 files changed, 46 insertions(+), 26 deletions(-) diff --git a/packages/react/src/components/Stepper/Step/Step.tsx b/packages/react/src/components/Stepper/Step/Step.tsx index 67b3ac786..edb575a30 100644 --- a/packages/react/src/components/Stepper/Step/Step.tsx +++ b/packages/react/src/components/Stepper/Step/Step.tsx @@ -42,19 +42,30 @@ const useUtilityClasses = (ownerState: StepOwnerState) => { }; const StepRoot = styled(ButtonBase, { - name: 'ESStepRoot', + name: 'ESStep', slot: 'Root', overridesResolver: (_props, styles) => { const { ownerState: { orientation, position }, } = _props; - return [styles.wrapper, styles[orientation], position && styles[`position${capitalize(position)}`]]; + return [styles.root, styles[orientation], position && styles[`position${capitalize(position)}`]]; }, -})<{ ownerState: StepOwnerState }>(() => ({ +})<{ ownerState: StepOwnerState }>(({ theme }) => ({ minHeight: '57px', height: '100%', position: 'relative', - [`&.${buttonBaseClasses.wrapper}`]: { + '--text': theme.vars.palette.monoA.A800, + '--hovered': theme.vars.palette.monoA.A100, + '--pressed': theme.vars.palette.monoA.A200, + padding: '16px 28px 16px 20px', + borderRadius: '3px', + + [`&.${buttonBaseClasses.disabled}`]: { + '--text': theme.vars.palette.monoA.A400, + '--icon': theme.vars.palette.monoA.A400, + }, + + [`& .${buttonBaseClasses.wrapper}`]: { display: 'flex', justifyContent: 'flex-start', }, @@ -66,24 +77,34 @@ const StepRoot = styled(ButtonBase, { orientation: 'horizontal', }, style: { - [`&.${buttonBaseClasses.wrapper}`]: { + marginTop: '21px', + padding: '16px 20px', + + [`& .${buttonBaseClasses.wrapper}`]: { flexDirection: 'column', height: 'auto', - marginTop: '21px', }, }, }, + { + props: { + error: true, + }, + style: { + '--text': theme.vars.palette.error[300], + }, + }, ], })); const StepCircle = styled('div', { - name: 'ESStepCircle', + name: 'ESStep', slot: 'Circle', overridesResolver: (props, styles) => { const { ownerState: { completed, error, disabled }, } = props; - return [styles.button, completed && styles.completed, error && styles.error, disabled && styles.disabled]; + return [styles.circle, completed && styles.completed, error && styles.error, disabled && styles.disabled]; }, })<{ ownerState: StepOwnerState }>(({ theme }) => ({ marginRight: '12px', diff --git a/packages/react/src/components/Stepper/StepLabel/StepLabel.tsx b/packages/react/src/components/Stepper/StepLabel/StepLabel.tsx index 74a7bf70a..a1610cdef 100644 --- a/packages/react/src/components/Stepper/StepLabel/StepLabel.tsx +++ b/packages/react/src/components/Stepper/StepLabel/StepLabel.tsx @@ -25,8 +25,7 @@ const StepLabelRoot = styled(Typography, { name: 'ESStepLabel', slot: 'Root', overridesResolver: (props, styles) => styles.root, -})<{ ownerState: StepLabelOwnerState }>(({ theme }) => ({ - color: theme.vars.palette.monoA.A900, +})<{ ownerState: StepLabelOwnerState }>(() => ({ textTransform: 'none', })); diff --git a/packages/react/src/components/Stepper/Stepper.tsx b/packages/react/src/components/Stepper/Stepper.tsx index 828390c0f..964701c8b 100644 --- a/packages/react/src/components/Stepper/Stepper.tsx +++ b/packages/react/src/components/Stepper/Stepper.tsx @@ -33,13 +33,13 @@ const useUtilityClasses = (ownerState: StepperOwnerState) => { const StepperRoot = styled('div', { name: 'ESStepper', - slot: 'Container', + slot: 'Root', overridesResolver: (props, styles) => { const { ownerState: { orientation }, } = props; - return [styles.container, styles[orientation]]; + return [styles.root, styles[orientation]]; }, })<{ ownerState: StepperOwnerState }>(() => ({ display: 'flex', @@ -54,23 +54,23 @@ const StepperRoot = styled('div', { }, })); -const StepperConnectorRoot = styled('div', { - name: 'ESStepperConnectorLine', - slot: 'Line', +const StepperContainer = styled('div', { + name: 'ESStepper', + slot: 'Container', overridesResolver: (props, styles) => styles.container, +})(() => ({})); + +const StepperConnectorRoot = styled('div', { + name: 'ESStepperConnector', + slot: 'Root', + overridesResolver: (props, styles) => styles.root, })(() => ({ position: 'relative', width: '100%', })); -const StepperContainer = styled('div', { - name: 'ESStepperContainer', - slot: 'Root', - overridesResolver: (props, styles) => styles.container, -})(() => ({})); - const StepperConnectorLine = styled('div', { - name: 'ESStepperConnectorLine', + name: 'ESStepperConnector', slot: 'Line', overridesResolver: (props, styles) => { const { @@ -98,8 +98,8 @@ const StepperConnectorLine = styled('div', { orientation: 'horizontal', }, style: { - width: '100%', - left: '3px', + width: 'calc(100% + 40px)', + left: '-20px', }, }, { @@ -107,7 +107,7 @@ const StepperConnectorLine = styled('div', { orientation: 'vertical', }, style: { - left: '7px', + left: '27px', width: '34px', transform: 'rotate(90deg)', }, @@ -118,7 +118,7 @@ const StepperConnectorLine = styled('div', { size24: true, }, style: { - left: '4px', + left: '24px', width: '34px', transform: 'rotate(90deg)', }, From 6f5f51a67a335a19f2759d9c4f9580a312a82f08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B0=D1=80=D1=8C=D1=8F=20=D0=90=D0=BB=D0=B5=D1=85?= =?UTF-8?q?=D0=B8=D0=BD=D0=B0?= Date: Thu, 5 Jun 2025 16:08:56 +0300 Subject: [PATCH 7/7] fix(Stepper): fixes after design review --- .../src/components/Stepper/Step/Step.tsx | 23 +++++++++++++++---- .../src/components/Stepper/Step/Step.types.ts | 6 +++++ .../react/src/components/Stepper/Stepper.tsx | 12 +++++----- packages/react/src/icons/IconCheckW500.tsx | 2 +- 4 files changed, 31 insertions(+), 12 deletions(-) diff --git a/packages/react/src/components/Stepper/Step/Step.tsx b/packages/react/src/components/Stepper/Step/Step.tsx index edb575a30..96799e37f 100644 --- a/packages/react/src/components/Stepper/Step/Step.tsx +++ b/packages/react/src/components/Stepper/Step/Step.tsx @@ -51,18 +51,19 @@ const StepRoot = styled(ButtonBase, { return [styles.root, styles[orientation], position && styles[`position${capitalize(position)}`]]; }, })<{ ownerState: StepOwnerState }>(({ theme }) => ({ - minHeight: '57px', + minHeight: '56px', height: '100%', position: 'relative', - '--text': theme.vars.palette.monoA.A800, + '--text': theme.vars.palette.monoA.A900, '--hovered': theme.vars.palette.monoA.A100, '--pressed': theme.vars.palette.monoA.A200, - padding: '16px 28px 16px 20px', + padding: '16px 24px 16px 16px', borderRadius: '3px', [`&.${buttonBaseClasses.disabled}`]: { - '--text': theme.vars.palette.monoA.A400, + '--text': theme.vars.palette.monoA.A500, '--icon': theme.vars.palette.monoA.A400, + cursor: 'not-allowed', }, [`& .${buttonBaseClasses.wrapper}`]: { @@ -78,11 +79,12 @@ const StepRoot = styled(ButtonBase, { }, style: { marginTop: '21px', - padding: '16px 20px', + padding: '16px', [`& .${buttonBaseClasses.wrapper}`]: { flexDirection: 'column', height: 'auto', + gap: '8px', }, }, }, @@ -118,6 +120,7 @@ const StepCircle = styled('div', { alignItems: 'center', justifyContent: 'center', background: theme.vars.palette.monoA.A500, + fontWeight: 700, variants: [ { @@ -162,6 +165,14 @@ const StepCircle = styled('div', { background: theme.vars.palette.monoA.A300, }, }, + { + props: { + position: 'bottom', + }, + style: { + marginRight: '8px', + }, + }, ], })); @@ -178,6 +189,7 @@ export const Step = (inProps: StepProps) => { position, size = '32', orientation, + required, iconCompleted = , iconError = , ...props @@ -194,6 +206,7 @@ export const Step = (inProps: StepProps) => { disabled, position, orientation, + required, }; const classes = useUtilityClasses(ownerState); diff --git a/packages/react/src/components/Stepper/Step/Step.types.ts b/packages/react/src/components/Stepper/Step/Step.types.ts index fb94b74f2..904057196 100644 --- a/packages/react/src/components/Stepper/Step/Step.types.ts +++ b/packages/react/src/components/Stepper/Step/Step.types.ts @@ -46,4 +46,10 @@ export interface StepProps { /** Icon to display with error step. */ iconError?: ReactNode; + + /** + * If `true`, the `input` element is required. + * @default false + */ + required?: boolean; } diff --git a/packages/react/src/components/Stepper/Stepper.tsx b/packages/react/src/components/Stepper/Stepper.tsx index 964701c8b..39d49229c 100644 --- a/packages/react/src/components/Stepper/Stepper.tsx +++ b/packages/react/src/components/Stepper/Stepper.tsx @@ -50,7 +50,7 @@ const StepperRoot = styled('div', { [`&.${stepperClasses.vertical}`]: { flexDirection: 'column', alignItems: 'initial', - gap: '8px', + //gap: '8px', }, })); @@ -98,8 +98,8 @@ const StepperConnectorLine = styled('div', { orientation: 'horizontal', }, style: { - width: 'calc(100% + 40px)', - left: '-20px', + width: 'calc(100% + 32px)', + left: '-16px', }, }, { @@ -107,8 +107,8 @@ const StepperConnectorLine = styled('div', { orientation: 'vertical', }, style: { - left: '27px', - width: '34px', + left: '28px', + width: '24px', transform: 'rotate(90deg)', }, }, @@ -119,7 +119,7 @@ const StepperConnectorLine = styled('div', { }, style: { left: '24px', - width: '34px', + width: '24px', transform: 'rotate(90deg)', }, }, diff --git a/packages/react/src/icons/IconCheckW500.tsx b/packages/react/src/icons/IconCheckW500.tsx index ab9a6129b..50f34c81e 100644 --- a/packages/react/src/icons/IconCheckW500.tsx +++ b/packages/react/src/icons/IconCheckW500.tsx @@ -3,7 +3,7 @@ import { SvgIcon, SvgIconProps } from '../components/SvgIcon'; export const IconCheckW500 = (props: SvgIconProps) => { return ( - + ); };