From a9360d8f473938e331b4f39ac3807d8860d55e50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 20 May 2025 17:00:00 +0800
Subject: [PATCH] refactor: titlePlacement

---
 README.md                               |   2 +-
 docs/examples/alternativeLabel.jsx      |   2 +-
 src/Steps.tsx                           |  10 +-
 tests/__snapshots__/index.test.tsx.snap | 118 ++++++++++++------------
 tests/index.test.tsx                    |   4 +-
 5 files changed, 68 insertions(+), 68 deletions(-)

diff --git a/README.md b/README.md
index cb20037..db0a3b2 100644
--- a/README.md
+++ b/README.md
@@ -84,7 +84,7 @@ https://steps.vercel.app/
       <td>size of Steps, could be `small`</td>
     </tr>
     <tr>
-      <td>labelPlacement</td>
+      <td>titlePlacement</td>
       <td>string</td>
       <td></td>
       <td>placement of step title, could be `vertical`</td>
diff --git a/docs/examples/alternativeLabel.jsx b/docs/examples/alternativeLabel.jsx
index 9c40b65..57d7275 100644
--- a/docs/examples/alternativeLabel.jsx
+++ b/docs/examples/alternativeLabel.jsx
@@ -8,7 +8,7 @@ const description =
 
 export default () => (
   <Steps
-    labelPlacement="vertical"
+    titlePlacement="vertical"
     current={1}
     items={[
       {
diff --git a/src/Steps.tsx b/src/Steps.tsx
index 756f55e..6fa7528 100644
--- a/src/Steps.tsx
+++ b/src/Steps.tsx
@@ -55,7 +55,7 @@ export interface StepsProps {
 
   // layout
   orientation?: 'horizontal' | 'vertical';
-  labelPlacement?: 'horizontal' | 'vertical';
+  titlePlacement?: 'horizontal' | 'vertical';
 
   // data
   status?: Status;
@@ -82,7 +82,7 @@ export default function Steps(props: StepsProps) {
 
     // layout
     orientation = 'horizontal',
-    labelPlacement = 'horizontal',
+    titlePlacement = 'horizontal',
 
     // data
     status = 'process',
@@ -102,14 +102,14 @@ export default function Steps(props: StepsProps) {
   // ============================= layout =============================
   const isVertical = orientation === 'vertical';
   const mergedOrientation = isVertical ? 'vertical' : 'horizontal';
-  const mergeLabelPlacement =
-    !isVertical && labelPlacement === 'vertical' ? 'vertical' : 'horizontal';
+  const mergeTitlePlacement =
+    !isVertical && titlePlacement === 'vertical' ? 'vertical' : 'horizontal';
 
   // ============================= styles =============================
   const classString = cls(
     prefixCls,
     `${prefixCls}-${mergedOrientation}`,
-    `${prefixCls}-label-${mergeLabelPlacement}`,
+    `${prefixCls}-title-${mergeTitlePlacement}`,
     rootClassName,
     className,
     classNames.root,
diff --git a/tests/__snapshots__/index.test.tsx.snap b/tests/__snapshots__/index.test.tsx.snap
index c7ac8a0..3bbe2ee 100644
--- a/tests/__snapshots__/index.test.tsx.snap
+++ b/tests/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Steps render renders correctly 1`] = `
 <div
-  class="rc-steps rc-steps-horizontal rc-steps-label-horizontal"
+  class="rc-steps rc-steps-horizontal rc-steps-title-horizontal"
 >
   <div
     class="rc-steps-item rc-steps-item-process rc-steps-item-active"
@@ -114,7 +114,7 @@ exports[`Steps render renders correctly 1`] = `
 
 exports[`Steps render renders current correctly 1`] = `
 <div
-  class="rc-steps rc-steps-horizontal rc-steps-label-horizontal"
+  class="rc-steps rc-steps-horizontal rc-steps-title-horizontal"
 >
   <div
     class="rc-steps-item rc-steps-item-finish"
@@ -224,9 +224,9 @@ exports[`Steps render renders current correctly 1`] = `
 </div>
 `;
 
-exports[`Steps render renders labelPlacement correctly 1`] = `
+exports[`Steps render renders progressDot correctly 1`] = `
 <div
-  class="rc-steps rc-steps-horizontal rc-steps-label-vertical"
+  class="rc-steps rc-steps-horizontal rc-steps-title-horizontal"
 >
   <div
     class="rc-steps-item rc-steps-item-process rc-steps-item-active"
@@ -336,9 +336,9 @@ exports[`Steps render renders labelPlacement correctly 1`] = `
 </div>
 `;
 
-exports[`Steps render renders progressDot correctly 1`] = `
+exports[`Steps render renders progressDot function correctly 1`] = `
 <div
-  class="rc-steps rc-steps-horizontal rc-steps-label-horizontal"
+  class="rc-steps rc-steps-horizontal rc-steps-title-horizontal"
 >
   <div
     class="rc-steps-item rc-steps-item-process rc-steps-item-active"
@@ -448,12 +448,12 @@ exports[`Steps render renders progressDot correctly 1`] = `
 </div>
 `;
 
-exports[`Steps render renders progressDot function correctly 1`] = `
+exports[`Steps render renders status correctly 1`] = `
 <div
-  class="rc-steps rc-steps-horizontal rc-steps-label-horizontal"
+  class="rc-steps rc-steps-horizontal rc-steps-title-horizontal"
 >
   <div
-    class="rc-steps-item rc-steps-item-process rc-steps-item-active"
+    class="rc-steps-item rc-steps-item-finish"
   >
     <div
       class="rc-steps-item-wrapper"
@@ -473,14 +473,14 @@ exports[`Steps render renders progressDot function correctly 1`] = `
             已完成
           </div>
           <div
-            class="rc-steps-item-rail rc-steps-item-rail-wait"
+            class="rc-steps-item-rail rc-steps-item-rail-finish"
           />
         </div>
       </div>
     </div>
   </div>
   <div
-    class="rc-steps-item rc-steps-item-wait"
+    class="rc-steps-item rc-steps-item-finish"
   >
     <div
       class="rc-steps-item-wrapper"
@@ -500,14 +500,14 @@ exports[`Steps render renders progressDot function correctly 1`] = `
             进行中
           </div>
           <div
-            class="rc-steps-item-rail rc-steps-item-rail-wait"
+            class="rc-steps-item-rail rc-steps-item-rail-error"
           />
         </div>
       </div>
     </div>
   </div>
   <div
-    class="rc-steps-item rc-steps-item-wait"
+    class="rc-steps-item rc-steps-item-error rc-steps-item-active"
   >
     <div
       class="rc-steps-item-wrapper"
@@ -560,12 +560,12 @@ exports[`Steps render renders progressDot function correctly 1`] = `
 </div>
 `;
 
-exports[`Steps render renders status correctly 1`] = `
+exports[`Steps render renders step with description 1`] = `
 <div
-  class="rc-steps rc-steps-horizontal rc-steps-label-horizontal"
+  class="rc-steps rc-steps-horizontal rc-steps-title-horizontal"
 >
   <div
-    class="rc-steps-item rc-steps-item-finish"
+    class="rc-steps-item rc-steps-item-process rc-steps-item-active"
   >
     <div
       class="rc-steps-item-wrapper"
@@ -585,14 +585,19 @@ exports[`Steps render renders status correctly 1`] = `
             已完成
           </div>
           <div
-            class="rc-steps-item-rail rc-steps-item-rail-finish"
+            class="rc-steps-item-rail rc-steps-item-rail-wait"
           />
         </div>
+        <div
+          class="rc-steps-item-content"
+        >
+          xx
+        </div>
       </div>
     </div>
   </div>
   <div
-    class="rc-steps-item rc-steps-item-finish"
+    class="rc-steps-item rc-steps-item-wait"
   >
     <div
       class="rc-steps-item-wrapper"
@@ -612,14 +617,19 @@ exports[`Steps render renders status correctly 1`] = `
             进行中
           </div>
           <div
-            class="rc-steps-item-rail rc-steps-item-rail-error"
+            class="rc-steps-item-rail rc-steps-item-rail-wait"
           />
         </div>
+        <div
+          class="rc-steps-item-content"
+        >
+          xx
+        </div>
       </div>
     </div>
   </div>
   <div
-    class="rc-steps-item rc-steps-item-error rc-steps-item-active"
+    class="rc-steps-item rc-steps-item-wait"
   >
     <div
       class="rc-steps-item-wrapper"
@@ -642,6 +652,11 @@ exports[`Steps render renders status correctly 1`] = `
             class="rc-steps-item-rail rc-steps-item-rail-wait"
           />
         </div>
+        <div
+          class="rc-steps-item-content"
+        >
+          xx
+        </div>
       </div>
     </div>
   </div>
@@ -666,18 +681,23 @@ exports[`Steps render renders status correctly 1`] = `
             待运行
           </div>
         </div>
+        <div
+          class="rc-steps-item-content"
+        >
+          xx
+        </div>
       </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`Steps render renders step with description 1`] = `
+exports[`Steps render renders step with description and status 1`] = `
 <div
-  class="rc-steps rc-steps-horizontal rc-steps-label-horizontal"
+  class="rc-steps rc-steps-horizontal rc-steps-title-horizontal"
 >
   <div
-    class="rc-steps-item rc-steps-item-process rc-steps-item-active"
+    class="rc-steps-item rc-steps-item-wait rc-steps-item-active"
   >
     <div
       class="rc-steps-item-wrapper"
@@ -729,7 +749,7 @@ exports[`Steps render renders step with description 1`] = `
             进行中
           </div>
           <div
-            class="rc-steps-item-rail rc-steps-item-rail-wait"
+            class="rc-steps-item-rail rc-steps-item-rail-process"
           />
         </div>
         <div
@@ -741,7 +761,7 @@ exports[`Steps render renders step with description 1`] = `
     </div>
   </div>
   <div
-    class="rc-steps-item rc-steps-item-wait"
+    class="rc-steps-item rc-steps-item-process"
   >
     <div
       class="rc-steps-item-wrapper"
@@ -761,7 +781,7 @@ exports[`Steps render renders step with description 1`] = `
             待运行
           </div>
           <div
-            class="rc-steps-item-rail rc-steps-item-rail-wait"
+            class="rc-steps-item-rail rc-steps-item-rail-finish"
           />
         </div>
         <div
@@ -773,7 +793,7 @@ exports[`Steps render renders step with description 1`] = `
     </div>
   </div>
   <div
-    class="rc-steps-item rc-steps-item-wait"
+    class="rc-steps-item rc-steps-item-finish"
   >
     <div
       class="rc-steps-item-wrapper"
@@ -804,12 +824,12 @@ exports[`Steps render renders step with description 1`] = `
 </div>
 `;
 
-exports[`Steps render renders step with description and status 1`] = `
+exports[`Steps render renders stepIcon function correctly 1`] = `
 <div
-  class="rc-steps rc-steps-horizontal rc-steps-label-horizontal"
+  class="rc-steps rc-steps-horizontal rc-steps-title-horizontal"
 >
   <div
-    class="rc-steps-item rc-steps-item-wait rc-steps-item-active"
+    class="rc-steps-item rc-steps-item-process rc-steps-item-active"
   >
     <div
       class="rc-steps-item-wrapper"
@@ -832,11 +852,6 @@ exports[`Steps render renders step with description and status 1`] = `
             class="rc-steps-item-rail rc-steps-item-rail-wait"
           />
         </div>
-        <div
-          class="rc-steps-item-content"
-        >
-          xx
-        </div>
       </div>
     </div>
   </div>
@@ -861,19 +876,14 @@ exports[`Steps render renders step with description and status 1`] = `
             进行中
           </div>
           <div
-            class="rc-steps-item-rail rc-steps-item-rail-process"
+            class="rc-steps-item-rail rc-steps-item-rail-wait"
           />
         </div>
-        <div
-          class="rc-steps-item-content"
-        >
-          xx
-        </div>
       </div>
     </div>
   </div>
   <div
-    class="rc-steps-item rc-steps-item-process"
+    class="rc-steps-item rc-steps-item-wait"
   >
     <div
       class="rc-steps-item-wrapper"
@@ -893,19 +903,14 @@ exports[`Steps render renders step with description and status 1`] = `
             待运行
           </div>
           <div
-            class="rc-steps-item-rail rc-steps-item-rail-finish"
+            class="rc-steps-item-rail rc-steps-item-rail-wait"
           />
         </div>
-        <div
-          class="rc-steps-item-content"
-        >
-          xx
-        </div>
       </div>
     </div>
   </div>
   <div
-    class="rc-steps-item rc-steps-item-finish"
+    class="rc-steps-item rc-steps-item-wait"
   >
     <div
       class="rc-steps-item-wrapper"
@@ -925,20 +930,15 @@ exports[`Steps render renders step with description and status 1`] = `
             待运行
           </div>
         </div>
-        <div
-          class="rc-steps-item-content"
-        >
-          xx
-        </div>
       </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`Steps render renders stepIcon function correctly 1`] = `
+exports[`Steps render renders titlePlacement correctly 1`] = `
 <div
-  class="rc-steps rc-steps-horizontal rc-steps-label-horizontal"
+  class="rc-steps rc-steps-horizontal rc-steps-title-vertical"
 >
   <div
     class="rc-steps-item rc-steps-item-process rc-steps-item-active"
@@ -1050,7 +1050,7 @@ exports[`Steps render renders stepIcon function correctly 1`] = `
 
 exports[`Steps render renders vertical correctly 1`] = `
 <div
-  class="rc-steps rc-steps-horizontal rc-steps-label-horizontal"
+  class="rc-steps rc-steps-horizontal rc-steps-title-horizontal"
   direction="vertical"
 >
   <div
@@ -1163,7 +1163,7 @@ exports[`Steps render renders vertical correctly 1`] = `
 
 exports[`Steps render renders with falsy children 1`] = `
 <div
-  class="rc-steps rc-steps-horizontal rc-steps-label-horizontal"
+  class="rc-steps rc-steps-horizontal rc-steps-title-horizontal"
 >
   <div
     class="rc-steps-item rc-steps-item-wait rc-steps-item-active"
@@ -1301,7 +1301,7 @@ exports[`Steps render renders with falsy children 1`] = `
 
 exports[`Steps should render customIcon correctly 1`] = `
 <div
-  class="rc-steps rc-steps-horizontal rc-steps-label-horizontal"
+  class="rc-steps rc-steps-horizontal rc-steps-title-horizontal"
 >
   <div
     class="rc-steps-item rc-steps-item-finish rc-steps-item-custom"
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 0bff18b..9647480 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -52,8 +52,8 @@ describe('Steps', () => {
       expect(container.firstChild).toMatchSnapshot();
     });
 
-    it('renders labelPlacement correctly', () => {
-      const { container } = render(setSteps({ labelPlacement: 'vertical' }));
+    it('renders titlePlacement correctly', () => {
+      const { container } = render(setSteps({ titlePlacement: 'vertical' }));
       expect(container.firstChild).toMatchSnapshot();
     });