🐛 Fix List item flex layout (#20897)

close #20648
ant-design · Jan 15, 2020 · 9a36409 · 9a36409
1 parent 150ca1d
commit 9a36409
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git a/components/list/Item.tsx b/components/list/Item.tsx
@@ -72,15 +72,15 @@ export default class Item extends React.Component<ListItemProps, any> {
 
   context: any;
 
-  isItemContainsTextNode() {
+  isItemContainsTextNodeAndNotSingular() {
     const { children } = this.props;
     let result;
     React.Children.forEach(children, (element: React.ReactElement<any>) => {
       if (typeof element === 'string') {
         result = true;
       }
     });
-    return result;
+    return result && React.Children.count(children) > 1;
   }
 
   isFlexMode() {
@@ -89,7 +89,7 @@ export default class Item extends React.Component<ListItemProps, any> {
     if (itemLayout === 'vertical') {
       return !!extra;
     }
-    return !this.isItemContainsTextNode();
+    return !this.isItemContainsTextNodeAndNotSingular();
   }
 
   renderItem = ({ getPrefixCls }: ConfigConsumerProps) => {

diff --git a/components/list/__tests__/__snapshots__/demo.test.js.snap b/components/list/__tests__/__snapshots__/demo.test.js.snap
@@ -764,27 +764,27 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
           class="ant-list-items"
         >
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Racing car sprays burning fuel into crowd.
           </li>
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Japanese princess to wed commoner.
           </li>
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Australian walks 100km after outback crash.
           </li>
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Man charged over missing wedding girl.
           </li>
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Los Angeles battles huge wildfires.
           </li>
@@ -824,27 +824,27 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
           class="ant-list-items"
         >
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Racing car sprays burning fuel into crowd.
           </li>
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Japanese princess to wed commoner.
           </li>
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Australian walks 100km after outback crash.
           </li>
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Man charged over missing wedding girl.
           </li>
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Los Angeles battles huge wildfires.
           </li>

diff --git a/components/list/style/index.less b/components/list/style/index.less
@@ -66,6 +66,7 @@
   &-item {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     padding: @list-item-padding;
 
     &-content {