feat(Steps): add items prop and variants (#6406)

* refactor(steps): add items prop and variants

* feat(steps): add Label Placement and Inline Steps demo

* feat(steps): Label Placement and Inline Steps snap

* test(steps): Steps demo snap

* feat(Steps): update docs

* fix(Step): progressDot

* chore(useLegacyItems): change from warning to devWarning

* refactor(Steps): Remove useLegacyItems

* refactor(Steps): renderStep

* test(Steps): update test snapshot

* chore(Steps): filterEmpty

* feat(Steps): update docs

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

@@ -2,7 +2,7 @@
 
 exports[`renders ./components/steps/demo/clickable.vue correctly 1`] = `
 <div>
-  <div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal">
+  <div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal css-dev-only-do-not-override-1etm4mv">
     <div class="ant-steps-item ant-steps-item-process ant-steps-item-active">
       <div role="button" tabindex="0" class="ant-steps-item-container">
         <div class="ant-steps-item-tail">
@@ -46,10 +46,10 @@ exports[`renders ./components/steps/demo/clickable.vue correctly 1`] = `
       </div>
     </div>
   </div>
-  <div class="ant-divider ant-divider-horizontal" role="separator">
+  <div class="ant-divider css-dev-only-do-not-override-1etm4mv ant-divider-horizontal" role="separator">
     <!---->
   </div>
-  <div class="ant-steps ant-steps-vertical">
+  <div class="ant-steps ant-steps-vertical css-dev-only-do-not-override-1etm4mv">
     <div class="ant-steps-item ant-steps-item-process ant-steps-item-active">
       <div role="button" tabindex="0" class="ant-steps-item-container">
         <div class="ant-steps-item-tail">
@@ -98,7 +98,7 @@ exports[`renders ./components/steps/demo/clickable.vue correctly 1`] = `
 
 exports[`renders ./components/steps/demo/customized-progress-dot.vue correctly 1`] = `
 <div>
-  <div class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-dot">
+  <div class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-dot css-dev-only-do-not-override-1etm4mv">
     <div class="ant-steps-item ant-steps-item-finish">
       <div role="button" tabindex="0" class="ant-steps-item-container">
         <div class="ant-steps-item-tail">
@@ -160,13 +160,13 @@ exports[`renders ./components/steps/demo/customized-progress-dot.vue correctly 1
 `;
 
 exports[`renders ./components/steps/demo/error.vue correctly 1`] = `
-<div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal">
+<div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal css-dev-only-do-not-override-1etm4mv">
   <div class="ant-steps-item ant-steps-item-finish ant-steps-next-error">
     <div role="button" tabindex="0" class="ant-steps-item-container">
       <div class="ant-steps-item-tail">
         <!---->
       </div>
-      <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check [object Object]-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
+      <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check ant-steps-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
       <div class="ant-steps-item-content">
         <div class="ant-steps-item-title">Finished
           <!---->
@@ -180,7 +180,7 @@ exports[`renders ./components/steps/demo/error.vue correctly 1`] = `
       <div class="ant-steps-item-tail">
         <!---->
       </div>
-      <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="close" class="anticon anticon-close [object Object]-error-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></div>
+      <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="close" class="anticon anticon-close ant-steps-error-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></div>
       <div class="ant-steps-item-content">
         <div class="ant-steps-item-title">In Progress
           <!---->
@@ -207,7 +207,7 @@ exports[`renders ./components/steps/demo/error.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/steps/demo/icon.vue correctly 1`] = `
-<div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal">
+<div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal css-dev-only-do-not-override-1etm4mv">
   <div class="ant-steps-item ant-steps-item-finish ant-steps-item-custom ant-steps-item-active">
     <div role="button" tabindex="0" class="ant-steps-item-container">
       <div class="ant-steps-item-tail">
@@ -267,15 +267,417 @@ exports[`renders ./components/steps/demo/icon.vue correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/steps/demo/inline.vue correctly 1`] = `
+<div class="ant-list ant-list-split css-dev-only-do-not-override-1etm4mv">
+  <!---->
+  <!---->
+  <div class="ant-spin-nested-loading css-dev-only-do-not-override-1etm4mv">
+    <!---->
+    <div class="ant-spin-container">
+      <ul class="ant-list-items">
+        <li class="ant-list-item">
+          <div class="ant-list-item-meta">
+            <div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image css-dev-only-do-not-override-1etm4mv"><img src="https://joeschmoe.io/api/v1/random"></span></div>
+            <div class="ant-list-item-meta-content">
+              <h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Ant Design Title 1</a></h4>
+              <div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team</div>
+            </div>
+          </div>
+          <div class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-dot ant-steps-inline css-dev-only-do-not-override-1etm4mv" style="margin-top: 8px;">
+            <!---->
+            <div class="ant-steps-item ant-steps-item-process ant-steps-item-active">
+              <div role="button" tabindex="0" class="ant-steps-item-container">
+                <div class="ant-steps-item-tail">
+                  <!---->
+                </div>
+                <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
+                <div class="ant-steps-item-content">
+                  <div class="ant-steps-item-title">Step 1
+                    <!---->
+                  </div>
+                  <div class="ant-steps-item-description">This is a Step 1.</div>
+                </div>
+              </div>
+            </div>
+            <!---->
+            <div class="ant-steps-item ant-steps-item-wait">
+              <div role="button" tabindex="0" class="ant-steps-item-container">
+                <div class="ant-steps-item-tail">
+                  <!---->
+                </div>
+                <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
+                <div class="ant-steps-item-content">
+                  <div class="ant-steps-item-title">Step 2
+                    <!---->
+                  </div>
+                  <div class="ant-steps-item-description">This is a Step 2.</div>
+                </div>
+              </div>
+            </div>
+            <!---->
+            <div class="ant-steps-item ant-steps-item-wait">
+              <div role="button" tabindex="0" class="ant-steps-item-container">
+                <div class="ant-steps-item-tail">
+                  <!---->
+                </div>
+                <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
+                <div class="ant-steps-item-content">
+                  <div class="ant-steps-item-title">Step 3
+                    <!---->
+                  </div>
+                  <div class="ant-steps-item-description">This is a Step 3.</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!---->
+          <!---->
+        </li>
+        <li class="ant-list-item">
+          <div class="ant-list-item-meta">
+            <div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image css-dev-only-do-not-override-1etm4mv"><img src="https://joeschmoe.io/api/v1/random"></span></div>
+            <div class="ant-list-item-meta-content">
+              <h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Ant Design Title 2</a></h4>
+              <div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team</div>
+            </div>
+          </div>
+          <div class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-dot ant-steps-inline css-dev-only-do-not-override-1etm4mv" style="margin-top: 8px;">
+            <!---->
+            <div class="ant-steps-item ant-steps-item-finish ant-steps-next-error">
+              <div role="button" tabindex="0" class="ant-steps-item-container">
+                <div class="ant-steps-item-tail">
+                  <!---->
+                </div>
+                <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
+                <div class="ant-steps-item-content">
+                  <div class="ant-steps-item-title">Step 1
+                    <!---->
+                  </div>
+                  <div class="ant-steps-item-description">This is a Step 1.</div>
+                </div>
+              </div>
+            </div>
+            <!---->
+            <div class="ant-steps-item ant-steps-item-error ant-steps-item-active">
+              <div role="button" tabindex="0" class="ant-steps-item-container">
+                <div class="ant-steps-item-tail">
+                  <!---->
+                </div>
+                <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
+                <div class="ant-steps-item-content">
+                  <div class="ant-steps-item-title">Step 2
+                    <!---->
+                  </div>
+                  <div class="ant-steps-item-description">This is a Step 2.</div>
+                </div>
+              </div>
+            </div>
+            <!---->
+            <div class="ant-steps-item ant-steps-item-wait">
+              <div role="button" tabindex="0" class="ant-steps-item-container">
+                <div class="ant-steps-item-tail">
+                  <!---->
+                </div>
+                <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
+                <div class="ant-steps-item-content">
+                  <div class="ant-steps-item-title">Step 3
+                    <!---->
+                  </div>
+                  <div class="ant-steps-item-description">This is a Step 3.</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!---->
+          <!---->
+        </li>
+        <li class="ant-list-item">
+          <div class="ant-list-item-meta">
+            <div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image css-dev-only-do-not-override-1etm4mv"><img src="https://joeschmoe.io/api/v1/random"></span></div>
+            <div class="ant-list-item-meta-content">
+              <h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Ant Design Title 3</a></h4>
+              <div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team</div>
+            </div>
+          </div>
+          <div class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-dot ant-steps-inline css-dev-only-do-not-override-1etm4mv" style="margin-top: 8px;">
+            <!---->
+            <div class="ant-steps-item ant-steps-item-finish">
+              <div role="button" tabindex="0" class="ant-steps-item-container">
+                <div class="ant-steps-item-tail">
+                  <!---->
+                </div>
+                <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
+                <div class="ant-steps-item-content">
+                  <div class="ant-steps-item-title">Step 1
+                    <!---->
+                  </div>
+                  <div class="ant-steps-item-description">This is a Step 1.</div>
+                </div>
+              </div>
+            </div>
+            <!---->
+            <div class="ant-steps-item ant-steps-item-finish">
+              <div role="button" tabindex="0" class="ant-steps-item-container">
+                <div class="ant-steps-item-tail">
+                  <!---->
+                </div>
+                <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
+                <div class="ant-steps-item-content">
+                  <div class="ant-steps-item-title">Step 2
+                    <!---->
+                  </div>
+                  <div class="ant-steps-item-description">This is a Step 2.</div>
+                </div>
+              </div>
+            </div>
+            <!---->
+            <div class="ant-steps-item ant-steps-item-process ant-steps-item-active">
+              <div role="button" tabindex="0" class="ant-steps-item-container">
+                <div class="ant-steps-item-tail">
+                  <!---->
+                </div>
+                <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
+                <div class="ant-steps-item-content">
+                  <div class="ant-steps-item-title">Step 3
+                    <!---->
+                  </div>
+                  <div class="ant-steps-item-description">This is a Step 3.</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!---->
+          <!---->
+        </li>
+        <li class="ant-list-item">
+          <div class="ant-list-item-meta">
+            <div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image css-dev-only-do-not-override-1etm4mv"><img src="https://joeschmoe.io/api/v1/random"></span></div>
+            <div class="ant-list-item-meta-content">
+              <h4 class="ant-list-item-meta-title"><a href="https://www.antdv.com/">Ant Design Title 4</a></h4>
+              <div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team</div>
+            </div>
+          </div>
+          <div class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-dot ant-steps-inline css-dev-only-do-not-override-1etm4mv" style="margin-top: 8px;">
+            <!---->
+            <div class="ant-steps-item ant-steps-item-finish">
+              <div role="button" tabindex="0" class="ant-steps-item-container">
+                <div class="ant-steps-item-tail">
+                  <!---->
+                </div>
+                <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
+                <div class="ant-steps-item-content">
+                  <div class="ant-steps-item-title">Step 1
+                    <!---->
+                  </div>
+                  <div class="ant-steps-item-description">This is a Step 1.</div>
+                </div>
+              </div>
+            </div>
+            <!---->
+            <div class="ant-steps-item ant-steps-item-process ant-steps-item-active">
+              <div role="button" tabindex="0" class="ant-steps-item-container">
+                <div class="ant-steps-item-tail">
+                  <!---->
+                </div>
+                <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
+                <div class="ant-steps-item-content">
+                  <div class="ant-steps-item-title">Step 2
+                    <!---->
+                  </div>
+                  <div class="ant-steps-item-description">This is a Step 2.</div>
+                </div>
+              </div>
+            </div>
+            <!---->
+            <div class="ant-steps-item ant-steps-item-wait">
+              <div role="button" tabindex="0" class="ant-steps-item-container">
+                <div class="ant-steps-item-tail">
+                  <!---->
+                </div>
+                <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
+                <div class="ant-steps-item-content">
+                  <div class="ant-steps-item-title">Step 3
+                    <!---->
+                  </div>
+                  <div class="ant-steps-item-description">This is a Step 3.</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!---->
+          <!---->
+        </li>
+      </ul>
+    </div>
+  </div>
+  <!---->
+  <!---->
+</div>
+`;
+
+exports[`renders ./components/steps/demo/label-placement.vue correctly 1`] = `
+<div>
+  <div class="ant-steps ant-steps-horizontal ant-steps-label-vertical css-dev-only-do-not-override-1etm4mv">
+    <div class="ant-steps-item ant-steps-item-finish">
+      <div role="button" tabindex="0" class="ant-steps-item-container">
+        <div class="ant-steps-item-tail">
+          <!---->
+        </div>
+        <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check ant-steps-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
+        <div class="ant-steps-item-content">
+          <div class="ant-steps-item-title">Finished
+            <!---->
+          </div>
+          <div class="ant-steps-item-description">This is a description.</div>
+        </div>
+      </div>
+    </div>
+    <div class="ant-steps-item ant-steps-item-process ant-steps-item-active">
+      <div role="button" tabindex="0" class="ant-steps-item-container">
+        <div class="ant-steps-item-tail">
+          <!---->
+        </div>
+        <div class="ant-steps-item-icon"><span class="ant-steps-icon">2</span></div>
+        <div class="ant-steps-item-content">
+          <div class="ant-steps-item-title">In Progress
+            <!---->
+          </div>
+          <div class="ant-steps-item-description">This is a description.</div>
+        </div>
+      </div>
+    </div>
+    <div class="ant-steps-item ant-steps-item-wait">
+      <div role="button" tabindex="0" class="ant-steps-item-container">
+        <div class="ant-steps-item-tail">
+          <!---->
+        </div>
+        <div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
+        <div class="ant-steps-item-content">
+          <div class="ant-steps-item-title">Waiting
+            <!---->
+          </div>
+          <div class="ant-steps-item-description">This is a description.</div>
+        </div>
+      </div>
+    </div>
+  </div><br>
+  <div class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-with-progress css-dev-only-do-not-override-1etm4mv">
+    <div class="ant-steps-item ant-steps-item-finish">
+      <div role="button" tabindex="0" class="ant-steps-item-container">
+        <div class="ant-steps-item-tail">
+          <!---->
+        </div>
+        <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check ant-steps-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
+        <div class="ant-steps-item-content">
+          <div class="ant-steps-item-title">Finished
+            <!---->
+          </div>
+          <div class="ant-steps-item-description">This is a description.</div>
+        </div>
+      </div>
+    </div>
+    <div class="ant-steps-item ant-steps-item-process ant-steps-item-active">
+      <div role="button" tabindex="0" class="ant-steps-item-container">
+        <div class="ant-steps-item-tail">
+          <!---->
+        </div>
+        <div class="ant-steps-item-icon">
+          <div class="ant-steps-progress-icon">
+            <div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
+              <div class="ant-progress-inner" style="width: 40px; height: 40px; font-size: 12px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
+                  <!---->
+                  <path d="M 50,50 m 0,-48
+   a 48,48 0 1 1 0,96
+   a 48,48 0 1 1 0,-96" stroke-linecap="round" stroke-width="4" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 301.59289474462014px 301.59289474462014px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
+                  <path d="M 50,50 m 0,-48
+   a 48,48 0 1 1 0,96
+   a 48,48 0 1 1 0,-96" stroke="" stroke-linecap="round" stroke-width="4" opacity="1" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 180.95573684677208px 301.59289474462014px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
+                  <path d="M 50,50 m 0,-48
+   a 48,48 0 1 1 0,96
+   a 48,48 0 1 1 0,-96" stroke="" stroke-linecap="round" stroke-width="4" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 301.59289474462014px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
+                </svg><span class="ant-progress-text"><!----></span></div>
+            </div><span class="ant-steps-icon">2</span>
+          </div>
+        </div>
+        <div class="ant-steps-item-content">
+          <div class="ant-steps-item-title">In Progress
+            <!---->
+          </div>
+          <div class="ant-steps-item-description">This is a description.</div>
+        </div>
+      </div>
+    </div>
+    <div class="ant-steps-item ant-steps-item-wait">
+      <div role="button" tabindex="0" class="ant-steps-item-container">
+        <div class="ant-steps-item-tail">
+          <!---->
+        </div>
+        <div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
+        <div class="ant-steps-item-content">
+          <div class="ant-steps-item-title">Waiting
+            <!---->
+          </div>
+          <div class="ant-steps-item-description">This is a description.</div>
+        </div>
+      </div>
+    </div>
+  </div><br>
+  <div class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-vertical css-dev-only-do-not-override-1etm4mv">
+    <div class="ant-steps-item ant-steps-item-finish">
+      <div role="button" tabindex="0" class="ant-steps-item-container">
+        <div class="ant-steps-item-tail">
+          <!---->
+        </div>
+        <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check ant-steps-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
+        <div class="ant-steps-item-content">
+          <div class="ant-steps-item-title">Finished
+            <!---->
+          </div>
+          <div class="ant-steps-item-description">This is a description.</div>
+        </div>
+      </div>
+    </div>
+    <div class="ant-steps-item ant-steps-item-process ant-steps-item-active">
+      <div role="button" tabindex="0" class="ant-steps-item-container">
+        <div class="ant-steps-item-tail">
+          <!---->
+        </div>
+        <div class="ant-steps-item-icon"><span class="ant-steps-icon">2</span></div>
+        <div class="ant-steps-item-content">
+          <div class="ant-steps-item-title">In Progress
+            <!---->
+          </div>
+          <div class="ant-steps-item-description">This is a description.</div>
+        </div>
+      </div>
+    </div>
+    <div class="ant-steps-item ant-steps-item-wait">
+      <div role="button" tabindex="0" class="ant-steps-item-container">
+        <div class="ant-steps-item-tail">
+          <!---->
+        </div>
+        <div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
+        <div class="ant-steps-item-content">
+          <div class="ant-steps-item-title">Waiting
+            <!---->
+          </div>
+          <div class="ant-steps-item-description">This is a description.</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/steps/demo/nav.vue correctly 1`] = `
 <div>
-  <div class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-horizontal ant-steps-navigation">
+  <div class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-horizontal ant-steps-navigation css-dev-only-do-not-override-1etm4mv" style="margin-bottom: 60px; box-shadow: 0px -1px 0 0 #e8e8e8 inset;">
     <div class="ant-steps-item ant-steps-item-finish ant-steps-item-active">
       <div role="button" tabindex="0" class="ant-steps-item-container">
         <div class="ant-steps-item-tail">
           <!---->
         </div>
-        <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check [object Object]-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
+        <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check ant-steps-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
         <div class="ant-steps-item-content">
           <div class="ant-steps-item-title">Step 1<div title="00:00:05" class="ant-steps-item-subtitle">00:00:05</div>
           </div>
@@ -310,13 +712,13 @@ exports[`renders ./components/steps/demo/nav.vue correctly 1`] = `
       </div>
     </div>
   </div>
-  <div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal ant-steps-navigation">
+  <div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal ant-steps-navigation css-dev-only-do-not-override-1etm4mv" style="margin-bottom: 60px; box-shadow: 0px -1px 0 0 #e8e8e8 inset;">
     <div class="ant-steps-item ant-steps-item-finish ant-steps-item-active">
       <div role="button" tabindex="0" class="ant-steps-item-container">
         <div class="ant-steps-item-tail">
           <!---->
         </div>
-        <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check [object Object]-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
+        <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check ant-steps-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
         <div class="ant-steps-item-content">
           <div class="ant-steps-item-title">Step 1
             <!---->
@@ -368,13 +770,13 @@ exports[`renders ./components/steps/demo/nav.vue correctly 1`] = `
       </div>
     </div>
   </div>
-  <div class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-horizontal ant-steps-navigation">
+  <div class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-horizontal ant-steps-navigation css-dev-only-do-not-override-1etm4mv" style="margin-bottom: 60px; box-shadow: 0px -1px 0 0 #e8e8e8 inset;">
     <div class="ant-steps-item ant-steps-item-finish ant-steps-item-active">
       <div role="button" tabindex="0" class="ant-steps-item-container">
         <div class="ant-steps-item-tail">
           <!---->
         </div>
-        <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check [object Object]-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
+        <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check ant-steps-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
         <div class="ant-steps-item-content">
           <div class="ant-steps-item-title">finish 1
             <!---->
@@ -388,7 +790,7 @@ exports[`renders ./components/steps/demo/nav.vue correctly 1`] = `
         <div class="ant-steps-item-tail">
           <!---->
         </div>
-        <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check [object Object]-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
+        <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check ant-steps-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
         <div class="ant-steps-item-content">
           <div class="ant-steps-item-title">finish 2
             <!---->
@@ -430,13 +832,13 @@ exports[`renders ./components/steps/demo/nav.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/steps/demo/progress.vue correctly 1`] = `
-<div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal ant-steps-with-progress">
+<div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal ant-steps-with-progress css-dev-only-do-not-override-1etm4mv">
   <div class="ant-steps-item ant-steps-item-finish">
     <div role="button" tabindex="0" class="ant-steps-item-container">
       <div class="ant-steps-item-tail">
         <!---->
       </div>
-      <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check [object Object]-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
+      <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check ant-steps-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
       <div class="ant-steps-item-content">
         <div class="ant-steps-item-title">Finished
           <!---->
@@ -451,8 +853,8 @@ exports[`renders ./components/steps/demo/progress.vue correctly 1`] = `
         <!---->
       </div>
       <div class="ant-steps-item-icon">
-        <div class="[object Object]-progress-icon">
-          <div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal">
+        <div class="ant-steps-progress-icon">
+          <div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
             <div class="ant-progress-inner" style="width: 40px; height: 40px; font-size: 12px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
                 <!---->
                 <path d="M 50,50 m 0,-48
@@ -490,11 +892,71 @@ exports[`renders ./components/steps/demo/progress.vue correctly 1`] = `
     </div>
   </div>
 </div>
+<div class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-horizontal ant-steps-with-progress css-dev-only-do-not-override-1etm4mv">
+  <div class="ant-steps-item ant-steps-item-finish">
+    <div role="button" tabindex="0" class="ant-steps-item-container">
+      <div class="ant-steps-item-tail">
+        <!---->
+      </div>
+      <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check ant-steps-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
+      <div class="ant-steps-item-content">
+        <div class="ant-steps-item-title">Finished
+          <!---->
+        </div>
+        <div class="ant-steps-item-description">This is a description.</div>
+      </div>
+    </div>
+  </div>
+  <div class="ant-steps-item ant-steps-item-process ant-steps-item-active">
+    <div role="button" tabindex="0" class="ant-steps-item-container">
+      <div class="ant-steps-item-tail">
+        <!---->
+      </div>
+      <div class="ant-steps-item-icon">
+        <div class="ant-steps-progress-icon">
+          <div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
+            <div class="ant-progress-inner" style="width: 32px; height: 32px; font-size: 10.8px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
+                <!---->
+                <path d="M 50,50 m 0,-48
+   a 48,48 0 1 1 0,96
+   a 48,48 0 1 1 0,-96" stroke-linecap="round" stroke-width="4" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 301.59289474462014px 301.59289474462014px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
+                <path d="M 50,50 m 0,-48
+   a 48,48 0 1 1 0,96
+   a 48,48 0 1 1 0,-96" stroke="" stroke-linecap="round" stroke-width="4" opacity="1" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 180.95573684677208px 301.59289474462014px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
+                <path d="M 50,50 m 0,-48
+   a 48,48 0 1 1 0,96
+   a 48,48 0 1 1 0,-96" stroke="" stroke-linecap="round" stroke-width="4" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 301.59289474462014px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
+              </svg><span class="ant-progress-text"><!----></span></div>
+          </div><span class="ant-steps-icon">2</span>
+        </div>
+      </div>
+      <div class="ant-steps-item-content">
+        <div class="ant-steps-item-title">In Progress<div title="Left 00:00:08" class="ant-steps-item-subtitle">Left 00:00:08</div>
+        </div>
+        <div class="ant-steps-item-description">This is a description.</div>
+      </div>
+    </div>
+  </div>
+  <div class="ant-steps-item ant-steps-item-wait">
+    <div role="button" tabindex="0" class="ant-steps-item-container">
+      <div class="ant-steps-item-tail">
+        <!---->
+      </div>
+      <div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
+      <div class="ant-steps-item-content">
+        <div class="ant-steps-item-title">Waiting
+          <!---->
+        </div>
+        <div class="ant-steps-item-description">This is a description.</div>
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`renders ./components/steps/demo/progress-dot.vue correctly 1`] = `
 <div>
-  <div class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-dot">
+  <div class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-dot css-dev-only-do-not-override-1etm4mv">
     <div class="ant-steps-item ant-steps-item-finish">
       <div role="button" tabindex="0" class="ant-steps-item-container">
         <div class="ant-steps-item-tail">
@@ -538,10 +1000,10 @@ exports[`renders ./components/steps/demo/progress-dot.vue correctly 1`] = `
       </div>
     </div>
   </div>
-  <div class="ant-divider ant-divider-horizontal" role="separator">
+  <div class="ant-divider css-dev-only-do-not-override-1etm4mv ant-divider-horizontal" role="separator">
     <!---->
   </div>
-  <div class="ant-steps ant-steps-vertical ant-steps-dot">
+  <div class="ant-steps ant-steps-vertical ant-steps-dot css-dev-only-do-not-override-1etm4mv">
     <div class="ant-steps-item ant-steps-item-finish">
       <div role="button" tabindex="0" class="ant-steps-item-container">
         <div class="ant-steps-item-tail">
@@ -617,13 +1079,13 @@ exports[`renders ./components/steps/demo/progress-dot.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/steps/demo/simple.vue correctly 1`] = `
-<div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal">
+<div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal css-dev-only-do-not-override-1etm4mv">
   <div class="ant-steps-item ant-steps-item-finish">
     <div role="button" tabindex="0" class="ant-steps-item-container">
       <div class="ant-steps-item-tail">
         <!---->
       </div>
-      <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check [object Object]-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
+      <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check ant-steps-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
       <div class="ant-steps-item-content">
         <div class="ant-steps-item-title">Finished
           <!---->
@@ -663,13 +1125,13 @@ exports[`renders ./components/steps/demo/simple.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/steps/demo/small-size.vue correctly 1`] = `
-<div class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-horizontal">
+<div class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-horizontal css-dev-only-do-not-override-1etm4mv">
   <div class="ant-steps-item ant-steps-item-finish">
     <div role="button" tabindex="0" class="ant-steps-item-container">
       <div class="ant-steps-item-tail">
         <!---->
       </div>
-      <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check [object Object]-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
+      <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check ant-steps-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
       <div class="ant-steps-item-content">
         <div class="ant-steps-item-title">Finished
           <!---->
@@ -711,7 +1173,7 @@ exports[`renders ./components/steps/demo/small-size.vue correctly 1`] = `
 
 exports[`renders ./components/steps/demo/step-next.vue correctly 1`] = `
 <div>
-  <div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal">
+  <div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal css-dev-only-do-not-override-1etm4mv">
     <div class="ant-steps-item ant-steps-item-process ant-steps-item-active">
       <div role="button" tabindex="0" class="ant-steps-item-container">
         <div class="ant-steps-item-tail">
@@ -756,7 +1218,7 @@ exports[`renders ./components/steps/demo/step-next.vue correctly 1`] = `
     </div>
   </div>
   <div class="steps-content">First-content</div>
-  <div class="steps-action"><button class="ant-btn ant-btn-primary" type="button">
+  <div class="steps-action"><button class="css-dev-only-do-not-override-1etm4mv ant-btn ant-btn-primary" type="button">
       <!----><span>Next</span>
     </button>
     <!--v-if-->
@@ -766,13 +1228,13 @@ exports[`renders ./components/steps/demo/step-next.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/steps/demo/vertical.vue correctly 1`] = `
-<div class="ant-steps ant-steps-vertical">
+<div class="ant-steps ant-steps-vertical css-dev-only-do-not-override-1etm4mv">
   <div class="ant-steps-item ant-steps-item-finish">
     <div role="button" tabindex="0" class="ant-steps-item-container">
       <div class="ant-steps-item-tail">
         <!---->
       </div>
-      <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check [object Object]-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
+      <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check ant-steps-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
       <div class="ant-steps-item-content">
         <div class="ant-steps-item-title">Finished
           <!---->
@@ -813,13 +1275,13 @@ exports[`renders ./components/steps/demo/vertical.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/steps/demo/vertical-small.vue correctly 1`] = `
-<div class="ant-steps ant-steps-vertical ant-steps-small">
+<div class="ant-steps ant-steps-vertical ant-steps-small css-dev-only-do-not-override-1etm4mv">
   <div class="ant-steps-item ant-steps-item-finish">
     <div role="button" tabindex="0" class="ant-steps-item-container">
       <div class="ant-steps-item-tail">
         <!---->
       </div>
-      <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check [object Object]-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
+      <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check ant-steps-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div>
       <div class="ant-steps-item-content">
         <div class="ant-steps-item-title">Finished
           <!---->

components/steps/demo/index.vue

@@ -12,6 +12,8 @@
     <Clickable />
     <Nav />
     <Progress />
+    <LabelPlacement />
+    <Inline />
   </demo-sort>
 </template>
 <script lang="ts">
@@ -26,6 +28,8 @@ import VerticalSmall from './vertical-small.vue';
 import Vertical from './vertical.vue';
 import Clickable from './clickable.vue';
 import Progress from './progress.vue';
+import LabelPlacement from './label-placement.vue';
+import Inline from './inline.vue';
 import Nav from './nav.vue';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
@@ -47,6 +51,8 @@ export default defineComponent({
     Clickable,
     Nav,
     Progress,
+    LabelPlacement,
+    Inline,
   },
   setup() {
     return {};

components/steps/demo/inline.vue

@@ -0,0 +1,97 @@
+<docs>
+---
+order: 3
+title:
+  zh-CN: 内联步骤条
+  en-US: Inline Steps
+---
+
+## zh-CN
+
+内联类型的步骤条，适用于列表内容场景中展示对象所在流程、当前状态的情况。
+
+## en-US
+
+Inline type steps, suitable for displaying the process and current state of the object in the list content scene.
+
+</docs>
+
+<template>
+  <a-list :data-source="data">
+    <template #renderItem="{ item }">
+      <a-list-item>
+        <a-list-item-meta
+          description="Ant Design, a design language for background applications, is refined by Ant UED Team"
+        >
+          <template #title>
+            <a href="https://www.antdv.com/">{{ item.title }}</a>
+          </template>
+          <template #avatar>
+            <a-avatar src="https://joeschmoe.io/api/v1/random" />
+          </template>
+        </a-list-item-meta>
+        <a-steps
+          style="margin-top: 8px"
+          type="inline"
+          :current="item.current"
+          :status="item.status"
+          :items="items"
+        />
+      </a-list-item>
+    </template>
+  </a-list>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { List, Steps, Avatar } from 'ant-design-vue';
+
+export default defineComponent({
+  components: {
+    [List.name]: List,
+    [Steps.name]: Steps,
+    [Avatar.name]: Avatar,
+  },
+
+  setup() {
+    const data = [
+      {
+        title: 'Ant Design Title 1',
+        current: 0,
+      },
+      {
+        title: 'Ant Design Title 2',
+        current: 1,
+        status: 'error',
+      },
+      {
+        title: 'Ant Design Title 3',
+        current: 2,
+      },
+      {
+        title: 'Ant Design Title 4',
+        current: 1,
+      },
+    ];
+
+    const items = [
+      {
+        title: 'Step 1',
+        description: 'This is a Step 1.',
+      },
+      {
+        title: 'Step 2',
+        description: 'This is a Step 2.',
+      },
+      {
+        title: 'Step 3',
+        description: 'This is a Step 3.',
+      },
+    ];
+
+    return {
+      data,
+      items,
+    };
+  },
+});
+</script>

components/steps/demo/label-placement.vue

@@ -0,0 +1,51 @@
+<docs>
+---
+order: 5
+title:
+  zh-CN: 标签放置位置
+  en-US: Label Placement
+---
+
+## zh-CN
+
+修改标签放置位置为 `vertical`。
+
+## en-US
+
+Set labelPlacement to `vertical`.
+
+</docs>
+<template>
+  <div>
+    <a-steps :current="1" label-placement="vertical" :items="items" />
+    <br />
+    <a-steps :current="1" :percent="60" label-placement="vertical" :items="items" />
+    <br />
+    <a-steps :current="1" size="small" label-placement="vertical" :items="items" />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const items = ref([
+      {
+        title: 'Finished',
+        description: 'This is a description.',
+      },
+      {
+        title: 'In Progress',
+        description: 'This is a description.',
+      },
+      {
+        title: 'Waiting',
+        description: 'This is a description.',
+      },
+    ]);
+    return {
+      items,
+    };
+  },
+});
+</script>

components/steps/index.en-US.md

@@ -11,14 +11,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAA
 
 ## API
 
-```jsx
-<a-steps>
-  <a-step title="first step" />
-  <a-step title="second step" />
-  <a-step title="third step" />
-</a-steps>
-```
-
 ### Steps
 
 The whole of the step bar.
@@ -28,13 +20,14 @@ The whole of the step bar.
 | current(v-model) | to set the current step, counting from 0. You can overwrite this state by using `status` of `Step`, support v-model after 1.5.0 | number | 0 |  |
 | direction | to specify the direction of the step bar, `horizontal` and `vertical` are currently supported | string | `horizontal` |  |
 | initial | set the initial step, counting from 0 | number | 0 |  |
-| labelPlacement | support vertial title and description | string | `horizontal` |  |
+| labelPlacement | support vertical title and description | string | `horizontal` |  |
 | percent | Progress circle percentage of current step in `process` status (only works on basic Steps) | number | - | 3.0 |
 | progressDot | Steps with progress dot style, customize the progress dot by setting a scoped slot. labelPlacement will be `vertical` | Boolean or v-slot:progressDot="{index, status, title, description, prefixCls, iconDot}" | false |  |
 | responsive | change to vertical direction when screen width smaller than `532px` | boolean | true | 3.0 |
 | size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` |  |
 | status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` |  |
 | type | Type of steps, can be set to one of the following values: `default`, `navigation` | string | `default` | 1.5.0 |
+| items | StepItem content | [StepItem](#stepsstep) | [] |  |
 
 #### Steps Events
 
@@ -42,6 +35,17 @@ The whole of the step bar.
 | ----------- | ---------------------------- | ----------------- | ------- | ----- |
 | change      | Trigger when Step is changed | (current) => void | -       | 1.5.0 |
 
+### `type="inline"`
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| className | Additional class to Steps | string | - |  |
+| current | To set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0 |  |
+| initial | Set the initial step, counting from 0 | number | 0 |  |
+| status | To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` |  |
+| onChange | Trigger when Step is changed | (current) => void | - |  |
+| items | StepItem content. not supported: `icon` `subtitle` | [StepItem](#stepsstep) | [] | 4.24.0 |
+
 ### Steps.Step
 
 A single step in the step bar.

components/steps/index.tsx

@@ -3,6 +3,7 @@ import { computed, defineComponent } from 'vue';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import CheckOutlined from '@ant-design/icons-vue/CheckOutlined';
 import PropTypes from '../_util/vue-types';
+import type { VueNode } from '../_util/type';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
 import VcSteps, { Step as VcStep } from '../vc-steps';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
@@ -10,10 +11,11 @@ import useBreakpoint from '../_util/hooks/useBreakpoint';
 import classNames from '../_util/classNames';
 import Progress from '../progress';
 import omit from '../_util/omit';
+import Tooltip from '../tooltip';
 import { VcStepProps } from '../vc-steps/Step';
 import type { ProgressDotRender } from '../vc-steps/Steps';
 import type { MouseEventHandler } from '../_util/EventInterface';
-import { booleanType, stringType, functionType, someType } from '../_util/type';
+import { booleanType, stringType, functionType, someType, arrayType } from '../_util/type';
 
 // CSSINJS
 import useStyle from './style';
@@ -25,6 +27,7 @@ export const stepsProps = () => ({
   initial: Number,
   percent: Number,
   responsive: booleanType(),
+  items: arrayType<StepProps[]>(),
   labelPlacement: stringType<'horizontal' | 'vertical'>(),
   status: stringType<'wait' | 'process' | 'finish' | 'error'>(),
   size: stringType<'default' | 'small'>(),
@@ -62,7 +65,7 @@ const Steps = defineComponent({
   // emits: ['update:current', 'change'],
   setup(props, { attrs, slots, emit }) {
     const { prefixCls, direction: rtlDirection, configProvider } = useConfigInject('steps', props);
-
+    const mergedItems = computed(() => props.items);
     // style
     const [wrapSSR, hashId] = useStyle(prefixCls);
 
@@ -119,18 +122,23 @@ const Steps = defineComponent({
         attrs.class,
         hashId.value,
       );
+      const itemRender = (item: StepProps, stepItem: VueNode) =>
+        item.description ? <Tooltip title={item.description}>{stepItem}</Tooltip> : stepItem;
 
       return wrapSSR(
         <VcSteps
           icons={icons.value}
           {...attrs}
           {...omit(props, ['percent', 'responsive'])}
+          items={mergedItems.value}
           direction={direction.value}
           prefixCls={prefixCls.value}
           iconPrefix={iconPrefix.value}
           class={stepsClassName}
           onChange={handleChange}
-          v-slots={{ ...slots, stepIcon: stepIconRender }}
+          isInline={isInline.value}
+          itemRender={isInline.value ? itemRender : undefined}
+          v-slots={{ stepIcon: stepIconRender, ...slots }}
         />,
       );
     };

components/steps/index.zh-CN.md

@@ -16,14 +16,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAA
 
 ## API
 
-```jsx
-<a-steps>
-  <a-step title="第一步" />
-  <a-step title="第二步" />
-  <a-step title="第三步" />
-</a-steps>
-```
-
 ### Steps
 
 整体步骤条。
@@ -40,6 +32,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAA
 | size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | default |  |
 | status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process |  |
 | type | 步骤条类型，有 `default` 和 `navigation` 两种 | string | `default` | 1.5.0 |
+| items | 配置选项卡内容 | [StepItem](#stepsstep)[] | [] |  |
 
 #### Steps 事件
 
@@ -47,6 +40,17 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAA
 | -------- | ------------------ | ----------------- | ---- | ----- |
 | change   | 点击切换步骤时触发 | (current) => void | -    | 1.5.0 |
 
+### `type="inline"`
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| className | 步骤条类名 | string | - |  |
+| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0 |  |
+| initial | 起始序号，从 0 开始记数 | number | 0 |  |
+| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | `process` |  |
+| onChange | 点击切换步骤时触发 | (current) => void | - |  |
+| items | 配置选项卡内容，不支持 `icon` `subtitle` | [StepItem](#stepsstep) | [] | 4.24.0 |
+
 ### Steps.Step
 
 步骤条内的每一个步骤。
@@ -56,6 +60,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAA
 | description | 步骤的详情描述，可选 | string \| slot | - |  |
 | disabled | 禁用点击 | boolean | false | 1.5.0 |
 | icon | 步骤图标的类型，可选 | string \| slot | - |  |
-| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | wait |  |
+| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | `wait` |  |
 | subTitle | 子标题 | string \| slot | - | 1.5.0 |
 | title | 标题 | string \| slot | - |  |

components/vc-steps/Step.tsx

@@ -2,12 +2,14 @@ import PropTypes, { withUndefined } from '../_util/vue-types';
 import type { CSSProperties, PropType } from 'vue';
 import { defineComponent } from 'vue';
 import type { EventHandler } from '../_util/EventInterface';
+import classNames from '../_util/classNames';
 
 function isString(str: any): str is string {
   return typeof str === 'string';
 }
 function noop() {}
 export const VcStepProps = () => ({
+  class: PropTypes.string,
   prefixCls: String,
   wrapperStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
   itemWidth: String,
@@ -19,6 +21,7 @@ export const VcStepProps = () => ({
   adjustMarginRight: String,
   stepNumber: Number,
   stepIndex: Number,
+  style: PropTypes.style,
   description: PropTypes.any,
   title: PropTypes.any,
   subTitle: PropTypes.any,
@@ -55,14 +58,14 @@ export default defineComponent({
         stepIcon = slots.stepIcon,
       } = props;
 
-      let iconNode: any;
-      const iconClassName = {
-        [`${prefixCls}-icon`]: true,
-        [`${iconPrefix}icon`]: true,
+      let iconNode;
+      const iconClassName = classNames(`${prefixCls}-icon`, `${iconPrefix}icon`, {
         [`${iconPrefix}icon-${icon}`]: icon && isString(icon),
-        [`${iconPrefix}icon-check`]: !icon && status === 'finish' && icons && !icons.finish,
-        [`${iconPrefix}icon-close`]: !icon && status === 'error' && icons && !icons.error,
-      };
+        [`${iconPrefix}icon-check`]:
+          !icon && status === 'finish' && ((icons && !icons.finish) || !icons),
+        [`${iconPrefix}icon-cross`]:
+          !icon && status === 'error' && ((icons && !icons.error) || !icons),
+      });
       const iconDot = <span class={`${prefixCls}-icon-dot`} />;
       // `progressDot` enjoy the highest priority
       if (progressDot) {
@@ -103,12 +106,14 @@ export default defineComponent({
           node: iconNode,
         });
       }
+
       return iconNode;
     };
     return () => {
       const {
         prefixCls,
         itemWidth,
+        style,
         active,
         status = 'wait',
         tailContent,
@@ -121,18 +126,21 @@ export default defineComponent({
         onClick,
         onStepClick,
       } = props;
-
-      const classString = {
-        [`${prefixCls}-item`]: true,
-        [`${prefixCls}-item-${status}`]: true,
-        [`${prefixCls}-item-custom`]: icon,
-        [`${prefixCls}-item-active`]: active,
-        [`${prefixCls}-item-disabled`]: disabled === true,
-      };
+      const mergedStatus = status || 'wait';
+      const classString = classNames(
+        `${prefixCls}-item`,
+        `${prefixCls}-item-${mergedStatus}`,
+        props.class,
+        {
+          [`${prefixCls}-item-custom`]: icon,
+          [`${prefixCls}-item-active`]: active,
+          [`${prefixCls}-item-disabled`]: disabled === true,
+        },
+      );
       const stepProps = {
         class: classString,
       };
-      const stepItemStyle: CSSProperties = {};
+      const stepItemStyle: CSSProperties = { ...style };
       if (itemWidth) {
         stepItemStyle.width = itemWidth;
       }
@@ -164,7 +172,10 @@ export default defineComponent({
               <div class={`${prefixCls}-item-title`}>
                 {title}
                 {subTitle && (
-                  <div title={subTitle} class={`${prefixCls}-item-subtitle`}>
+                  <div
+                    title={typeof subTitle === 'string' ? subTitle : undefined}
+                    class={`${prefixCls}-item-subtitle`}
+                  >
                     {subTitle}
                   </div>
                 )}

components/vc-steps/Steps.tsx

@@ -1,9 +1,9 @@
 import PropTypes from '../_util/vue-types';
-import { filterEmpty } from '../_util/props-util';
-import { cloneElement } from '../_util/vnode';
 import { defineComponent } from 'vue';
 import classNames from '../_util/classNames';
-
+import Step from './Step';
+import { cloneElement } from '../_util/vnode';
+import { filterEmpty } from '../_util/props-util';
 export type Status = 'error' | 'process' | 'finish' | 'wait';
 export type StepIconRender = (info: {
   index: number;
@@ -35,11 +35,15 @@ export default defineComponent({
     progressDot: PropTypes.oneOfType([PropTypes.looseBool, PropTypes.func]).def(undefined),
     initial: PropTypes.number.def(0),
     current: PropTypes.number.def(0),
+    items: PropTypes.array.def(() => []),
     icons: PropTypes.shape({
       finish: PropTypes.any,
       error: PropTypes.any,
     }).loose,
+    style: PropTypes.style,
     stepIcon: Function,
+    isInline: PropTypes.looseBool,
+    itemRender: Function,
   },
   slots: ['stepIcon', 'progressDot'],
   emits: ['change'],
@@ -54,6 +58,7 @@ export default defineComponent({
       const {
         prefixCls,
         direction,
+        style = {},
         type,
         labelPlacement,
         iconPrefix,
@@ -64,56 +69,86 @@ export default defineComponent({
         initial,
         icons,
         stepIcon = slots.stepIcon,
+        items,
+        isInline,
+        itemRender,
+        ...restProps
       } = props;
       const isNav = type === 'navigation';
-      const adjustedLabelPlacement = progressDot ? 'vertical' : labelPlacement;
-      const classString = classNames(prefixCls, `${prefixCls}-${direction}`, {
-        [`${prefixCls}-${size}`]: size,
-        [`${prefixCls}-label-${adjustedLabelPlacement}`]: direction === 'horizontal',
-        [`${prefixCls}-dot`]: !!progressDot,
-        [`${prefixCls}-navigation`]: isNav,
-      });
-      const children = filterEmpty(slots.default?.());
-      return (
-        <div class={classString}>
-          {children.map((child, index) => {
-            // description: PropTypes.any,
-            // icon: PropTypes.any,
-            // status: PropTypes.oneOf(tuple('wait', 'process', 'finish', 'error')),
-            // disabled: { type: Boolean, default: undefined },
-            // title: PropTypes.any,
-            // subTitle: PropTypes.any,
-            const { prefixCls: pre = prefixCls, ...restProps } = child.props || {};
-            const stepNumber = initial + index;
-            const stepProps = {
-              ...restProps,
-              stepNumber: stepNumber + 1,
-              stepIndex: stepNumber,
-              key: stepNumber,
-              prefixCls: pre,
-              iconPrefix,
-              progressDot,
-              icons,
-              stepIcon,
-              onStepClick,
-            };
+      const mergedProgressDot = isInline || progressDot;
+      const mergedDirection = isInline ? 'horizontal' : direction;
+      const mergedSize = isInline ? undefined : size;
 
-            // fix tail color
-            if (status === 'error' && index === current - 1) {
-              stepProps.class = `${prefixCls}-next-error`;
-            }
-            if (!restProps.status) {
-              if (stepNumber === current) {
-                stepProps.status = status;
-              } else if (stepNumber < current) {
-                stepProps.status = 'finish';
-              } else {
-                stepProps.status = 'wait';
-              }
-            }
-            stepProps.active = stepNumber === current;
-            return cloneElement(child, stepProps);
-          })}
+      const adjustedLabelPlacement = mergedProgressDot ? 'vertical' : labelPlacement;
+      const classString = classNames(prefixCls, `${prefixCls}-${direction}`, {
+        [`${prefixCls}-${mergedSize}`]: mergedSize,
+        [`${prefixCls}-label-${adjustedLabelPlacement}`]: mergedDirection === 'horizontal',
+        [`${prefixCls}-dot`]: !!mergedProgressDot,
+        [`${prefixCls}-navigation`]: isNav,
+        [`${prefixCls}-inline`]: isInline,
+      });
+      const renderStep = (props, index, render) => {
+        const { prefixCls: pre = prefixCls, ...restProps } = props || {};
+        const stepNumber = initial + index;
+        const stepProps = {
+          ...restProps,
+          stepNumber: stepNumber + 1,
+          stepIndex: stepNumber,
+          key: stepNumber,
+          prefixCls: pre,
+          iconPrefix,
+          progressDot: mergedProgressDot,
+          icons,
+          stepIcon,
+          onStepClick,
+          active: stepNumber === current,
+        };
+
+        // fix tail color
+        if (status === 'error' && index === current - 1) {
+          stepProps.class = `${prefixCls}-next-error`;
+        }
+
+        if (!restProps.status) {
+          if (stepNumber === current) {
+            stepProps.status = status;
+          } else if (stepNumber < current) {
+            stepProps.status = 'finish';
+          } else {
+            stepProps.status = 'wait';
+          }
+        }
+
+        if (isInline) {
+          stepProps.icon = undefined;
+          stepProps.subTitle = undefined;
+        }
+        stepProps.active = stepNumber === current;
+        return render(stepProps);
+      };
+      const renderStepWithNode = (node, index) => {
+        return renderStep({ ...node.props }, index, stepProps => {
+          const stepNode = cloneElement(node, stepProps);
+          if (itemRender) {
+            return itemRender(stepProps, stepNode);
+          }
+          return stepNode;
+        });
+      };
+      const renderStepWithItem = (item, index) => {
+        return renderStep(item, index, stepProps => {
+          const stepNode = <Step {...stepProps} />;
+          if (itemRender) {
+            return itemRender(stepProps, stepNode);
+          }
+          return stepNode;
+        });
+      };
+      return (
+        <div class={classString} style={style} {...restProps}>
+          {items.length
+            ? items.map(renderStepWithItem)
+            : filterEmpty(slots.default?.()).map(renderStepWithNode)}
         </div>
       );
     };