From e597fe8ec6d9c3a6cb2982a511790b957d0f1bf4 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Fri, 6 Jan 2023 09:46:00 +0800
Subject: [PATCH] fix: Button block prop not work (#39992)

* fix: Button block prop not work

* fix

* remove auto

* update demo

* fix

* fix

* fix width

* fix

* update demo
---
 .../__snapshots__/demo-extend.test.ts.snap    | 56 +++++++++++++++++++
 .../__tests__/__snapshots__/demo.test.ts.snap | 56 +++++++++++++++++++
 components/button/demo/debug-block.md         |  7 +++
 components/button/demo/debug-block.tsx        | 14 +++++
 components/button/index.en-US.md              |  1 +
 components/button/index.zh-CN.md              |  1 +
 components/button/style/index.ts              | 31 ++++++----
 7 files changed, 154 insertions(+), 12 deletions(-)
 create mode 100644 components/button/demo/debug-block.md
 create mode 100644 components/button/demo/debug-block.tsx

diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
index 7a5635f723..dc6ab5dbae 100644
--- a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -423,6 +423,62 @@ exports[`renders ./components/button/demo/danger.tsx extend context correctly 1`
 </div>
 `;
 
+exports[`renders ./components/button/demo/debug-block.tsx extend context correctly 1`] = `
+<div
+  class="ant-form-item"
+>
+  <div
+    class="ant-row ant-form-item-row"
+  >
+    <div
+      class="ant-col ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <button
+            class="ant-btn ant-btn-round ant-btn-default ant-btn-lg ant-btn-block"
+            style="margin-bottom:12px"
+            type="button"
+          >
+            <span>
+              Submit
+            </span>
+          </button>
+          <button
+            class="ant-btn ant-btn-round ant-btn-default ant-btn-lg ant-btn-icon-only"
+            type="button"
+          >
+            <span
+              aria-label="download"
+              class="anticon anticon-download"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="download"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/button/demo/debug-icon.tsx extend context correctly 1`] = `
 Array [
   <div
diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap
index bccc44cb43..469205ee35 100644
--- a/components/button/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo.test.ts.snap
@@ -423,6 +423,62 @@ exports[`renders ./components/button/demo/danger.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/button/demo/debug-block.tsx correctly 1`] = `
+<div
+  class="ant-form-item"
+>
+  <div
+    class="ant-row ant-form-item-row"
+  >
+    <div
+      class="ant-col ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <button
+            class="ant-btn ant-btn-round ant-btn-default ant-btn-lg ant-btn-block"
+            style="margin-bottom:12px"
+            type="button"
+          >
+            <span>
+              Submit
+            </span>
+          </button>
+          <button
+            class="ant-btn ant-btn-round ant-btn-default ant-btn-lg ant-btn-icon-only"
+            type="button"
+          >
+            <span
+              aria-label="download"
+              class="anticon anticon-download"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="download"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/button/demo/debug-icon.tsx correctly 1`] = `
 Array [
   <div
diff --git a/components/button/demo/debug-block.md b/components/button/demo/debug-block.md
new file mode 100644
index 0000000000..c0c0fc5dc7
--- /dev/null
+++ b/components/button/demo/debug-block.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+调试使用
+
+## en-US
+
+Debug usage
diff --git a/components/button/demo/debug-block.tsx b/components/button/demo/debug-block.tsx
new file mode 100644
index 0000000000..8f82139760
--- /dev/null
+++ b/components/button/demo/debug-block.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Form, Button } from 'antd';
+import { DownloadOutlined } from '@ant-design/icons';
+
+const App: React.FC = () => (
+  <Form.Item>
+    <Button size="large" shape="round" block style={{ marginBottom: 12 }}>
+      Submit
+    </Button>
+    <Button size="large" shape="round" icon={<DownloadOutlined />} />
+  </Form.Item>
+);
+
+export default App;
diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md
index 335f642585..0cdc009294 100644
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@@ -36,6 +36,7 @@ And 4 other properties additionally.
 <code src="./demo/basic.tsx">Type</code>
 <code src="./demo/icon.tsx">Icon</code>
 <code src="./demo/debug-icon.tsx" debug>Debug Icon</code>
+<code src="./demo/debug-block.tsx" debug>Debug Block</code>
 <code src="./demo/size.tsx">Size</code>
 <code src="./demo/disabled.tsx">Disabled</code>
 <code src="./demo/loading.tsx">Loading</code>
diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md
index 907ae592cc..e79e9850e9 100644
--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@@ -39,6 +39,7 @@ group:
 <code src="./demo/basic.tsx">按钮类型</code>
 <code src="./demo/icon.tsx">图标按钮</code>
 <code src="./demo/debug-icon.tsx" debug>调试图标按钮</code>
+<code src="./demo/debug-block.tsx" debug>调试按钮block属性</code>
 <code src="./demo/size.tsx">按钮尺寸</code>
 <code src="./demo/disabled.tsx">不可用状态</code>
 <code src="./demo/loading.tsx">加载中状态</code>
diff --git a/components/button/style/index.ts b/components/button/style/index.ts
index 574b9a6133..59142b72c8 100644
--- a/components/button/style/index.ts
+++ b/components/button/style/index.ts
@@ -113,7 +113,6 @@ const genRoundButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
   borderRadius: token.controlHeight,
   paddingInlineStart: token.controlHeight / 2,
   paddingInlineEnd: token.controlHeight / 2,
-  width: 'auto',
 });
 
 // =============================== Type ===============================
@@ -390,13 +389,19 @@ const genTypeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
 
 // =============================== Size ===============================
 const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSSInterpolation => {
-  const { componentCls, iconCls } = token;
+  const {
+    componentCls,
+    iconCls,
+    controlHeight,
+    fontSize,
+    lineHeight,
+    lineWidth,
+    borderRadius,
+    buttonPaddingHorizontal,
+  } = token;
 
-  const paddingVertical = Math.max(
-    0,
-    (token.controlHeight - token.fontSize * token.lineHeight) / 2 - token.lineWidth,
-  );
-  const paddingHorizontal = token.buttonPaddingHorizontal - token.lineWidth;
+  const paddingVertical = Math.max(0, (controlHeight - fontSize * lineHeight) / 2 - lineWidth);
+  const paddingHorizontal = buttonPaddingHorizontal - lineWidth;
 
   const iconOnlyCls = `${componentCls}-icon-only`;
 
@@ -404,16 +409,18 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSS
     // Size
     {
       [`${componentCls}${sizePrefixCls}`]: {
-        fontSize: token.fontSize,
-        height: token.controlHeight,
+        fontSize,
+        height: controlHeight,
         padding: `${paddingVertical}px ${paddingHorizontal}px`,
-        borderRadius: token.borderRadius,
+        borderRadius,
 
         [`&${iconOnlyCls}`]: {
-          width: token.controlHeight,
+          width: controlHeight,
           paddingInlineStart: 0,
           paddingInlineEnd: 0,
-
+          [`&${componentCls}-round`]: {
+            width: 'auto',
+          },
           '> span': {
             transform: 'scale(1.143)', // 14px -> 16px
           },