feat: skeleton add avatar support number type

build/config.js

@@ -1,5 +1,5 @@
 module.exports = {
   dev: {
-    componentName: 'radio', // dev components
+    componentName: 'skeleton', // dev components
   },
 };

components/skeleton/Avatar.jsx

@@ -4,7 +4,7 @@ import { initDefaultProps } from '../_util/props-util';
 
 const skeletonAvatarProps = {
   prefixCls: PropTypes.string,
-  size: PropTypes.oneOf(['large', 'small', 'default']),
+  size: PropTypes.oneOfType([PropTypes.oneOf(['large', 'small', 'default']), PropTypes.number]),
   shape: PropTypes.oneOf(['circle', 'square']),
 };
 
@@ -27,7 +27,16 @@ const Avatar = {
       [`${prefixCls}-square`]: shape === 'square',
     });
 
-    return <span class={classNames(prefixCls, sizeCls, shapeCls)} />;
+    const sizeStyle =
+      typeof size === 'number'
+        ? {
+            width: `${size}px`,
+            height: `${size}px`,
+            lineHeight: `${size}px`,
+          }
+        : {};
+
+    return <span class={classNames(prefixCls, sizeCls, shapeCls)} style={sizeStyle} />;
   },
 };
 

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

@@ -59,8 +59,12 @@ exports[`renders ./components/skeleton/demo/list.md correctly 1`] = `
   <div class="ant-list ant-list-vertical ant-list-lg ant-list-split">
     <div class="ant-spin-nested-loading">
       <div class="ant-spin-container">
-        <div class="ant-list-item">
+        <ul class="ant-list-items">
-          <div class="ant-list-item-content ant-list-item-content-single">
+          <li class="ant-list-item ant-list-item-no-flex">
+            <!---->
+            <!---->
+            <!---->
+            <!---->
             <div class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active">
               <div class="ant-skeleton-header"><span class="ant-skeleton-avatar ant-skeleton-avatar-lg ant-skeleton-avatar-circle"></span></div>
               <div class="ant-skeleton-content">
@@ -71,10 +75,12 @@ exports[`renders ./components/skeleton/demo/list.md correctly 1`] = `
                 </ul>
               </div>
             </div>
-          </div>
+          </li>
-        </div>
+          <li class="ant-list-item ant-list-item-no-flex">
-        <div class="ant-list-item">
+            <!---->
-          <div class="ant-list-item-content ant-list-item-content-single">
+            <!---->
+            <!---->
+            <!---->
             <div class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active">
               <div class="ant-skeleton-header"><span class="ant-skeleton-avatar ant-skeleton-avatar-lg ant-skeleton-avatar-circle"></span></div>
               <div class="ant-skeleton-content">
@@ -85,10 +91,12 @@ exports[`renders ./components/skeleton/demo/list.md correctly 1`] = `
                 </ul>
               </div>
             </div>
-          </div>
+          </li>
-        </div>
+          <li class="ant-list-item ant-list-item-no-flex">
-        <div class="ant-list-item">
+            <!---->
-          <div class="ant-list-item-content ant-list-item-content-single">
+            <!---->
+            <!---->
+            <!---->
             <div class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active">
               <div class="ant-skeleton-header"><span class="ant-skeleton-avatar ant-skeleton-avatar-lg ant-skeleton-avatar-circle"></span></div>
               <div class="ant-skeleton-content">
@@ -99,8 +107,8 @@ exports[`renders ./components/skeleton/demo/list.md correctly 1`] = `
                 </ul>
               </div>
             </div>
-          </div>
+          </li>
-        </div>
+        </ul>
       </div>
     </div>
   </div>

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

@@ -65,6 +65,19 @@ 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;"></span></div>
+  <div class="ant-skeleton-content">
+    <h3 class="ant-skeleton-title" style="width: 50%;"></h3>
+    <ul class="ant-skeleton-paragraph">
+      <li></li>
+      <li></li>
+    </ul>
+  </div>
+</div>
+`;
+
 exports[`Skeleton paragraph rows 1`] = `
 <div class="ant-skeleton">
   <div class="ant-skeleton-content">

components/skeleton/__tests__/index.test.js

@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { asyncExpect } from '@/tests/utils';
 import Skeleton from '..';
+import mountTest from '../../../tests/shared/mountTest';
 
 describe('Skeleton', () => {
   const genSkeleton = props => {
@@ -16,7 +17,7 @@ describe('Skeleton', () => {
     };
     return mount(Skeleton, skeletonProps);
   };
-
+  mountTest(Skeleton);
   describe('avatar', () => {
     it('size', async () => {
       const wrapperSmall = genSkeleton({ avatar: { size: 'small' } });
@@ -35,6 +36,12 @@ describe('Skeleton', () => {
       await asyncExpect(() => {
         expect(wrapperLarge.html()).toMatchSnapshot();
       });
+
+      const wrapperNumber = genSkeleton({ avatar: { size: 20 } });
+
+      await asyncExpect(() => {
+        expect(wrapperNumber.html()).toMatchSnapshot();
+      });
     });
 
     it('shape', async () => {

components/skeleton/demo/index.vue

@@ -16,15 +16,21 @@ const md = {
 
 - 网络较慢，需要长时间等待加载处理的情况下。
 - 图文信息内容较多的列表/卡片中。
+- 只在第一次加载数据的时候使用。
+- 可以被 Spin 完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。
+
             ## 代码演示`,
   us: `# Skeleton
 
-  Provide a placeholder at the place which need waiting for loading.
+  Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.
 
-  # When To Use
+## When To Use
+
+- When a resource needs long time to load.
+- When the component contains lots of information, such as List or Card.
+- Only works when loading data for the first time.
+- Could be replaced by Spin in any situation, but can provide a better user experience.
 
-  - When resource needs long time to load, like low network speed.
-  - The component contains much information. Such as List or Card.
   ## Examples
   `,
 };

components/skeleton/index.en-US.md

@@ -13,8 +13,8 @@
 ### SkeletonAvatarProps
 
 | 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

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

types/skeleton.d.ts

@@ -5,7 +5,7 @@
 import { AntdComponent } from './component';
 
 export interface SkeletonAvatarProps {
-  size?: 'large' | 'small' | 'default';
+  size?: 'large' | 'small' | 'default' | number;
   shape?: 'circle' | 'square';
 }