From ac1e1c230ba8a7102859eed49b2d3ad281cf4a0c Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 17 Nov 2022 18:49:41 +0800
Subject: [PATCH] docs: fix Skeleton style and demo layout (#38625)

* docs: fix skeleton demo style

* docs: update skeleton demo
---
 .../__snapshots__/demo-extend.test.ts.snap    | 26 +++++++++----------
 .../__tests__/__snapshots__/demo.test.ts.snap | 26 +++++++++----------
 components/skeleton/demo/children.md          |  9 -------
 components/skeleton/demo/children.tsx         | 18 ++++++-------
 components/skeleton/index.en-US.md            |  2 +-
 components/skeleton/style/index.tsx           | 17 +++++++++---
 6 files changed, 48 insertions(+), 50 deletions(-)

diff --git a/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
index 9b4cd086b2..67a6862609 100644
--- a/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -49,17 +49,17 @@ exports[`renders ./components/skeleton/demo/basic.tsx extend context correctly 1
 `;
 
 exports[`renders ./components/skeleton/demo/children.tsx extend context correctly 1`] = `
-<div
-  class="article"
->
-  <div>
-    <h4>
-      Ant Design, a design language
-    </h4>
-    <p>
-      We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
-    </p>
-  </div>
+Array [
+  <h4
+    style="margin-bottom:16px"
+  >
+    Ant Design, a design language
+  </h4>,
+  <p
+    style="margin-bottom:16px"
+  >
+    We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
+  </p>,
   <button
     class="ant-btn ant-btn-default"
     type="button"
@@ -67,8 +67,8 @@ exports[`renders ./components/skeleton/demo/children.tsx extend context correctl
     <span>
       Show Skeleton
     </span>
-  </button>
-</div>
+  </button>,
+]
 `;
 
 exports[`renders ./components/skeleton/demo/complex.tsx extend context correctly 1`] = `
diff --git a/components/skeleton/__tests__/__snapshots__/demo.test.ts.snap b/components/skeleton/__tests__/__snapshots__/demo.test.ts.snap
index 9300a5f080..af90908266 100644
--- a/components/skeleton/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/skeleton/__tests__/__snapshots__/demo.test.ts.snap
@@ -49,17 +49,17 @@ exports[`renders ./components/skeleton/demo/basic.tsx correctly 1`] = `
 `;
 
 exports[`renders ./components/skeleton/demo/children.tsx correctly 1`] = `
-<div
-  class="article"
->
-  <div>
-    <h4>
-      Ant Design, a design language
-    </h4>
-    <p>
-      We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
-    </p>
-  </div>
+Array [
+  <h4
+    style="margin-bottom:16px"
+  >
+    Ant Design, a design language
+  </h4>,
+  <p
+    style="margin-bottom:16px"
+  >
+    We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
+  </p>,
   <button
     class="ant-btn ant-btn-default"
     type="button"
@@ -67,8 +67,8 @@ exports[`renders ./components/skeleton/demo/children.tsx correctly 1`] = `
     <span>
       Show Skeleton
     </span>
-  </button>
-</div>
+  </button>,
+]
 `;
 
 exports[`renders ./components/skeleton/demo/complex.tsx correctly 1`] = `
diff --git a/components/skeleton/demo/children.md b/components/skeleton/demo/children.md
index eae9e9a589..35f59b9706 100644
--- a/components/skeleton/demo/children.md
+++ b/components/skeleton/demo/children.md
@@ -5,12 +5,3 @@
 ## en-US
 
 Skeleton contains sub component.
-
-<style>
-.article h4 {
-  margin-bottom: 16px;
-}
-.article button {
-  margin-top: 16px;
-}
-</style>
diff --git a/components/skeleton/demo/children.tsx b/components/skeleton/demo/children.tsx
index 8f016d17ba..42de8606e0 100644
--- a/components/skeleton/demo/children.tsx
+++ b/components/skeleton/demo/children.tsx
@@ -13,21 +13,19 @@ const App: React.FC = () => {
   };
 
   return (
-    <div className="article">
+    <>
       <Skeleton loading={loading}>
-        <div>
-          <h4>Ant Design, a design language</h4>
-          <p>
-            We supply a series of design principles, practical patterns and high quality design
-            resources (Sketch and Axure), to help people create their product prototypes beautifully
-            and efficiently.
-          </p>
-        </div>
+        <h4 style={{ marginBottom: 16 }}>Ant Design, a design language</h4>
+        <p style={{ marginBottom: 16 }}>
+          We supply a series of design principles, practical patterns and high quality design
+          resources (Sketch and Axure), to help people create their product prototypes beautifully
+          and efficiently.
+        </p>
       </Skeleton>
       <Button onClick={showSkeleton} disabled={loading}>
         Show Skeleton
       </Button>
-    </div>
+    </>
   );
 };
 
diff --git a/components/skeleton/index.en-US.md b/components/skeleton/index.en-US.md
index a99aec0230..1bbe9aa586 100644
--- a/components/skeleton/index.en-US.md
+++ b/components/skeleton/index.en-US.md
@@ -5,7 +5,7 @@ title: Skeleton
 cover: https://gw.alipayobjects.com/zos/alicdn/KpcciCJgv/Skeleton.svg
 ---
 
-Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.
+Provide a placeholder while you wait for content to load, or to visualize content that doesn't exist yet.
 
 ## When To Use
 
diff --git a/components/skeleton/style/index.tsx b/components/skeleton/style/index.tsx
index 6ee9157166..d99f612bd4 100644
--- a/components/skeleton/style/index.tsx
+++ b/components/skeleton/style/index.tsx
@@ -95,12 +95,20 @@ const genSkeletonElementAvatar = (token: SkeletonToken): CSSObject => {
 };
 
 const genSkeletonElementInput = (token: SkeletonToken): CSSObject => {
-  const { controlHeight, skeletonInputCls, controlHeightLG, controlHeightSM, color } = token;
+  const {
+    controlHeight,
+    borderRadiusSM,
+    skeletonInputCls,
+    controlHeightLG,
+    controlHeightSM,
+    color,
+  } = token;
   return {
     [`${skeletonInputCls}`]: {
       display: 'inline-block',
       verticalAlign: 'top',
       background: color,
+      borderRadius: borderRadiusSM,
       ...genSkeletonElementInputSize(controlHeight),
     },
 
@@ -120,7 +128,7 @@ const genSkeletonElementImageSize = (size: number): CSSObject => ({
 });
 
 const genSkeletonElementImage = (token: SkeletonToken): CSSObject => {
-  const { skeletonImageCls, imageSizeBase, color } = token;
+  const { skeletonImageCls, imageSizeBase, color, borderRadiusSM } = token;
   return {
     [`${skeletonImageCls}`]: {
       display: 'flex',
@@ -128,6 +136,7 @@ const genSkeletonElementImage = (token: SkeletonToken): CSSObject => {
       justifyContent: 'center',
       verticalAlign: 'top',
       background: color,
+      borderRadius: borderRadiusSM,
       ...genSkeletonElementImageSize(imageSizeBase * 2),
       [`${skeletonImageCls}-path`]: {
         fill: '#bfbfbf',
@@ -347,7 +356,7 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
 // ============================== Export ==============================
 export default genComponentStyleHook(
   'Skeleton',
-  token => {
+  (token) => {
     const { componentCls } = token;
 
     const skeletonToken = mergeToken<SkeletonToken>(token, {
@@ -368,7 +377,7 @@ export default genComponentStyleHook(
     });
     return [genBaseStyle(skeletonToken)];
   },
-  token => {
+  (token) => {
     const { colorFillContent, colorFill } = token;
 
     return {