From 14308db2891ae50bc52cfa1859ebb6d249c687f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= <afc163@gmail.com>
Date: Tue, 20 Aug 2019 12:31:52 +0800
Subject: [PATCH] :bug: Fix Steps vertical progressDot style (#18356)

broken via #17994

close #18354
---
 .../__tests__/__snapshots__/demo.test.js.snap | 328 ++++++++++++++----
 components/steps/demo/progress-dot.md         |  22 +-
 components/steps/style/progress-dot.less      |   3 +-
 3 files changed, 277 insertions(+), 76 deletions(-)

diff --git a/components/steps/__tests__/__snapshots__/demo.test.js.snap b/components/steps/__tests__/__snapshots__/demo.test.js.snap
index 6e303ca054..96a4648af3 100644
--- a/components/steps/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/steps/__tests__/__snapshots__/demo.test.js.snap
@@ -1189,113 +1189,303 @@ exports[`renders ./components/steps/demo/nav.md correctly 1`] = `
 `;
 
 exports[`renders ./components/steps/demo/progress-dot.md correctly 1`] = `
-<div
-  class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-dot"
->
+<div>
   <div
-    class="ant-steps-item ant-steps-item-finish"
+    class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-dot"
   >
     <div
-      class="ant-steps-item-container"
+      class="ant-steps-item ant-steps-item-finish"
     >
       <div
-        class="ant-steps-item-tail"
-      />
-      <div
-        class="ant-steps-item-icon"
+        class="ant-steps-item-container"
       >
-        <span
-          class="ant-steps-icon"
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
         >
           <span
-            class="ant-steps-icon-dot"
-          />
-        </span>
-      </div>
-      <div
-        class="ant-steps-item-content"
-      >
-        <div
-          class="ant-steps-item-title"
-        >
-          Finished
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
         </div>
         <div
-          class="ant-steps-item-description"
+          class="ant-steps-item-content"
         >
-          This is a description.
+          <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
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </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
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </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
-    class="ant-steps-item ant-steps-item-process ant-steps-item-active"
+    class="ant-divider ant-divider-horizontal"
+    role="separator"
+  />
+  <div
+    class="ant-steps ant-steps-vertical ant-steps-dot"
   >
     <div
-      class="ant-steps-item-container"
+      class="ant-steps-item ant-steps-item-finish"
     >
       <div
-        class="ant-steps-item-tail"
-      />
-      <div
-        class="ant-steps-item-icon"
+        class="ant-steps-item-container"
       >
-        <span
-          class="ant-steps-icon"
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
         >
           <span
-            class="ant-steps-icon-dot"
-          />
-        </span>
-      </div>
-      <div
-        class="ant-steps-item-content"
-      >
-        <div
-          class="ant-steps-item-title"
-        >
-          In Progress
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
         </div>
         <div
-          class="ant-steps-item-description"
+          class="ant-steps-item-content"
         >
-          This is a description.
+          <div
+            class="ant-steps-item-title"
+          >
+            Finished
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description. This is a description.
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="ant-steps-item ant-steps-item-wait"
-  >
     <div
-      class="ant-steps-item-container"
+      class="ant-steps-item ant-steps-item-process ant-steps-item-active"
     >
       <div
-        class="ant-steps-item-tail"
-      />
-      <div
-        class="ant-steps-item-icon"
+        class="ant-steps-item-container"
       >
-        <span
-          class="ant-steps-icon"
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
         >
           <span
-            class="ant-steps-icon-dot"
-          />
-        </span>
-      </div>
-      <div
-        class="ant-steps-item-content"
-      >
-        <div
-          class="ant-steps-item-title"
-        >
-          Waiting
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
         </div>
         <div
-          class="ant-steps-item-description"
+          class="ant-steps-item-content"
         >
-          This is a description.
+          <div
+            class="ant-steps-item-title"
+          >
+            Finished
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description. This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </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. This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </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
+      class="ant-steps-item ant-steps-item-wait"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </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>
diff --git a/components/steps/demo/progress-dot.md b/components/steps/demo/progress-dot.md
index 939ae7b8d4..ecd8677168 100644
--- a/components/steps/demo/progress-dot.md
+++ b/components/steps/demo/progress-dot.md
@@ -14,16 +14,26 @@ title:
 Steps with progress dot style.
 
 ```jsx
-import { Steps } from 'antd';
+import { Steps, Divider } from 'antd';
 
 const { Step } = Steps;
 
 ReactDOM.render(
-  <Steps progressDot current={1}>
-    <Step title="Finished" description="This is a description." />
-    <Step title="In Progress" description="This is a description." />
-    <Step title="Waiting" description="This is a description." />
-  </Steps>,
+  <div>
+    <Steps progressDot current={1}>
+      <Step title="Finished" description="This is a description." />
+      <Step title="In Progress" description="This is a description." />
+      <Step title="Waiting" description="This is a description." />
+    </Steps>
+    <Divider />
+    <Steps progressDot current={1} direction="vertical">
+      <Step title="Finished" description="This is a description. This is a description." />
+      <Step title="Finished" description="This is a description. This is a description." />
+      <Step title="In Progress" description="This is a description. This is a description." />
+      <Step title="Waiting" description="This is a description." />
+      <Step title="Waiting" description="This is a description." />
+    </Steps>
+  </div>,
   mountNode,
 );
 ```
diff --git a/components/steps/style/progress-dot.less b/components/steps/style/progress-dot.less
index 580c4afa69..ebcea18877 100644
--- a/components/steps/style/progress-dot.less
+++ b/components/steps/style/progress-dot.less
@@ -63,7 +63,8 @@
     margin-top: 8px;
     margin-left: 0;
   }
-  .@{steps-prefix-cls}-item-tail {
+  // https://github.com/ant-design/ant-design/issues/18354
+  .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
     top: 2px;
     left: -9px;
     margin: 0;