style(Skeleton): remove default children of Skeleton.Node (#50278)

* style(Skeleton): remove default children of Skeleton.Node

* style(Skeleton): remove default children of Skeleton.Node

* Update components/skeleton/style/index.ts

Co-authored-by: lijianan <574980606@qq.com>
Signed-off-by: afc163 <afc163@gmail.com>

---------

Signed-off-by: afc163 <afc163@gmail.com>
Co-authored-by: lijianan <574980606@qq.com>

components/skeleton/Node.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import DotChartOutlined from '@ant-design/icons/DotChartOutlined';
 import classNames from 'classnames';
 
 import { ConfigContext } from '../config-provider';
@@ -36,12 +35,10 @@ const SkeletonNode: React.FC<SkeletonNodeProps> = (props) => {
     cssVarCls,
   );
 
-  const content = children ?? <DotChartOutlined />;
-
   return wrapCSSVar(
     <div className={cls}>
       <div className={classNames(`${prefixCls}-image`, className)} style={style}>
-        {content}
+        {children}
       </div>
     </div>,
   );

components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -145,7 +145,9 @@ exports[`renders components/skeleton/demo/componentToken.tsx extend context corr
 exports[`renders components/skeleton/demo/componentToken.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/skeleton/demo/element.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
   <div
     class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
   >
@@ -182,27 +184,21 @@ Array [
         />
       </div>
     </div>
-  </div>,
+  </div>
-  <br />,
-  <br />,
   <div
     class="ant-skeleton ant-skeleton-element"
   >
     <span
       class="ant-skeleton-button"
     />
-  </div>,
+  </div>
-  <br />,
-  <br />,
   <div
     class="ant-skeleton ant-skeleton-element"
   >
     <span
       class="ant-skeleton-input"
     />
-  </div>,
+  </div>
-  <br />,
-  <br />,
   <div
     class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
   >
@@ -231,6 +227,18 @@ Array [
         </div>
       </div>
     </div>
+    <div
+      class="ant-space-item"
+    >
+      <div
+        class="ant-skeleton ant-skeleton-element"
+      >
+        <div
+          class="ant-skeleton-image"
+          style="width: 160px;"
+        />
+      </div>
+    </div>
     <div
       class="ant-space-item"
     >
@@ -263,11 +271,11 @@ Array [
         </div>
       </div>
     </div>
-  </div>,
+  </div>
   <div
     class="ant-divider ant-divider-horizontal"
     role="separator"
-  />,
+  />
   <form
     class="ant-form ant-form-inline"
     style="margin: 16px 0px;"
@@ -673,8 +681,8 @@ Array [
         </div>
       </div>
     </div>
-  </form>,
+  </form>
-]
+</div>
 `;
 
 exports[`renders components/skeleton/demo/element.tsx extend context correctly 2`] = `[]`;

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

@@ -135,7 +135,9 @@ exports[`renders components/skeleton/demo/componentToken.tsx correctly 1`] = `
 `;
 
 exports[`renders components/skeleton/demo/element.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
   <div
     class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
   >
@@ -172,27 +174,21 @@ Array [
         />
       </div>
     </div>
-  </div>,
+  </div>
-  <br />,
-  <br />,
   <div
     class="ant-skeleton ant-skeleton-element"
   >
     <span
       class="ant-skeleton-button"
     />
-  </div>,
+  </div>
-  <br />,
-  <br />,
   <div
     class="ant-skeleton ant-skeleton-element"
   >
     <span
       class="ant-skeleton-input"
     />
-  </div>,
+  </div>
-  <br />,
-  <br />,
   <div
     class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
   >
@@ -221,6 +217,18 @@ Array [
         </div>
       </div>
     </div>
+    <div
+      class="ant-space-item"
+    >
+      <div
+        class="ant-skeleton ant-skeleton-element"
+      >
+        <div
+          class="ant-skeleton-image"
+          style="width:160px"
+        />
+      </div>
+    </div>
     <div
       class="ant-space-item"
     >
@@ -253,11 +261,11 @@ Array [
         </div>
       </div>
     </div>
-  </div>,
+  </div>
   <div
     class="ant-divider ant-divider-horizontal"
     role="separator"
-  />,
+  />
   <form
     class="ant-form ant-form-inline"
     style="margin:16px 0"
@@ -663,8 +671,8 @@ Array [
         </div>
       </div>
     </div>
-  </form>,
+  </form>
-]
+</div>
 `;
 
 exports[`renders components/skeleton/demo/list.tsx correctly 1`] = `

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

@@ -326,27 +326,7 @@ exports[`Skeleton custom node element should render normal 1`] = `
 >
   <div
     class="ant-skeleton-image"
-  >
+  />
-    <span
-      aria-label="dot-chart"
-      class="anticon anticon-dot-chart"
-      role="img"
-    >
-      <svg
-        aria-hidden="true"
-        data-icon="dot-chart"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M888 792H200V168c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h752c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM288 604a64 64 0 10128 0 64 64 0 10-128 0zm118-224a48 48 0 1096 0 48 48 0 10-96 0zm158 228a96 96 0 10192 0 96 96 0 10-192 0zm148-314a56 56 0 10112 0 56 56 0 10-112 0z"
-        />
-      </svg>
-    </span>
-  </div>
 </div>
 `;
 

components/skeleton/demo/element.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { DotChartOutlined } from '@ant-design/icons';
 import type { RadioChangeEvent } from 'antd';
-import { Divider, Form, Radio, Skeleton, Space, Switch } from 'antd';
+import { Flex, Divider, Form, Radio, Skeleton, Space, Switch } from 'antd';
 
 type SizeType = 'default' | 'small' | 'large';
 type ButtonShapeType = 'circle' | 'square' | 'round' | 'default';
@@ -35,22 +35,17 @@ const App: React.FC = () => {
   };
 
   return (
-    <>
+    <Flex gap="middle" vertical>
       <Space>
         <Skeleton.Button active={active} size={size} shape={buttonShape} block={block} />
         <Skeleton.Avatar active={active} size={size} shape={avatarShape} />
         <Skeleton.Input active={active} size={size} />
       </Space>
-      <br />
-      <br />
       <Skeleton.Button active={active} size={size} shape={buttonShape} block={block} />
-      <br />
-      <br />
       <Skeleton.Input active={active} size={size} block={block} />
-      <br />
-      <br />
       <Space>
         <Skeleton.Image active={active} />
+        <Skeleton.Node active={active} style={{ width: 160 }} />
         <Skeleton.Node active={active}>
           <DotChartOutlined style={{ fontSize: 40, color: '#bfbfbf' }} />
         </Skeleton.Node>
@@ -87,7 +82,7 @@ const App: React.FC = () => {
           </Form.Item>
         </Space>
       </Form>
-    </>
+    </Flex>
   );
 };
 

components/skeleton/style/index.ts

@@ -146,11 +146,11 @@ const genSkeletonElementImageSize = (size: number | string): CSSObject => ({
 const genSkeletonElementImage = (token: SkeletonToken): CSSObject => {
   const { skeletonImageCls, imageSizeBase, gradientFromColor, borderRadiusSM, calc } = token;
   return {
-    [`${skeletonImageCls}`]: {
+    [skeletonImageCls]: {
-      display: 'flex',
+      display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
-      verticalAlign: 'top',
+      verticalAlign: 'middle',
       background: gradientFromColor,
       borderRadius: borderRadiusSM,
       ...genSkeletonElementImageSize(calc(imageSizeBase).mul(2).equal()),