feat: add skeleton btn block (#30902)

close #30832

components/skeleton/Button.tsx

@@ -6,11 +6,12 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 
 export interface SkeletonButtonProps extends Omit<SkeletonElementProps, 'size'> {
   size?: 'large' | 'small' | 'default';
+  block?: boolean;
 }
 
 const SkeletonButton = (props: SkeletonButtonProps) => {
   const renderSkeletonButton = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { prefixCls: customizePrefixCls, className, active } = props;
+    const { prefixCls: customizePrefixCls, className, active, block = false } = props;
     const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
     const otherProps = omit(props, ['prefixCls']);
     const cls = classNames(
@@ -18,6 +19,7 @@ const SkeletonButton = (props: SkeletonButtonProps) => {
       `${prefixCls}-element`,
       {
         [`${prefixCls}-active`]: active,
+        [`${prefixCls}-block`]: block,
       },
       className,
     );

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

@@ -118,18 +118,6 @@ Array [
         />
       </div>
     </div>
-    <div
-      class="ant-space-item"
-      style="margin-right:8px"
-    >
-      <div
-        class="ant-skeleton ant-skeleton-element"
-      >
-        <span
-          class="ant-skeleton-button"
-        />
-      </div>
-    </div>
     <div
       class="ant-space-item"
       style="margin-right:8px"
@@ -157,6 +145,15 @@ Array [
   </div>,
   <br />,
   <br />,
+  <div
+    class="ant-skeleton ant-skeleton-element"
+  >
+    <span
+      class="ant-skeleton-button"
+    />
+  </div>,
+  <br />,
+  <br />,
   <div
     class="ant-skeleton ant-skeleton-element"
   >
@@ -222,6 +219,45 @@ Array [
         </div>
       </div>
     </div>
+    <div
+      class="ant-row ant-form-item"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Button Block"
+        >
+          Button Block
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <button
+              aria-checked="false"
+              class="ant-switch"
+              role="switch"
+              type="button"
+            >
+              <div
+                class="ant-switch-handle"
+              />
+              <span
+                class="ant-switch-inner"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
     <div
       class="ant-row ant-form-item"
     >

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

@@ -250,6 +250,16 @@ exports[`Skeleton button element active 1`] = `
 </div>
 `;
 
+exports[`Skeleton button element block 1`] = `
+<div
+  class="ant-skeleton ant-skeleton-element ant-skeleton-block"
+>
+  <span
+    class="ant-skeleton-button"
+  />
+</div>
+`;
+
 exports[`Skeleton button element shape 1`] = `
 <div
   class="ant-skeleton ant-skeleton-element"

components/skeleton/__tests__/index.test.js

@@ -80,6 +80,10 @@ describe('Skeleton', () => {
       const wrapper = genSkeletonButton({ active: true });
       expect(wrapper.render()).toMatchSnapshot();
     });
+    it('block', () => {
+      const wrapper = genSkeletonButton({ block: true });
+      expect(wrapper.render()).toMatchSnapshot();
+    });
     it('size', () => {
       const wrapperDefault = genSkeletonButton({ size: 'default' });
       expect(wrapperDefault.render()).toMatchSnapshot();

components/skeleton/demo/element.md

@@ -19,6 +19,7 @@ import { Skeleton, Space, Divider, Switch, Form, Radio } from 'antd';
 class Demo extends React.Component {
   state = {
     active: false,
+    block: false,
     size: 'default',
     buttonShape: 'default',
     avatarShape: 'circle',
@@ -28,6 +29,10 @@ class Demo extends React.Component {
     this.setState({ active: checked });
   };
 
+  handleBlockChange = checked => {
+    this.setState({ block: checked });
+  };
+
   handleSizeChange = e => {
     this.setState({ size: e.target.value });
   };
@@ -37,23 +42,28 @@ class Demo extends React.Component {
   };
 
   render() {
-    const { active, size, buttonShape, avatarShape } = this.state;
+    const { active, size, buttonShape, avatarShape, block } = this.state;
     return (
       <>
         <Space>
-          <Skeleton.Button active={active} size={size} shape={buttonShape} />
-          <Skeleton.Button active={active} size={size} shape={buttonShape} />
+          <Skeleton.Button active={active} size={size} shape={buttonShape} block={block} />
           <Skeleton.Avatar active={active} size={size} shape={avatarShape} />
           <Skeleton.Input style={{ width: 200 }} active={active} size={size} />
         </Space>
         <br />
         <br />
+        <Skeleton.Button active={active} size={size} shape={buttonShape} block={block} />
+        <br />
+        <br />
         <Skeleton.Image />
         <Divider />
         <Form layout="inline" style={{ margin: '16px 0' }}>
           <Form.Item label="Active">
             <Switch checked={active} onChange={this.handleActiveChange} />
           </Form.Item>
+          <Form.Item label="Button Block">
+            <Switch checked={block} onChange={this.handleBlockChange} />
+          </Form.Item>
           <Form.Item label="Size">
             <Radio.Group value={size} onChange={this.handleSizeChange}>
               <Radio.Button value="default">Default</Radio.Button>

components/skeleton/index.en-US.md

@@ -38,9 +38,9 @@ Provide a placeholder while you wait for content to load, or to visualise conten
 
 ### SkeletonTitleProps
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| width | Set the width of title | number \| string | - |
+| Property | Description            | Type             | Default |
+| -------- | ---------------------- | ---------------- | ------- |
+| width    | Set the width of title | number \| string | -       |
 
 ### SkeletonParagraphProps
 
@@ -54,12 +54,13 @@ Provide a placeholder while you wait for content to load, or to visualise conten
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | active | Show animation effect | boolean | false |
+| block | Option to fit button width to its parent width | boolean | false |
 | shape | Set the shape of button | `circle` \| `round` \| `default` | - |
 | size | Set the size of button | `large` \| `small` \| `default` | - |
 
 ### SkeletonInputProps
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| active | Show animation effect | boolean | false |
-| size | Set the size of input | `large` \| `small` \| `default` | - |
+| Property | Description           | Type                            | Default |
+| -------- | --------------------- | ------------------------------- | ------- |
+| active   | Show animation effect | boolean                         | false   |
+| size     | Set the size of input | `large` \| `small` \| `default` | -       |

components/skeleton/index.zh-CN.md

@@ -39,9 +39,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/KpcciCJgv/Skeleton.svg
 
 ### SkeletonTitleProps
 
-| 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| width | 设置标题占位图的宽度 | number \| string | - |
+| 属性  | 说明                 | 类型             | 默认值 |
+| ----- | -------------------- | ---------------- | ------ |
+| width | 设置标题占位图的宽度 | number \| string | -      |
 
 ### SkeletonParagraphProps
 
@@ -52,15 +52,16 @@ cover: https://gw.alipayobjects.com/zos/alicdn/KpcciCJgv/Skeleton.svg
 
 ### SkeletonButtonProps
 
-| 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| active | 是否展示动画效果 | boolean | false |
-| shape | 指定按钮的形状 | `circle` \| `round` \| `default` | - |
-| size | 设置按钮的大小 | `large` \| `small` \| `default` | - |
+| 属性   | 说明                           | 类型                             | 默认值 |
+| ------ | ------------------------------ | -------------------------------- | ------ |
+| active | 是否展示动画效果               | boolean                          | false  |
+| block  | 将按钮宽度调整为其父宽度的选项 | boolean                          | false  |
+| shape  | 指定按钮的形状                 | `circle` \| `round` \| `default` | -      |
+| size   | 设置按钮的大小                 | `large` \| `small` \| `default`  | -      |
 
 ### SkeletonInputProps
 
-| 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| active | 是否展示动画效果 | boolean | false |
-| size | 设置输入框的大小 | `large` \| `small` \| `default` | - |
+| 属性   | 说明             | 类型                            | 默认值 |
+| ------ | ---------------- | ------------------------------- | ------ |
+| active | 是否展示动画效果 | boolean                         | false  |
+| size   | 设置输入框的大小 | `large` \| `small` \| `default` | -      |

components/skeleton/style/index.less

@@ -109,6 +109,15 @@
     }
   }
 
+  // Skeleton Block Button
+  &.@{skeleton-prefix-cls}-block {
+    width: 100%;
+
+    .@{skeleton-button-prefix-cls} {
+      width: 100%;
+    }
+  }
+
   // Skeleton element
   &-element {
     display: inline-block;
@@ -214,10 +223,12 @@
 
 .skeleton-element-button-size(@size) {
   width: @size * 2;
+  min-width: @size * 2;
   .skeleton-element-common-size(@size);
 
   &.@{skeleton-button-prefix-cls}-circle {
     width: @size;
+    min-width: @size;
     border-radius: 50%;
   }