fix: fix wrong button icon size and margin (#42516)

2 years ago · 5d53884919
12 changed files with 220 additions and 13 deletions
--- a/components/button/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/button/tests/snapshots/demo-extend.test.ts.snap
@ -976,7 +976,7 @@ Array [
        </div>
        <div
          class="ant-space-item"
-          style="padding-bottom: 8px;"
+          style="margin-right: 8px; padding-bottom: 8px;"
        >
          <a
            class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only"
@ -1007,6 +1007,38 @@ Array [
            </span>
          </a>
        </div>
+        <div
+          class="ant-space-item"
+          style="padding-bottom: 8px;"
+        >
+          <button
+            class="ant-btn ant-btn-default ant-btn-lg"
+            type="button"
+          >
+            <span
+              aria-label="search"
+              class="anticon anticon-search"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="search"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                />
+              </svg>
+            </span>
+            <span>
+              Search
+            </span>
+          </button>
+        </div>
      </div>
    </div>
  </div>,
--- a/components/button/tests/snapshots/demo.test.ts.snap
+++ b/components/button/tests/snapshots/demo.test.ts.snap
@ -895,7 +895,7 @@ Array [
        </div>
        <div
          class="ant-space-item"
-          style="padding-bottom:8px"
+          style="margin-right:8px;padding-bottom:8px"
        >
          <a
            class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only"
@ -926,6 +926,38 @@ Array [
            </span>
          </a>
        </div>
+        <div
+          class="ant-space-item"
+          style="padding-bottom:8px"
+        >
+          <button
+            class="ant-btn ant-btn-default ant-btn-lg"
+            type="button"
+          >
+            <span
+              aria-label="search"
+              class="anticon anticon-search"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="search"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                />
+              </svg>
+            </span>
+            <span>
+              Search
+            </span>
+          </button>
+        </div>
      </div>
    </div>
  </div>,
--- a/components/button/demo/debug-icon.tsx
+++ b/components/button/demo/debug-icon.tsx
@ -1,7 +1,7 @@
-import React, { useState } from 'react';
 import { SearchOutlined } from '@ant-design/icons';
-import { Button, Tooltip, ConfigProvider, Radio, Divider, Space } from 'antd';
+import { Button, ConfigProvider, Divider, Radio, Space, Tooltip } from 'antd';
 import type { SizeType } from 'antd/es/config-provider/SizeContext';
+import React, { useState } from 'react';

 const App: React.FC = () => {
  const [size, setSize] = useState<SizeType>('large');
@ -45,6 +45,10 @@ const App: React.FC = () => {
              Search
            </Button>
            <Button icon={<SearchOutlined />} href="https://www.google.com" />
+            <Button>
+              <SearchOutlined />
+              Search
+            </Button>
          </Space>
        </Space>
      </ConfigProvider>
--- a/components/button/style/index.ts
+++ b/components/button/style/index.ts
@ -47,17 +47,16 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
      },

      // Leave a space between icon and text.
+      [`> ${iconCls} + span, > span + ${iconCls}`]: {
+        marginInlineStart: token.marginXS,
+      },
+
      [`&:not(${componentCls}-icon-only) > ${componentCls}-icon`]: {
        [`&${componentCls}-loading-icon, &:not(:last-child)`]: {
          marginInlineEnd: token.marginXS,
        },
      },

-      // Special case for anticon after children
-      [`> span + ${iconCls}`]: {
-        marginInlineStart: token.marginXS,
-      },
-
      '> a': {
        color: 'currentColor',
      },
--- a/components/dropdown/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/dropdown/tests/snapshots/demo-extend.test.ts.snap
@ -5066,6 +5066,72 @@ Array [
 ]
 `;

+exports[`renders components/dropdown/demo/icon-debug.tsx extend context correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-space-compact ant-space-compact-block ant-dropdown-button"
+    >
+      <button
+        class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
+        type="button"
+      >
+        <span>
+          Submit
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+      <div
+        class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-dropdown-placement-bottomRight"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <ul
+          class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
+          data-menu-list="true"
+          role="menu"
+          tabindex="0"
+        />
+        <div
+          aria-hidden="true"
+          style="display: none;"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/dropdown/demo/item.tsx extend context correctly 1`] = `
 Array [
  <a
--- a/components/dropdown/tests/snapshots/demo.test.tsx.snap
+++ b/components/dropdown/tests/snapshots/demo.test.tsx.snap
@ -515,6 +515,57 @@ exports[`renders components/dropdown/demo/event.tsx correctly 1`] = `
 </a>
 `;

+exports[`renders components/dropdown/demo/icon-debug.tsx correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-space-compact ant-space-compact-block ant-dropdown-button"
+    >
+      <button
+        class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
+        type="button"
+      >
+        <span>
+          Submit
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/dropdown/demo/item.tsx correctly 1`] = `
 <a
  class="ant-dropdown-trigger"
--- a/components/dropdown/demo/icon-debug.md
+++ b/components/dropdown/demo/icon-debug.md
@ -0,0 +1,7 @@
+## zh-CN
+
+特殊处理 Down icon。
+
+## en-US
+
+Specially handle Down icon.
--- a/components/dropdown/demo/icon-debug.tsx
+++ b/components/dropdown/demo/icon-debug.tsx
@ -0,0 +1,13 @@
+import { DownOutlined } from '@ant-design/icons';
+import { Dropdown, Space } from 'antd';
+import React from 'react';
+
+const App: React.FC = () => (
+  <Space>
+    <Dropdown.Button icon={<DownOutlined />} menu={{ items: [] }}>
+      Submit
+    </Dropdown.Button>
+  </Space>
+);
+
+export default App;
--- a/components/dropdown/index.en-US.md
+++ b/components/dropdown/index.en-US.md
@ -33,6 +33,7 @@ When there are more than a few options to choose from, you can wrap them in a `D
 <code src="./demo/selectable.tsx">Selectable Menu</code>
 <code src="./demo/menu-full.tsx" debug>Menu full styles</code>
 <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
+<code src="./demo/icon-debug.tsx" debug>Icon debug</code>

 ## API

--- a/components/dropdown/index.zh-CN.md
+++ b/components/dropdown/index.zh-CN.md
@ -37,6 +37,7 @@ demo:
 <code src="./demo/selectable.tsx">菜单可选选择</code>
 <code src="./demo/menu-full.tsx" debug>Menu 完整样式</code>
 <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
+<code src="./demo/icon-debug.tsx" debug>Icon debug</code>

 ## API

--- a/components/dropdown/style/index.ts
+++ b/components/dropdown/style/index.ts
@ -70,9 +70,10 @@ const genBaseStyle: GenerateStyle<DropdownToken> = (token) => {
          content: '""',
        },

-        [`&-trigger${antCls}-btn > ${iconCls}-down`]: {
-          fontSize: fontSizeIcon,
-          transform: 'none',
+        [`&-trigger${antCls}-btn`]: {
+          [`& > ${iconCls}-down, & > ${antCls}-btn-icon > ${iconCls}-down`]: {
+            fontSize: fontSizeIcon,
+          },
        },

        [`${componentCls}-wrap`]: {
--- a/package.json
+++ b/package.json
@ -323,4 +323,4 @@
    "*.{ts,tsx,js,jsx}": "prettier --ignore-unknown --write",
    "*.{json,less,md}": "prettier --ignore-unknown --write"
  }
-}
+}