fix: Steps with process style in compact theme (#48251)

* fix: use css var for calc * fix: tail align * Update components/steps/style/index.ts Co-authored-by: 红 <wxh1220@gmail.com> Signed-off-by: afc163 <afc163@gmail.com> * test: update snapshot * chore: fix lint * chore: adjust style --------- Signed-off-by: afc163 <afc163@gmail.com> Co-authored-by: afc163 <afc163@gmail.com> Co-authored-by: 红 <wxh1220@gmail.com>
ant-design · Apr 8, 2024 · 8fc4fa0 · 8fc4fa0
1 parent 502dac1
commit 8fc4fa0
Show file tree

Hide file tree

Showing 7 changed files with 188 additions and 56 deletions.
diff --git a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2703,7 +2703,7 @@ Array [
   </div>,
   <br />,
   <div
-    class="ant-steps ant-steps-vertical ant-steps-small"
+    class="ant-steps ant-steps-vertical ant-steps-with-progress ant-steps-small"
   >
     <div
       class="ant-steps-item ant-steps-item-finish"
@@ -2769,11 +2769,64 @@ Array [
         <div
           class="ant-steps-item-icon"
         >
-          <span
-            class="ant-steps-icon"
+          <div
+            class="ant-steps-progress-icon"
           >
-            2
-          </span>
+            <div
+              aria-valuenow="80"
+              class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info"
+              role="progressbar"
+            >
+              <div
+                class="ant-progress-inner"
+                style="width: 32px; height: 32px; font-size: 10.8px;"
+              >
+                <svg
+                  class="ant-progress-circle"
+                  role="presentation"
+                  viewBox="0 0 100 100"
+                >
+                  <circle
+                    class="ant-progress-circle-trail"
+                    cx="50"
+                    cy="50"
+                    r="48"
+                    stroke-linecap="round"
+                    stroke-width="4"
+                    style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
+                  />
+                  <circle
+                    class="ant-progress-circle-path"
+                    cx="50"
+                    cy="50"
+                    opacity="1"
+                    r="48"
+                    stroke-linecap="round"
+                    stroke-width="4"
+                    style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 62.31857894892403; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+                  />
+                  <circle
+                    class="ant-progress-circle-path"
+                    cx="50"
+                    cy="50"
+                    opacity="0"
+                    r="48"
+                    stroke-linecap="round"
+                    stroke-width="4"
+                    style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
+                  />
+                </svg>
+                <span
+                  class="ant-progress-text"
+                />
+              </div>
+            </div>
+            <span
+              class="ant-steps-icon"
+            >
+              2
+            </span>
+          </div>
         </div>
         <div
           class="ant-steps-item-content"

diff --git a/components/steps/__tests__/__snapshots__/demo.test.ts.snap b/components/steps/__tests__/__snapshots__/demo.test.ts.snap
@@ -2363,7 +2363,7 @@ Array [
   </div>,
   <br />,
   <div
-    class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-vertical"
+    class="ant-steps ant-steps-horizontal ant-steps-with-progress ant-steps-small ant-steps-label-vertical"
   >
     <div
       class="ant-steps-item ant-steps-item-finish"
@@ -2429,11 +2429,64 @@ Array [
         <div
           class="ant-steps-item-icon"
         >
-          <span
-            class="ant-steps-icon"
+          <div
+            class="ant-steps-progress-icon"
           >
-            2
-          </span>
+            <div
+              aria-valuenow="80"
+              class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info"
+              role="progressbar"
+            >
+              <div
+                class="ant-progress-inner"
+                style="width:32px;height:32px;font-size:10.8px"
+              >
+                <svg
+                  class="ant-progress-circle"
+                  role="presentation"
+                  viewBox="0 0 100 100"
+                >
+                  <circle
+                    class="ant-progress-circle-trail"
+                    cx="50"
+                    cy="50"
+                    r="48"
+                    stroke-linecap="round"
+                    stroke-width="4"
+                    style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                  />
+                  <circle
+                    class="ant-progress-circle-path"
+                    cx="50"
+                    cy="50"
+                    opacity="1"
+                    r="48"
+                    stroke-linecap="round"
+                    stroke-width="4"
+                    style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:62.31857894892403;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                  />
+                  <circle
+                    class="ant-progress-circle-path"
+                    cx="50"
+                    cy="50"
+                    opacity="0"
+                    r="48"
+                    stroke-linecap="round"
+                    stroke-width="4"
+                    style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+                  />
+                </svg>
+                <span
+                  class="ant-progress-text"
+                />
+              </div>
+            </div>
+            <span
+              class="ant-steps-icon"
+            >
+              2
+            </span>
+          </div>
         </div>
         <div
           class="ant-steps-item-content"

diff --git a/components/steps/demo/label-placement.tsx b/components/steps/demo/label-placement.tsx
@@ -22,7 +22,7 @@ const App: React.FC = () => (
     <br />
     <Steps current={1} percent={60} labelPlacement="vertical" items={items} />
     <br />
-    <Steps current={1} size="small" labelPlacement="vertical" items={items} />
+    <Steps current={1} percent={80} size="small" labelPlacement="vertical" items={items} />
   </>
 );
 

diff --git a/components/steps/style/horizontal.ts b/components/steps/style/horizontal.ts
@@ -0,0 +1,19 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+
+import type { StepsToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+
+const genHorizontalStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
+  const { componentCls } = token;
+  const stepsItemCls = `${componentCls}-item`; // .ant-steps-item
+
+  return {
+    [`${componentCls}-horizontal`]: {
+      [`${stepsItemCls}-tail`]: {
+        transform: 'translateY(-50%)',
+      },
+    },
+  };
+};
+
+export default genHorizontalStyle;
diff --git a/components/steps/style/index.ts b/components/steps/style/index.ts
@@ -6,6 +6,7 @@ import { genFocusOutline, resetComponent } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 import genStepsCustomIconStyle from './custom-icon';
+import genStepsHorizontalStyle from './horizontal';
 import genStepsInlineStyle from './inline';
 import genStepsLabelPlacementStyle from './label-placement';
 import genStepsNavStyle from './nav';
@@ -241,7 +242,7 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
     },
     [`${stepsItemCls}-tail`]: {
       position: 'absolute',
-      top: token.calc(token.iconSize).div(2).sub(token.paddingXXS).equal(),
+      top: token.calc(token.iconSize).div(2).equal(),
       insetInlineStart: 0,
       width: '100%',
 
@@ -383,6 +384,8 @@ const genStepsStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
       ...genStepsSmallStyle(token),
       // vertical
       ...genStepsVerticalStyle(token),
+      // horizontal
+      ...genStepsHorizontalStyle(token),
       // label-placement
       ...genStepsLabelPlacementStyle(token),
       // progress-dot

diff --git a/components/steps/style/label-placement.ts b/components/steps/style/label-placement.ts
@@ -14,7 +14,7 @@ const genStepsLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject> = (token
 
         '&-tail': {
           marginInlineStart: token.calc(iconSize).div(2).add(token.controlHeightLG).equal(),
-          padding: `${unit(token.paddingXXS)} ${unit(token.paddingLG)}`,
+          padding: `0 ${unit(token.paddingLG)}`,
         },
 
         '&-content': {

diff --git a/components/steps/style/progress.ts b/components/steps/style/progress.ts
@@ -4,80 +4,84 @@ import type { StepsToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';
 
 const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
-  const { antCls, componentCls } = token;
+  const {
+    antCls,
+    componentCls,
+    iconSize,
+    iconSizeSM,
+    processIconColor,
+    marginXXS,
+    lineWidthBold,
+    lineWidth,
+    paddingXXS,
+  } = token;
+
+  const progressSize = token.calc(iconSize).add(token.calc(lineWidthBold).mul(4).equal()).equal();
+  const progressSizeSM = token
+    .calc(iconSizeSM)
+    .add(token.calc(token.lineWidth).mul(4).equal())
+    .equal();
 
   return {
     [`&${componentCls}-with-progress`]: {
       [`${componentCls}-item`]: {
-        paddingTop: token.paddingXXS,
+        paddingTop: paddingXXS,
 
         [`&-process ${componentCls}-item-container ${componentCls}-item-icon ${componentCls}-icon`]:
           {
-            color: token.processIconColor,
+            color: processIconColor,
           },
       },
 
       [`&${componentCls}-vertical > ${componentCls}-item `]: {
-        paddingInlineStart: token.paddingXXS,
+        paddingInlineStart: paddingXXS,
         [`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
-          top: token.marginXXS,
-          insetInlineStart: token
-            .calc(token.iconSize)
-            .div(2)
-            .sub(token.lineWidth)
-            .add(token.paddingXXS)
-            .equal(),
+          top: marginXXS,
+          insetInlineStart: token.calc(iconSize).div(2).sub(lineWidth).add(paddingXXS).equal(),
         },
       },
 
       [`&, &${componentCls}-small`]: {
         [`&${componentCls}-horizontal ${componentCls}-item:first-child`]: {
-          paddingBottom: token.paddingXXS,
-          paddingInlineStart: token.paddingXXS,
+          paddingBottom: paddingXXS,
+          paddingInlineStart: paddingXXS,
         },
       },
 
       [`&${componentCls}-small${componentCls}-vertical > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]:
         {
-          insetInlineStart: token
-            .calc(token.iconSizeSM)
-            .div(2)
-            .sub(token.lineWidth)
-            .add(token.paddingXXS)
-            .equal(),
+          insetInlineStart: token.calc(iconSizeSM).div(2).sub(lineWidth).add(paddingXXS).equal(),
         },
 
-      [`&${componentCls}-label-vertical`]: {
-        [`${componentCls}-item ${componentCls}-item-tail`]: {
-          top: token.calc(token.margin).sub(token.calc(token.lineWidth).mul(2).equal()).equal(),
-        },
+      [`&${componentCls}-label-vertical ${componentCls}-item ${componentCls}-item-tail`]: {
+        top: token.calc(iconSize).div(2).add(paddingXXS).equal(),
       },
 
       [`${componentCls}-item-icon`]: {
         position: 'relative',
 
         [`${antCls}-progress`]: {
           position: 'absolute',
-          insetBlockStart: token
-            .calc(
-              token
-                .calc(token.iconSize)
-                .sub(token.stepsProgressSize)
-                .sub(token.calc(token.lineWidth).mul(2).equal())
-                .equal(),
-            )
-            .div(2)
-            .equal(),
-          insetInlineStart: token
-            .calc(
-              token
-                .calc(token.iconSize)
-                .sub(token.stepsProgressSize)
-                .sub(token.calc(token.lineWidth).mul(2).equal())
-                .equal(),
-            )
-            .div(2)
-            .equal(),
+          insetInlineStart: '50%',
+          top: '50%',
+          transform: 'translate(-50%, -50%)',
+
+          '&-inner': {
+            width: `${progressSize} !important`,
+            height: `${progressSize} !important`,
+          },
+        },
+      },
+
+      // ============================== Small size ==============================
+      [`&${componentCls}-small`]: {
+        [`&${componentCls}-label-vertical ${componentCls}-item ${componentCls}-item-tail`]: {
+          top: token.calc(iconSizeSM).div(2).add(paddingXXS).equal(),
+        },
+
+        [`${componentCls}-item-icon ${antCls}-progress-inner`]: {
+          width: `${progressSizeSM} !important`,
+          height: `${progressSizeSM} !important`,
         },
       },
     },