fix: fix steps some hover active style (#1836)

DouyinFE · Sep 21, 2023 · ea3a994 · ea3a994
1 parent 6c72188
commit ea3a994
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/packages/semi-foundation/steps/bacisSteps.scss b/packages/semi-foundation/steps/bacisSteps.scss
@@ -167,12 +167,15 @@ $basicType: #{$module}-basic;
         vertical-align: top;
         overflow: hidden;
         flex: 1;
-        cursor: pointer;
         transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text, //step文字color的transition变化
         background-color $transition_duration-steps_item-backgroundColor $transition_function-steps_item_backgroundColor $transition_delay-steps_item_backgroundColor; //step backgroundColor 的transition变化
 
         transform:scale($transform_scale-step-item);
 
+        &-clickable {
+            cursor: pointer;
+        }
+
         &-hover:hover {
 
             .#{$item}-title {

diff --git a/packages/semi-foundation/steps/fillSteps.scss b/packages/semi-foundation/steps/fillSteps.scss
@@ -101,7 +101,7 @@ $module: #{$prefix}-steps;
                 }
             }
 
-            &:active {
+            &-active:active {
                 background-color: $color-steps-bg-active;
 
                 .#{$prefix}-icon,
@@ -127,7 +127,7 @@ $module: #{$prefix}-steps;
                 }
             }
 
-            &:active {
+            &-active:active {
                 background-color: $color-steps-bg-active;
 
                 .#{$prefix}-icon,
@@ -153,7 +153,7 @@ $module: #{$prefix}-steps;
                 }
             }
 
-            &:active {
+            &-active:active {
                 background-color: $color-steps-bg-active;
 
                 .#{$module}-item-title,
@@ -195,4 +195,4 @@ $module: #{$prefix}-steps;
             overflow: hidden;
         }
     }
-}
+}
diff --git a/packages/semi-ui/steps/basicStep.tsx b/packages/semi-ui/steps/basicStep.tsx
@@ -91,6 +91,7 @@ const BasicStep = (props: BasicStepProps) => {
         [`${prefixCls}-active`]: active,
         [`${prefixCls}-done`]: done,
         [`${prefixCls}-hover`]: onChange || props.onClick,
+        [`${prefixCls}-clickable`]: (onChange || onClick),
         [`${prefixCls}-${status}-hover`]: onChange || props.onClick,
     }, className);
     const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {

diff --git a/packages/semi-ui/steps/fillStep.tsx b/packages/semi-ui/steps/fillStep.tsx
@@ -83,7 +83,8 @@ const FillStep = (props: FillStepProps) => {
                 [prefixCls]: true,
                 [`${prefixCls}-${status}`]: Boolean(status),
                 [`${prefixCls}-${status}-hover`]: Boolean(status) && (onChange || onClick),
-                [`${prefixCls}-clickable`]: onClick,
+                [`${prefixCls}-${status}-active`]: Boolean(status) && (onChange || onClick),
+                [`${prefixCls}-clickable`]: (onChange || onClick),
             }, className)}
             style={style}
             onClick={e => {