Merge e2f714f185 into 6b2e46fe98

components/config-provider/__tests__/__snapshots__/components.test.tsx.snap

@@ -17425,7 +17425,7 @@ exports[`ConfigProvider components List configProvider 1`] = `
               </span>
             </div>
             <div
-              class="config-list-item-meta-content"
+              class="config-list-item-meta-section"
             >
               <h4
                 class="config-list-item-meta-title"
@@ -17477,7 +17477,7 @@ exports[`ConfigProvider components List configProvider componentDisabled 1`] = `
               </span>
             </div>
             <div
-              class="config-list-item-meta-content"
+              class="config-list-item-meta-section"
             >
               <h4
                 class="config-list-item-meta-title"
@@ -17529,7 +17529,7 @@ exports[`ConfigProvider components List configProvider componentSize large 1`] =
               </span>
             </div>
             <div
-              class="config-list-item-meta-content"
+              class="config-list-item-meta-section"
             >
               <h4
                 class="config-list-item-meta-title"
@@ -17581,7 +17581,7 @@ exports[`ConfigProvider components List configProvider componentSize middle 1`]
               </span>
             </div>
             <div
-              class="config-list-item-meta-content"
+              class="config-list-item-meta-section"
             >
               <h4
                 class="config-list-item-meta-title"
@@ -17633,7 +17633,7 @@ exports[`ConfigProvider components List configProvider componentSize small 1`] =
               </span>
             </div>
             <div
-              class="config-list-item-meta-content"
+              class="config-list-item-meta-section"
             >
               <h4
                 class="config-list-item-meta-title"
@@ -17685,7 +17685,7 @@ exports[`ConfigProvider components List normal 1`] = `
               </span>
             </div>
             <div
-              class="ant-list-item-meta-content"
+              class="ant-list-item-meta-section"
             >
               <h4
                 class="ant-list-item-meta-title"
@@ -17737,7 +17737,7 @@ exports[`ConfigProvider components List prefixCls 1`] = `
               </span>
             </div>
             <div
-              class="prefix-List-item-meta-content"
+              class="prefix-List-item-meta-section"
             >
               <h4
                 class="prefix-List-item-meta-title"

components/config-provider/context.ts

@@ -27,7 +27,7 @@ import type { FormProps } from '../form/Form';
 import type { ImageProps } from '../image';
 import type { InputProps, TextAreaProps } from '../input';
 import type { InputNumberProps } from '../input-number';
-import type { ListItemProps } from '../list';
+import type { ListItemMetaProps, ListItemProps, ListProps } from '../list';
 import type { Locale } from '../locale';
 import type { MasonryProps } from '../masonry';
 import type { MentionsProps } from '../mentions';
@@ -343,8 +343,11 @@ export type RibbonConfig = ComponentStyleConfig & Pick<RibbonProps, 'classNames'
 
 export type PopupOverflow = 'viewport' | 'scroll';
 
-export interface ListConfig extends ComponentStyleConfig {
-  item?: Pick<ListItemProps, 'classNames' | 'styles'>;
+export interface ListConfig
+  extends ComponentStyleConfig,
+    Pick<ListProps<any>, 'classNames' | 'styles'> {
+  item?: ComponentStyleConfig & Pick<ListItemProps, 'classNames' | 'styles'>;
+  itemMeta?: ComponentStyleConfig & Pick<ListItemMetaProps, 'classNames' | 'styles'>;
 }
 
 export const Variants = ['outlined', 'borderless', 'filled', 'underlined'] as const;

components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap

@@ -3989,7 +3989,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -4035,7 +4035,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"

components/drawer/__tests__/__snapshots__/demo.test.ts.snap

@@ -686,7 +686,7 @@ exports[`renders components/drawer/demo/user-profile.tsx correctly 1`] = `
               </span>
             </div>
             <div
-              class="ant-list-item-meta-content"
+              class="ant-list-item-meta-section"
             >
               <h4
                 class="ant-list-item-meta-title"
@@ -732,7 +732,7 @@ exports[`renders components/drawer/demo/user-profile.tsx correctly 1`] = `
               </span>
             </div>
             <div
-              class="ant-list-item-meta-content"
+              class="ant-list-item-meta-section"
             >
               <h4
                 class="ant-list-item-meta-title"

components/list/Item.tsx

@@ -1,26 +1,28 @@
 import type { CSSProperties, FC, HTMLAttributes, ReactElement, ReactNode } from 'react';
 import React, { Children, useContext } from 'react';
-import classNames from 'classnames';
+import cls from 'classnames';
 
+import useMergeSemantic from '../_util/hooks/useMergeSemantic';
 import { cloneElement } from '../_util/reactNode';
 import { ConfigContext } from '../config-provider';
 import { Col } from '../grid';
 import { ListContext } from './context';
 
-type SemanticName = 'actions' | 'extra';
+export type ListItemSemanticName = 'actions' | 'extra' | 'item';
 
 export interface ListItemProps extends HTMLAttributes<HTMLDivElement> {
   className?: string;
-  classNames?: Partial<Record<SemanticName, string>>;
   children?: ReactNode;
   prefixCls?: string;
   style?: CSSProperties;
-  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
+  classNames?: Partial<Record<ListItemSemanticName, string>>;
+  styles?: Partial<Record<ListItemSemanticName, React.CSSProperties>>;
   extra?: ReactNode;
   actions?: ReactNode[];
   colStyle?: CSSProperties;
 }
 
+export type ListItemMetaSemanticName = 'root' | 'section' | 'description' | 'title' | 'avatar';
 export interface ListItemMetaProps {
   avatar?: ReactNode;
   className?: string;
@@ -29,34 +31,78 @@ export interface ListItemMetaProps {
   prefixCls?: string;
   style?: CSSProperties;
   title?: ReactNode;
+  classNames?: Partial<Record<ListItemMetaSemanticName, string>>;
+  styles?: Partial<Record<ListItemMetaSemanticName, React.CSSProperties>>;
 }
 
-type ListItemClassNamesModule = keyof Exclude<ListItemProps['classNames'], undefined>;
-type ListItemStylesModule = keyof Exclude<ListItemProps['styles'], undefined>;
-
 export const Meta: FC<ListItemMetaProps> = ({
   prefixCls: customizePrefixCls,
   className,
   avatar,
   title,
   description,
-  ...others
+  style,
+  styles,
+  classNames,
+  ...restProps
 }) => {
-  const { getPrefixCls } = useContext(ConfigContext);
+  const { getPrefixCls, list } = useContext(ConfigContext);
+  const itemMeta = list?.itemMeta || {};
+  const [mergedClassNames, mergedStyles] = useMergeSemantic(
+    [itemMeta?.classNames, classNames],
+    [itemMeta?.styles, styles],
+  );
 
   const prefixCls = getPrefixCls('list', customizePrefixCls);
-  const classString = classNames(`${prefixCls}-item-meta`, className);
+  const rootClassNames = cls(
+    `${prefixCls}-item-meta`,
+    className,
+    itemMeta?.className,
+    mergedClassNames.root,
+  );
 
   const content = (
-    <div className={`${prefixCls}-item-meta-content`}>
-      {title && <h4 className={`${prefixCls}-item-meta-title`}>{title}</h4>}
-      {description && <div className={`${prefixCls}-item-meta-description`}>{description}</div>}
+    <div
+      className={cls(`${prefixCls}-item-meta-section`, mergedClassNames.section)}
+      style={mergedStyles.section}
+    >
+      {title && (
+        <h4
+          className={cls(`${prefixCls}-item-meta-title`, mergedClassNames.title)}
+          style={mergedStyles.title}
+        >
+          {title}
+        </h4>
+      )}
+      {description && (
+        <div
+          className={cls(`${prefixCls}-item-meta-description`, mergedClassNames.description)}
+          style={mergedStyles.description}
+        >
+          {description}
+        </div>
+      )}
     </div>
   );
 
   return (
-    <div {...others} className={classString}>
-      {avatar && <div className={`${prefixCls}-item-meta-avatar`}>{avatar}</div>}
+    <div
+      {...restProps}
+      className={rootClassNames}
+      style={{
+        ...mergedStyles.root,
+        ...itemMeta.style,
+        ...style,
+      }}
+    >
+      {avatar && (
+        <div
+          className={cls(`${prefixCls}-item-meta-avatar`, mergedClassNames.avatar)}
+          style={mergedStyles.avatar}
+        >
+          {avatar}
+        </div>
+      )}
       {(title || description) && content}
     </div>
   );
@@ -70,20 +116,19 @@ const InternalItem = React.forwardRef<HTMLDivElement, ListItemProps>((props, ref
     extra,
     styles,
     className,
-    classNames: customizeClassNames,
+    style,
+    classNames,
     colStyle,
-    ...others
+    ...restProps
   } = props;
   const { grid, itemLayout } = useContext(ListContext);
   const { getPrefixCls, list } = useContext(ConfigContext);
 
-  const moduleClass = (moduleName: ListItemClassNamesModule) =>
-    classNames(list?.item?.classNames?.[moduleName], customizeClassNames?.[moduleName]);
-
-  const moduleStyle = (moduleName: ListItemStylesModule): React.CSSProperties => ({
-    ...list?.item?.styles?.[moduleName],
-    ...styles?.[moduleName],
-  });
+  const listItem = list?.item || {};
+  const [mergedClassNames, mergedStyles] = useMergeSemantic(
+    [listItem?.classNames, classNames],
+    [listItem?.styles, styles],
+  );
 
   const isItemContainsTextNodeAndNotSingular = () => {
     let result = false;
@@ -105,9 +150,9 @@ const InternalItem = React.forwardRef<HTMLDivElement, ListItemProps>((props, ref
   const prefixCls = getPrefixCls('list', customizePrefixCls);
   const actionsContent = actions && actions.length > 0 && (
     <ul
-      className={classNames(`${prefixCls}-item-action`, moduleClass('actions'))}
+      className={cls(`${prefixCls}-item-action`, mergedClassNames.actions)}
       key="actions"
-      style={moduleStyle('actions')}
+      style={mergedStyles.actions}
     >
       {actions.map((action: ReactNode, i: number) => (
         // eslint-disable-next-line react/no-array-index-key
@@ -121,15 +166,18 @@ const InternalItem = React.forwardRef<HTMLDivElement, ListItemProps>((props, ref
   const Element = grid ? 'div' : 'li';
   const itemChildren = (
     <Element
-      {...(others as any)} // `li` element `onCopy` prop args is not same as `div`
+      {...(restProps as any)} // `li` element `onCopy` prop args is not same as `div`
       {...(!grid ? { ref } : {})}
-      className={classNames(
+      className={cls(
         `${prefixCls}-item`,
         {
           [`${prefixCls}-item-no-flex`]: !isFlexMode(),
         },
         className,
+        mergedClassNames.item,
+        listItem.className,
       )}
+      style={{ ...mergedStyles.item, ...listItem.style, ...style }}
     >
       {itemLayout === 'vertical' && extra
         ? [
@@ -138,9 +186,9 @@ const InternalItem = React.forwardRef<HTMLDivElement, ListItemProps>((props, ref
               {actionsContent}
             </div>,
             <div
-              className={classNames(`${prefixCls}-item-extra`, moduleClass('extra'))}
+              className={cls(`${prefixCls}-item-extra`, mergedClassNames.extra)}
               key="extra"
-              style={moduleStyle('extra')}
+              style={mergedStyles.extra}
             >
               {extra}
             </div>,

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

@@ -20,7 +20,7 @@ exports[`List Item Layout horizontal itemLayout List should accept extra node 1`
             class="ant-list-item-meta"
           >
             <div
-              class="ant-list-item-meta-content"
+              class="ant-list-item-meta-section"
             >
               <h4
                 class="ant-list-item-meta-title"
@@ -145,7 +145,7 @@ exports[`List Item Layout should render in RTL direction 1`] = `
             class="ant-list-item-meta"
           >
             <div
-              class="ant-list-item-meta-content"
+              class="ant-list-item-meta-section"
             >
               <h4
                 class="ant-list-item-meta-title"

components/list/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -31,7 +31,7 @@ exports[`renders components/list/demo/basic.tsx extend context correctly 1`] = `
               </span>
             </div>
             <div
-              class="ant-list-item-meta-content"
+              class="ant-list-item-meta-section"
             >
               <h4
                 class="ant-list-item-meta-title"
@@ -68,7 +68,7 @@ exports[`renders components/list/demo/basic.tsx extend context correctly 1`] = `
               </span>
             </div>
             <div
-              class="ant-list-item-meta-content"
+              class="ant-list-item-meta-section"
             >
               <h4
                 class="ant-list-item-meta-title"
@@ -105,7 +105,7 @@ exports[`renders components/list/demo/basic.tsx extend context correctly 1`] = `
               </span>
             </div>
             <div
-              class="ant-list-item-meta-content"
+              class="ant-list-item-meta-section"
             >
               <h4
                 class="ant-list-item-meta-title"
@@ -142,7 +142,7 @@ exports[`renders components/list/demo/basic.tsx extend context correctly 1`] = `
               </span>
             </div>
             <div
-              class="ant-list-item-meta-content"
+              class="ant-list-item-meta-section"
             >
               <h4
                 class="ant-list-item-meta-title"
@@ -465,7 +465,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -502,7 +502,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -539,7 +539,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -576,7 +576,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -645,7 +645,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -682,7 +682,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -719,7 +719,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -756,7 +756,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -2092,7 +2092,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -2129,7 +2129,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -2166,7 +2166,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -2203,7 +2203,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -2835,7 +2835,7 @@ exports[`renders components/list/demo/vertical.tsx extend context correctly 1`]
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -2998,7 +2998,7 @@ exports[`renders components/list/demo/vertical.tsx extend context correctly 1`]
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -3161,7 +3161,7 @@ exports[`renders components/list/demo/vertical.tsx extend context correctly 1`]
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"

components/list/__tests__/__snapshots__/demo.test.ts.snap

@@ -31,7 +31,7 @@ exports[`renders components/list/demo/basic.tsx correctly 1`] = `
               </span>
             </div>
             <div
-              class="ant-list-item-meta-content"
+              class="ant-list-item-meta-section"
             >
               <h4
                 class="ant-list-item-meta-title"
@@ -68,7 +68,7 @@ exports[`renders components/list/demo/basic.tsx correctly 1`] = `
               </span>
             </div>
             <div
-              class="ant-list-item-meta-content"
+              class="ant-list-item-meta-section"
             >
               <h4
                 class="ant-list-item-meta-title"
@@ -105,7 +105,7 @@ exports[`renders components/list/demo/basic.tsx correctly 1`] = `
               </span>
             </div>
             <div
-              class="ant-list-item-meta-content"
+              class="ant-list-item-meta-section"
             >
               <h4
                 class="ant-list-item-meta-title"
@@ -142,7 +142,7 @@ exports[`renders components/list/demo/basic.tsx correctly 1`] = `
               </span>
             </div>
             <div
-              class="ant-list-item-meta-content"
+              class="ant-list-item-meta-section"
             >
               <h4
                 class="ant-list-item-meta-title"
@@ -468,7 +468,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -505,7 +505,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -542,7 +542,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -579,7 +579,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -648,7 +648,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -685,7 +685,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -722,7 +722,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -759,7 +759,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -2085,7 +2085,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -2122,7 +2122,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -2159,7 +2159,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -2196,7 +2196,7 @@ Array [
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -2815,7 +2815,7 @@ exports[`renders components/list/demo/vertical.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -2978,7 +2978,7 @@ exports[`renders components/list/demo/vertical.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"
@@ -3141,7 +3141,7 @@ exports[`renders components/list/demo/vertical.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="ant-list-item-meta-content"
+                class="ant-list-item-meta-section"
               >
                 <h4
                   class="ant-list-item-meta-title"

components/list/demo/_semantic.tsx

@@ -1,19 +1,20 @@
 import React from 'react';
+import { LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
+import { Avatar, List, Space } from 'antd';
 
 import SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
 
-import { Avatar, List, Space } from 'antd';
-import { LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
-
 const locales = {
   cn: {
-    extra: '设置额外内容',
-    actions: '设置列表操作组',
+    root: '根元素',
+    extra: '额外内容',
+    actions: '列表操作组',
   },
   en: {
-    extra: 'set `extra` of List.Item',
-    actions: 'set `actions` of List.Item',
+    root: 'Root Element',
+    extra: 'Extra Element',
+    actions: 'Actions Element',
   },
 };
 
@@ -35,11 +36,10 @@ const data = Array.from({ length: 1 }).map((_, i) => ({
 }));
 
 const BlockList: React.FC<React.PropsWithChildren> = (props) => {
-  const divRef = React.useRef<HTMLDivElement>(null);
-
   return (
-    <div ref={divRef} style={{ position: 'absolute', inset: 0, height: 300 }}>
+    <div style={{ position: 'absolute', inset: 0, height: 420, margin: 20 }}>
       <List
+        {...props}
         itemLayout="vertical"
         size="large"
         dataSource={data}
@@ -78,8 +78,9 @@ const App: React.FC = () => {
   return (
     <SemanticPreview
       componentName="List"
-      height={300}
+      height={420}
       semantics={[
+        { name: 'root', desc: locale.root, version: '6.0.0' },
         { name: 'extra', desc: locale.extra, version: '5.18.0' },
         { name: 'actions', desc: locale.actions, version: '5.18.0' },
       ]}

components/list/demo/_semantic_basic.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { List, Typography } from 'antd';
+
+import SemanticPreview from '../../../.dumi/components/SemanticPreview';
+import useLocale from '../../../.dumi/hooks/useLocale';
+
+const locales = {
+  cn: {
+    root: '根元素',
+    header: '头部元素',
+    item: '列表项元素',
+    footer: '底部元素',
+  },
+  en: {
+    root: 'Root Element',
+    header: 'Header Element',
+    item: 'Item Element',
+    footer: 'Footer Element',
+  },
+};
+
+const BlockList: React.FC<React.PropsWithChildren> = (props) => {
+  return (
+    <div style={{ position: 'absolute', inset: 0, height: 420, margin: 20 }}>
+      <List
+        {...props}
+        style={{ marginTop: 20 }}
+        header={<div>Header</div>}
+        footer={<div>Footer</div>}
+        bordered
+        dataSource={[
+          'Racing car sprays burning fuel into crowd.',
+          'Japanese princess to wed commoner.',
+          'Australian walks 100km after outback crash.',
+          'Man charged over missing wedding girl.',
+          'Los Angeles battles huge wildfires.',
+        ]}
+        renderItem={(item) => (
+          <List.Item {...props}>
+            <Typography.Text mark>[ITEM]</Typography.Text> {item}
+          </List.Item>
+        )}
+      />
+    </div>
+  );
+};
+
+const App: React.FC = () => {
+  const [locale] = useLocale(locales);
+  return (
+    <SemanticPreview
+      componentName="List"
+      height={420}
+      semantics={[
+        { name: 'root', desc: locale.root },
+        { name: 'header', desc: locale.header },
+        { name: 'item', desc: locale.item },
+        { name: 'footer', desc: locale.footer },
+      ]}
+    >
+      <BlockList />
+    </SemanticPreview>
+  );
+};
+
+export default App;

components/list/demo/_semantic_meta.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Avatar, List } from 'antd';
+
+import SemanticPreview from '../../../.dumi/components/SemanticPreview';
+import useLocale from '../../../.dumi/hooks/useLocale';
+import { ListItemMetaProps } from '../Item';
+
+const locales = {
+  cn: {
+    root: '根元素',
+    section: '容器元素',
+    title: '标题',
+    description: '描述',
+    avatar: '图标元素',
+  },
+  en: {
+    root: 'Root Element',
+    section: 'Container Element',
+    title: 'Title Element',
+    description: 'Description Element',
+    avatar: 'Avatar Element',
+  },
+};
+
+const data = [
+  {
+    title: 'Ant Design Title 1',
+  },
+];
+
+const BlockList: React.FC<Readonly<ListItemMetaProps>> = (props) => {
+  return (
+    <div style={{ position: 'absolute', inset: 0, height: 300, margin: 20 }}>
+      <List
+        itemLayout="horizontal"
+        dataSource={data}
+        renderItem={(item, index) => (
+          <List.Item>
+            <List.Item.Meta
+              {...props}
+              avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
+              title={<a href="https://ant.design">{item.title}</a>}
+              description="Ant Design, a design language for background applications, is refined by Ant UED Team"
+            />
+          </List.Item>
+        )}
+      />
+    </div>
+  );
+};
+
+const App: React.FC = () => {
+  const [locale] = useLocale(locales);
+  return (
+    <SemanticPreview
+      componentName="List"
+      height={300}
+      semantics={[
+        { name: 'root', desc: locale.root },
+        { name: 'avatar', desc: locale.avatar },
+        { name: 'section', desc: locale.section },
+        { name: 'title', desc: locale.title },
+        { name: 'description', desc: locale.description },
+      ]}
+    >
+      <BlockList />
+    </SemanticPreview>
+  );
+};
+
+export default App;

components/list/index.en-US.md

@@ -92,8 +92,18 @@ More about pagination, please check [`Pagination`](/components/pagination/).
 
 ## Semantic DOM
 
+### Basic
+
+<code src="./demo/_semantic_basic.tsx" simplify="true"></code>
+
+### List
+
 <code src="./demo/_semantic.tsx" simplify="true"></code>
 
+### List.Meta
+
+<code src="./demo/_semantic_meta.tsx" simplify="true"></code>
+
 ## Design Token
 
 <ComponentTokenTable component="List"></ComponentTokenTable>

components/list/index.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import classNames from 'classnames';
+import cls from 'classnames';
 
 import extendsObject from '../_util/extendsObject';
+import useMergeSemantic from '../_util/hooks/useMergeSemantic';
 import { responsiveArray } from '../_util/responsiveObserver';
 import { ConfigContext } from '../config-provider';
 import { useComponentConfig } from '../config-provider/context';
@@ -40,6 +41,8 @@ export type ListSize = 'small' | 'default' | 'large';
 
 export type ListItemLayout = 'horizontal' | 'vertical';
 
+export type ListSemanticName = 'root' | 'header' | 'footer';
+
 export interface ListProps<T> {
   bordered?: boolean;
   className?: string;
@@ -62,6 +65,8 @@ export interface ListProps<T> {
   header?: React.ReactNode;
   footer?: React.ReactNode;
   locale?: ListLocale;
+  classNames?: Partial<Record<ListSemanticName, string>>;
+  styles?: Partial<Record<ListSemanticName, React.CSSProperties>>;
 }
 
 export interface ListLocale {
@@ -89,11 +94,12 @@ function InternalList<T>(props: ListProps<T>, ref: React.ForwardedRef<HTMLDivEle
     rowKey,
     renderItem,
     locale,
-    ...rest
+    styles,
+    classNames,
+    ...restProps
   } = props;
 
   const paginationObj = pagination && typeof pagination === 'object' ? pagination : {};
-
   const [paginationCurrent, setPaginationCurrent] = React.useState(
     paginationObj.defaultCurrent || 1,
   );
@@ -104,8 +110,14 @@ function InternalList<T>(props: ListProps<T>, ref: React.ForwardedRef<HTMLDivEle
     direction,
     className: contextClassName,
     style: contextStyle,
+    classNames: contextClassNames,
+    styles: contextStyles,
   } = useComponentConfig('list');
   const { renderEmpty } = React.useContext(ConfigContext);
+  const [mergedClassNames, mergedStyles] = useMergeSemantic(
+    [contextClassNames, classNames],
+    [contextStyles, styles],
+  );
 
   const defaultPaginationProps: PaginationConfig = {
     current: 1,
@@ -179,7 +191,7 @@ function InternalList<T>(props: ListProps<T>, ref: React.ForwardedRef<HTMLDivEle
       break;
   }
 
-  const classString = classNames(
+  const rootClassNames = cls(
     prefixCls,
     {
       [`${prefixCls}-vertical`]: itemLayout === 'vertical',
@@ -196,6 +208,7 @@ function InternalList<T>(props: ListProps<T>, ref: React.ForwardedRef<HTMLDivEle
     rootClassName,
     hashId,
     cssVarCls,
+    mergedClassNames.root,
   );
 
   const paginationProps = extendsObject(
@@ -213,7 +226,7 @@ function InternalList<T>(props: ListProps<T>, ref: React.ForwardedRef<HTMLDivEle
   paginationProps.current = Math.min(paginationProps.current, largestPage);
 
   const paginationContent = pagination && (
-    <div className={classNames(`${prefixCls}-pagination`)}>
+    <div className={cls(`${prefixCls}-pagination`)}>
       <Pagination
         align="end"
         {...paginationProps}
@@ -291,14 +304,33 @@ function InternalList<T>(props: ListProps<T>, ref: React.ForwardedRef<HTMLDivEle
 
   return (
     <ListContext.Provider value={contextValue}>
-      <div ref={ref} style={{ ...contextStyle, ...style }} className={classString} {...rest}>
+      <div
+        ref={ref}
+        style={{ ...mergedStyles.root, ...contextStyle, ...style }}
+        className={rootClassNames}
+        {...restProps}
+      >
         {(paginationPosition === 'top' || paginationPosition === 'both') && paginationContent}
-        {header && <div className={`${prefixCls}-header`}>{header}</div>}
+        {header && (
+          <div
+            className={cls(`${prefixCls}-header`, mergedClassNames.header)}
+            style={mergedStyles.header}
+          >
+            {header}
+          </div>
+        )}
         <Spin {...loadingProp}>
           {childrenContent}
           {children}
         </Spin>
-        {footer && <div className={`${prefixCls}-footer`}>{footer}</div>}
+        {footer && (
+          <div
+            className={cls(`${prefixCls}-footer`, mergedClassNames.footer)}
+            style={mergedStyles.footer}
+          >
+            {footer}
+          </div>
+        )}
         {loadMore ||
           ((paginationPosition === 'bottom' || paginationPosition === 'both') && paginationContent)}
       </div>

components/list/index.zh-CN.md

@@ -95,8 +95,18 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAA
 
 ## Semantic DOM
 
+### Basic
+
+<code src="./demo/_semantic_basic.tsx" simplify="true"></code>
+
+### List
+
 <code src="./demo/_semantic.tsx" simplify="true"></code>
 
+### List.Meta
+
+<code src="./demo/_semantic_meta.tsx" simplify="true"></code>
+
 ## 主题变量（Design Token）
 
 <ComponentTokenTable component="List"></ComponentTokenTable>

components/list/style/index.ts

@@ -249,7 +249,7 @@ const genBaseStyle: GenerateStyle<ListToken> = (token) => {
             marginInlineEnd: avatarMarginRight,
           },
 
-          [`${componentCls}-item-meta-content`]: {
+          [`${componentCls}-item-meta-section`]: {
             flex: '1 0',
             width: 0,
             color: colorText,

components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1621,7 +1621,7 @@ exports[`renders components/steps/demo/inline.tsx extend context correctly 1`] =
               </span>
             </div>
             <div
-              class="ant-list-item-meta-content"
+              class="ant-list-item-meta-section"
             >
               <h4
                 class="ant-list-item-meta-title"
@@ -1831,7 +1831,7 @@ exports[`renders components/steps/demo/inline.tsx extend context correctly 1`] =
               </span>
             </div>
             <div
-              class="ant-list-item-meta-content"
+              class="ant-list-item-meta-section"
             >
               <h4
                 class="ant-list-item-meta-title"
@@ -2041,7 +2041,7 @@ exports[`renders components/steps/demo/inline.tsx extend context correctly 1`] =
               </span>
             </div>
             <div
-              class="ant-list-item-meta-content"
+              class="ant-list-item-meta-section"
             >
               <h4
                 class="ant-list-item-meta-title"
@@ -2251,7 +2251,7 @@ exports[`renders components/steps/demo/inline.tsx extend context correctly 1`] =
               </span>
             </div>
             <div
-              class="ant-list-item-meta-content"
+              class="ant-list-item-meta-section"
             >
               <h4
                 class="ant-list-item-meta-title"

components/steps/__tests__/__snapshots__/demo.test.ts.snap

@@ -1503,7 +1503,7 @@ exports[`renders components/steps/demo/inline.tsx correctly 1`] = `
               </span>
             </div>
             <div
-              class="ant-list-item-meta-content"
+              class="ant-list-item-meta-section"
             >
               <h4
                 class="ant-list-item-meta-title"
@@ -1653,7 +1653,7 @@ exports[`renders components/steps/demo/inline.tsx correctly 1`] = `
               </span>
             </div>
             <div
-              class="ant-list-item-meta-content"
+              class="ant-list-item-meta-section"
             >
               <h4
                 class="ant-list-item-meta-title"
@@ -1803,7 +1803,7 @@ exports[`renders components/steps/demo/inline.tsx correctly 1`] = `
               </span>
             </div>
             <div
-              class="ant-list-item-meta-content"
+              class="ant-list-item-meta-section"
             >
               <h4
                 class="ant-list-item-meta-title"
@@ -1953,7 +1953,7 @@ exports[`renders components/steps/demo/inline.tsx correctly 1`] = `
               </span>
             </div>
             <div
-              class="ant-list-item-meta-content"
+              class="ant-list-item-meta-section"
             >
               <h4
                 class="ant-list-item-meta-title"