Merge branch 'master' into feature-merge-master

This commit is contained in:
MadCcc 2023-05-23 17:02:34 +08:00
commit 5e2732a03c
28 changed files with 463 additions and 123 deletions

View File

@ -1,9 +1,9 @@
import React, { useCallback, useEffect, useState, Suspense, useLayoutEffect } from 'react';
import { enUS, ThemeEditor, zhCN } from 'antd-token-previewer';
import { Button, ConfigProvider, message, Modal, Spin, Typography } from 'antd';
import { css } from '@emotion/react';
import { Button, ConfigProvider, Modal, Spin, Typography, message } from 'antd';
import { ThemeEditor, enUS, zhCN } from 'antd-token-previewer';
import type { ThemeConfig } from 'antd/es/config-provider/context';
import { Helmet } from 'dumi';
import { css } from '@emotion/react';
import React, { Suspense, useCallback, useEffect, useState } from 'react';
import type { JSONContent, TextContent } from 'vanilla-jsoneditor';
import useLocale from '../../hooks/useLocale';
@ -64,21 +64,19 @@ const CustomTheme = () => {
json: undefined,
});
useLayoutEffect(() => {
useEffect(() => {
const storedConfig = localStorage.getItem(ANT_DESIGN_V5_THEME_EDITOR_THEME);
if (storedConfig) {
setTheme(() => JSON.parse(storedConfig));
const themeConfig = JSON.parse(storedConfig);
const originThemeConfig = {
json: themeConfig,
text: undefined,
};
setThemeConfigContent(originThemeConfig);
setTheme(themeConfig);
}
}, []);
useEffect(() => {
if (editModelOpen === true) return;
setThemeConfigContent({
json: theme as any,
text: undefined,
});
}, [theme, editModelOpen]);
const styles = useStyle();
const handleSave = () => {
@ -96,18 +94,13 @@ const CustomTheme = () => {
const handleEditConfigChange = (newcontent, preContent, status) => {
setThemeConfigContent(newcontent);
if (
Array.isArray(status.contentErrors.validationErrors) &&
status.contentErrors.validationErrors.length === 0
) {
setEditThemeFormatRight(true);
} else {
setEditThemeFormatRight(false);
}
setEditThemeFormatRight(!status.contentErrors);
};
const editSave = useCallback(() => {
if (!editThemeFormatRight) {
const contentFormatError = !editThemeFormatRight;
if (contentFormatError) {
message.error(locale.editJsonContentTypeError);
return;
}
@ -121,7 +114,7 @@ const CustomTheme = () => {
setTheme(themeConfig);
editModelClose();
messageApi.success(locale.editSuccessfully);
}, [themeConfigContent]);
}, [themeConfigContent, editThemeFormatRight]);
const handleExport = () => {
const file = new File([JSON.stringify(theme, null, 2)], `Ant Design Theme.json`, {

View File

@ -1,6 +1,6 @@
import React, { useEffect, useRef } from 'react';
import { JSONEditor, Mode } from 'vanilla-jsoneditor';
import type { JSONEditorPropsOptional } from 'vanilla-jsoneditor';
import { JSONEditor, Mode } from 'vanilla-jsoneditor';
const Editor: React.FC<JSONEditorPropsOptional> = (props) => {
const editorRef = useRef<JSONEditor>(null);
@ -18,7 +18,7 @@ const Editor: React.FC<JSONEditorPropsOptional> = (props) => {
useEffect(() => {
editorRef.current?.updateProps(props);
}, [props]);
}, [props.content]);
return <div ref={container} className="vanilla-jsoneditor-react" />;
};

View File

@ -51,6 +51,10 @@ jobs:
- name: checkout
uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
- name: restore cache from package-lock.json
uses: actions/cache@v3
with:

View File

@ -15,6 +15,29 @@ timeline: true
---
## 5.5.1
`2023-05-22`
- 🐞 Fix wrong Button icon size and margin. [#42516](https://github.com/ant-design/ant-design/pull/42516) [@MadCcc](https://github.com/MadCcc)
- 🐞 Fix Select remove &amp; selected icon not align in center. [#42513](https://github.com/ant-design/ant-design/pull/42513)
- 🐞 Refactor Popconfirm DOM structure to fix extra margin before `title` and `description` when `icon={null}`. [#42433](https://github.com/ant-design/ant-design/pull/42433)
- 🐞 Fix Menu item icon not centered when `itemMarginInline` is 0. [#42426](https://github.com/ant-design/ant-design/pull/42426) [@zzwgh](https://github.com/zzwgh)
- 🐞 Fix Tag wrapped with Tooltip will use wrong `font-size` when hover. [#42414](https://github.com/ant-design/ant-design/pull/42414)
- 🐞 Fix Popconfirm trigger `onVisibleChange` twice. [#42393](https://github.com/ant-design/ant-design/pull/42393)
- 🐞 Adjust Tooltip &amp; Popover display logic. Now the first priority is to ensure that it will not be clipped by `overflow: hidden`, and the second is to ensure that it is displayed within the viewport as much as possible. [#42394](https://github.com/ant-design/ant-design/pull/42394)
- ColorPicker
- 🐞 Optimize ColorPicker the `allowClear` interaction logic, reopening the panel to select a color will default to 100% transparency instead of 0%. [#42439](https://github.com/ant-design/ant-design/pull/42439) [@RedJue](https://github.com/RedJue)
- 🐞 Optimize ColorPicker interaction. Now it will close panel when click clear button. [#42406](https://github.com/ant-design/ant-design/pull/42406) [@kiner-tang](https://github.com/kiner-tang)
- 💄 Optimize border radius in filter dropdown of Table. [#42451](https://github.com/ant-design/ant-design/pull/42451) [@Yuiai01](https://github.com/Yuiai01)
- 🛠 Remove `addEventListener` from `rc-util/lib/Dom/addEventListener` and use native `addEventListener` instead. [#42464](https://github.com/ant-design/ant-design/pull/42464) [@li-jia-nan](https://github.com/li-jia-nan)
- 🛠 Reduce 1KB @ant-design/icons bundle size. Fix TwoTone icon color to primary color of 5.0. [#42443](https://github.com/ant-design/ant-design/pull/42443)
- 🌐 Add missing translation for `mn_MN`. [#42512](https://github.com/ant-design/ant-design/pull/42512) [@ariunbatb](https://github.com/ariunbatb)
- RTL
- 💄 Fix Select scrollbar `rtl` direction position. [#42508](https://github.com/ant-design/ant-design/pull/42508) [@BoyYangzai](https://github.com/BoyYangzai)
- TypeScript
- 🤖 Optimize Slider ref type definition, replace `unknown` and `any` with `SliderRef`. [#42420](https://github.com/ant-design/ant-design/pull/42420) [@li-jia-nan](https://github.com/li-jia-nan)
## 5.5.0
`2023-05-15`

View File

@ -15,6 +15,29 @@ timeline: true
---
## 5.5.1
`2023-05-22`
- 🐞 修复 Button 组件 icon 尺寸和间距问题。[#42516](https://github.com/ant-design/ant-design/pull/42516) [@MadCcc](https://github.com/MadCcc)
- 🐞 修复 Select 移除和选中按钮不居中的问题。[#42513](https://github.com/ant-design/ant-design/pull/42513)
- 🐞 重构 Popconfirm DOM 结构以解决 `icon={null}``title``description` 的多余 margin 问题。[#42433](https://github.com/ant-design/ant-design/pull/42433)
- 🐞 修复 Menu 图标在 `itemMarginInline` 为 0 时不居中的问题。[#42426](https://github.com/ant-design/ant-design/pull/42426) [@zzwgh](https://github.com/zzwgh)
- 🐞 修复 Tag 被 Tooltip 包裹时hover 会导致 `font-size` 错误的问题。[#42414](https://github.com/ant-design/ant-design/pull/42414)
- 🐞 修复 Popconfirm 的 `onVisibleChange` 会重复触发的问题。[#42393](https://github.com/ant-design/ant-design/pull/42393)
- 🐞 调整 Tooltip 和 Popover 展示逻辑,现在会优先保证不会被 `overflow: hidden` 裁剪,其次保证尽可能在可见屏幕范围内展示。[#42394](https://github.com/ant-design/ant-design/pull/42394)
- ColorPicker
- 🐞 优化 ColorPicker `allowClear` 交互逻辑,重新打开面板选择颜色会默认 100% 透明度,而不是 0%。[#42439](https://github.com/ant-design/ant-design/pull/42439) [@RedJue](https://github.com/RedJue)
- 🐞 优化 ColorPicker 交互,点击清除按钮时隐藏面板。[#42406](https://github.com/ant-design/ant-design/pull/42406) [@kiner-tang](https://github.com/kiner-tang)
- 💄 修改 Table 筛选下拉菜单的圆角。[#42451](https://github.com/ant-design/ant-design/pull/42451) [@Yuiai01](https://github.com/Yuiai01)
- 🛠 全局移除 `rc-util/lib/Dom/addEventListener` 引入的 `addEventListener` 方法,用原生代替。[#42464](https://github.com/ant-design/ant-design/pull/42464) [@li-jia-nan](https://github.com/li-jia-nan)
- 🛠 优化 @ant-design/icons 的 bundle 体积大小。修复 TwoTone 类的图标色为 5.0 的新主色。[#42443](https://github.com/ant-design/ant-design/pull/42443)
- 🌐 添加 `mn_MN` 中缺失的翻译。[#42512](https://github.com/ant-design/ant-design/pull/42512) [@ariunbatb](https://github.com/ariunbatb)
- RTL
- 💄 修复 Select `direction``rtl` 时 scrollbar 的位置。[#42508](https://github.com/ant-design/ant-design/pull/42508) [@BoyYangzai](https://github.com/BoyYangzai)
- TypeScript
- 🤖 优化 Slider ref 类型,移除 `unknown``any` 类型,用 `SliderRef` 代替。[#42420](https://github.com/ant-design/ant-design/pull/42420) [@li-jia-nan](https://github.com/li-jia-nan)
## 5.5.0
`2023-05-15`

View File

@ -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>,

View File

@ -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>,

View File

@ -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>

View File

@ -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',
},

View File

@ -1,7 +1,7 @@
## zh-CN
可以同时展开多个面板,这个例子默认展开了第一个
自定义渲染每个面板右上角的内容
## en-US
More than one panel can be expanded at a time, the first panel is initialized to be active in this case.
Render extra element in the top-right corner of each panel.

View File

@ -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

View File

@ -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"

View File

@ -0,0 +1,7 @@
## zh-CN
特殊处理 Down icon。
## en-US
Specially handle Down icon.

View File

@ -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;

View File

@ -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

View File

@ -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

View File

@ -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`]: {

View File

@ -220128,7 +220128,7 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
type="button"
>
<span>
OK
Тийм
</span>
</button>
</div>
@ -221713,7 +221713,7 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
type="button"
>
<span>
OK
Тийм
</span>
</button>
</div>

View File

@ -1,7 +1,7 @@
import Pagination from 'rc-pagination/lib/locale/mn_MN';
import type { Locale } from '.';
import Calendar from '../calendar/locale/mn_MN';
import DatePicker from '../date-picker/locale/mn_MN';
import type { Locale } from '.';
import TimePicker from '../time-picker/locale/mn_MN';
const localeValues: Locale = {
@ -12,18 +12,18 @@ const localeValues: Locale = {
Calendar,
Table: {
filterTitle: 'Хайх цэс',
filterConfirm: 'OK',
filterConfirm: 'Тийм',
filterReset: 'Цэвэрлэх',
selectAll: 'Бүгдийг сонгох',
selectInvert: 'Бусдыг сонгох',
},
Modal: {
okText: 'OK',
okText: 'Тийм',
cancelText: 'Цуцлах',
justOkText: 'OK',
justOkText: 'Тийм',
},
Popconfirm: {
okText: 'OK',
okText: 'Тийм',
cancelText: 'Цуцлах',
},
Transfer: {

View File

@ -1,40 +1,76 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/message/demo/component-token.tsx extend context correctly 1`] = `
<div
class="ant-message-notice ant-message-notice-pure-panel"
>
Array [
<div
class="ant-message-notice-content"
class="ant-message-notice ant-message-notice-pure-panel"
>
<div
class="ant-message-custom-content ant-message-error"
class="ant-message-notice-content"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
<div
class="ant-message-custom-content ant-message-error"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
<span>
Hello World!
</span>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
<span>
Hello World!
</span>
</div>
</div>
</div>
</div>
</div>,
<div
class="ant-message-notice ant-message-notice-pure-panel"
>
<div
class="ant-message-notice-content"
>
<div
class="ant-message-custom-content ant-message-error"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
<span>
Hello World!
</span>
</div>
</div>
</div>,
]
`;
exports[`renders components/message/demo/custom-style.tsx extend context correctly 1`] = `

View File

@ -1,40 +1,76 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/message/demo/component-token.tsx correctly 1`] = `
<div
class="ant-message-notice ant-message-notice-pure-panel"
>
Array [
<div
class="ant-message-notice-content"
class="ant-message-notice ant-message-notice-pure-panel"
>
<div
class="ant-message-custom-content ant-message-error"
class="ant-message-notice-content"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
<div
class="ant-message-custom-content ant-message-error"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
<span>
Hello World!
</span>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
<span>
Hello World!
</span>
</div>
</div>
</div>
</div>
</div>,
<div
class="ant-message-notice ant-message-notice-pure-panel"
>
<div
class="ant-message-notice-content"
>
<div
class="ant-message-custom-content ant-message-error"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
<span>
Hello World!
</span>
</div>
</div>
</div>,
]
`;
exports[`renders components/message/demo/custom-style.tsx correctly 1`] = `

View File

@ -1,20 +1,33 @@
import React from 'react';
import { ConfigProvider, message } from 'antd';
import React from 'react';
/** Test usage. Do not use in your production. */
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = message;
export default () => (
<ConfigProvider
theme={{
components: {
Message: {
contentPadding: 40,
contentBg: '#e6f4ff',
<>
<ConfigProvider
theme={{
components: {
Message: {
contentPadding: 40,
contentBg: '#e6f4ff',
},
},
},
}}
>
<InternalPanel content="Hello World!" type="error" />
</ConfigProvider>
}}
>
<InternalPanel content="Hello World!" type="error" />
</ConfigProvider>
<ConfigProvider
theme={{
components: {
Message: {
colorBgElevated: '#e6f4ff',
},
},
}}
>
<InternalPanel content="Hello World!" type="error" />
</ConfigProvider>
</>
);

View File

@ -95,7 +95,7 @@ Select component to select value from options.
| showSearch | Whether select is searchable | boolean | single: false, multiple: true | |
| size | Size of Select input | `large` \| `middle` \| `small` | `middle` | |
| status | Set validation status | 'error' \| 'warning' | - | 4.19.0 |
| suffixIcon | The custom suffix icon | ReactNode | - | |
| suffixIcon | The custom suffix icon. Customize icon will not response click open to avoid icon designed to do other interactive. You can use `pointer-events: none` style to bypass | ReactNode | - | |
| tagRender | Customize tag render, only applies when `mode` is set to `multiple` or `tags` | (props) => ReactNode | - | |
| tokenSeparators | Separator used to tokenize, only applies when `mode="tags"` | string\[] | - | |
| value | Current selected option (considered as a immutable array) | string \| string\[] \| <br />number \| number\[] \| <br />LabeledValue \| LabeledValue\[] | - | |

View File

@ -96,7 +96,7 @@ demo:
| showSearch | 配置是否可搜索 | boolean | 单选为 false多选为 true | |
| size | 选择框大小 | `large` \| `middle` \| `small` | `middle` | |
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
| suffixIcon | 自定义的选择框后缀图标。以防止图标被用于其他交互,替换的图标默认不会响应展开、收缩事件,可以通过添加 `pointer-events: none` 样式透传。 | ReactNode | - | |
| tagRender | 自定义 tag 内容 render仅在 `mode``multiple``tags` 时生效 | (props) => ReactNode | - | |
| tokenSeparators | 自动分词的分隔符,仅在 `mode="tags"` 时生效 | string\[] | - | |
| value | 指定当前选中的条目多选时为一个数组。value 数组引用未变化时Select 不会更新) | string \| string\[] \| <br />number \| number\[] \| <br />LabeledValue \| LabeledValue\[] | - | |

View File

@ -1,5 +1,6 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { SelectToken } from '.';
import { resetComponent, textEllipsis } from '../../style';
import {
initMoveMotion,
initSlideMotion,
@ -9,7 +10,6 @@ import {
slideUpOut,
} from '../../style/motion';
import type { GenerateStyle } from '../../theme/internal';
import { resetComponent, textEllipsis } from '../../style';
const genItemStyle: GenerateStyle<SelectToken, CSSObject> = (token) => {
const { controlPaddingHorizontal } = token;
@ -112,6 +112,8 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token) => {
'&-state': {
flex: 'none',
display: 'flex',
alignItems: 'center',
},
[`&-active:not(${selectItemCls}-option-disabled)`]: {

View File

@ -120,7 +120,8 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
'&-remove': {
...resetIcon(),
display: 'inline-block',
display: 'inline-flex',
alignItems: 'center',
color: token.colorIcon,
fontWeight: 'bold',
fontSize: 10,

View File

@ -5,7 +5,7 @@ import { warning } from 'rc-util';
import { useContext } from 'react';
import { ConfigContext } from '../../config-provider/context';
import { genCommonStyle, genLinkStyle } from '../../style';
import type { ComponentTokenMap, GlobalToken } from '../interface';
import type { ComponentTokenMap, GlobalToken, OverrideToken } from '../interface';
import type { UseComponentStyleResult } from '../internal';
import { mergeToken, statisticToken, useToken } from '../internal';
@ -15,7 +15,7 @@ export type GlobalTokenWithComponent<ComponentName extends OverrideComponent> =
ComponentTokenMap[ComponentName];
type ComponentToken<ComponentName extends OverrideComponent> = Exclude<
OverrideTokenWithoutDerivative[ComponentName],
OverrideToken[ComponentName],
undefined
>;
type ComponentTokenKey<ComponentName extends OverrideComponent> =
@ -80,9 +80,11 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
useStyleRegister({ ...sharedConfig, path: [component, prefixCls, iconPrefixCls] }, () => {
const { token: proxyToken, flush } = statisticToken(token);
const defaultComponentToken =
typeof getDefaultToken === 'function' ? getDefaultToken(proxyToken) : getDefaultToken;
const customComponentToken = token[component] as ComponentToken<ComponentName>;
const defaultComponentToken =
typeof getDefaultToken === 'function'
? getDefaultToken(mergeToken(proxyToken, customComponentToken ?? {}))
: getDefaultToken;
const mergedComponentToken = { ...defaultComponentToken, ...customComponentToken };
if (options?.deprecatedTokens) {

View File

@ -1,6 +1,6 @@
{
"name": "antd",
"version": "5.5.0",
"version": "5.5.1",
"description": "An enterprise-class UI design language and React components implementation",
"title": "Ant Design",
"keywords": [
@ -323,4 +323,4 @@
"*.{ts,tsx,js,jsx}": "prettier --ignore-unknown --write",
"*.{json,less,md}": "prettier --ignore-unknown --write"
}
}
}