Fix list item style (#15328)

* 🐛 Fix List Item layout style problems

* 🐛 horizontal list should align center

* ✅ Add test cases

* ✅ Add test cases for List.Item

* 🐛 Fix vertical list item with extra

components/list/Item.tsx

@@ -66,6 +66,7 @@ export default class Item extends React.Component<ListItemProps, any> {
 
   static contextTypes = {
     grid: PropTypes.any,
+    itemLayout: PropTypes.string,
   };
 
   context: any;
@@ -81,8 +82,17 @@ export default class Item extends React.Component<ListItemProps, any> {
     return result;
   }
 
+  isFlexMode() {
+    const { extra } = this.props;
+    const { itemLayout } = this.context;
+    if (itemLayout === 'vertical') {
+      return !!extra;
+    }
+    return !this.isItemContainsTextNode();
+  }
+
   renderItem = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { grid } = this.context;
+    const { grid, itemLayout } = this.context;
     const {
       prefixCls: customizePrefixCls,
       children,
@@ -106,10 +116,10 @@ export default class Item extends React.Component<ListItemProps, any> {
       <div
         {...others}
         className={classNames(`${prefixCls}-item`, className, {
-          [`${prefixCls}-item-no-flex`]: !extra && this.isItemContainsTextNode(),
+          [`${prefixCls}-item-no-flex`]: !this.isFlexMode(),
         })}
       >
-        {extra
+        {itemLayout === 'vertical' && extra
           ? [
               <div className={`${prefixCls}-item-main`} key="content">
                 {children}
@@ -119,7 +129,11 @@ export default class Item extends React.Component<ListItemProps, any> {
                 {extra}
               </div>,
             ]
-          : [children, actionsContent]}
+          : [
+              children,
+              actionsContent,
+              extra ? React.cloneElement(extra as React.ReactElement<any>, { key: 'extra' }) : null,
+            ]}
       </div>
     );
 

components/list/__tests__/Item.test.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import List from '..';
+
+describe('List Item Layout', () => {
+  const data = [{
+    key: 1,
+    href: 'http://ant.design',
+    title: `ant design`,
+    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+    description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
+    content: 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
+    extra: 'extra',
+  }];
+
+  it('horizontal itemLayout List which contains string nodes should not be flex container', () => {
+    const wrapper = mount(
+      <List
+        dataSource={data}
+        renderItem={item => (
+          <List.Item key={item.title}>
+            I am <span>ant</span> design list item
+          </List.Item>
+        )}
+      />
+    );
+    expect(wrapper.find('.ant-list-item').at(0).hasClass('ant-list-item-no-flex')).toBe(true);
+  });
+
+  it('horizontal itemLayout List should be flex container defaultly', () => {
+    const wrapper = mount(
+      <List
+        dataSource={data}
+        renderItem={item => (
+          <List.Item key={item.title}>
+            <List.Item.Meta
+              title={<a href={item.href}>{item.title}</a>}
+              description={item.description}
+            />
+          </List.Item>
+        )}
+      />
+    );
+    expect(wrapper.find('.ant-list-item').at(0).hasClass('ant-list-item-no-flex')).toBe(false);
+  });
+
+  it('vertical itemLayout List should be flex container when there is extra node', () => {
+    const wrapper = mount(
+      <List
+        itemLayout="vertical"
+        dataSource={data}
+        renderItem={item => (
+          <List.Item key={item.title} extra={item.extra}>
+            <List.Item.Meta
+              title={<a href={item.href}>{item.title}</a>}
+              description={item.description}
+            />
+          </List.Item>
+        )}
+      />
+    );
+    expect(wrapper.find('.ant-list-item').at(0).hasClass('ant-list-item-no-flex')).toBe(false);
+  });
+
+  it('vertical itemLayout List should not be flex container when there is not extra node', () => {
+    const wrapper = mount(
+      <List
+        itemLayout="vertical"
+        dataSource={data}
+        renderItem={item => (
+          <List.Item key={item.title}>
+            <List.Item.Meta
+              title={<a href={item.href}>{item.title}</a>}
+              description={item.description}
+            />
+          </List.Item>
+        )}
+      />
+    );
+    expect(wrapper.find('.ant-list-item').at(0).hasClass('ant-list-item-no-flex')).toBe(true);
+  });
+
+  it('horizontal itemLayout List should accept extra node', () => {
+    const wrapper = mount(
+      <List
+        dataSource={data}
+        renderItem={item => (
+          <List.Item key={item.title} actions={[<a>Action</a>]} extra={<span>{item.extra}</span>}>
+            <List.Item.Meta
+              title={<a href={item.href}>{item.title}</a>}
+              description={item.description}
+            />
+          </List.Item>
+        )}
+      />
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`List Item Layout horizontal itemLayout List should accept extra node 1`] = `
+<div
+  class="ant-list ant-list-split"
+>
+  <div
+    class="ant-spin-nested-loading"
+  >
+    <div
+      class="ant-spin-container"
+    >
+      <div
+        class="ant-list-item"
+      >
+        <div
+          class="ant-list-item-meta"
+        >
+          <div
+            class="ant-list-item-meta-content"
+          >
+            <h4
+              class="ant-list-item-meta-title"
+            >
+              <a
+                href="http://ant.design"
+              >
+                ant design
+              </a>
+            </h4>
+            <div
+              class="ant-list-item-meta-description"
+            >
+              Ant Design, a design language for background applications, is refined by Ant UED Team.
+            </div>
+          </div>
+        </div>
+        <ul
+          class="ant-list-item-action"
+        >
+          <li>
+            <a>
+              Action
+            </a>
+          </li>
+        </ul>
+        <span>
+          extra
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;

components/list/index.tsx

@@ -60,6 +60,7 @@ export default class List extends React.Component<ListProps> {
 
   static childContextTypes = {
     grid: PropTypes.any,
+    itemLayout: PropTypes.string,
   };
 
   static defaultProps = {
@@ -94,6 +95,7 @@ export default class List extends React.Component<ListProps> {
   getChildContext() {
     return {
       grid: this.props.grid,
+      itemLayout: this.props.itemLayout,
     };
   }
 

components/list/style/index.less

@@ -39,6 +39,7 @@
 
   &-item {
     display: flex;
+    align-items: center;
     padding: @list-item-padding;
 
     &-no-flex {
@@ -161,6 +162,8 @@
   }
 
   &-vertical &-item {
+    align-items: initial;
+
     &-main {
       display: block;
       flex: 1;

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

@@ -123,7 +123,7 @@ exports[`renders ./components/skeleton/demo/list.md correctly 1`] = `
         class="ant-spin-container"
       >
         <div
-          class="ant-list-item"
+          class="ant-list-item ant-list-item-no-flex"
         >
           <div
             class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active"
@@ -152,7 +152,7 @@ exports[`renders ./components/skeleton/demo/list.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-list-item"
+          class="ant-list-item ant-list-item-no-flex"
         >
           <div
             class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active"
@@ -181,7 +181,7 @@ exports[`renders ./components/skeleton/demo/list.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-list-item"
+          class="ant-list-item ant-list-item-no-flex"
         >
           <div
             class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active"