From a7f94d5457ca5b8f11dfd711ddfa8843cf41ebcf Mon Sep 17 00:00:00 2001
From: Wuxh <wxh1220@gmail.com>
Date: Thu, 1 Dec 2022 10:57:48 +0800
Subject: [PATCH] fix(steps): fix steps style (#39100)

* fix(steps): fix steps style

* docs(steps): update demo

* style: formater

* docs(steps): update demo

* test: update snapshot

* fix(steps): fix the line style in vertical state

* chore: supplement 8abeac7643

* fix: coverage
---
 .../__snapshots__/demo-extend.test.ts.snap    | 115 +++++++++---------
 .../__tests__/__snapshots__/demo.test.ts.snap | 115 +++++++++---------
 components/steps/demo/progress-debug.tsx      |  30 +++--
 components/steps/style/progress.ts            |  16 ++-
 4 files changed, 146 insertions(+), 130 deletions(-)

diff --git a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
index 7f52a86877..ad38b92a37 100644
--- a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2989,62 +2989,67 @@ exports[`renders ./components/steps/demo/progress.tsx extend context correctly 1
 
 exports[`renders ./components/steps/demo/progress-debug.tsx extend context correctly 1`] = `
 Array [
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
+  <div
+    class="ant-space-compact ant-space-compact-block"
   >
-    <span>
-      Percentage to undefined
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Percentage +
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Current +
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Status Wait
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Status Process
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Status Finish
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Status Error
-    </span>
-  </button>,
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
+      type="button"
+    >
+      <span>
+        Percentage to undefined
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Percentage +
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Current +
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Status Wait
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Status Process
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Status Finish
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-last-item"
+      type="button"
+    >
+      <span>
+        Status Error
+      </span>
+    </button>
+  </div>,
+  <br />,
   <div
     class="ant-steps ant-steps-horizontal ant-steps-with-progress ant-steps-label-horizontal"
   >
diff --git a/components/steps/__tests__/__snapshots__/demo.test.ts.snap b/components/steps/__tests__/__snapshots__/demo.test.ts.snap
index 1a1d36bef5..0f2c4bb839 100644
--- a/components/steps/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/steps/__tests__/__snapshots__/demo.test.ts.snap
@@ -2557,62 +2557,67 @@ exports[`renders ./components/steps/demo/progress.tsx correctly 1`] = `
 
 exports[`renders ./components/steps/demo/progress-debug.tsx correctly 1`] = `
 Array [
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
+  <div
+    class="ant-space-compact ant-space-compact-block"
   >
-    <span>
-      Percentage to undefined
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Percentage +
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Current +
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Status Wait
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Status Process
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Status Finish
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-btn-default"
-    type="button"
-  >
-    <span>
-      Status Error
-    </span>
-  </button>,
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
+      type="button"
+    >
+      <span>
+        Percentage to undefined
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Percentage +
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Current +
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Status Wait
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Status Process
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item"
+      type="button"
+    >
+      <span>
+        Status Finish
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-last-item"
+      type="button"
+    >
+      <span>
+        Status Error
+      </span>
+    </button>
+  </div>,
+  <br />,
   <div
     class="ant-steps ant-steps-horizontal ant-steps-with-progress ant-steps-label-horizontal"
   >
diff --git a/components/steps/demo/progress-debug.tsx b/components/steps/demo/progress-debug.tsx
index 04c19f7675..297620bdaf 100644
--- a/components/steps/demo/progress-debug.tsx
+++ b/components/steps/demo/progress-debug.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import type { StepsProps } from 'antd';
-import { Button, Steps } from 'antd';
+import { Button, Steps, Space } from 'antd';
 
 const App: React.FC = () => {
-  const [percent, setPercentage] = useState(0);
+  const [percent, setPercentage] = useState<number | undefined>(0);
   const [current, setCurrent] = useState(1);
   const [status, setStatus] = useState<StepsProps['status']>('process');
   const description = 'This is a description.';
@@ -24,20 +24,18 @@ const App: React.FC = () => {
   ];
   return (
     <>
-      <Button onClick={() => setPercentage(0)}>Percentage to undefined</Button>
-      <Button onClick={() => setPercentage((percent + 10) % 100)}>Percentage +</Button>
-      <Button
-        onClick={() => {
-          setCurrent((current + 1) % 3);
-          setPercentage(0);
-        }}
-      >
-        Current +
-      </Button>
-      <Button onClick={() => setStatus('wait')}>Status Wait</Button>
-      <Button onClick={() => setStatus('process')}>Status Process</Button>
-      <Button onClick={() => setStatus('finish')}>Status Finish</Button>
-      <Button onClick={() => setStatus('error')}>Status Error</Button>
+      <Space.Compact block>
+        <Button onClick={() => setPercentage(undefined)}>Percentage to undefined</Button>
+        <Button onClick={() => setPercentage((prev) => ((prev ?? 0) + 10) % 100)}>
+          Percentage +
+        </Button>
+        <Button onClick={() => setCurrent((prev) => (prev + 1) % 3)}>Current +</Button>
+        <Button onClick={() => setStatus('wait')}>Status Wait</Button>
+        <Button onClick={() => setStatus('process')}>Status Process</Button>
+        <Button onClick={() => setStatus('finish')}>Status Finish</Button>
+        <Button onClick={() => setStatus('error')}>Status Error</Button>
+      </Space.Compact>
+      <br />
       <Steps current={current} percent={percent} status={status} items={items} />
       <Steps current={current} percent={percent} status={status} size="small" items={items} />
       <Steps
diff --git a/components/steps/style/progress.ts b/components/steps/style/progress.ts
index 7484032f4f..829b924a2d 100644
--- a/components/steps/style/progress.ts
+++ b/components/steps/style/progress.ts
@@ -16,18 +16,26 @@ const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
           },
       },
 
-      [`&${componentCls}-vertical > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]:
-        {
+      [`&${componentCls}-vertical > ${componentCls}-item `]: {
+        paddingInlineStart: token.paddingXXS,
+        [`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
           top: token.marginXXS,
+          insetInlineStart: token.stepsIconSize / 2 - token.lineWidth + token.paddingXXS,
         },
+      },
 
-      [`&${componentCls}-horizontal`]: {
-        [`${componentCls}-item:first-child`]: {
+      [`&, &${componentCls}-small`]: {
+        [`&${componentCls}-horizontal ${componentCls}-item:first-child`]: {
           paddingBottom: token.paddingXXS,
           paddingInlineStart: token.paddingXXS,
         },
       },
 
+      [`&${componentCls}-small${componentCls}-vertical > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]:
+        {
+          insetInlineStart: token.stepsSmallIconSize / 2 - token.lineWidth + token.paddingXXS,
+        },
+
       [`&${componentCls}-label-vertical`]: {
         [`${componentCls}-item ${componentCls}-item-tail`]: {
           top: token.margin - 2 * token.lineWidth,