refactor(steps): fix content-placement PR

Author: 07akioni

src/steps/demos/enUS/index.demo-entry.md

@@ -22,11 +22,11 @@ click.vue
 
 | Name | Type | Default | Description | Version |
 | --- | --- | --- | --- | --- |
+| content-placement | `'right' \| 'bottom'` | `right` | Steps content placement, only can be used in horizontal mode. | NEXT_VERSION |
 | current | `number` | `undefined` | Currently active step index. |  |
 | size | `'small' \| 'medium'` | `'medium'` | Steps size. |  |
 | status | `'process' \| 'finish' \| 'error' \| 'wait'` | `'process'` | Steps status. |  |
 | vertical | `boolean` | `false` | Steps vertical. |  |
-| content-placement | `'right' \| 'bottom'` | `right` | Steps content placement, only can be used in horizontal mode. | NEXT_VERSION |
 | on-update:current | `(index: number) => void` | `undefined` | Callback on currently active step index changed. If it's set, step can be switched by click. | 2.29.1 |
 
 ### Step Props

src/steps/demos/zhCN/index.demo-entry.md

@@ -24,11 +24,11 @@ rtl-debug.vue
 
 | 名称 | 类型 | 默认值 | 说明 | 版本 |
 | --- | --- | --- | --- | --- |
+| content-placement | `'right' \| 'bottom'` | `right` | 步骤条内容位置，仅在横向模式下生效 | NEXT_VERSION |
 | current | `number` | `undefined` | 当前选中在第几步 |  |
 | size | `'small' \| 'medium'` | `'medium'` | 步骤条大小 |  |
 | status | `'process' \| 'finish' \| 'error' \| 'wait'` | `'process'` | 步骤条状态 |  |
 | vertical | `boolean` | `false` | 步骤条方向 |  |
-| content-placement | `'right' \| 'bottom'` | `right` | 步骤条内容位置，仅在横向模式下生效 | NEXT_VERSION |
 | on-update:current | `(index: number) => void` | `undefined` | 更新当前第几步的回调，设定后可点击切换步骤 | 2.29.1 |
 
 ### Step Props

src/steps/src/Step.tsx

@@ -159,7 +159,14 @@ export default defineComponent({
     }
   },
   render() {
-    const { mergedClsPrefix, onRender, handleStepClick, disabled } = this
+    const {
+      mergedClsPrefix,
+      onRender,
+      handleStepClick,
+      disabled,
+      contentPlacement,
+      vertical
+    } = this
     const descriptionNode = resolveWrappedSlot(
       this.$slots.default,
       (children) => {
@@ -177,7 +184,10 @@ export default defineComponent({
     const splitorNode = <div class={`${mergedClsPrefix}-step-splitor`} />
 
     const indicatorNode = (
-      <div class={`${mergedClsPrefix}-step-indicator`}>
+      // We need a key here to make reconcile progress doesn't affect styling.
+      // A DOM can be reused so if it is used both for A component & B component,
+      // the styling transition bewteen two components may be incorrect.
+      <div class={`${mergedClsPrefix}-step-indicator`} key={contentPlacement}>
         <div class={`${mergedClsPrefix}-step-indicator-slot`}>
           <NIconSwitchTransition>
             {{
@@ -219,7 +229,7 @@ export default defineComponent({
             }}
           </NIconSwitchTransition>
         </div>
-        {this.vertical ? splitorNode : null}
+        {vertical ? splitorNode : null}
       </div>
     )
     const contentNode = (
@@ -228,31 +238,32 @@ export default defineComponent({
           <div class={`${mergedClsPrefix}-step-content-header__title`}>
             {resolveSlot(this.$slots.title, () => [this.title])}
           </div>
-          {!this.vertical && this.contentPlacement === 'right'
-            ? splitorNode
-            : null}
+          {!vertical && contentPlacement === 'right' ? splitorNode : null}
         </div>
         {descriptionNode}
       </div>
     )
 
-    let stepNode = (
-      <Fragment>
-        {indicatorNode}
-        {contentNode}
-      </Fragment>
-    )
-    if (!this.vertical && this.contentPlacement === 'bottom') {
+    let stepNode: VNode
+    if (!vertical && contentPlacement === 'bottom') {
       stepNode = (
         <Fragment>
-          <div class={`${mergedClsPrefix}-step-content-bottom-header`}>
+          <div class={`${mergedClsPrefix}-step-line`}>
             {indicatorNode}
             {splitorNode}
           </div>
           {contentNode}
         </Fragment>
       )
     }
+    else {
+      stepNode = (
+        <Fragment>
+          {indicatorNode}
+          {contentNode}
+        </Fragment>
+      )
+    }
     onRender?.()
     return (
       <div

src/steps/src/styles/index.cssr.ts

@@ -154,12 +154,12 @@ export default cB('steps', `
     c('>', [
       cB('step', 'flex-direction: column', [
         c('>', [
-          cB('step-content-bottom-header', 'display: flex;', [
+          cB('step-line', 'display: flex;', [
             c('>', [
               cB('step-splitor', `
-                  margin-top: 0;
-                  align-self: center;
-                `)
+                margin-top: 0;
+                align-self: center;
+              `)
             ]),
           ])
         ]),