feat: Avatar support size from ConfigProvider (#44288)

* feat: Avatar support size from ConfigProvider * Update components/avatar/avatar.tsx Co-authored-by: MadCcc <1075746765@qq.com> Signed-off-by: lijianan <574980606@qq.com> * test: update snap * Update components/avatar/AvatarContext.ts Co-authored-by: MadCcc <1075746765@qq.com> Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: MadCcc <1075746765@qq.com>
ant-design · Aug 18, 2023 · d375cbd · d375cbd
1 parent 74d9654
commit d375cbd
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 7 deletions.
diff --git a/components/avatar/AvatarContext.ts b/components/avatar/AvatarContext.ts
@@ -8,6 +8,6 @@ export interface AvatarContextType {
   shape?: 'circle' | 'square';
 }
 
-const AvatarContext = React.createContext<AvatarContextType>({ size: 'default', shape: undefined });
+const AvatarContext = React.createContext<AvatarContextType>({});
 
 export default AvatarContext;
diff --git a/components/avatar/__tests__/Avatar.test.tsx b/components/avatar/__tests__/Avatar.test.tsx
@@ -4,6 +4,7 @@ import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { fireEvent, render } from '../../../tests/utils';
 import useBreakpoint from '../../grid/hooks/useBreakpoint';
+import ConfigProvider from '../../config-provider';
 
 jest.mock('../../grid/hooks/useBreakpoint');
 
@@ -205,4 +206,19 @@ describe('Avatar Render', () => {
     expect(avatars?.[2]).toHaveClass('ant-avatar-square');
     expect(avatars?.[3]).toHaveClass('ant-avatar-circle');
   });
+
+  it('should apply the componentSize of CP', () => {
+    const { container } = render(
+      <>
+        <ConfigProvider componentSize="small">
+          <Avatar>test</Avatar>
+        </ConfigProvider>
+        <ConfigProvider componentSize="large">
+          <Avatar>test</Avatar>
+        </ConfigProvider>
+      </>,
+    );
+    expect(container.querySelector('.ant-avatar-sm')).toBeTruthy();
+    expect(container.querySelector('.ant-avatar-lg')).toBeTruthy();
+  });
 });
diff --git a/components/avatar/avatar.tsx b/components/avatar/avatar.tsx
@@ -10,6 +10,7 @@ import useBreakpoint from '../grid/hooks/useBreakpoint';
 import type { AvatarContextType, AvatarSize } from './AvatarContext';
 import AvatarContext from './AvatarContext';
 import useStyle from './style';
+import useSize from '../config-provider/hooks/useSize';
 
 export interface AvatarProps {
   /** Shape of avatar, options: `circle`, `square` */
@@ -93,7 +94,7 @@ const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProp
   const {
     prefixCls: customizePrefixCls,
     shape,
-    size: customSize = 'default',
+    size: customSize,
     src,
     srcSet,
     icon,
@@ -106,7 +107,7 @@ const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProp
     ...others
   } = props;
 
-  const size = customSize === 'default' ? avatarCtx?.size : customSize;
+  const size = useSize((ctxSize) => customSize ?? avatarCtx?.size ?? ctxSize ?? 'default');
 
   const needResponsive = Object.keys(typeof size === 'object' ? size || {} : {}).some((key) =>
     ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key),

diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
@@ -599,7 +599,7 @@ exports[`ConfigProvider components Avatar configProvider componentDisabled 1`] =
 
 exports[`ConfigProvider components Avatar configProvider componentSize large 1`] = `
 <span
-  class="config-avatar config-avatar-circle"
+  class="config-avatar config-avatar-lg config-avatar-circle"
 >
   <span
     class="config-avatar-string"
@@ -621,7 +621,7 @@ exports[`ConfigProvider components Avatar configProvider componentSize middle 1`
 
 exports[`ConfigProvider components Avatar configProvider componentSize small 1`] = `
 <span
-  class="config-avatar config-avatar-circle"
+  class="config-avatar config-avatar-sm config-avatar-circle"
 >
   <span
     class="config-avatar-string"
@@ -17493,7 +17493,7 @@ exports[`ConfigProvider components List configProvider componentSize large 1`] =
               class="config-list-item-meta-avatar"
             >
               <span
-                class="config-avatar config-avatar-circle config-avatar-image"
+                class="config-avatar config-avatar-lg config-avatar-circle config-avatar-image"
               >
                 <img
                   src="https://xsgames.co/randomusers/avatar.php?g=pixel"
@@ -17597,7 +17597,7 @@ exports[`ConfigProvider components List configProvider componentSize small 1`] =
               class="config-list-item-meta-avatar"
             >
               <span
-                class="config-avatar config-avatar-circle config-avatar-image"
+                class="config-avatar config-avatar-sm config-avatar-circle config-avatar-image"
               >
                 <img
                   src="https://xsgames.co/randomusers/avatar.php?g=pixel"