From 88642f6048c2347ece2830df6da1afd69d6911cf Mon Sep 17 00:00:00 2001
From: tae <taeshindev@gmail.com>
Date: Sun, 2 Feb 2020 12:12:07 +0900
Subject: [PATCH] refactor: Progress use `React.Fragment` to remove unused div
 (#21170)

---
 .../__snapshots__/components.test.js.snap     |  84 ++-
 components/progress/Line.tsx                  |   8 +-
 .../__tests__/__snapshots__/demo.test.js.snap | 532 +++++++++---------
 .../__snapshots__/index.test.js.snap          | 364 ++++++------
 .../__snapshots__/uploadlist.test.js.snap     |  32 +-
 5 files changed, 483 insertions(+), 537 deletions(-)

diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
index b173694b66..0da6f6fa69 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -9226,26 +9226,24 @@ exports[`ConfigProvider components Progress configProvider 1`] = `
 <div
   class="config-progress config-progress-line config-progress-status-normal config-progress-show-info config-progress-default"
 >
-  <div>
+  <div
+    class="config-progress-outer"
+  >
     <div
-      class="config-progress-outer"
+      class="config-progress-inner"
     >
       <div
-        class="config-progress-inner"
-      >
-        <div
-          class="config-progress-bg"
-          style="width:0%;height:8px;border-radius:"
-        />
-      </div>
+        class="config-progress-bg"
+        style="width:0%;height:8px;border-radius:"
+      />
     </div>
-    <span
-      class="config-progress-text"
-      title="0%"
-    >
-      0%
-    </span>
   </div>
+  <span
+    class="config-progress-text"
+    title="0%"
+  >
+    0%
+  </span>
 </div>
 `;
 
@@ -9253,26 +9251,24 @@ exports[`ConfigProvider components Progress normal 1`] = `
 <div
   class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
 >
-  <div>
+  <div
+    class="ant-progress-outer"
+  >
     <div
-      class="ant-progress-outer"
+      class="ant-progress-inner"
     >
       <div
-        class="ant-progress-inner"
-      >
-        <div
-          class="ant-progress-bg"
-          style="width:0%;height:8px;border-radius:"
-        />
-      </div>
+        class="ant-progress-bg"
+        style="width:0%;height:8px;border-radius:"
+      />
     </div>
-    <span
-      class="ant-progress-text"
-      title="0%"
-    >
-      0%
-    </span>
   </div>
+  <span
+    class="ant-progress-text"
+    title="0%"
+  >
+    0%
+  </span>
 </div>
 `;
 
@@ -9280,26 +9276,24 @@ exports[`ConfigProvider components Progress prefixCls 1`] = `
 <div
   class="prefix-Progress prefix-Progress-line prefix-Progress-status-normal prefix-Progress-show-info prefix-Progress-default"
 >
-  <div>
+  <div
+    class="prefix-Progress-outer"
+  >
     <div
-      class="prefix-Progress-outer"
+      class="prefix-Progress-inner"
     >
       <div
-        class="prefix-Progress-inner"
-      >
-        <div
-          class="prefix-Progress-bg"
-          style="width:0%;height:8px;border-radius:"
-        />
-      </div>
+        class="prefix-Progress-bg"
+        style="width:0%;height:8px;border-radius:"
+      />
     </div>
-    <span
-      class="prefix-Progress-text"
-      title="0%"
-    >
-      0%
-    </span>
   </div>
+  <span
+    class="prefix-Progress-text"
+    title="0%"
+  >
+    0%
+  </span>
 </div>
 `;
 
diff --git a/components/progress/Line.tsx b/components/progress/Line.tsx
index 8a85ef7d25..8f38c1db24 100644
--- a/components/progress/Line.tsx
+++ b/components/progress/Line.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
+
+import { ProgressGradient, ProgressProps, StringGradients } from './progress';
+
 import { validProgress } from './utils';
-import { ProgressProps, ProgressGradient, StringGradients } from './progress';
 
 interface LineProps extends ProgressProps {
   prefixCls: string;
@@ -92,7 +94,7 @@ const Line: React.SFC<LineProps> = props => {
       <div className={`${prefixCls}-success-bg`} style={successPercentStyle} />
     ) : null;
   return (
-    <div>
+    <>
       <div className={`${prefixCls}-outer`}>
         <div className={`${prefixCls}-inner`}>
           <div className={`${prefixCls}-bg`} style={percentStyle} />
@@ -100,7 +102,7 @@ const Line: React.SFC<LineProps> = props => {
         </div>
       </div>
       {children}
-    </div>
+    </>
   );
 };
 
diff --git a/components/progress/__tests__/__snapshots__/demo.test.js.snap b/components/progress/__tests__/__snapshots__/demo.test.js.snap
index 745a058cb9..8749dfef6b 100644
--- a/components/progress/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/progress/__tests__/__snapshots__/demo.test.js.snap
@@ -481,26 +481,24 @@ exports[`renders ./components/progress/demo/dynamic.md correctly 1`] = `
   <div
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
   >
-    <div>
+    <div
+      class="ant-progress-outer"
+    >
       <div
-        class="ant-progress-outer"
+        class="ant-progress-inner"
       >
         <div
-          class="ant-progress-inner"
-        >
-          <div
-            class="ant-progress-bg"
-            style="width:0%;height:8px;border-radius:"
-          />
-        </div>
+          class="ant-progress-bg"
+          style="width:0%;height:8px;border-radius:"
+        />
       </div>
-      <span
-        class="ant-progress-text"
-        title="0%"
-      >
-        0%
-      </span>
     </div>
+    <span
+      class="ant-progress-text"
+      title="0%"
+    >
+      0%
+    </span>
   </div>
   <div
     class="ant-btn-group"
@@ -655,50 +653,46 @@ exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
   <div
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
   >
-    <div>
+    <div
+      class="ant-progress-outer"
+    >
       <div
-        class="ant-progress-outer"
+        class="ant-progress-inner"
       >
         <div
-          class="ant-progress-inner"
-        >
-          <div
-            class="ant-progress-bg"
-            style="width:99.9%;height:8px;border-radius:;background-image:linear-gradient(to right, #108ee9 0%, #87d068 100%)"
-          />
-        </div>
+          class="ant-progress-bg"
+          style="width:99.9%;height:8px;border-radius:;background-image:linear-gradient(to right, #108ee9 0%, #87d068 100%)"
+        />
       </div>
-      <span
-        class="ant-progress-text"
-        title="99.9%"
-      >
-        99.9%
-      </span>
     </div>
+    <span
+      class="ant-progress-text"
+      title="99.9%"
+    >
+      99.9%
+    </span>
   </div>
   <div
     class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default"
   >
-    <div>
+    <div
+      class="ant-progress-outer"
+    >
       <div
-        class="ant-progress-outer"
+        class="ant-progress-inner"
       >
         <div
-          class="ant-progress-inner"
-        >
-          <div
-            class="ant-progress-bg"
-            style="width:99.9%;height:8px;border-radius:;background-image:linear-gradient(to right, #108ee9, #87d068)"
-          />
-        </div>
+          class="ant-progress-bg"
+          style="width:99.9%;height:8px;border-radius:;background-image:linear-gradient(to right, #108ee9, #87d068)"
+        />
       </div>
-      <span
-        class="ant-progress-text"
-        title="99.9%"
-      >
-        99.9%
-      </span>
     </div>
+    <span
+      class="ant-progress-text"
+      title="99.9%"
+    >
+      99.9%
+    </span>
   </div>
   <div
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
@@ -844,150 +838,140 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
   <div
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
   >
-    <div>
+    <div
+      class="ant-progress-outer"
+    >
       <div
-        class="ant-progress-outer"
+        class="ant-progress-inner"
       >
         <div
-          class="ant-progress-inner"
-        >
-          <div
-            class="ant-progress-bg"
-            style="width:30%;height:8px;border-radius:"
-          />
-        </div>
+          class="ant-progress-bg"
+          style="width:30%;height:8px;border-radius:"
+        />
       </div>
-      <span
-        class="ant-progress-text"
-        title="30%"
-      >
-        30%
-      </span>
     </div>
+    <span
+      class="ant-progress-text"
+      title="30%"
+    >
+      30%
+    </span>
   </div>
   <div
     class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default"
   >
-    <div>
+    <div
+      class="ant-progress-outer"
+    >
       <div
-        class="ant-progress-outer"
+        class="ant-progress-inner"
       >
         <div
-          class="ant-progress-inner"
-        >
-          <div
-            class="ant-progress-bg"
-            style="width:50%;height:8px;border-radius:"
-          />
-        </div>
+          class="ant-progress-bg"
+          style="width:50%;height:8px;border-radius:"
+        />
       </div>
-      <span
-        class="ant-progress-text"
-        title="50%"
-      >
-        50%
-      </span>
     </div>
+    <span
+      class="ant-progress-text"
+      title="50%"
+    >
+      50%
+    </span>
   </div>
   <div
     class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info ant-progress-default"
   >
-    <div>
+    <div
+      class="ant-progress-outer"
+    >
       <div
-        class="ant-progress-outer"
+        class="ant-progress-inner"
       >
         <div
-          class="ant-progress-inner"
-        >
-          <div
-            class="ant-progress-bg"
-            style="width:70%;height:8px;border-radius:"
-          />
-        </div>
+          class="ant-progress-bg"
+          style="width:70%;height:8px;border-radius:"
+        />
       </div>
-      <span
-        class="ant-progress-text"
-      >
-        <span
-          aria-label="close-circle"
-          class="anticon anticon-close-circle"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            class=""
-            data-icon="close-circle"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-            />
-          </svg>
-        </span>
-      </span>
     </div>
+    <span
+      class="ant-progress-text"
+    >
+      <span
+        aria-label="close-circle"
+        class="anticon anticon-close-circle"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="close-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+          />
+        </svg>
+      </span>
+    </span>
   </div>
   <div
     class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-default"
   >
-    <div>
+    <div
+      class="ant-progress-outer"
+    >
       <div
-        class="ant-progress-outer"
+        class="ant-progress-inner"
       >
         <div
-          class="ant-progress-inner"
-        >
-          <div
-            class="ant-progress-bg"
-            style="width:100%;height:8px;border-radius:"
-          />
-        </div>
+          class="ant-progress-bg"
+          style="width:100%;height:8px;border-radius:"
+        />
       </div>
-      <span
-        class="ant-progress-text"
-      >
-        <span
-          aria-label="check-circle"
-          class="anticon anticon-check-circle"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            class=""
-            data-icon="check-circle"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
-            />
-          </svg>
-        </span>
-      </span>
     </div>
+    <span
+      class="ant-progress-text"
+    >
+      <span
+        aria-label="check-circle"
+        class="anticon anticon-check-circle"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="check-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+          />
+        </svg>
+      </span>
+    </span>
   </div>
   <div
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default"
   >
-    <div>
+    <div
+      class="ant-progress-outer"
+    >
       <div
-        class="ant-progress-outer"
+        class="ant-progress-inner"
       >
         <div
-          class="ant-progress-inner"
-        >
-          <div
-            class="ant-progress-bg"
-            style="width:50%;height:8px;border-radius:"
-          />
-        </div>
+          class="ant-progress-bg"
+          style="width:50%;height:8px;border-radius:"
+        />
       </div>
     </div>
   </div>
@@ -1001,134 +985,126 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
   <div
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-small"
   >
-    <div>
+    <div
+      class="ant-progress-outer"
+    >
       <div
-        class="ant-progress-outer"
+        class="ant-progress-inner"
       >
         <div
-          class="ant-progress-inner"
-        >
-          <div
-            class="ant-progress-bg"
-            style="width:30%;height:6px;border-radius:"
-          />
-        </div>
+          class="ant-progress-bg"
+          style="width:30%;height:6px;border-radius:"
+        />
       </div>
-      <span
-        class="ant-progress-text"
-        title="30%"
-      >
-        30%
-      </span>
     </div>
+    <span
+      class="ant-progress-text"
+      title="30%"
+    >
+      30%
+    </span>
   </div>
   <div
     class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-small"
   >
-    <div>
+    <div
+      class="ant-progress-outer"
+    >
       <div
-        class="ant-progress-outer"
+        class="ant-progress-inner"
       >
         <div
-          class="ant-progress-inner"
-        >
-          <div
-            class="ant-progress-bg"
-            style="width:50%;height:6px;border-radius:"
-          />
-        </div>
+          class="ant-progress-bg"
+          style="width:50%;height:6px;border-radius:"
+        />
       </div>
-      <span
-        class="ant-progress-text"
-        title="50%"
-      >
-        50%
-      </span>
     </div>
+    <span
+      class="ant-progress-text"
+      title="50%"
+    >
+      50%
+    </span>
   </div>
   <div
     class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info ant-progress-small"
   >
-    <div>
+    <div
+      class="ant-progress-outer"
+    >
       <div
-        class="ant-progress-outer"
+        class="ant-progress-inner"
       >
         <div
-          class="ant-progress-inner"
-        >
-          <div
-            class="ant-progress-bg"
-            style="width:70%;height:6px;border-radius:"
-          />
-        </div>
+          class="ant-progress-bg"
+          style="width:70%;height:6px;border-radius:"
+        />
       </div>
-      <span
-        class="ant-progress-text"
-      >
-        <span
-          aria-label="close-circle"
-          class="anticon anticon-close-circle"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            class=""
-            data-icon="close-circle"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-            />
-          </svg>
-        </span>
-      </span>
     </div>
+    <span
+      class="ant-progress-text"
+    >
+      <span
+        aria-label="close-circle"
+        class="anticon anticon-close-circle"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="close-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+          />
+        </svg>
+      </span>
+    </span>
   </div>
   <div
     class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-small"
   >
-    <div>
+    <div
+      class="ant-progress-outer"
+    >
       <div
-        class="ant-progress-outer"
+        class="ant-progress-inner"
       >
         <div
-          class="ant-progress-inner"
-        >
-          <div
-            class="ant-progress-bg"
-            style="width:100%;height:6px;border-radius:"
-          />
-        </div>
+          class="ant-progress-bg"
+          style="width:100%;height:6px;border-radius:"
+        />
       </div>
-      <span
-        class="ant-progress-text"
-      >
-        <span
-          aria-label="check-circle"
-          class="anticon anticon-check-circle"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            class=""
-            data-icon="check-circle"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
-            />
-          </svg>
-        </span>
-      </span>
     </div>
+    <span
+      class="ant-progress-text"
+    >
+      <span
+        aria-label="check-circle"
+        class="anticon anticon-check-circle"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="check-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+          />
+        </svg>
+      </span>
+    </span>
   </div>
 </div>
 `;
@@ -1138,26 +1114,24 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
   <div
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
   >
-    <div>
+    <div
+      class="ant-progress-outer"
+    >
       <div
-        class="ant-progress-outer"
+        class="ant-progress-inner"
       >
         <div
-          class="ant-progress-inner"
-        >
-          <div
-            class="ant-progress-bg"
-            style="width:75%;height:8px;border-radius:0"
-          />
-        </div>
+          class="ant-progress-bg"
+          style="width:75%;height:8px;border-radius:0"
+        />
       </div>
-      <span
-        class="ant-progress-text"
-        title="75%"
-      >
-        75%
-      </span>
     </div>
+    <span
+      class="ant-progress-text"
+      title="75%"
+    >
+      75%
+    </span>
   </div>
   <div
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
@@ -1249,30 +1223,28 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
   <div
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
   >
-    <div>
+    <div
+      class="ant-progress-outer"
+    >
       <div
-        class="ant-progress-outer"
+        class="ant-progress-inner"
       >
         <div
-          class="ant-progress-inner"
-        >
-          <div
-            class="ant-progress-bg"
-            style="width:60%;height:8px;border-radius:"
-          />
-          <div
-            class="ant-progress-success-bg"
-            style="width:30%;height:8px;border-radius:"
-          />
-        </div>
+          class="ant-progress-bg"
+          style="width:60%;height:8px;border-radius:"
+        />
+        <div
+          class="ant-progress-success-bg"
+          style="width:30%;height:8px;border-radius:"
+        />
       </div>
-      <span
-        class="ant-progress-text"
-        title="60%"
-      >
-        60%
-      </span>
     </div>
+    <span
+      class="ant-progress-text"
+      title="60%"
+    >
+      60%
+    </span>
   </div>
   <div
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
diff --git a/components/progress/__tests__/__snapshots__/index.test.js.snap b/components/progress/__tests__/__snapshots__/index.test.js.snap
index 8eac299880..066a8cefd5 100644
--- a/components/progress/__tests__/__snapshots__/index.test.js.snap
+++ b/components/progress/__tests__/__snapshots__/index.test.js.snap
@@ -4,30 +4,28 @@ exports[`Progress render format 1`] = `
 <div
   class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
 >
-  <div>
+  <div
+    class="ant-progress-outer"
+  >
     <div
-      class="ant-progress-outer"
+      class="ant-progress-inner"
     >
       <div
-        class="ant-progress-inner"
-      >
-        <div
-          class="ant-progress-bg"
-          style="width: 50%; height: 8px;"
-        />
-        <div
-          class="ant-progress-success-bg"
-          style="width: 10%; height: 8px;"
-        />
-      </div>
+        class="ant-progress-bg"
+        style="width: 50%; height: 8px;"
+      />
+      <div
+        class="ant-progress-success-bg"
+        style="width: 10%; height: 8px;"
+      />
     </div>
-    <span
-      class="ant-progress-text"
-      title="50 10"
-    >
-      50 10
-    </span>
   </div>
+  <span
+    class="ant-progress-text"
+    title="50 10"
+  >
+    50 10
+  </span>
 </div>
 `;
 
@@ -35,26 +33,24 @@ exports[`Progress render negetive progress 1`] = `
 <div
   class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
 >
-  <div>
+  <div
+    class="ant-progress-outer"
+  >
     <div
-      class="ant-progress-outer"
+      class="ant-progress-inner"
     >
       <div
-        class="ant-progress-inner"
-      >
-        <div
-          class="ant-progress-bg"
-          style="width: 0%; height: 8px;"
-        />
-      </div>
+        class="ant-progress-bg"
+        style="width: 0%; height: 8px;"
+      />
     </div>
-    <span
-      class="ant-progress-text"
-      title="0%"
-    >
-      0%
-    </span>
   </div>
+  <span
+    class="ant-progress-text"
+    title="0%"
+  >
+    0%
+  </span>
 </div>
 `;
 
@@ -62,30 +58,28 @@ exports[`Progress render negetive successPercent 1`] = `
 <div
   class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
 >
-  <div>
+  <div
+    class="ant-progress-outer"
+  >
     <div
-      class="ant-progress-outer"
+      class="ant-progress-inner"
     >
       <div
-        class="ant-progress-inner"
-      >
-        <div
-          class="ant-progress-bg"
-          style="width: 50%; height: 8px;"
-        />
-        <div
-          class="ant-progress-success-bg"
-          style="width: 0%; height: 8px;"
-        />
-      </div>
+        class="ant-progress-bg"
+        style="width: 50%; height: 8px;"
+      />
+      <div
+        class="ant-progress-success-bg"
+        style="width: 0%; height: 8px;"
+      />
     </div>
-    <span
-      class="ant-progress-text"
-      title="50%"
-    >
-      50%
-    </span>
   </div>
+  <span
+    class="ant-progress-text"
+    title="50%"
+  >
+    50%
+  </span>
 </div>
 `;
 
@@ -93,26 +87,24 @@ exports[`Progress render normal progress 1`] = `
 <div
   class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
 >
-  <div>
+  <div
+    class="ant-progress-outer"
+  >
     <div
-      class="ant-progress-outer"
+      class="ant-progress-inner"
     >
       <div
-        class="ant-progress-inner"
-      >
-        <div
-          class="ant-progress-bg"
-          style="width: 0%; height: 8px;"
-        />
-      </div>
+        class="ant-progress-bg"
+        style="width: 0%; height: 8px;"
+      />
     </div>
-    <span
-      class="ant-progress-text"
-      title="0%"
-    >
-      0%
-    </span>
   </div>
+  <span
+    class="ant-progress-text"
+    title="0%"
+  >
+    0%
+  </span>
 </div>
 `;
 
@@ -120,44 +112,42 @@ exports[`Progress render out-of-range progress 1`] = `
 <div
   class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-default"
 >
-  <div>
+  <div
+    class="ant-progress-outer"
+  >
     <div
-      class="ant-progress-outer"
+      class="ant-progress-inner"
     >
       <div
-        class="ant-progress-inner"
-      >
-        <div
-          class="ant-progress-bg"
-          style="width: 100%; height: 8px;"
-        />
-      </div>
+        class="ant-progress-bg"
+        style="width: 100%; height: 8px;"
+      />
     </div>
-    <span
-      class="ant-progress-text"
-    >
-      <span
-        aria-label="check-circle"
-        class="anticon anticon-check-circle"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="check-circle"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
-          />
-        </svg>
-      </span>
-    </span>
   </div>
+  <span
+    class="ant-progress-text"
+  >
+    <span
+      aria-label="check-circle"
+      class="anticon anticon-check-circle"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="check-circle"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+        />
+      </svg>
+    </span>
+  </span>
 </div>
 `;
 
@@ -165,44 +155,42 @@ exports[`Progress render out-of-range progress with info 1`] = `
 <div
   class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-default"
 >
-  <div>
+  <div
+    class="ant-progress-outer"
+  >
     <div
-      class="ant-progress-outer"
+      class="ant-progress-inner"
     >
       <div
-        class="ant-progress-inner"
-      >
-        <div
-          class="ant-progress-bg"
-          style="width: 100%; height: 8px;"
-        />
-      </div>
+        class="ant-progress-bg"
+        style="width: 100%; height: 8px;"
+      />
     </div>
-    <span
-      class="ant-progress-text"
-    >
-      <span
-        aria-label="check-circle"
-        class="anticon anticon-check-circle"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="check-circle"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
-          />
-        </svg>
-      </span>
-    </span>
   </div>
+  <span
+    class="ant-progress-text"
+  >
+    <span
+      aria-label="check-circle"
+      class="anticon anticon-check-circle"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="check-circle"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+        />
+      </svg>
+    </span>
+  </span>
 </div>
 `;
 
@@ -285,33 +273,31 @@ exports[`Progress render strokeColor 2`] = `
       trailColor={null}
       type="line"
     >
-      <div>
+      <div
+        className="ant-progress-outer"
+      >
         <div
-          className="ant-progress-outer"
+          className="ant-progress-inner"
         >
           <div
-            className="ant-progress-inner"
-          >
-            <div
-              className="ant-progress-bg"
-              style={
-                Object {
-                  "backgroundImage": "linear-gradient(to right, #108ee9, #87d068)",
-                  "borderRadius": "",
-                  "height": 8,
-                  "width": "50%",
-                }
+            className="ant-progress-bg"
+            style={
+              Object {
+                "backgroundImage": "linear-gradient(to right, #108ee9, #87d068)",
+                "borderRadius": "",
+                "height": 8,
+                "width": "50%",
               }
-            />
-          </div>
+            }
+          />
         </div>
-        <span
-          className="ant-progress-text"
-          title="50%"
-        >
-          50%
-        </span>
       </div>
+      <span
+        className="ant-progress-text"
+        title="50%"
+      >
+        50%
+      </span>
     </Line>
   </div>
 </Progress>
@@ -352,33 +338,31 @@ exports[`Progress render strokeColor 3`] = `
       trailColor={null}
       type="line"
     >
-      <div>
+      <div
+        className="ant-progress-outer"
+      >
         <div
-          className="ant-progress-outer"
+          className="ant-progress-inner"
         >
           <div
-            className="ant-progress-inner"
-          >
-            <div
-              className="ant-progress-bg"
-              style={
-                Object {
-                  "backgroundImage": "linear-gradient(to right, #108ee9 0%, #87d068 100%)",
-                  "borderRadius": "",
-                  "height": 8,
-                  "width": "50%",
-                }
+            className="ant-progress-bg"
+            style={
+              Object {
+                "backgroundImage": "linear-gradient(to right, #108ee9 0%, #87d068 100%)",
+                "borderRadius": "",
+                "height": 8,
+                "width": "50%",
               }
-            />
-          </div>
+            }
+          />
         </div>
-        <span
-          className="ant-progress-text"
-          title="50%"
-        >
-          50%
-        </span>
       </div>
+      <span
+        className="ant-progress-text"
+        title="50%"
+      >
+        50%
+      </span>
     </Line>
   </div>
 </Progress>
@@ -388,25 +372,23 @@ exports[`Progress rtl render component should be rendered correctly in RTL direc
 <div
   class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default ant-progress-rtl"
 >
-  <div>
+  <div
+    class="ant-progress-outer"
+  >
     <div
-      class="ant-progress-outer"
+      class="ant-progress-inner"
     >
       <div
-        class="ant-progress-inner"
-      >
-        <div
-          class="ant-progress-bg"
-          style="width:0%;height:8px;border-radius:"
-        />
-      </div>
+        class="ant-progress-bg"
+        style="width:0%;height:8px;border-radius:"
+      />
     </div>
-    <span
-      class="ant-progress-text"
-      title="0%"
-    >
-      0%
-    </span>
   </div>
+  <span
+    class="ant-progress-text"
+    title="0%"
+  >
+    0%
+  </span>
 </div>
 `;
diff --git a/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap b/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap
index 4514200be8..e82a82926d 100644
--- a/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap
+++ b/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap
@@ -211,18 +211,16 @@ exports[`Upload List should be uploading when upload a file 1`] = `
             <div
               class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default"
             >
-              <div>
+              <div
+                class="ant-progress-outer"
+              >
                 <div
-                  class="ant-progress-outer"
+                  class="ant-progress-inner"
                 >
                   <div
-                    class="ant-progress-inner"
-                  >
-                    <div
-                      class="ant-progress-bg"
-                      style="width: 0%; height: 2px;"
-                    />
-                  </div>
+                    class="ant-progress-bg"
+                    style="width: 0%; height: 2px;"
+                  />
                 </div>
               </div>
             </div>
@@ -366,18 +364,16 @@ exports[`Upload List should be uploading when upload a file 2`] = `
             <div
               class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default"
             >
-              <div>
+              <div
+                class="ant-progress-outer"
+              >
                 <div
-                  class="ant-progress-outer"
+                  class="ant-progress-inner"
                 >
                   <div
-                    class="ant-progress-inner"
-                  >
-                    <div
-                      class="ant-progress-bg"
-                      style="width: 0%; height: 2px;"
-                    />
-                  </div>
+                    class="ant-progress-bg"
+                    style="width: 0%; height: 2px;"
+                  />
                 </div>
               </div>
             </div>