Merge pull request #27499 from ant-design/fix-steps-responsive-ui

fix: Steps responsive ui

components/steps/__tests__/__snapshots__/demo.test.js.snap

@@ -1197,8 +1197,7 @@ Array [
 
 exports[`renders ./components/steps/demo/progress.md correctly 1`] = `
 <div
-  class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"
-  percent="60"
+  class="ant-steps ant-steps-horizontal ant-steps-with-progress ant-steps-label-horizontal"
 >
   <div
     class="ant-steps-item ant-steps-item-finish"
@@ -1432,8 +1431,7 @@ Array [
     </span>
   </button>,
   <div
-    class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"
-    percent="0"
+    class="ant-steps ant-steps-horizontal ant-steps-with-progress ant-steps-label-horizontal"
   >
     <div
       class="ant-steps-item ant-steps-item-finish"
@@ -1607,8 +1605,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-horizontal"
-    percent="0"
+    class="ant-steps ant-steps-horizontal ant-steps-with-progress ant-steps-small ant-steps-label-horizontal"
   >
     <div
       class="ant-steps-item ant-steps-item-finish"
@@ -1782,8 +1779,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-steps ant-steps-vertical"
-    percent="0"
+    class="ant-steps ant-steps-vertical ant-steps-with-progress"
   >
     <div
       class="ant-steps-item ant-steps-item-finish"
@@ -1957,8 +1953,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-steps ant-steps-vertical ant-steps-small"
-    percent="0"
+    class="ant-steps ant-steps-vertical ant-steps-with-progress ant-steps-small"
   >
     <div
       class="ant-steps-item ant-steps-item-finish"

components/steps/index.tsx

@@ -47,12 +47,13 @@ export default class Steps extends React.Component<StepsProps, any> {
   renderSteps = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
     const prefixCls = getPrefixCls('steps', this.props.prefixCls);
     const iconPrefix = getPrefixCls('', this.props.iconPrefix);
-    const { percent, size } = this.props;
-    const className = classNames(
+    const { percent, size, className } = this.props;
+    const stepsClassName = classNames(
       {
         [`${prefixCls}-rtl`]: direction === 'rtl',
+        [`${prefixCls}-with-progress`]: percent !== undefined,
       },
-      this.props.className,
+      className,
     );
     const icons = {
       finish: <CheckOutlined className={`${prefixCls}-finish-icon`} />,
@@ -90,11 +91,11 @@ export default class Steps extends React.Component<StepsProps, any> {
     return (
       <RcSteps
         icons={icons}
-        {...omit(this.props, ['progress'])}
+        {...omit(this.props, ['percent'])}
         stepIcon={stepIconRender}
         prefixCls={prefixCls}
         iconPrefix={iconPrefix}
-        className={className}
+        className={stepsClassName}
       />
     );
   };

components/steps/style/custom-icon.less

@@ -5,7 +5,7 @@
     border: 0;
     > .@{steps-prefix-cls}-icon {
       top: @steps-icon-custom-top;
-      left: 0.5px;
+      left: 4.5px;
       width: @steps-icon-custom-size;
       height: @steps-icon-custom-size;
       font-size: @steps-icon-custom-font-size;

components/steps/style/index.less

@@ -236,11 +236,11 @@
   }
 }
 
-@import 'custom-icon';
-@import 'small';
-@import 'vertical';
-@import 'label-placement';
-@import 'progress-dot';
-@import 'nav';
+@import './custom-icon';
+@import './small';
+@import './vertical';
+@import './label-placement';
+@import './progress-dot';
+@import './nav';
 @import './rtl';
 @import './progress.less';

components/steps/style/progress.less

@@ -1,21 +1,23 @@
 @progress-prefix-cls: ~'@{ant-prefix}-progress';
 
-.@{steps-prefix-cls}:not(.@{steps-prefix-cls}-dot):not(.@{steps-prefix-cls}-navigation) {
-  &:not(.@{steps-prefix-cls}-vertical) {
-    .@{steps-prefix-cls}-item {
-      padding-top: 4px;
+.@{steps-prefix-cls}-with-progress {
+  .@{steps-prefix-cls}-item {
+    padding-top: 4px;
+
+    .@{steps-prefix-cls}-item-tail {
+      top: 4px !important;
     }
   }
-  .@{steps-prefix-cls}-item {
-    .@{steps-prefix-cls}-item-icon {
-      position: relative;
-      .@{progress-prefix-cls} {
-        position: absolute;
-        top: -5px;
-        right: -5px;
-        bottom: -5px;
-        left: -5px;
-      }
+
+  .@{steps-prefix-cls}-item-icon {
+    position: relative;
+
+    .@{progress-prefix-cls} {
+      position: absolute;
+      top: -5px;
+      right: -5px;
+      bottom: -5px;
+      left: -5px;
     }
   }
 }

components/steps/style/vertical.less

@@ -4,7 +4,7 @@
   .@{steps-prefix-cls}-item {
     display: block;
     flex: 1 0 auto;
-    padding-left: 0;
+    padding-left: 0 !important;
     overflow: visible;
 
     &-icon {