feat(list): list support using the componentSize configuration size f…

…rom ConfigProvider (ant-design#44267) * feat(list): list support using the componentSize configuration size from ConfigProvider * chore: update snapshot
ammar-knowledge · Aug 17, 2023 · 2e18b63 · 2e18b63
1 parent 030f385
commit 2e18b63
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
@@ -17472,7 +17472,7 @@ exports[`ConfigProvider components List configProvider componentDisabled 1`] = `
 
 exports[`ConfigProvider components List configProvider componentSize large 1`] = `
 <div
-  class="config-list config-list-split"
+  class="config-list config-list-lg config-list-split"
 >
   <div
     class="config-spin-nested-loading"
@@ -17576,7 +17576,7 @@ exports[`ConfigProvider components List configProvider componentSize middle 1`]
 
 exports[`ConfigProvider components List configProvider componentSize small 1`] = `
 <div
-  class="config-list config-list-split"
+  class="config-list config-list-sm config-list-split"
 >
   <div
     class="config-spin-nested-loading"

diff --git a/components/list/__tests__/index.test.tsx b/components/list/__tests__/index.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import type { ListProps } from '..';
 import List from '..';
+import ConfigProvider from '../../config-provider';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { render } from '../../../tests/utils';
@@ -22,4 +23,20 @@ describe('List', () => {
     );
     expect(container.querySelector('div.ant-list')?.getAttribute('locale')).toBe(null);
   });
+
+  it('should apply the componentSize of ConfigProvider', () => {
+    const { container } = render(
+      <>
+        <ConfigProvider componentSize="small">
+          <List />,
+        </ConfigProvider>
+        <ConfigProvider componentSize="large">
+          <List />,
+        </ConfigProvider>
+      </>,
+    );
+
+    expect(container.querySelector('.ant-list-sm')).toBeTruthy();
+    expect(container.querySelector('.ant-list-lg')).toBeTruthy();
+  });
 });
diff --git a/components/list/index.tsx b/components/list/index.tsx
@@ -19,6 +19,7 @@ import Item from './Item';
 // CSSINJS
 import { ListContext } from './context';
 import useStyle from './style';
+import useSize from '../config-provider/hooks/useSize';
 
 export type { ListItemMetaProps, ListItemProps } from './Item';
 export type { ListConsumerProps } from './context';
@@ -83,7 +84,7 @@ function List<T>({
   loadMore,
   grid,
   dataSource = [],
-  size,
+  size: customizeSize,
   header,
   footer,
   loading = false,
@@ -154,10 +155,12 @@ function List<T>({
   }
   const isLoading = loadingProp && loadingProp.spinning;
 
+  const mergedSize = useSize(customizeSize);
+
   // large => lg
   // small => sm
   let sizeCls = '';
-  switch (size) {
+  switch (mergedSize) {
     case 'large':
       sizeCls = 'lg';
       break;