feat: steps hover style be judged by onChange and onClick

content/navigation/steps/index-en-US.md

@@ -27,7 +27,7 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-    <Steps current={1}>
+    <Steps current={1} onChange={(i)=>console.log(i)}>
         <Steps.Step title="Finished" description="This is a description." />
         <Steps.Step title="In Progress" description="This is a description." />
         <Steps.Step title="Waiting" description="This is a description." />
@@ -44,7 +44,7 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-    <Steps type="basic" current={1}>
+    <Steps type="basic" current={1} onChange={(i)=>console.log(i)}>
         <Steps.Step title="Finished" description="This is a description" />
         <Steps.Step title="In Progress" description="This is a description" />
         <Steps.Step title="Waiting" description="This is a description" />
@@ -70,7 +70,7 @@ import { Steps } from '@douyinfe/semi-ui';
 
 () => (
     <div style={{ display: 'flex', justifyContent: 'center' }}>
-        <Steps type="nav" current={1} style={{ margin: 'auto' }}>
+        <Steps type="nav" current={1} style={{ margin: 'auto' }} onChange={(i)=>console.log(i)}>
             <Steps.Step title="Register an account" />
             <Steps.Step title="There is a lot of text in this project" />
             <Steps.Step title="Product Usage" />
@@ -89,7 +89,7 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-    <Steps type="basic" size="small" current={1}>
+    <Steps type="basic" size="small" current={1} onChange={(i)=>console.log(i)}>
         <Steps.Step title="Finished" description="This is a description" />
         <Steps.Step title="In Progress" description="This is a description" />
         <Steps.Step title="Waiting" description="This is a description" />
@@ -103,7 +103,7 @@ import { Steps } from '@douyinfe/semi-ui';
 
 () => (
     <div style={{ display: 'flex', justifyContent: 'center' }}>
-        <Steps type="nav" size="small" current={1} style={{ margin: 'auto' }}>
+        <Steps type="nav" size="small" current={1} style={{ margin: 'auto' }} onChange={(i)=>console.log(i)}>
             <Steps.Step title="Register an account" />
             <Steps.Step title="There is a lot of text in this project" />
             <Steps.Step title="Product Usage" />
@@ -159,7 +159,7 @@ class App extends React.Component {
 
         return (
             <div>
-                <Steps type="basic" current={current}>
+                <Steps type="basic" current={current} onChange={(i)=>console.log(i)}>
                     {steps.map(item => (
                         <Step key={item.title} title={item.title} />
                     ))}
@@ -199,7 +199,7 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-    <Steps direction="vertical" current={1} style={{ width: 300 }}>
+    <Steps direction="vertical" current={1} style={{ width: 300 }} onChange={(i)=>console.log(i)}>
         <Steps.Step title="Finished" description="This is a description" />
         <Steps.Step title="In Progress" description="This is a description" />
         <Steps.Step title="Waiting" description="This is a description" />
@@ -212,7 +212,7 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-    <Steps direction="vertical" type="basic" current={1}>
+    <Steps direction="vertical" type="basic" current={1} onChange={(i)=>console.log(i)}>
         <Steps.Step title="Finished" description="This is a description" />
         <Steps.Step title="In Progress" description="This is a description" />
         <Steps.Step title="Waiting" description="This is a description" />
@@ -229,7 +229,7 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-    <Steps type="basic" current={1} status="error">
+    <Steps type="basic" current={1} status="error" onChange={(i)=>console.log(i)}>
         <Steps.Step title="Finished" description="This is a description" />
         <Steps.Step title="In Process" description="This is a description" />
         <Steps.Step title="Waiting" description="This is a description" />
@@ -247,7 +247,7 @@ import { Steps } from '@douyinfe/semi-ui';
 import { IconHome, IconLock, IconClear, IconTickCircle } from '@douyinfe/semi-icons';
 
 () => (
-    <Steps type="basic">
+    <Steps type="basic" onChange={(i)=>console.log(i)}>
         <Steps.Step status="finish" title="Login" icon={<IconHome />} />
         <Steps.Step status="finish" title="Verification" icon={<IconLock />} />
         <Steps.Step status="process" title="Pay" icon={<IconClear />} />

content/navigation/steps/index.md

@@ -26,7 +26,7 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-    <Steps current={1}>
+    <Steps current={1} onChange={(i)=>console.log(i)}>
         <Steps.Step title="Finished" description="This is a description" />
         <Steps.Step title="In Progress" description="This is a description" />
         <Steps.Step title="Waiting" description="This is a description" />
@@ -43,7 +43,7 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-    <Steps type="basic" current={1}>
+    <Steps type="basic" current={1} onChange={(i)=>console.log(i)}>
         <Steps.Step title="Finished" description="This is a description" />
         <Steps.Step title="In Progress" description="This is a description" />
         <Steps.Step title="Waiting" description="This is a description" />
@@ -68,7 +68,7 @@ import { Steps } from '@douyinfe/semi-ui';
 
 () => (
     <div style={{ display: 'flex', justifyContent: 'center' }}>
-        <Steps type="nav" current={1} style={{ margin: 'auto' }}>
+        <Steps type="nav" current={1} style={{ margin: 'auto' }} onChange={(i)=>console.log(i)}>
             <Steps.Step title="注册账号" />
             <Steps.Step title="这个项目的文字比较多多多多" />
             <Steps.Step title="产品用途" />
@@ -88,7 +88,7 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-    <Steps type="basic" size="small" current={1}>
+    <Steps type="basic" size="small" current={1} onChange={(i)=>console.log(i)}>
         <Steps.Step title="Finished" description="This is a description" />
         <Steps.Step title="In Progress" description="This is a description" />
         <Steps.Step title="Waiting" description="This is a description" />
@@ -102,7 +102,7 @@ import { Steps } from '@douyinfe/semi-ui';
 
 () => (
     <div style={{ display: 'flex', justifyContent: 'center' }}>
-        <Steps type="nav" size="small" current={1} style={{ margin: 'auto' }}>
+        <Steps type="nav" size="small" current={1} style={{ margin: 'auto' }} onChange={(i)=>console.log(i)}>
             <Steps.Step title="注册账号" />
             <Steps.Step title="这个项目的文字比较多多多多" />
             <Steps.Step title="产品用途" />
@@ -159,7 +159,7 @@ class App extends React.Component {
 
         return (
             <div>
-                <Steps type="basic" current={current}>
+                <Steps type="basic" current={current} onChange={(i)=>console.log(i)}>
                     {steps.map(item => (
                         <Step key={item.title} title={item.title} />
                     ))}
@@ -198,7 +198,7 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-    <Steps direction="vertical" current={1} style={{ width: 300 }}>
+    <Steps direction="vertical" current={1} style={{ width: 300 }} onChange={(i)=>console.log(i)}>
         <Steps.Step title="Finished" description="This is a description" />
         <Steps.Step title="In Progress" description="This is a description" />
         <Steps.Step title="Waiting" description="This is a description" />
@@ -211,7 +211,7 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-    <Steps direction="vertical" type="basic" current={1}>
+    <Steps direction="vertical" type="basic" current={1} onChange={(i)=>console.log(i)}>
         <Steps.Step title="Finished" description="This is a description" />
         <Steps.Step title="In Progress" description="This is a description" />
         <Steps.Step title="Waiting" description="This is a description" />
@@ -228,7 +228,7 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-    <Steps type="basic" current={1} status="error">
+    <Steps type="basic" current={1} status="error" onChange={(i)=>console.log(i)}>
         <Steps.Step title="Finished" description="This is a description" />
         <Steps.Step title="In Process" description="This is a description" />
         <Steps.Step title="Waiting" description="This is a description" />
@@ -247,7 +247,7 @@ import { Steps } from '@douyinfe/semi-ui';
 import { IconHome, IconLock } from '@douyinfe/semi-icons';
 
 () => (
-    <Steps type="basic">
+    <Steps type="basic" onChange={(i)=>console.log(i)}>
         <Steps.Step status="finish" title="已完成" />
         <Steps.Step status="error" title="错误" />
         <Steps.Step status="warning" title="警告" />

packages/semi-foundation/steps/bacisSteps.scss

@@ -173,7 +173,7 @@ $basicType: #{$module}-basic;
         
         transform:scale($transform_scale-step-item);
 
-        &:hover {
+        &-hover:hover {
 
             .#{$item}-title {
                 color: $color-steps_item_title-text-hover;
@@ -267,7 +267,7 @@ $basicType: #{$module}-basic;
                 }
             }
 
-            &:hover {
+            &-hover:hover {
                 .#{$item}-left {
 
                     .#{$item}-icon {

packages/semi-foundation/steps/fillSteps.scss

@@ -92,7 +92,7 @@ $module: #{$prefix}-steps;
                 color: $color-steps_success-text-default;
             }
 
-            &:hover {
+            &-hover:hover {
                 background-color: $color-steps-bg-hover;
 
                 .#{$prefix}-icon,
@@ -118,7 +118,7 @@ $module: #{$prefix}-steps;
                 color: $color-steps_danger-text-default;
             }
 
-            &:hover {
+            &-hover:hover {
                 background: $color-steps-bg-hover;
 
                 .#{$prefix}-icon,
@@ -144,7 +144,7 @@ $module: #{$prefix}-steps;
                 color: $color-steps_warning-text-default;
             }
 
-            &:hover {
+            &-hover:hover {
                 background: $color-steps-bg-hover;
 
                 .#{$module}-item-title,

packages/semi-ui/steps/basicStep.tsx

@@ -7,6 +7,7 @@ import { IconTickCircle, IconAlertCircle, IconAlertTriangle } from '@douyinfe/se
 
 export type Status = 'wait' | 'process' | 'finish' | 'error' | 'warning';
 export type Size = 'default' | 'small';
+
 export interface BasicStepProps {
     description?: React.ReactNode;
     icon?: React.ReactNode;
@@ -25,6 +26,7 @@ export interface BasicStepProps {
     "role"?: React.AriaRole;
     "aria-label"?: React.AriaAttributes["aria-label"]
 }
+
 export enum stepSizeMapIconSize {
     small = 'large',
     default = 'extra-large'
@@ -57,7 +59,7 @@ const BasicStep = (props: BasicStepProps) => {
         } else if ('status' in props) {
             switch (status) {
                 case 'error':
-                    inner = <IconAlertCircle size={stepSizeMapIconSize[size]} />;
+                    inner = <IconAlertCircle size={stepSizeMapIconSize[size]}/>;
                     break;
                 case 'wait':
                     inner = <span className={`${prefixCls}-number-icon`}>{stepNumber}</span>;
@@ -67,10 +69,10 @@ const BasicStep = (props: BasicStepProps) => {
                     progress = true;
                     break;
                 case 'finish':
-                    inner = <IconTickCircle size={stepSizeMapIconSize[size]} />;
+                    inner = <IconTickCircle size={stepSizeMapIconSize[size]}/>;
                     break;
                 case 'warning':
-                    inner = <IconAlertTriangle size={stepSizeMapIconSize[size]} />;
+                    inner = <IconAlertTriangle size={stepSizeMapIconSize[size]}/>;
                     break;
                 default:
                     inner = null;
@@ -87,24 +89,23 @@ const BasicStep = (props: BasicStepProps) => {
     };
     const classString = classnames(prefixCls, `${prefixCls}-${status}`, {
         [`${prefixCls}-active`]: active,
-        [`${prefixCls}-done`]: done
+        [`${prefixCls}-done`]: done,
+        [`${prefixCls}-hover`]: onChange || props.onClick,
+        [`${prefixCls}-${status}-hover`]: onChange || props.onClick,
     }, className);
-    const handleClick = (e: React.MouseEvent) => {
-        if (isFunction(onClick)) {
-            onClick(e);
-        }
-        onChange();
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        onClick?.(e);
+        onChange?.();
     };
     const handleKeyDown = (e) => {
         if (e.key === 'Enter') {
-            if (isFunction(onKeyDown)) {
-                onKeyDown(e);
-            }
-            onChange();
+            onKeyDown?.(e);
+            onChange?.();
         }
     };
     return (
-        <div role={props["role"]} aria-label={props["aria-label"]} tabIndex={0} aria-current="step" className={classString} style={style} onClick={e => handleClick(e)} onKeyDown={handleKeyDown}>
+        <div role={props["role"]} aria-label={props["aria-label"]} tabIndex={0} aria-current="step"
+            className={classString} style={style} onClick={e => handleClick(e)} onKeyDown={handleKeyDown}>
             <div className={`${prefixCls}-container`}>
                 <div className={`${prefixCls}-left`}>{renderIcon()}</div>
                 <div className={`${prefixCls}-content`}>

packages/semi-ui/steps/basicSteps.tsx

@@ -63,11 +63,11 @@ const Steps = (props: BasicStepsProps) => {
             }
             childProps.active = stepNumber === current;
             childProps.done = stepNumber < current;
-            childProps.onChange = () => {
+            childProps.onChange = onChange ? () => {
                 if (index !== current) {
                     onChange(index + initial);
                 }
-            };
+            } : undefined;
             return cloneElement(child, { ...childProps });
         });
         return content;

packages/semi-ui/steps/fillStep.tsx

@@ -58,22 +58,19 @@ const FillStep = (props: FillStepProps) => {
             [`${prefixCls}-icon`]: 'icon' in props,
             [`${prefixCls}-plain`]: !('icon' in props),
             [`${prefixCls}-icon-process`]: progress,
+            [`${prefixCls}-hover`]: onChange || onClick,
         });
 
         return inner ? <div className={cls}>{inner}</div> : null;
     };
-    const handleClick = (e: React.MouseEvent) => {
-        if (isFunction(onClick)) {
-            onClick(e);
-        }
-        onChange();
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        onClick?.(e);
+        onChange?.();
     };
     const handleKeyDown = (e) => {
         if (e.key === 'Enter') {
-            if (isFunction(onKeyDown)) {
-                onKeyDown(e);
-            }
-            onChange();
+            onKeyDown?.(e);
+            onChange?.();
         }
     };
     return (
@@ -85,6 +82,7 @@ const FillStep = (props: FillStepProps) => {
             className={classnames({
                 [prefixCls]: true,
                 [`${prefixCls}-${status}`]: Boolean(status),
+                [`${prefixCls}-${status}-hover`]: Boolean(status) && (onChange || onClick),
                 [`${prefixCls}-clickable`]: onClick,
             }, className)}
             style={style}

packages/semi-ui/steps/fillSteps.tsx

@@ -6,6 +6,7 @@ import { Row, Col } from '../grid';
 
 export type Status = 'wait' | 'process' | 'finish' | 'error' | 'warning';
 export type Direction = 'horizontal' | 'vertical';
+
 export interface FillStepsProps {
     prefixCls?: string;
     className?: string;
@@ -23,7 +24,7 @@ const Steps = (props: FillStepsProps) => {
     const { current, status, children, prefixCls, initial, direction, className, style, onChange } = props;
     const inner = useMemo(() => {
         const filteredChildren = Children.toArray(children).filter(c => isValidElement(c)) as Array<ReactElement>;
-        const colStyle = direction === 'vertical' ? null : { width: `${100 / filteredChildren.length }%` };
+        const colStyle = direction === 'vertical' ? null : { width: `${100 / filteredChildren.length}%` };
         const content = Children.map(filteredChildren, (child: ReactElement, index) => {
             if (!child) {
                 return null;
@@ -48,11 +49,11 @@ const Steps = (props: FillStepsProps) => {
                     childProps.status = 'wait';
                 }
             }
-            childProps.onChange = () => {
+            childProps.onChange = onChange ? () => {
                 if (index !== current) {
                     onChange(index + initial);
                 }
-            };
+            } : undefined;
             return <Col style={colStyle}>{cloneElement(child, { ...childProps })}</Col>;
         });
         return content;
@@ -60,7 +61,7 @@ const Steps = (props: FillStepsProps) => {
 
     const wrapperCls = cls(className, {
         [prefixCls]: true,
-        [`${prefixCls}-${ direction}`]: true
+        [`${prefixCls}-${direction}`]: true
     });
 
     return (

packages/semi-ui/steps/index.tsx

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import { noop } from 'lodash';
 import PropTypes from 'prop-types';
 import '@douyinfe/semi-foundation/steps/steps.scss';
 import Step from './step';
@@ -37,7 +36,6 @@ class Steps extends Component<StepsProps> {
     };
 
     static defaultProps = {
-        onChange: noop,
         type: 'fill',
         size: 'default'
     };

packages/semi-ui/steps/navStep.tsx

@@ -25,18 +25,14 @@ const NavStep = (props: NavStepProps) => {
     const classString = classnames(prefixCls, {
         [`${prefixCls}-active`]: active
     }, className);
-    const handleClick = (e: React.MouseEvent) => {
-        if (isFunction(onClick)) {
-            onClick(e);
-        }
-        onChange();
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        onClick?.(e);
+        onChange?.();
     };
     const handleKeyDown = (e) => {
         if (e.key === 'Enter') {
-            if (isFunction(onKeyDown)) {
-                onKeyDown(e);
-            }
-            onChange();
+            onKeyDown?.(e);
+            onChange?.();
         }
     };
     return (

packages/semi-ui/steps/navSteps.tsx

@@ -31,11 +31,11 @@ const Steps = (props: NavStepsProps) => {
                 ...child.props,
             };
             childProps.active = index === current;
-            childProps.onChange = () => {
+            childProps.onChange = onChange ? () => {
                 if (index !== current) {
                     onChange(index + initial);
                 }
-            };
+            } : undefined;
             return cloneElement(child, { ...childProps });
         });
         return content;