docs: fix Skeleton style and demo layout (#38625)

* docs: fix skeleton demo style

* docs: update skeleton demo

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
+Array [
-  class="article"
+  <h4
->
+    style="margin-bottom:16px"
-  <div>
+  >
-    <h4>
+    Ant Design, a design language
-      Ant Design, a design language
+  </h4>,
-    </h4>
+  <p
-    <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>
+    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.
-  </div>
+  </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>
+  </button>,
-</div>
+]
 `;
 
 exports[`renders ./components/skeleton/demo/complex.tsx extend context correctly 1`] = `

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
+Array [
-  class="article"
+  <h4
->
+    style="margin-bottom:16px"
-  <div>
+  >
-    <h4>
+    Ant Design, a design language
-      Ant Design, a design language
+  </h4>,
-    </h4>
+  <p
-    <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>
+    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.
-  </div>
+  </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>
+  </button>,
-</div>
+]
 `;
 
 exports[`renders ./components/skeleton/demo/complex.tsx correctly 1`] = `

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>

components/skeleton/demo/children.tsx

@@ -13,21 +13,19 @@ const App: React.FC = () => {
   };
 
   return (
-    <div className="article">
+    <>
       <Skeleton loading={loading}>
-        <div>
+        <h4 style={{ marginBottom: 16 }}>Ant Design, a design language</h4>
-          <h4>Ant Design, a design language</h4>
+        <p style={{ marginBottom: 16 }}>
-          <p>
+          We supply a series of design principles, practical patterns and high quality design
-            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
-            resources (Sketch and Axure), to help people create their product prototypes beautifully
+          and efficiently.
-            and efficiently.
+        </p>
-          </p>
-        </div>
       </Skeleton>
       <Button onClick={showSkeleton} disabled={loading}>
         Show Skeleton
       </Button>
-    </div>
+    </>
   );
 };
 

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
 

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 {