fix: List with actions style should be the right (#16239)

* update css

* should not affect vertical style

* update logic

components/_util/reactNode.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export function cloneElement(element: React.ReactNode, ...restArgs: any[]) {
+  if (!React.isValidElement(element)) return element;
+
+  return React.cloneElement(element, ...restArgs);
+}

components/list/Item.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { ListGridType, ColumnType } from './index';
 import { Col } from '../grid';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { cloneElement } from '../_util/reactNode';
 
 export interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
   className?: string;
@@ -129,11 +130,7 @@ export default class Item extends React.Component<ListItemProps, any> {
                 {extra}
               </div>,
             ]
-          : [
-              children,
-              actionsContent,
-              extra ? React.cloneElement(extra as React.ReactElement<any>, { key: 'extra' }) : null,
-            ]}
+          : [children, actionsContent, cloneElement(extra, { key: 'extra' })]}
       </div>
     );
 

components/list/style/index.less

@@ -43,10 +43,6 @@
     align-items: center;
     padding: @list-item-padding;
 
-    &-no-flex {
-      display: block;
-    }
-
     &-content {
       color: @text-color;
     }
@@ -206,6 +202,20 @@
     padding-bottom: 0;
     border-bottom: none;
   }
+
+  // ============================ without flex ============================
+  &-item-no-flex {
+    display: block;
+  }
+
+  // Horizontal
+  &:not(.@{list-prefix-cls}-vertical) {
+    .@{list-prefix-cls}-item-no-flex {
+      .@{list-prefix-cls}-item-action {
+        float: right;
+      }
+    }
+  }
 }
 
 @import './bordered';