From f964abc7f432b6b56521e52b9b1b1da03d078887 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sun, 9 Aug 2020 20:28:08 +0800
Subject: [PATCH] fix: Steps progress circle size & rtl style when use
 `progress` (#26075)

* fix: Steps progress circle size

* test: update snapshot

* fix: rtl
---
 .../__tests__/__snapshots__/demo.test.js.snap    | 10 +++++-----
 components/steps/index.tsx                       |  2 +-
 components/steps/style/progress.less             |  8 ++++----
 components/steps/style/rtl.less                  | 16 ++++++++--------
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/components/steps/__tests__/__snapshots__/demo.test.js.snap b/components/steps/__tests__/__snapshots__/demo.test.js.snap
index 976a3ec991..c4eb55d486 100644
--- a/components/steps/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/steps/__tests__/__snapshots__/demo.test.js.snap
@@ -1273,7 +1273,7 @@ exports[`renders ./components/steps/demo/progress.md correctly 1`] = `
           >
             <div
               class="ant-progress-inner"
-              style="width:38px;height:38px;font-size:11.7px"
+              style="width:40px;height:40px;font-size:12px"
             >
               <svg
                 class="ant-progress-circle"
@@ -1508,7 +1508,7 @@ Array [
             >
               <div
                 class="ant-progress-inner"
-                style="width:38px;height:38px;font-size:11.7px"
+                style="width:40px;height:40px;font-size:12px"
               >
                 <svg
                   class="ant-progress-circle"
@@ -1683,7 +1683,7 @@ Array [
             >
               <div
                 class="ant-progress-inner"
-                style="width:30px;height:30px;font-size:10.5px"
+                style="width:32px;height:32px;font-size:10.8px"
               >
                 <svg
                   class="ant-progress-circle"
@@ -1858,7 +1858,7 @@ Array [
             >
               <div
                 class="ant-progress-inner"
-                style="width:38px;height:38px;font-size:11.7px"
+                style="width:40px;height:40px;font-size:12px"
               >
                 <svg
                   class="ant-progress-circle"
@@ -2033,7 +2033,7 @@ Array [
             >
               <div
                 class="ant-progress-inner"
-                style="width:30px;height:30px;font-size:10.5px"
+                style="width:32px;height:32px;font-size:10.8px"
               >
                 <svg
                   class="ant-progress-circle"
diff --git a/components/steps/index.tsx b/components/steps/index.tsx
index 88a4f2eb2c..d1c05db41e 100644
--- a/components/steps/index.tsx
+++ b/components/steps/index.tsx
@@ -67,7 +67,7 @@ export default class Steps extends React.Component<StepsProps, any> {
     }) => {
       if (status === 'process' && percent !== undefined) {
         // currently it's hard-coded, since we can't easily read the actually width of icon
-        const progressWidth = size === 'small' ? 30 : 38;
+        const progressWidth = size === 'small' ? 32 : 40;
         const iconWithProgress = (
           <div className={`${prefixCls}-progress-icon`}>
             <Progress
diff --git a/components/steps/style/progress.less b/components/steps/style/progress.less
index 82664c4019..09bf67ba53 100644
--- a/components/steps/style/progress.less
+++ b/components/steps/style/progress.less
@@ -11,10 +11,10 @@
       position: relative;
       .@{progress-prefix-cls} {
         position: absolute;
-        top: -4px;
-        right: -4px;
-        bottom: -4px;
-        left: -4px;
+        top: -5px;
+        right: -5px;
+        bottom: -5px;
+        left: -5px;
       }
     }
   }
diff --git a/components/steps/style/rtl.less b/components/steps/style/rtl.less
index 2fef8192e9..80a5d6a08d 100644
--- a/components/steps/style/rtl.less
+++ b/components/steps/style/rtl.less
@@ -42,13 +42,13 @@
 .@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) {
   .@{steps-prefix-cls}-item {
     .@{steps-prefix-cls}-rtl& {
-      margin-right: 0;
-      margin-left: 16px;
+      padding-right: 16px;
+      padding-left: 0;
     }
 
-    &:last-child {
+    &:first-child {
       .@{steps-prefix-cls}-rtl& {
-        margin-left: 0;
+        padding-right: 0;
       }
     }
     &:last-child .@{steps-prefix-cls}-item-title {
@@ -115,13 +115,13 @@
   &.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical)
     .@{steps-prefix-cls}-item {
     .@{steps-prefix-cls}-rtl& {
-      margin-right: 0;
-      margin-left: 12px;
+      padding-right: 12px;
+      padding-left: 0;
     }
 
-    &:last-child {
+    &:first-child {
       .@{steps-prefix-cls}-rtl& {
-        margin-left: 0;
+        padding-right: 0;
       }
     }
   }