feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128)

components/skeleton/Avatar.tsx

@@ -27,7 +27,20 @@ class SkeletonAvatar extends React.Component<SkeletonAvatarProps, any> {
       [`${prefixCls}-square`]: shape === 'square',
     });
 
-    return <span className={classNames(prefixCls, className, sizeCls, shapeCls)} style={style} />;
+    const sizeStyle: React.CSSProperties =
+      typeof size === 'number'
+        ? {
+            width: size,
+            height: size,
+            lineHeight: `${size}px`,
+          }
+        : {};
+    return (
+      <span
+        className={classNames(prefixCls, className, sizeCls, shapeCls)}
+        style={{ ...sizeStyle, ...style }}
+      />
+    );
   }
 }
 

components/skeleton/__tests__/__snapshots__/index.test.js.snap

@@ -140,6 +140,35 @@ exports[`Skeleton avatar size 3`] = `
 </div>
 `;
 
+exports[`Skeleton avatar size 4`] = `
+<div
+  class="ant-skeleton ant-skeleton-with-avatar"
+>
+  <div
+    class="ant-skeleton-header"
+  >
+    <span
+      class="ant-skeleton-avatar ant-skeleton-avatar-circle"
+      style="width: 20px; height: 20px; line-height: 20px;"
+    />
+  </div>
+  <div
+    class="ant-skeleton-content"
+  >
+    <h3
+      class="ant-skeleton-title"
+      style="width: 50%;"
+    />
+    <ul
+      class="ant-skeleton-paragraph"
+    >
+      <li />
+      <li />
+    </ul>
+  </div>
+</div>
+`;
+
 exports[`Skeleton paragraph rows 1`] = `
 <div
   class="ant-skeleton"

components/skeleton/__tests__/index.test.js

@@ -18,6 +18,8 @@ describe('Skeleton', () => {
       expect(wrapperDefault.render()).toMatchSnapshot();
       const wrapperLarge = genSkeleton({ avatar: { size: 'large' } });
       expect(wrapperLarge.render()).toMatchSnapshot();
+      const wrapperNumber = genSkeleton({ avatar: { size: 20 } });
+      expect(wrapperNumber.render()).toMatchSnapshot();
     });
 
     it('shape', () => {

components/skeleton/index.en-US.md

@@ -29,7 +29,7 @@ Provide a placeholder at the place which need waiting for loading.
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
-| size | Set the size of avatar | Enum{ 'large', 'small', 'default' } | - |
+| size | Set the size of avatar | number \| Enum{ 'large', 'small', 'default' } | - |
 | shape | Set the shape of avatar | Enum{ 'circle', 'square' } | - |
 
 ### SkeletonTitleProps

components/skeleton/index.zh-CN.md

@@ -31,7 +31,7 @@ cols: 1
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| size | 设置头像占位图的大小 | Enum{ 'large', 'small', 'default' } | - |
+| size | 设置头像占位图的大小 | number \| Enum{ 'large', 'small', 'default' } | - |
 | shape | 指定头像的形状 | Enum{ 'circle', 'square' } | - |
 
 ### SkeletonTitleProps