🐛 Fix space lost when inline element in List.Item, close #15186

components/list/Item.tsx

@@ -70,6 +70,17 @@ export default class Item extends React.Component<ListItemProps, any> {
 
   context: any;
 
+  isItemContainsTextNode() {
+    const { children } = this.props;
+    let result;
+    React.Children.forEach(children, (element: React.ReactElement<any>) => {
+      if (typeof element === 'string') {
+        result = true;
+      }
+    });
+    return result;
+  }
+
   renderItem = ({ getPrefixCls }: ConfigConsumerProps) => {
     const { grid } = this.context;
     const {
@@ -82,7 +93,7 @@ export default class Item extends React.Component<ListItemProps, any> {
     } = this.props;
     const prefixCls = getPrefixCls('list', customizePrefixCls);
     const actionsContent = actions && actions.length > 0 && (
-      <ul className={`${prefixCls}-item-action`}>
+      <ul className={`${prefixCls}-item-action`} key="actions">
         {actions.map((action: React.ReactNode, i: number) => (
           <li key={`${prefixCls}-item-action-${i}`}>
             {action}
@@ -92,18 +103,23 @@ export default class Item extends React.Component<ListItemProps, any> {
       </ul>
     );
     const itemChildren = (
-      <div {...others} className={classNames(`${prefixCls}-item`, className)}>
-        {extra ? (
-          <div className={`${prefixCls}-item-extra-wrap`}>
-            <div className={`${prefixCls}-item-main`}>
-              {children}
-              {actionsContent}
-            </div>
-            <div className={`${prefixCls}-item-extra`}>{extra}</div>
-          </div>
-        ) : (
-          [children, actionsContent]
-        )}
+      <div
+        {...others}
+        className={classNames(`${prefixCls}-item`, className, {
+          [`${prefixCls}-item-no-flex`]: !extra && this.isItemContainsTextNode(),
+        })}
+      >
+        {extra
+          ? [
+              <div className={`${prefixCls}-item-main`} key="content">
+                {children}
+                {actionsContent}
+              </div>,
+              <div className={`${prefixCls}-item-extra`} key="extra">
+                {extra}
+              </div>,
+            ]
+          : [children, actionsContent]}
       </div>
     );
 

components/list/style/index.less

@@ -33,9 +33,12 @@
   }
   &-item {
     display: flex;
-    align-items: center;
     padding: @list-item-padding;
 
+    &-no-flex {
+      display: block;
+    }
+
     &-meta {
       display: flex;
       flex: 1;
@@ -95,10 +98,6 @@
         background-color: @border-color-split;
       }
     }
-    &-main {
-      display: flex;
-      flex: 1;
-    }
   }
 
   &-header {
@@ -152,19 +151,18 @@
   }
 
   &-vertical &-item {
-    display: block;
-    &-extra-wrap {
-      display: flex;
-    }
     &-main {
       display: block;
       flex: 1;
     }
+
     &-extra {
-      margin-left: 58px;
+      margin-left: 40px;
     }
+
     &-meta {
       margin-bottom: @list-item-meta-margin-bottom;
+
       &-title {
         margin-bottom: @list-item-meta-title-margin-bottom;
         color: @heading-color;
@@ -172,14 +170,11 @@
         line-height: 24px;
       }
     }
-    &-content {
-      display: block;
-      margin: @list-item-content-margin;
-      color: @text-color;
-      font-size: @font-size-base;
-    }
+
     &-action {
+      margin-top: @padding-md;
       margin-left: auto;
+
       > li {
         padding: 0 16px;
         &:first-child {
@@ -190,14 +185,12 @@
   }
 
   &-grid &-item {
+    display: block;
+    max-width: 100%;
     margin-bottom: 16px;
     padding-top: 0;
     padding-bottom: 0;
     border-bottom: none;
-    &-content {
-      display: block;
-      max-width: 100%;
-    }
   }
 }
 

components/list/style/responsive.less

@@ -16,7 +16,7 @@
   }
 }
 
-@media screen and (max-width: @screen-xs) {
+@media screen and (max-width: @screen-sm) {
   .@{list-prefix-cls} {
     &-item {
       flex-wrap: wrap;
@@ -28,14 +28,12 @@
 
   .@{list-prefix-cls}-vertical {
     .@{list-prefix-cls}-item {
-      &-extra-wrap {
-        flex-wrap: wrap-reverse;
-      }
+      flex-wrap: wrap-reverse;
       &-main {
         min-width: 220px;
       }
       &-extra {
-        margin-left: 0;
+        margin: auto auto 16px;
       }
     }
   }

components/style/themes/default.less

@@ -574,7 +574,6 @@
 @list-footer-background: transparent;
 @list-empty-text-padding: @padding-md;
 @list-item-padding: @padding-sm 0;
-@list-item-content-margin: 0 0 @padding-md 0;
 @list-item-meta-margin-bottom: @padding-md;
 @list-item-meta-avatar-margin-right: @padding-md;
 @list-item-meta-title-margin-bottom: @padding-sm;