From 3f4e0a04c5353582bca2ad32ce82be2803744d83 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sun, 15 Nov 2020 08:52:50 +0800
Subject: [PATCH] feat(Skeleton): add @skeleton-avatar-size less var (#7556)

---
 src/skeleton/index.less                            | 2 ++
 src/skeleton/index.tsx                             | 5 +----
 src/skeleton/test/__snapshots__/demo.spec.js.snap  | 4 ++--
 src/skeleton/test/__snapshots__/index.spec.js.snap | 2 +-
 src/style/var.less                                 | 1 +
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/skeleton/index.less b/src/skeleton/index.less
index 95ab87c47..4cf5dfd6d 100644
--- a/src/skeleton/index.less
+++ b/src/skeleton/index.less
@@ -6,6 +6,8 @@
 
   &__avatar {
     flex-shrink: 0;
+    width: @skeleton-avatar-size;
+    height: @skeleton-avatar-size;
     margin-right: @padding-md;
     background-color: @skeleton-avatar-background-color;
 
diff --git a/src/skeleton/index.tsx b/src/skeleton/index.tsx
index 549546cc3..2c4b13752 100644
--- a/src/skeleton/index.tsx
+++ b/src/skeleton/index.tsx
@@ -96,6 +96,7 @@ Skeleton.props = {
   title: Boolean,
   round: Boolean,
   avatar: Boolean,
+  avatarSize: [Number, String],
   row: {
     type: [Number, String],
     default: 0,
@@ -108,10 +109,6 @@ Skeleton.props = {
     type: Boolean,
     default: true,
   },
-  avatarSize: {
-    type: [Number, String],
-    default: '32px',
-  },
   avatarShape: {
     type: String,
     default: 'round',
diff --git a/src/skeleton/test/__snapshots__/demo.spec.js.snap b/src/skeleton/test/__snapshots__/demo.spec.js.snap
index 785a20ad3..d444eb00b 100644
--- a/src/skeleton/test/__snapshots__/demo.spec.js.snap
+++ b/src/skeleton/test/__snapshots__/demo.spec.js.snap
@@ -14,7 +14,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-skeleton van-skeleton--animate">
-      <div class="van-skeleton__avatar van-skeleton__avatar--round" style="width: 32px; height: 32px;"></div>
+      <div class="van-skeleton__avatar van-skeleton__avatar--round"></div>
       <div class="van-skeleton__content">
         <h3 class="van-skeleton__title" style="width: 40%;"></h3>
         <div class="van-skeleton__row" style="width: 100%;"></div>
@@ -28,7 +28,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-switch__node"></div>
     </div>
     <div class="van-skeleton van-skeleton--animate">
-      <div class="van-skeleton__avatar van-skeleton__avatar--round" style="width: 32px; height: 32px;"></div>
+      <div class="van-skeleton__avatar van-skeleton__avatar--round"></div>
       <div class="van-skeleton__content">
         <h3 class="van-skeleton__title" style="width: 40%;"></h3>
         <div class="van-skeleton__row" style="width: 100%;"></div>
diff --git a/src/skeleton/test/__snapshots__/index.spec.js.snap b/src/skeleton/test/__snapshots__/index.spec.js.snap
index 0ffcccc95..0e75e9c6a 100644
--- a/src/skeleton/test/__snapshots__/index.spec.js.snap
+++ b/src/skeleton/test/__snapshots__/index.spec.js.snap
@@ -19,7 +19,7 @@ exports[`render chidren 1`] = `<div>Content</div>`;
 
 exports[`round prop 1`] = `
 <div class="van-skeleton van-skeleton--animate van-skeleton--round">
-  <div class="van-skeleton__avatar van-skeleton__avatar--round" style="width: 32px; height: 32px;"></div>
+  <div class="van-skeleton__avatar van-skeleton__avatar--round"></div>
   <div class="van-skeleton__content">
     <h3 class="van-skeleton__title" style="width: 40%;"></h3>
   </div>
diff --git a/src/style/var.less b/src/style/var.less
index 92f0481e1..1fbaf7fc6 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -648,6 +648,7 @@
 @skeleton-row-height: 16px;
 @skeleton-row-background-color: @active-color;
 @skeleton-row-margin-top: @padding-sm;
+@skeleton-avatar-size: 32px;
 @skeleton-avatar-background-color: @active-color;
 @skeleton-animation-duration: 1.2s;