Fix list border

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>
-          {childrenContent}
-        </Spin>
+        <Spin spinning={loading}>{childrenContent}</Spin>
         {loadMore}
-        {(!loadMore && pagination) && paginationContent}
-     </div>
-    ) : (
-      <div>
-        {childrenContent}
-        {loadMore}
-        {(!loadMore && pagination) && paginationContent}
+        {(!loadMore && pagination) ? paginationContent : null}
       </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: 12px 24px;
+    padding-left: 24px;
+    padding-right: 24px;
   }
   .@{list-prefix-cls}-footer {
-    border-top: 1px solid @border-color-split;
-    padding: 12px 24px;
+    padding-left: 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 {