mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 17:44:35 +08:00
fix: Button icon align issue again (#52132)
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
* fix: Button icon align issue again * fix align * fix align * fix * fix * buttonPaddingVertical => 0 * fix icon only vertical align
This commit is contained in:
afc163
GitHub
parent
cfa0b19432
commit
fd31d300ed
@ -74,5 +74,6 @@
|
|||||||
"5.22.1": [
|
"5.22.1": [
|
||||||
"https://github.com/ant-design/ant-design/issues/51420",
|
"https://github.com/ant-design/ant-design/issues/51420",
|
||||||
"https://github.com/ant-design/ant-design/issues/51430"
|
"https://github.com/ant-design/ant-design/issues/51430"
|
||||||
]
|
],
|
||||||
|
"5.22.6": ["https://github.com/ant-design/ant-design/issues/52124"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1242,6 +1242,236 @@ Array [
|
|||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-plain"
|
||||||
|
role="separator"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-divider-inner-text"
|
||||||
|
>
|
||||||
|
👇🏻 https://github.com/ant-design/ant-design/issues/52124 👇🏻
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg"
|
||||||
|
style="height: 60px;"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
without icon
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg"
|
||||||
|
style="height: 60px;"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-btn-icon"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
<span>
|
||||||
|
with icon
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-plain"
|
||||||
|
role="separator"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-divider-inner-text"
|
||||||
|
>
|
||||||
|
👇🏻 https://github.com/ant-design/ant-design/issues/51380 👇🏻
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-btn-icon"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="my-class-name"
|
||||||
|
fill="none"
|
||||||
|
height="1em"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="1em"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7m0-18H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7m0-18v18"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-btn-icon"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
height="1em"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="1em"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7m0-18H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7m0-18v18"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
custom icon
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-btn-icon"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-btn-icon"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
<span>
|
||||||
|
with icon
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
without icon
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<span
|
||||||
|
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-group-wrapper-outlined ant-input-search ant-input-search-large"
|
||||||
|
style="width: 100px;"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-input-wrapper ant-input-group"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="ant-input ant-input-lg ant-input-outlined"
|
||||||
|
type="text"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-input-group-addon"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only ant-input-search-button"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-btn-icon"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-plain"
|
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-plain"
|
||||||
role="separator"
|
role="separator"
|
||||||
|
|||||||
@ -1150,6 +1150,236 @@ Array [
|
|||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-plain"
|
||||||
|
role="separator"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-divider-inner-text"
|
||||||
|
>
|
||||||
|
👇🏻 https://github.com/ant-design/ant-design/issues/52124 👇🏻
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg"
|
||||||
|
style="height:60px"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
without icon
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg"
|
||||||
|
style="height:60px"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-btn-icon"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
<span>
|
||||||
|
with icon
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-plain"
|
||||||
|
role="separator"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-divider-inner-text"
|
||||||
|
>
|
||||||
|
👇🏻 https://github.com/ant-design/ant-design/issues/51380 👇🏻
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-btn-icon"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="my-class-name"
|
||||||
|
fill="none"
|
||||||
|
height="1em"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="1em"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7m0-18H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7m0-18v18"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-btn-icon"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
height="1em"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="1em"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7m0-18H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7m0-18v18"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
custom icon
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-btn-icon"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-btn-icon"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
<span>
|
||||||
|
with icon
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
without icon
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<span
|
||||||
|
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-group-wrapper-outlined ant-input-search ant-input-search-large"
|
||||||
|
style="width:100px"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-input-wrapper ant-input-group"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="ant-input ant-input-lg ant-input-outlined"
|
||||||
|
type="text"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-input-group-addon"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only ant-input-search-button"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-btn-icon"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-plain"
|
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-plain"
|
||||||
role="separator"
|
role="separator"
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { MinusSquareOutlined, SearchOutlined } from '@ant-design/icons';
|
import { MinusSquareOutlined, SearchOutlined } from '@ant-design/icons';
|
||||||
import { Button, ConfigProvider, Divider, Flex, Radio, Tooltip } from 'antd';
|
import { Button, ConfigProvider, Divider, Flex, Radio, Tooltip, Input } from 'antd';
|
||||||
import type { ConfigProviderProps } from 'antd';
|
import type { ConfigProviderProps } from 'antd';
|
||||||
|
import { FiColumns } from 'react-icons/fi';
|
||||||
|
|
||||||
type SizeType = ConfigProviderProps['componentSize'];
|
type SizeType = ConfigProviderProps['componentSize'];
|
||||||
|
|
||||||
@ -63,6 +64,35 @@ const App: React.FC = () => {
|
|||||||
<Button>without icon</Button>
|
<Button>without icon</Button>
|
||||||
<Button icon={<SearchOutlined />}>with icon</Button>
|
<Button icon={<SearchOutlined />}>with icon</Button>
|
||||||
</div>
|
</div>
|
||||||
|
<Divider plain>👇🏻 https://github.com/ant-design/ant-design/issues/52124 👇🏻</Divider>
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
style={{
|
||||||
|
height: 60,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
without icon
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
icon={<SearchOutlined />}
|
||||||
|
style={{
|
||||||
|
height: 60,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
with icon
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<Divider plain>👇🏻 https://github.com/ant-design/ant-design/issues/51380 👇🏻</Divider>
|
||||||
|
<div>
|
||||||
|
<Button size="large" icon={<FiColumns className="my-class-name" />} />
|
||||||
|
<Button size="large" icon={<FiColumns />}>
|
||||||
|
custom icon
|
||||||
|
</Button>
|
||||||
|
<Button icon={<SearchOutlined />} />
|
||||||
|
<Button icon={<SearchOutlined />}>with icon</Button>
|
||||||
|
<Button size="large">without icon</Button>
|
||||||
|
<Input.Search style={{ width: 100 }} />
|
||||||
|
</div>
|
||||||
<Divider plain>👇🏻 https://github.com/ant-design/ant-design/issues/51380 👇🏻</Divider>
|
<Divider plain>👇🏻 https://github.com/ant-design/ant-design/issues/51380 👇🏻</Divider>
|
||||||
<Flex
|
<Flex
|
||||||
gap="small"
|
gap="small"
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
|
import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
|
||||||
import { unit } from '@ant-design/cssinjs';
|
import { unit } from '@ant-design/cssinjs';
|
||||||
|
|
||||||
import { genFocusStyle } from '../../style';
|
import { genFocusStyle, resetIcon } from '../../style';
|
||||||
import type { GenerateStyle } from '../../theme/internal';
|
import type { GenerateStyle } from '../../theme/internal';
|
||||||
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
||||||
import type { ButtonVariantType } from '../buttonHelpers';
|
import type { ButtonVariantType } from '../buttonHelpers';
|
||||||
@ -48,15 +48,8 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
|
|||||||
pointerEvents: 'none',
|
pointerEvents: 'none',
|
||||||
},
|
},
|
||||||
|
|
||||||
'> span:not(:only-child)': {
|
// https://github.com/ant-design/ant-design/issues/51380
|
||||||
display: 'inline-flex',
|
[`${componentCls}-icon > svg`]: resetIcon(),
|
||||||
alignSelf: 'baseline',
|
|
||||||
},
|
|
||||||
|
|
||||||
[`> span${componentCls}-icon, > span${iconCls}`]: {
|
|
||||||
display: 'inline-flex',
|
|
||||||
alignSelf: 'center',
|
|
||||||
},
|
|
||||||
|
|
||||||
'> a': {
|
'> a': {
|
||||||
color: 'currentColor',
|
color: 'currentColor',
|
||||||
@ -593,7 +586,6 @@ const genButtonStyle = (token: ButtonToken, prefixCls = ''): CSSInterpolation =>
|
|||||||
componentCls,
|
componentCls,
|
||||||
controlHeight,
|
controlHeight,
|
||||||
fontSize,
|
fontSize,
|
||||||
lineHeight,
|
|
||||||
borderRadius,
|
borderRadius,
|
||||||
buttonPaddingHorizontal,
|
buttonPaddingHorizontal,
|
||||||
iconCls,
|
iconCls,
|
||||||
@ -605,7 +597,6 @@ const genButtonStyle = (token: ButtonToken, prefixCls = ''): CSSInterpolation =>
|
|||||||
{
|
{
|
||||||
[prefixCls]: {
|
[prefixCls]: {
|
||||||
fontSize,
|
fontSize,
|
||||||
lineHeight,
|
|
||||||
height: controlHeight,
|
height: controlHeight,
|
||||||
padding: `${unit(buttonPaddingVertical!)} ${unit(buttonPaddingHorizontal!)}`,
|
padding: `${unit(buttonPaddingVertical!)} ${unit(buttonPaddingHorizontal!)}`,
|
||||||
borderRadius,
|
borderRadius,
|
||||||
@ -615,6 +606,7 @@ const genButtonStyle = (token: ButtonToken, prefixCls = ''): CSSInterpolation =>
|
|||||||
|
|
||||||
[iconCls]: {
|
[iconCls]: {
|
||||||
fontSize: buttonIconOnlyFontSize,
|
fontSize: buttonIconOnlyFontSize,
|
||||||
|
verticalAlign: 'calc(-0.125em - 1px)',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -632,7 +624,6 @@ const genButtonStyle = (token: ButtonToken, prefixCls = ''): CSSInterpolation =>
|
|||||||
const genSizeBaseButtonStyle: GenerateStyle<ButtonToken> = (token) => {
|
const genSizeBaseButtonStyle: GenerateStyle<ButtonToken> = (token) => {
|
||||||
const baseToken = mergeToken<ButtonToken>(token, {
|
const baseToken = mergeToken<ButtonToken>(token, {
|
||||||
fontSize: token.contentFontSize,
|
fontSize: token.contentFontSize,
|
||||||
lineHeight: token.contentLineHeight,
|
|
||||||
});
|
});
|
||||||
return genButtonStyle(baseToken, token.componentCls);
|
return genButtonStyle(baseToken, token.componentCls);
|
||||||
};
|
};
|
||||||
@ -641,10 +632,9 @@ const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = (token) => {
|
|||||||
const smallToken = mergeToken<ButtonToken>(token, {
|
const smallToken = mergeToken<ButtonToken>(token, {
|
||||||
controlHeight: token.controlHeightSM,
|
controlHeight: token.controlHeightSM,
|
||||||
fontSize: token.contentFontSizeSM,
|
fontSize: token.contentFontSizeSM,
|
||||||
lineHeight: token.contentLineHeightSM,
|
|
||||||
padding: token.paddingXS,
|
padding: token.paddingXS,
|
||||||
buttonPaddingHorizontal: token.paddingInlineSM,
|
buttonPaddingHorizontal: token.paddingInlineSM,
|
||||||
buttonPaddingVertical: token.paddingBlockSM,
|
buttonPaddingVertical: 0,
|
||||||
borderRadius: token.borderRadiusSM,
|
borderRadius: token.borderRadiusSM,
|
||||||
buttonIconOnlyFontSize: token.onlyIconSizeSM,
|
buttonIconOnlyFontSize: token.onlyIconSizeSM,
|
||||||
});
|
});
|
||||||
@ -656,9 +646,8 @@ const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
|
|||||||
const largeToken = mergeToken<ButtonToken>(token, {
|
const largeToken = mergeToken<ButtonToken>(token, {
|
||||||
controlHeight: token.controlHeightLG,
|
controlHeight: token.controlHeightLG,
|
||||||
fontSize: token.contentFontSizeLG,
|
fontSize: token.contentFontSizeLG,
|
||||||
lineHeight: token.contentLineHeightLG,
|
|
||||||
buttonPaddingHorizontal: token.paddingInlineLG,
|
buttonPaddingHorizontal: token.paddingInlineLG,
|
||||||
buttonPaddingVertical: token.paddingBlockLG,
|
buttonPaddingVertical: 0,
|
||||||
borderRadius: token.borderRadiusLG,
|
borderRadius: token.borderRadiusLG,
|
||||||
buttonIconOnlyFontSize: token.onlyIconSizeLG,
|
buttonIconOnlyFontSize: token.onlyIconSizeLG,
|
||||||
});
|
});
|
||||||
|
|||||||
@ -239,11 +239,11 @@ export interface ButtonToken extends FullToken<'Button'> {
|
|||||||
export const prepareToken: (token: Parameters<GenStyleFn<'Button'>>[0]) => ButtonToken = (
|
export const prepareToken: (token: Parameters<GenStyleFn<'Button'>>[0]) => ButtonToken = (
|
||||||
token,
|
token,
|
||||||
) => {
|
) => {
|
||||||
const { paddingInline, onlyIconSize, paddingBlock } = token;
|
const { paddingInline, onlyIconSize } = token;
|
||||||
|
|
||||||
const buttonToken = mergeToken<ButtonToken>(token, {
|
const buttonToken = mergeToken<ButtonToken>(token, {
|
||||||
buttonPaddingHorizontal: paddingInline,
|
buttonPaddingHorizontal: paddingInline,
|
||||||
buttonPaddingVertical: paddingBlock,
|
buttonPaddingVertical: 0,
|
||||||
buttonIconOnlyFontSize: onlyIconSize,
|
buttonIconOnlyFontSize: onlyIconSize,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -290,6 +290,7 @@
|
|||||||
"react-draggable": "^4.4.6",
|
"react-draggable": "^4.4.6",
|
||||||
"react-fast-marquee": "^1.6.5",
|
"react-fast-marquee": "^1.6.5",
|
||||||
"react-highlight-words": "^0.20.0",
|
"react-highlight-words": "^0.20.0",
|
||||||
|
"react-icons": "^5.4.0",
|
||||||
"react-infinite-scroll-component": "^6.1.0",
|
"react-infinite-scroll-component": "^6.1.0",
|
||||||
"react-intersection-observer": "^9.13.1",
|
"react-intersection-observer": "^9.13.1",
|
||||||
"react-resizable": "^3.0.5",
|
"react-resizable": "^3.0.5",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user