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
2025-06-07 01:13:58 +08:00 · 2023-01-06 09:46:00 +08:00 · 2023-01-06 09:46:00 +08:00 · e597fe8ec6
commit e597fe8ec6
parent ae67ad20c5
7 changed files with 154 additions and 12 deletions
--- 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
--- 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
--- a/components/button/demo/debug-block.md
+++ b/components/button/demo/debug-block.md
@ -0,0 +1,7 @@
+## zh-CN
+
+调试使用
+
+## en-US
+
+Debug usage
--- a/components/button/demo/debug-block.tsx
+++ 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;
--- 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>
--- 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>
--- 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
          },