fix: Steps progress circle size & rtl style when use progress (#26075)

* fix: Steps progress circle size * test: update snapshot * fix: rtl
ant-design · Aug 9, 2020 · f964abc · f964abc
1 parent d5ca588
commit f964abc
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
       }
     }
   }