Fix list border

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

@@ -5,6 +5,12 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
   class="ant-list ant-list-split"
 >
   <div>
+    <div
+      class="ant-spin-nested-loading"
+    >
+      <div
+        class="ant-spin-container"
+      >
         <div
           class="ant-list-item"
         >
@@ -154,6 +160,8 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
           </div>
         </div>
       </div>
+    </div>
+  </div>
 </div>
 `;
 
@@ -162,6 +170,12 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
   class="ant-list ant-list-split ant-list-grid"
 >
   <div>
+    <div
+      class="ant-spin-nested-loading"
+    >
+      <div
+        class="ant-spin-container"
+      >
         <div
           class="ant-row"
           style="margin-left:-8px;margin-right:-8px"
@@ -324,6 +338,8 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
           </div>
         </div>
       </div>
+    </div>
+  </div>
 </div>
 `;
 
@@ -335,7 +351,15 @@ exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
     <div
       class="ant-list ant-list-split"
     >
-      <div />
+      <div>
+        <div
+          class="ant-spin-nested-loading"
+        >
+          <div
+            class="ant-spin-container"
+          />
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -345,13 +369,21 @@ exports[`renders ./components/list/demo/infinite-virtualized-load.md correctly 1
 <div
   class="ant-list ant-list-split"
 >
-  <div />
+  <div>
+    <div
+      class="ant-spin-nested-loading"
+    >
+      <div
+        class="ant-spin-container"
+      />
+    </div>
+  </div>
 </div>
 `;
 
 exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
 <div
-  class="ant-list demo-loadmore-list ant-list-split ant-list-loading"
+  class="ant-list demo-loadmore-list ant-list-split ant-list-loading ant-list-something-after-last-item"
 >
   <div>
     <div
@@ -396,6 +428,12 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
   class="ant-list ant-list-split ant-list-grid"
 >
   <div>
+    <div
+      class="ant-spin-nested-loading"
+    >
+      <div
+        class="ant-spin-container"
+      >
         <div
           class="ant-row"
           style="margin-left:-8px;margin-right:-8px"
@@ -636,6 +674,8 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
           </div>
         </div>
       </div>
+    </div>
+  </div>
 </div>
 `;
 
@@ -647,7 +687,7 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
     Default Size
   </h3>
   <div
-    class="ant-list ant-list-split ant-list-bordered"
+    class="ant-list ant-list-split ant-list-bordered ant-list-something-after-last-item"
   >
     <div
       class="ant-list-header"
@@ -657,6 +697,12 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
       </div>
     </div>
     <div>
+      <div
+        class="ant-spin-nested-loading"
+      >
+        <div
+          class="ant-spin-container"
+        >
           <div
             class="ant-list-item"
           >
@@ -703,6 +749,8 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
             </div>
           </div>
         </div>
+      </div>
+    </div>
     <div
       class="ant-list-footer"
     >
@@ -717,7 +765,7 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
     Small Size
   </h3>
   <div
-    class="ant-list ant-list-sm ant-list-split ant-list-bordered"
+    class="ant-list ant-list-sm ant-list-split ant-list-bordered ant-list-something-after-last-item"
   >
     <div
       class="ant-list-header"
@@ -727,6 +775,12 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
       </div>
     </div>
     <div>
+      <div
+        class="ant-spin-nested-loading"
+      >
+        <div
+          class="ant-spin-container"
+        >
           <div
             class="ant-list-item"
           >
@@ -773,6 +827,8 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
             </div>
           </div>
         </div>
+      </div>
+    </div>
     <div
       class="ant-list-footer"
     >
@@ -787,7 +843,7 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
     Large Size
   </h3>
   <div
-    class="ant-list ant-list-lg ant-list-split ant-list-bordered"
+    class="ant-list ant-list-lg ant-list-split ant-list-bordered ant-list-something-after-last-item"
   >
     <div
       class="ant-list-header"
@@ -797,6 +853,12 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
       </div>
     </div>
     <div>
+      <div
+        class="ant-spin-nested-loading"
+      >
+        <div
+          class="ant-spin-container"
+        >
           <div
             class="ant-list-item"
           >
@@ -843,6 +905,8 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
             </div>
           </div>
         </div>
+      </div>
+    </div>
     <div
       class="ant-list-footer"
     >
@@ -856,9 +920,15 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
 
 exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
 <div
-  class="ant-list ant-list-vertical ant-list-lg ant-list-split"
+  class="ant-list ant-list-vertical ant-list-lg ant-list-split ant-list-something-after-last-item"
 >
   <div>
+    <div
+      class="ant-spin-nested-loading"
+    >
+      <div
+        class="ant-spin-container"
+      >
         <div
           class="ant-list-item"
         >
@@ -1339,6 +1409,8 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
             </div>
           </div>
         </div>
+      </div>
+    </div>
     <div
       class="ant-list-pagination"
     >

components/list/demo/infinite-load.md

@@ -102,9 +102,10 @@ ReactDOM.render(<InfiniteListExample />, mountNode);
 
 ````css
 .demo-infinite-container {
-  border: 1px solid #eee;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
   overflow: auto;
-  padding: 48px 16px;
+  padding: 8px 16px;
   height: 300px;
 }
 .demo-loading {

components/list/index.tsx

@@ -81,6 +81,11 @@ export default class List extends Component<ListProps> {
     return renderItem(item, index);
   }
 
+  isSomethingAfterLastTtem() {
+    const { loadMore, pagination, footer } = this.props;
+    return !!(loadMore || pagination || footer);
+  }
+
   render() {
     const {
       bordered = false,
@@ -122,6 +127,7 @@ export default class List extends Component<ListProps> {
       [`${prefixCls}-bordered`]: bordered,
       [`${prefixCls}-loading`]: loading,
       [`${prefixCls}-grid`]: grid,
+      [`${prefixCls}-something-after-last-item`]: this.isSomethingAfterLastTtem(),
     });
 
     const paginationContent = (
@@ -140,19 +146,11 @@ export default class List extends Component<ListProps> {
       <Row gutter={grid.gutter}>{childrenList}</Row>
     ) : childrenList;
 
-    const content = loading ? (
+    const content = (
       <div>
-        <Spin>
+        <Spin spinning={loading}>{childrenContent}</Spin>
-          {childrenContent}
-        </Spin>
         {loadMore}
-        {(!loadMore && pagination) && paginationContent}
+        {(!loadMore && pagination) ? paginationContent : null}
-     </div>
-    ) : (
-      <div>
-        {childrenContent}
-        {loadMore}
-        {(!loadMore && pagination) && paginationContent}
       </div>
     );
 

components/list/style/index.less

@@ -105,11 +105,22 @@
       flex: 0;
     }
   }
+  &-header,
+  &-footer {
+    padding-top: 12px;
+    padding-bottom: 12px;
+  }
 }
 
 .@{list-prefix-cls}-split {
   .@{list-prefix-cls}-item {
     border-bottom: 1px solid @border-color-split;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+  .@{list-prefix-cls}-header {
+    border-bottom: 1px solid @border-color-split;
   }
 }
 
@@ -123,21 +134,22 @@
   border-radius: @border-radius-base;
   border: 1px solid @border-color-base;
   .@{list-prefix-cls}-header {
-    border-bottom: 1px solid @border-color-split;
+    padding-left: 24px;
-    padding: 12px 24px;
+    padding-right: 24px;
   }
   .@{list-prefix-cls}-footer {
-    border-top: 1px solid @border-color-split;
+    padding-left: 24px;
-    padding: 12px 24px;
+    padding-right: 24px;
   }
   .@{list-prefix-cls}-item {
     border-bottom: 1px solid @border-color-split;
     padding-left: 24px;
     padding-right: 24px;
   }
-  .@{list-prefix-cls}-item:last-child {
+}
-    border-bottom: none;
+
-  }
+.@{list-prefix-cls}-something-after-last-item .@{list-prefix-cls}-item:last-child {
+  border-bottom: 1px solid @border-color-split;
 }
 
 .@{list-prefix-cls}-bordered.@{list-prefix-cls}-lg {