From 3e990f8d797bc36fb6aaae8d168dec95f9ac1511 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sun, 15 Nov 2020 08:56:32 +0800
Subject: [PATCH] feat(Skeleton): add @skeleton-title-width less var (#7557)

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

diff --git a/src/skeleton/index.less b/src/skeleton/index.less
index 4cf5dfd6d..38e56ff68 100644
--- a/src/skeleton/index.less
+++ b/src/skeleton/index.less
@@ -31,6 +31,7 @@
   }
 
   &__title {
+    width: @skeleton-title-width;
     margin: 0;
   }
 
diff --git a/src/skeleton/index.tsx b/src/skeleton/index.tsx
index 2c4b13752..bc8383ab9 100644
--- a/src/skeleton/index.tsx
+++ b/src/skeleton/index.tsx
@@ -13,9 +13,9 @@ export type SkeletonProps = {
   avatar?: boolean;
   loading: boolean;
   animate: boolean;
-  avatarSize: number | string;
+  titleWidth?: number | string;
+  avatarSize?: number | string;
   avatarShape: 'square' | 'round';
-  titleWidth: number | string;
   rowWidth: number | string | (number | string)[];
 };
 
@@ -96,6 +96,7 @@ Skeleton.props = {
   title: Boolean,
   round: Boolean,
   avatar: Boolean,
+  titleWidth: [Number, String],
   avatarSize: [Number, String],
   row: {
     type: [Number, String],
@@ -113,10 +114,6 @@ Skeleton.props = {
     type: String,
     default: 'round',
   },
-  titleWidth: {
-    type: [Number, String],
-    default: '40%',
-  },
   rowWidth: {
     type: [Number, String, Array],
     default: DEFAULT_ROW_WIDTH,
diff --git a/src/skeleton/test/__snapshots__/demo.spec.js.snap b/src/skeleton/test/__snapshots__/demo.spec.js.snap
index d444eb00b..5efd62c2a 100644
--- a/src/skeleton/test/__snapshots__/demo.spec.js.snap
+++ b/src/skeleton/test/__snapshots__/demo.spec.js.snap
@@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-skeleton van-skeleton--animate">
       <div class="van-skeleton__content">
-        <h3 class="van-skeleton__title" style="width: 40%;"></h3>
+        <h3 class="van-skeleton__title"></h3>
         <div class="van-skeleton__row" style="width: 100%;"></div>
         <div class="van-skeleton__row" style="width: 100%;"></div>
         <div class="van-skeleton__row" style="width: 60%;"></div>
@@ -16,7 +16,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-skeleton van-skeleton--animate">
       <div class="van-skeleton__avatar van-skeleton__avatar--round"></div>
       <div class="van-skeleton__content">
-        <h3 class="van-skeleton__title" style="width: 40%;"></h3>
+        <h3 class="van-skeleton__title"></h3>
         <div class="van-skeleton__row" style="width: 100%;"></div>
         <div class="van-skeleton__row" style="width: 100%;"></div>
         <div class="van-skeleton__row" style="width: 60%;"></div>
@@ -30,7 +30,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-skeleton van-skeleton--animate">
       <div class="van-skeleton__avatar van-skeleton__avatar--round"></div>
       <div class="van-skeleton__content">
-        <h3 class="van-skeleton__title" style="width: 40%;"></h3>
+        <h3 class="van-skeleton__title"></h3>
         <div class="van-skeleton__row" style="width: 100%;"></div>
         <div class="van-skeleton__row" style="width: 100%;"></div>
         <div class="van-skeleton__row" style="width: 60%;"></div>
diff --git a/src/skeleton/test/__snapshots__/index.spec.js.snap b/src/skeleton/test/__snapshots__/index.spec.js.snap
index 0e75e9c6a..c6b34a297 100644
--- a/src/skeleton/test/__snapshots__/index.spec.js.snap
+++ b/src/skeleton/test/__snapshots__/index.spec.js.snap
@@ -21,7 +21,7 @@ exports[`round prop 1`] = `
 <div class="van-skeleton van-skeleton--animate van-skeleton--round">
   <div class="van-skeleton__avatar van-skeleton__avatar--round"></div>
   <div class="van-skeleton__content">
-    <h3 class="van-skeleton__title" style="width: 40%;"></h3>
+    <h3 class="van-skeleton__title"></h3>
   </div>
 </div>
 `;
diff --git a/src/style/var.less b/src/style/var.less
index 1fbaf7fc6..df5fe7ffb 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-title-width: 40%;
 @skeleton-avatar-size: 32px;
 @skeleton-avatar-background-color: @active-color;
 @skeleton-animation-duration: 1.2s;