mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-22 08:53:29 +08:00
Code Issues Actions 33 Packages Projects Releases Wiki Activity

Merge branch 'master' into fix-watermark-useClips

Browse Source
This commit is contained in:
afc163 2025-01-21 17:01:37 +08:00 committed by GitHub
commit f7d57711f4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
349 changed files with 14868 additions and 3064 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.dumi/components/SemanticPreview.tsx
View File

@ -111,12 +111,14 @@ const SemanticPreview: React.FC<SemanticPreviewProps> = (props) => {
const targetElement = containerRef.current?.querySelector<HTMLElement>(`.${targetClassName}`);
const containerRect = containerRef.current?.getBoundingClientRect();
const targetRect = targetElement?.getBoundingClientRect();
setMarkPos([
(targetRect?.left || 0) - (containerRect?.left || 0),
(targetRect?.top || 0) - (containerRect?.top || 0),
targetRect?.width || 0,
targetRect?.height || 0,
]);
timerRef.current = setTimeout(() => {
setPositionMotion(true);
}, 10);

4
.dumi/pages/index/components/Theme/ColorPicker.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import { ColorPicker, Flex, Input } from 'antd';
import { createStyles } from 'antd-style';
import type { ColorPickerProps, GetProp } from 'antd';
import { createStyles } from 'antd-style';
import { generateColor } from 'antd/es/color-picker/util';
import classNames from 'classnames';
@ -61,7 +61,7 @@ const DebouncedColorPicker: React.FC<React.PropsWithChildren<ThemeColorPickerPro
<ColorPicker
value={value}
onChange={setValue}
presets={[{ label: 'PresetColors', colors: PRESET_COLORS }]}
presets={[{ label: 'PresetColors', key: 'PresetColors', colors: PRESET_COLORS }]}
>
{children}
</ColorPicker>

4
.dumi/pages/index/components/Theme/index.tsx
View File

@ -6,7 +6,7 @@ import {
HomeOutlined,
QuestionCircleOutlined,
} from '@ant-design/icons';
import { TinyColor } from '@ctrl/tinycolor';
import { FastColor } from '@ant-design/fast-color';
import type { ColorPickerProps, GetProp, MenuProps, ThemeConfig } from 'antd';
import {
Breadcrumb,
@ -324,7 +324,7 @@ const ThemesInfo: Record<THEME, Partial<ThemeData>> = {
const normalize = (value: number) => value / 255;
function rgbToColorMatrix(color: string) {
const rgb = new TinyColor(color).toRgb();
const rgb = new FastColor(color).toRgb();
const { r, g, b } = rgb;
const invertValue = normalize(r) * 100;

6
.dumi/theme/builtins/ColorChunk/index.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react';
import type { ColorInput } from '@ctrl/tinycolor';
import { TinyColor } from '@ctrl/tinycolor';
// @ts-ignore
import { TinyColor } from 'dumi-plugin-color-chunk/component';
import { createStyles } from 'antd-style';
const useStyle = createStyles(({ token, css }) => ({
@ -22,7 +22,7 @@ const useStyle = createStyles(({ token, css }) => ({
}));
interface ColorChunkProps {
value?: ColorInput;
value: any;
}
const ColorChunk: React.FC<React.PropsWithChildren<ColorChunkProps>> = (props) => {

4
.dumi/theme/builtins/ComponentMeta/index.tsx
View File

@ -154,7 +154,9 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
colon={false}
column={1}
style={{ marginTop: token.margin }}
labelStyle={{ paddingInlineEnd: token.padding, width: 56 }}
styles={{
label: { paddingInlineEnd: token.padding, width: 56 },
}}
items={
[
{

2
.dumi/theme/builtins/ComponentTokenTable/index.tsx
View File

@ -157,7 +157,7 @@ const SubTokenTable: React.FC<SubTokenTableProps> = (props) => {
{title}
<Popover
title={null}
overlayStyle={{ width: 400 }}
styles={{ root: { width: 400 } }}
content={
<Typography>
{/* <SourceCode lang="jsx">{code}</SourceCode> */}

24
.dumi/theme/builtins/DemoWrapper/index.tsx
View File

@ -1,7 +1,6 @@
import React, { Suspense, useContext } from 'react';
import { BugOutlined, CodeOutlined, ExperimentOutlined } from '@ant-design/icons';
import { ConfigProvider, Tooltip, Button } from 'antd';
import classNames from 'classnames';
import { DumiDemoGrid, FormattedMessage, DumiDemo } from 'dumi';
import { css, Global } from '@emotion/react';
@ -42,13 +41,16 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
const demos = React.useMemo(
() =>
items.map((item: any) => {
items.reduce<typeof items>((acc, item) => {
const { previewerProps } = item;
const { debug } = previewerProps;
return {
if (debug && !showDebug) {
return acc;
}
return acc.concat({
...item,
previewerProps: {
...item.previewerProps,
...previewerProps,
expand: expandAll,
// always override debug property, because dumi will hide debug demo in production
debug: false,
@ -58,17 +60,13 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
*/
originDebug: debug,
},
};
}),
});
}, []),
[expandAll, showDebug],
);
return (
<div
className={classNames('demo-wrapper', {
'demo-wrapper-show-debug': showDebug,
})}
>
<div className="demo-wrapper">
<Global
styles={css`
:root {
@ -117,8 +115,8 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
<DumiDemoGrid
items={demos}
demoRender={(item) => (
<Suspense fallback={<DemoFallback />}>
<DumiDemo key={item.demo.id} {...item} />
<Suspense key={item.demo.id} fallback={<DemoFallback />}>
<DumiDemo {...item} />
</Suspense>
)}
/>

80
.dumi/theme/builtins/Previewer/CodeBlockButton.tsx Normal file
View File

@ -0,0 +1,80 @@
import React, { Suspense, useEffect, useState } from 'react';
import { Tooltip } from 'antd';
import { FormattedMessage } from 'dumi';
import { ping } from '../../utils';
let pingDeferrer: PromiseLike<boolean>;
const codeBlockJs =
'https://renderoffice.a' +
'lipay' +
'objects.com/p' +
'/yuyan/180020010001206410/parseFileData-v1.0.1.js';
function useShowCodeBlockButton() {
const [showCodeBlockButton, setShowCodeBlockButton] = useState(false);
useEffect(() => {
pingDeferrer ??= new Promise<boolean>((resolve) => {
ping((status) => {
if (status !== 'timeout' && status !== 'error') {
// Async insert `codeBlockJs` into body end
const script = document.createElement('script');
script.src = codeBlockJs;
script.async = true;
document.body.appendChild(script);
return resolve(true);
}
return resolve(false);
});
});
pingDeferrer.then(setShowCodeBlockButton);
}, []);
return showCodeBlockButton;
}
interface CodeBlockButtonProps {
title?: string;
dependencies: Record<PropertyKey, string>;
jsx: string;
}
const CodeBlockButton: React.FC<CodeBlockButtonProps> = ({ title, dependencies = {}, jsx }) => {
const showCodeBlockButton = useShowCodeBlockButton();
const codeBlockPrefillConfig = {
title: `${title} - antd@${dependencies.antd}`,
js: `${
/import React(\D*)from 'react';/.test(jsx) ? '' : `import React from 'react';\n`
}import { createRoot } from 'react-dom/client';\n${jsx.replace(
/export default/,
'const ComponentDemo =',
)}\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n`,
css: '',
json: JSON.stringify({ name: 'antd-demo', dependencies }, null, 2),
};
return showCodeBlockButton ? (
<Tooltip title={<FormattedMessage id="app.demo.codeblock" />}>
<div className="code-box-code-action">
<img
alt="codeblock"
src="https://mdn.alipayobjects.com/huamei_wtld8u/afts/img/A*K8rjSJpTNQ8AAAAAAAAAAAAADhOIAQ/original"
className="code-box-codeblock"
onClick={() => {
openHituCodeBlock(JSON.stringify(codeBlockPrefillConfig));
}}
/>
</div>
</Tooltip>
) : null;
};
export default (props: CodeBlockButtonProps) => (
<Suspense>
<CodeBlockButton {...props} />
</Suspense>
);

13
.dumi/theme/builtins/Previewer/CodePreviewer.tsx
View File

@ -8,7 +8,6 @@ import classNames from 'classnames';
import { FormattedMessage, useLiveDemo, useSiteData } from 'dumi';
import LZString from 'lz-string';
import RiddleButton from './RiddleButton';
import useLocation from '../../../hooks/useLocation';
import BrowserFrame from '../../common/BrowserFrame';
import ClientOnly from '../../common/ClientOnly';
@ -20,6 +19,7 @@ import ExternalLinkIcon from '../../icons/ExternalLinkIcon';
import DemoContext from '../../slots/DemoContext';
import type { SiteContextProps } from '../../slots/SiteContext';
import SiteContext from '../../slots/SiteContext';
import CodeBlockButton from './CodeBlockButton';
import type { AntdPreviewerProps } from './Previewer';
const { ErrorBoundary } = Alert;
@ -95,7 +95,7 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
const entryName = 'index.tsx';
const entryCode = asset.dependencies[entryName].value;
const previewDemo = useRef<React.ReactNode>(null);
const demoContainer = useRef<HTMLElement>(null);
const {
@ -253,6 +253,7 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
.join(';'),
js_pre_processor: 'typescript',
};
// Reorder source code
let parsedSourceCode = suffix === 'tsx' ? entryCode : jsx;
let importReactContent = "import React from 'react';";
@ -403,13 +404,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
<CodeSandboxIcon className="code-box-codesandbox" />
</Tooltip>
</form>
<RiddleButton
title={localizedTitle}
dependencies={dependencies}
jsx={jsx}
track={track}
asset={asset}
/>
<CodeBlockButton title={localizedTitle} dependencies={dependencies} jsx={jsx} />
<Tooltip title={<FormattedMessage id="app.demo.stackblitz" />}>
<span
className="code-box-code-action"

4
.dumi/theme/builtins/TokenCompare/index.tsx
View File

@ -1,6 +1,6 @@
// 用于 color.md 中的颜色对比
import React from 'react';
import { TinyColor } from '@ctrl/tinycolor';
import { FastColor } from '@ant-design/fast-color';
import { Flex, theme } from 'antd';
import { createStyles } from 'antd-style';
import tokenMeta from 'antd/es/version/token-meta.json';
@ -55,7 +55,7 @@ const useStyle = createStyles(({ token, css }) => {
});
function color2Rgba(color: string) {
return `#${new TinyColor(color).toHex8().toUpperCase()}`;
return `#${new FastColor(color).toHexString().toUpperCase()}`;
}
interface ColorCircleProps {

2
.dumi/theme/builtins/TokenTable/index.tsx
View File

@ -99,7 +99,7 @@ const TokenTable: FC<TokenTableProps> = ({ type }) => {
name: token,
desc: lang === 'cn' ? meta.desc : meta.descEn,
type: meta.type,
value: defaultToken[token],
value: defaultToken[token as keyof typeof defaultToken],
})),
[type, lang],
);

31
.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
View File

@ -20,6 +20,7 @@ interface ChangelogInfo {
version: string;
changelog: string;
refs: string[];
contributors: string[];
releaseDate: string;
}
@ -160,14 +161,30 @@ const ParseChangelog: React.FC<{ changelog: string }> = (props) => {
return <span>{parsedChangelog}</span>;
};
const RefLinks: React.FC<{ refs: string[] }> = ({ refs }) => {
const RefLinks: React.FC<{ refs: string[]; contributors: string[] }> = ({ refs, contributors }) => {
const { styles } = useStyle();
return (
<>
{refs?.map((ref) => (
<a className={styles.linkRef} key={ref} href={ref} target="_blank" rel="noreferrer">
#{ref.match(/^.*\/(\d+)$/)?.[1]}
</a>
<React.Fragment key={ref}>
<a className={styles.linkRef} key={ref} href={ref} target="_blank" rel="noreferrer">
#{ref.match(/[^/]+$/)?.[0]}
</a>
</React.Fragment>
))}
{contributors?.map((contributor) => (
<React.Fragment key={contributor}>
<a
className={styles.linkRef}
key={contributor}
href={`https://github.com/${contributor}`}
target="_blank"
rel="noreferrer"
>
@{contributor}
</a>
</React.Fragment>
))}
</>
);
@ -178,7 +195,7 @@ const RenderChangelogList: React.FC<{ changelogList: ChangelogInfo[] }> = ({ cha
const { styles } = useStyle();
const len = changelogList.length;
for (let i = 0; i < len; i += 1) {
const { refs, changelog } = changelogList[i];
const { refs, changelog, contributors } = changelogList[i];
// Check if the next line is an image link and append it to the current line
if (i + 1 < len && changelogList[i + 1].changelog.trim().startsWith('<img')) {
const imgDom = new DOMParser().parseFromString(changelogList[i + 1].changelog, 'text/html');
@ -186,7 +203,7 @@ const RenderChangelogList: React.FC<{ changelogList: ChangelogInfo[] }> = ({ cha
elements.push(
<li key={i}>
<ParseChangelog changelog={changelog} />
<RefLinks refs={refs} />
<RefLinks refs={refs} contributors={contributors} />
<br />
<img
src={imgElement?.getAttribute('src') || ''}
@ -200,7 +217,7 @@ const RenderChangelogList: React.FC<{ changelogList: ChangelogInfo[] }> = ({ cha
elements.push(
<li key={i}>
<ParseChangelog changelog={changelog} />
<RefLinks refs={refs} />
<RefLinks refs={refs} contributors={contributors} />
</li>,
);
}

12
.dumi/theme/common/styles/Demo.tsx
View File

@ -282,12 +282,13 @@ const GlobalDemoStyles: React.FC = () => {
cursor: pointer;
}
&-riddle {
width: 14px;
height: 14px;
&-codeblock {
width: 16px;
height: 16px;
overflow: hidden;
border: 0;
cursor: pointer;
max-width: 100% !important;
}
&-codesandbox {
@ -324,7 +325,6 @@ const GlobalDemoStyles: React.FC = () => {
&-debug {
border-color: ${token.purple3};
display: none;
}
&-debug &-title a {
@ -334,10 +334,6 @@ const GlobalDemoStyles: React.FC = () => {
.demo-wrapper {
position: relative;
&-show-debug .code-box-debug {
display: block;
}
}
.all-code-box-controls {

10
.dumi/theme/common/styles/Markdown.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { TinyColor } from '@ctrl/tinycolor';
import { FastColor } from '@ant-design/fast-color';
import { css, Global } from '@emotion/react';
import { useTheme } from 'antd-style';
@ -410,7 +410,7 @@ const GlobalStyle: React.FC = () => {
background: ${demoGridColor};
&:nth-child(2n + 1) {
background: ${new TinyColor(demoGridColor).setAlpha(0.75).toHex8String()};
background: ${new FastColor(demoGridColor).setA(0.75).toHexString()};
}
}
@ -426,12 +426,12 @@ const GlobalStyle: React.FC = () => {
}
${antCls}-row .demo-col-1 {
background: ${new TinyColor(demoGridColor).setAlpha(0.75).toHexString()};
background: ${new FastColor(demoGridColor).setA(0.75).toHexString()};
}
${antCls}-row .demo-col-2,
.code-box-demo ${antCls}-row .demo-col-2 {
background: ${new TinyColor(demoGridColor).setAlpha(0.75).toHexString()};
background: ${new FastColor(demoGridColor).setA(0.75).toHexString()};
}
${antCls}-row .demo-col-3,
@ -442,7 +442,7 @@ const GlobalStyle: React.FC = () => {
${antCls}-row .demo-col-4,
.code-box-demo ${antCls}-row .demo-col-4 {
background: ${new TinyColor(demoGridColor).setAlpha(0.6).toHexString()};
background: ${new FastColor(demoGridColor).setA(0.6).toHexString()};
}
${antCls}-row .demo-col-5,

29
.dumi/theme/layouts/GlobalLayout.tsx
View File

@ -1,4 +1,5 @@
import React, { Suspense, useCallback, useEffect } from 'react';
import { Monitoring } from 'react-scan/monitoring';
import {
createCache,
extractStyle,
@ -12,7 +13,13 @@ import { getSandpackCssText } from '@codesandbox/sandpack-react';
import { theme as antdTheme, App } from 'antd';
import type { MappingAlgorithm } from 'antd';
import type { DirectionType, ThemeConfig } from 'antd/es/config-provider';
import { createSearchParams, useOutlet, useSearchParams, useServerInsertedHTML } from 'dumi';
import {
createSearchParams,
useOutlet,
useParams,
useSearchParams,
useServerInsertedHTML,
} from 'dumi';
import { DarkContext } from '../../hooks/useDark';
import useLayoutState from '../../hooks/useLayoutState';
@ -63,6 +70,7 @@ const getAlgorithm = (themes: ThemeName[] = []) =>
const GlobalLayout: React.FC = () => {
const outlet = useOutlet();
const { pathname } = useLocation();
const params = useParams();
const [searchParams, setSearchParams] = useSearchParams();
const [{ theme = [], direction, isMobile, bannerVisible = false }, setSiteState] =
useLayoutState<SiteState>({
@ -72,6 +80,9 @@ const GlobalLayout: React.FC = () => {
bannerVisible: false,
});
// TODO: This can be remove in v6
const useCssVar = searchParams.get('cssVar') !== 'false';
const updateSiteConfig = useCallback(
(props: SiteState) => {
setSiteState((prev) => ({ ...prev, ...props }));
@ -152,8 +163,8 @@ const GlobalLayout: React.FC = () => {
() => ({
algorithm: getAlgorithm(theme),
token: { motion: !theme.includes('motion-off') },
cssVar: true,
hashed: false,
cssVar: useCssVar,
hashed: !useCssVar,
}),
[theme],
);
@ -222,7 +233,17 @@ const GlobalLayout: React.FC = () => {
>
<SiteContext.Provider value={siteContextValue}>
<SiteThemeProvider theme={themeConfig}>
<HappyProvider disabled={!theme.includes('happy-work')}>{content}</HappyProvider>
<HappyProvider disabled={!theme.includes('happy-work')}>
{content}
<Monitoring
apiKey="GhrCCNrHZHXlf4P6E03ntrFwhRLxJL30" // Safe to expose publically
url="https://monitoring.react-scan.com/api/v1/ingest"
commit={process.env.COMMIT_HASH}
branch={process.env.BRANCH}
params={params as Record<string, string>}
path={pathname}
/>
</HappyProvider>
</SiteThemeProvider>
</SiteContext.Provider>
</StyleProvider>

2
.dumi/theme/locales/en-US.json
View File

@ -35,7 +35,7 @@
"app.demo.codepen": "Open in CodePen",
"app.demo.codesandbox": "Open in CodeSandbox",
"app.demo.stackblitz": "Open in Stackblitz",
"app.demo.riddle": "Open in Riddle",
"app.demo.codeblock": "Open in Hitu",
"app.demo.separate": "Open in a new window",
"app.demo.online": "Online Address",
"app.home.introduce": "A design system for enterprise-level products. Create an efficient and enjoyable work experience.",

2
.dumi/theme/locales/zh-CN.json
View File

@ -35,7 +35,7 @@
"app.demo.codepen": "在 CodePen 中打开",
"app.demo.codesandbox": "在 CodeSandbox 中打开",
"app.demo.stackblitz": "在 Stackblitz 中打开",
"app.demo.riddle": "在 Riddle 中打开",
"app.demo.codeblock": "在海兔中打开",
"app.demo.separate": "在新窗口打开",
"app.demo.online": "线上地址",
"app.home.introduce": "企业级产品设计体系，创造高效愉悦的工作体验",

19
.dumi/theme/slots/Content/ContributorAvatar.tsx
View File

@ -1,19 +1,6 @@
import React from 'react';
import type { AvatarListItem } from '@qixian.cs/github-contributors-list/dist/AvatarList';
import { Avatar, Skeleton, Tooltip } from 'antd';
const AvatarPlaceholder: React.FC<{ num?: number }> = ({ num = 3 }) => (
<li>
{Array.from({ length: num }).map<React.ReactNode>((_, i) => (
<Skeleton.Avatar
size="small"
active
key={i}
style={{ marginInlineStart: i === 0 ? 0 : -8 }}
/>
))}
</li>
);
import { Avatar, Tooltip } from 'antd';
interface ContributorAvatarProps {
loading?: boolean;
@ -23,11 +10,7 @@ interface ContributorAvatarProps {
const ContributorAvatar: React.FC<ContributorAvatarProps> = (props) => {
const {
item: { username, url } = {},
loading,
} = props;
if (loading) {
return <AvatarPlaceholder />;
}
if (username?.includes('github-actions')) {
return null;
}

11
.dumi/theme/slots/Content/index.tsx
View File

@ -1,5 +1,5 @@
import React, { useContext, useLayoutEffect, useMemo, useState } from 'react';
import { Col, Flex, Space, Typography } from 'antd';
import { Col, Flex, Space, Typography, Skeleton } from 'antd';
import classNames from 'classnames';
import { FormattedMessage, useRouteMeta } from 'dumi';
@ -20,6 +20,11 @@ const Footer = React.lazy(() => import('../Footer'));
const PrevAndNext = React.lazy(() => import('../../common/PrevAndNext'));
const EditButton = React.lazy(() => import('../../common/EditButton'));
const AvatarPlaceholder: React.FC<{ num?: number }> = ({ num = 6 }) =>
Array.from({ length: num }).map<React.ReactNode>((_, i) => (
<Skeleton.Avatar size="small" active key={i} style={{ marginInlineStart: i === 0 ? 0 : -8 }} />
));
const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
const meta = useRouteMeta();
const { pathname, hash } = useLocation();
@ -87,7 +92,7 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
/>
)}
<div style={{ minHeight: 'calc(100vh - 64px)' }}>{children}</div>
<InViewSuspense>
<InViewSuspense fallback={null}>
<ColumnCard
zhihuLink={meta.frontmatter.zhihu_url}
yuqueLink={meta.frontmatter.yuque_url}
@ -95,7 +100,7 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
/>
</InViewSuspense>
<div style={{ marginTop: 120 }}>
<InViewSuspense fallback={<div style={{ height: 50 }} />}>
<InViewSuspense fallback={<AvatarPlaceholder />}>
<Contributors filename={meta.frontmatter.filename} />
</InViewSuspense>
</div>

4
.dumi/theme/slots/Footer/index.tsx
View File

@ -13,7 +13,7 @@ import {
UsergroupAddOutlined,
ZhihuOutlined,
} from '@ant-design/icons';
import { TinyColor } from '@ctrl/tinycolor';
import { FastColor } from '@ant-design/fast-color';
import { createStyles } from 'antd-style';
import getAlphaColor from 'antd/es/theme/util/getAlphaColor';
import { FormattedMessage, Link } from 'dumi';
@ -37,7 +37,7 @@ const locales = {
const useStyle = () => {
const { isMobile } = useContext(SiteContext);
return createStyles(({ token, css }) => {
const background = new TinyColor(getAlphaColor('#f0f3fa', '#fff'))
const background = new FastColor(getAlphaColor('#f0f3fa', '#fff'))
.onBackground(token.colorBgContainer)
.toHexString();

2
.dumi/theme/slots/Header/index.tsx
View File

@ -357,7 +357,7 @@ const Header: React.FC = () => {
<header className={headerClassName}>
{isMobile && (
<Popover
overlayClassName={styles.popoverMenu}
classNames={{ root: styles.popoverMenu }}
placement="bottomRight"
content={menu}
trigger="click"

34
.github/workflows/auto-unassign.yml → .github/workflows/issue-inactivity-reminder.yml vendored
View File

@ -5,7 +5,7 @@ on:
- cron: "0 0 * * *" # Run at 00:00 every day
permissions:
issues: write # Need write permission to modify issue assignees
issues: write
jobs:
reminder_job:
@ -15,16 +15,18 @@ jobs:
uses: actions/github-script@v7
with:
script: |
const daysBeforeReminder = 14;
const daysBeforeReminder = 14;
let page = 1;
const perPage = 100;
const reminderSignature = "This issue has been inactive for more than 14 days";
while (true) {
const { data: issues } = await github.rest.issues.listForRepo({
owner: context.repo.owner,
repo: context.repo.repo,
state: 'open',
assignee: '*', // Filter assigned issues
assignee: '*',
per_page: perPage,
page: page,
});
@ -53,16 +55,30 @@ jobs:
);
if (daysInactive >= daysBeforeReminder && !hasLinkedPR) {
const assigneesMentions = issue.assignees
.map(user => `@${user.login}`)
.join(' ');
await github.rest.issues.createComment({
// get issue comments
const { data: comments } = await github.rest.issues.listComments({
owner: context.repo.owner,
repo: context.repo.repo,
issue_number: issue.number,
body: `${assigneesMentions} 这个 issue 已经超过 14 天没有更新或关联 PR。如果您仍在处理这个 issue，请更新进度；如果您无法继续处理，请联系维护者重新分配。\n\nThis issue has been inactive for more than 14 days without any updates or linked PR. If you are still working on this issue, please provide a progress update. If you are unable to continue, please contact the maintainers for reassignment.`,
});
// check if reminder has been sent
const hasReminder = comments.some(comment =>
comment.body.includes(reminderSignature)
);
if (!hasReminder) {
const assigneesMentions = issue.assignees
.map(user => `@${user.login}`)
.join(' ');
await github.rest.issues.createComment({
owner: context.repo.owner,
repo: context.repo.repo,
issue_number: issue.number,
body: `${assigneesMentions} 这个 issue 已经超过 14 天没有更新或关联 PR。如果您仍在处理这个 issue，请更新进度；如果您无法继续处理，请联系维护者重新分配。\n\nThis issue has been inactive for more than 14 days without any updates or linked PR. If you are still working on this issue, please provide a progress update. If you are unable to continue, please contact the maintainers for reassignment.`,
});
}
}
}

2
.github/workflows/site-deploy.yml vendored
View File

@ -117,7 +117,7 @@ jobs:
cd ..
- name: Upload to Release
uses: softprops/action-gh-release@7b4da11513bf3f43f9999e90eabced41ab8bb048 # v2.2.0
uses: softprops/action-gh-release@01570a1f39cb168c169c802c3bceb9e93fb10974 # v2.1.0
with:
fail_on_unmatched_files: true
files: website.tar.gz

1
.jest.js
View File

@ -5,6 +5,7 @@ const compileModules = [
'@ant-design',
'countup.js',
'.pnpm',
'@asamuzakjp/css-color',
];
const ignoreList = [];

86
CHANGELOG.en-US.md
View File

@ -15,6 +15,90 @@ tag: vVERSION
---
## 5.23.2
`2025-01-20`
- 🐞 Fix Space.Compact throwing `Should not use more than one & in a selector` warning. [#52489](https://github.com/ant-design/ant-design/pull/52489)
- 💄 Fix the Layout switching sidebar button style was lost. [#52477](https://github.com/ant-design/ant-design/pull/52477)
- 💄 Fix the scroll bar height is not 0 when the first row of the virtual scroll Table is collapsed. [#52447](https://github.com/ant-design/ant-design/pull/52447) [@LeeSSHH](https://github.com/LeeSSHH)
- 💄 Fix the last item in Descriptions did not correctly fill the remaining space. [#52410](https://github.com/ant-design/ant-design/pull/52410) [@anyuxuan](https://github.com/anyuxuan)
- 💄 Fix extra margin for the last item in Radio. [#52433](https://github.com/ant-design/ant-design/pull/52433)
- 💄 Fix the Input/Mentions clear button padding was incorrect. [#52407](https://github.com/ant-design/ant-design/pull/52407) [@ustcfury](https://github.com/ustcfury)
- 💄 Fix rounded corners of `addonAfter` in Input compact mode. [#52490](https://github.com/ant-design/ant-design/pull/52490) [@DDDDD12138](https://github.com/DDDDD12138)
- 💄 Fix Menu.Item links were still clickable and lacked disabled styles when in disabled state. [#52402](https://github.com/ant-design/ant-design/pull/52402) [@aojunhao123](https://github.com/aojunhao123)
- TypeScript
- 🤖 MISC: Optimize PurePanel to use React.ComponentType type. [#52480](https://github.com/ant-design/ant-design/pull/52480)
- 🤖 Fix missing token type for Skeleton and Rate. [#52406](https://github.com/ant-design/ant-design/pull/52406) [@coding-ice](https://github.com/coding-ice)
## 5.23.1
`2025-01-13`
- 🆕 Add Tree leaf node className for differentiate node type. [#52274](https://github.com/ant-design/ant-design/pull/52274) [@EmilyyyLiu](https://github.com/EmilyyyLiu)
- 🐞 Fix DatePicker switch buttons is not hidden when `superPrevIcon/superNextIcon/prevIcon/nextIcon` is null. [#52327](https://github.com/ant-design/ant-design/pull/52327) [@afc163](https://github.com/afc163)
- 🐞 Fix Select throws `error not a valid selector` in Jest tests. [#51844](https://github.com/ant-design/ant-design/pull/51844) [@renovate](https://github.com/renovate)
- 🐞 Fix Layout.Sider under ConfigProvider directly, the `theme` not working. [#52302](https://github.com/ant-design/ant-design/pull/52302) [@zombieJ](https://github.com/zombieJ)
- 🐞 Fix Splitter lost previous state when re-expanding. [#52222](https://github.com/ant-design/ant-design/pull/52222) [@jjlstruggle](https://github.com/jjlstruggle)
- 🐞 Fix Table unexpected row selections when set `checkStrictly` to false in tree mode. [#52338](https://github.com/ant-design/ant-design/pull/52338) [@LeeSSHH](https://github.com/LeeSSHH)
- Button
- 🐞 Fix Button alignment and icon centering by adjusting the icon size for icon-only Buttons. [#52353](https://github.com/ant-design/ant-design/pull/52353) [@afc163](https://github.com/afc163)
- 💄 Fix Button missing `box-shadow` style. [#52304](https://github.com/ant-design/ant-design/pull/52304) [@zombieJ](https://github.com/zombieJ)
- RTL
- 💄 Fix Collapse arrow direction in RTL mode. [#52374](https://github.com/ant-design/ant-design/pull/52374) [@aojunhao123](https://github.com/aojunhao123)
- 💄 Fix Layout.Sider arrow direction in RTL mode. [#52374](https://github.com/ant-design/ant-design/pull/52374) [@aojunhao123](https://github.com/aojunhao123)
## 5.23.0
`2025-01-06`
- 🔥 TreeSelect support `maxCount` to limit the maximum number of selections. [#51759](https://github.com/ant-design/ant-design/pull/51759) [@aojunhao123](https://github.com/aojunhao123)
- 🔥 Modal `width` support responsive size. [#51653](https://github.com/ant-design/ant-design/pull/51653) [@zombieJ](https://github.com/zombieJ)
- 🔥 Splitter support `lazy` mode. [#51557](https://github.com/ant-design/ant-design/pull/51557) [@OysterD3](https://github.com/OysterD3)
- Button
- 🔥 Button `color` support full color palette. [#51550](https://github.com/ant-design/ant-design/pull/51550) [@OysterD3](https://github.com/OysterD3)
<img width="520" alt="Button Colors" src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*ApyYQpXQQfgAAAAAAAAAAAAADgCCAQ/original">
- 🆕 Button support `loading={{ icon: ReactNode }}` to customize loading icon. [#51758](https://github.com/ant-design/ant-design/pull/51758) [@zhangchao-wooc](https://github.com/zhangchao-wooc)
- Menu
- 🐞 Fix Menu `extra` font size and vertical align issue. [#52217](https://github.com/ant-design/ant-design/pull/52217) [@guoyunhe](https://github.com/guoyunhe)
- 🆕 Menu add token `subMenuItemSelectedColor` to resolve submenu title color being overrided by `itemSelectedColor`. [#52182](https://github.com/ant-design/ant-design/pull/52182) [@afc163](https://github.com/afc163)
- 🆕 Semantic Props
- 🆕 ConfigProvider support Empty semantic props `classNames` and `styles`. [#52208](https://github.com/ant-design/ant-design/pull/52208) [@thinkasany](https://github.com/thinkasany)
- 🆕 ConfigProvider support Popconfirm semantic props `classNames` and `styles`. [#52126](https://github.com/ant-design/ant-design/pull/52126) [@thinkasany](https://github.com/thinkasany)
- 🆕 ConfigProvider support Popover semantic props `classNames` and `styles`. [#52110](https://github.com/ant-design/ant-design/pull/52110) [@thinkasany](https://github.com/thinkasany)
- 🆕 ConfigProvider support Tooltip semantic props `classNames` and `styles`. [#51872](https://github.com/ant-design/ant-design/pull/51872) [@thinkasany](https://github.com/thinkasany)
- 🆕 ConfigProvider support Descriptions semantic props `classNames` and `styles`. [#52120](https://github.com/ant-design/ant-design/pull/52120) [@thinkasany](https://github.com/thinkasany)
- 🆕 ConfigProvider support Slider semantic props `classNames` and `styles`. [#52185](https://github.com/ant-design/ant-design/pull/52185) [@thinkasany](https://github.com/thinkasany)
- 🆕 Transfer support `showSearch` config `defaultValue` & `placeholder`. [#52125](https://github.com/ant-design/ant-design/pull/52125) [@EmilyyyLiu](https://github.com/EmilyyyLiu)
- 🆕 Calendar now supports `showWeek` prop. [#52072](https://github.com/ant-design/ant-design/pull/52072) [@afc163](https://github.com/afc163)
- 🆕 Mentions support `onPopupScroll` props. [#51858](https://github.com/ant-design/ant-design/pull/51858) [@OysterD3](https://github.com/OysterD3)
- 🆕 Card support `bodyPaddingSM`, `headerPaddingSM`, `bodyPadding`, `headerPadding` component token. [#51762](https://github.com/ant-design/ant-design/pull/51762) [@thinkasany](https://github.com/thinkasany)
- 🆕 ColorPicker `presets` support `key` prop. [#51794](https://github.com/ant-design/ant-design/pull/51794) [@li-jia-nan](https://github.com/li-jia-nan)
- 🆕 Cascader support `optionSelectedColor` token. [#51769](https://github.com/ant-design/ant-design/pull/51769) [@thinkasany](https://github.com/thinkasany)
- Tree
- 🛠 Refactor Tree part code to Function Component for React 19 perf preparing. [#52209](https://github.com/ant-design/ant-design/pull/52209) [@li-jia-nan](https://github.com/li-jia-nan)
- 💄 Optimize Tree `disabled` & `selected` node display style. [#52173](https://github.com/ant-design/ant-design/pull/52173) [@EmilyyyLiu](https://github.com/EmilyyyLiu)
- 🐞 Fix Slider crash when `tipFormatter` is undefined. [#52184](https://github.com/ant-design/ant-design/pull/52184) [@thinkasany](https://github.com/thinkasany)
- 🐞 Fix Layout.Sider `trigger` style not correct. [#46a8eff](https://github.com/ant-design/ant-design/commit/46a8eff) [@Wxh16144](https://github.com/Wxh16144)
- Table
- 🐞 Fix Table `fixed：right` is not working in `expandable`. [#52176](https://github.com/ant-design/ant-design/pull/52176) [@afc163](https://github.com/afc163)
- 🐞 Fix Table sticky scrollbar not working in rtl direction. [#52176](https://github.com/ant-design/ant-design/pull/52176) [@afc163](https://github.com/afc163)
- 💄 Optimize Flex to always reset `margin` & `padding` for customize component. [#52170](https://github.com/ant-design/ant-design/pull/52170) [@li-jia-nan](https://github.com/li-jia-nan)
- 🐞 Fix DatePicker.RangePicker `needConfirm` sometime can switch panel without confirm. [#52102](https://github.com/ant-design/ant-design/pull/52102) [@Zyf665](https://github.com/Zyf665)
- 💄 Optimize Collapse focus styles and items border radius. [#52086](https://github.com/ant-design/ant-design/pull/52086) [@aojunhao123](https://github.com/aojunhao123)
- ⌨️ Add Radio.Group default `name` prop to improve a11y. [#52076](https://github.com/ant-design/ant-design/pull/52076) [@aojunhao123](https://github.com/aojunhao123)
- ⌨️ Input.Search add `type=search` by default. [#52083](https://github.com/ant-design/ant-design/pull/52083) [@Kaikiat1126](https://github.com/Kaikiat1126)
- ⌨️ Improve Tabs focus style for keyboard operation. [#52002](https://github.com/ant-design/ant-design/pull/52002) [@aojunhao123](https://github.com/aojunhao123)
- Segmented
- ⌨️ Optimize Segmented focus style to improve a11y. [#51934](https://github.com/ant-design/ant-design/pull/51934) [@aojunhao123](https://github.com/aojunhao123)
- ⌨️ Segmented support `name` prop to improve a11y. [#51725](https://github.com/ant-design/ant-design/pull/51725) [@thinkasany](https://github.com/thinkasany)
- 📦 MISC: Reduce bundle size by replacing `@ctrl/tinycolor` with `@ant-design/fast-color`. [#52190](https://github.com/ant-design/ant-design/pull/52190) [#52157](https://github.com/ant-design/ant-design/pull/52157) [@aojunhao123](https://github.com/aojunhao123)
- ⌨️ Adjust Input, InputNumber, Mentions, Textarea clear icon from `span` to `button` to improve a11y. [#52180](https://github.com/ant-design/ant-design/pull/52180) [@li-jia-nan](https://github.com/li-jia-nan)
- 🐞 MISC: Fix build error when using React 19. [#52168](https://github.com/ant-design/ant-design/pull/52168) [@zombieJ](https://github.com/zombieJ)
- TypeScript
- 🤖 Adjust Table `ref` type to React.Ref. [#52205](https://github.com/ant-design/ant-design/pull/52205) [@li-jia-nan](https://github.com/li-jia-nan)
- 🤖 Calendar export CalendarMode type. [#52160](https://github.com/ant-design/ant-design/pull/52160) [@Kaikiat1126](https://github.com/Kaikiat1126)
## 5.22.7
`2024-12-27`
@ -2034,7 +2118,7 @@ tag: vVERSION
- 💄 Adjust Select, TreeSelect, Cascader always show the `arrow` by default when multiple. [#41028](https://github.com/ant-design/ant-design/pull/41028)
- 🐞 Fix Form `Form.Item.useStatus` problem with sever-side-rendering. [#40977](https://github.com/ant-design/ant-design/pull/40977) [@AndyBoat](https://github.com/AndyBoat)
- 🐞 MISC: Fix arrow shape in some components. [#40971](https://github.com/ant-design/ant-design/pull/40971)
- 🐞 Fix Layout throw `React does not recognize the `suffixCls` prop on a DOM element` warning. [#40969](https://github.com/ant-design/ant-design/pull/40969)
- 🐞 Fix Layout throw "React does not recognize the `suffixCls` prop on a DOM element" warning. [#40969](https://github.com/ant-design/ant-design/pull/40969)
- 🐞 Fix Watermark that text will be displayed when the picture loads abnormally. [#40770](https://github.com/ant-design/ant-design/pull/40770) [@OriginRing](https://github.com/OriginRing)
- 🐞 Image support flip function in preview mode. Fix Image `fallback` when used in ssr. [#40660](https://github.com/ant-design/ant-design/pull/40660)
- 🐞 Fix Typography component is not centered in the Select component. [#40422](https://github.com/ant-design/ant-design/pull/40422) [@Yuiai01](https://github.com/Yuiai01)

95
CHANGELOG.zh-CN.md
View File

@ -15,6 +15,90 @@ tag: vVERSION
---
## 5.23.2
`2025-01-20`
- 🐞 修复 Space.Compact 抛出 `Should not use more than one & in a selector` 警告信息的问题。[#52489](https://github.com/ant-design/ant-design/pull/52489)
- 💄 修复 Layout 切换侧边栏按钮样式丢失的问题。[#52477](https://github.com/ant-design/ant-design/pull/52477)
- 💄 修复 Table 收起虚拟滚动表格第一行时滚动条高度不为 0 的问题。[#52447](https://github.com/ant-design/ant-design/pull/52447) [@LeeSSHH](https://github.com/LeeSSHH)
- 💄 修复 Descriptions 最后一项未正确填充满剩余空间的问题。[#52410](https://github.com/ant-design/ant-design/pull/52410) [@anyuxuan](https://github.com/anyuxuan)
- 💄 修复 Radio.Group 最后一项多余 margin 的问题。[#52433](https://github.com/ant-design/ant-design/pull/52433)
- 💄 修复 Input/Mentions 清除按钮 padding 不正确的问题。[#52407](https://github.com/ant-design/ant-design/pull/52407) [@ustcfury](https://github.com/ustcfury)
- 💄 修复 Input 紧凑模式中 `addonAfter` 的圆角问题。[#52490](https://github.com/ant-design/ant-design/pull/52490) [@DDDDD12138](https://github.com/DDDDD12138)
- 💄 修复 Menu.Item 在禁用状态下链接仍可点击且缺少禁用样式的问题。[#52402](https://github.com/ant-design/ant-design/pull/52402) [@aojunhao123](https://github.com/aojunhao123)
- TypeScript
- 🤖 MISC: 优化 PurePanel 使用 React.ComponentType 类型。[#52480](https://github.com/ant-design/ant-design/pull/52480)
- 🤖 修复 Skeleton 和 Rate 缺失的 token 类型。[#52406](https://github.com/ant-design/ant-design/pull/52406) [@coding-ice](https://github.com/coding-ice)
## 5.23.1
`2025-01-13`
- 🆕 新增 Tree 组件叶子节点的 className 用于区分节点类型。[#52274](https://github.com/ant-design/ant-design/pull/52274) [@EmilyyyLiu](https://github.com/EmilyyyLiu)
- 🐞 修复 DatePicker `superPrevIcon/superNextIcon/prevIcon/nextIcon` 设置为 null 时切换按钮依旧存在的问题。[#52327](https://github.com/ant-design/ant-design/pull/52327) [@afc163](https://github.com/afc163)
- 🐞 修复 Select 组件在 jest 测试中报错 `not a valid selector` 的问题。[#51844](https://github.com/ant-design/ant-design/pull/51844) [@renovate](https://github.com/renovate)
- 🐞 修复 Layout.Sider 直接嵌套在 ConfigProvider 下时，`theme` 配置无效的问题。[#52302](https://github.com/ant-design/ant-design/pull/52302) [@zombieJ](https://github.com/zombieJ)
- 🐞 修复 Splitter 二次展开时丢失上一次状态的问题。[#52222](https://github.com/ant-design/ant-design/pull/52222) [@jjlstruggle](https://github.com/jjlstruggle)
- 🐞 修复 Table 树形展示且设置 `checkStrictly` 为 false 时，某些行被错误选中的问题。[#52338](https://github.com/ant-design/ant-design/pull/52338) [@LeeSSHH](https://github.com/LeeSSHH)
- Button
- 🐞 调整 Button 纯图标的大小从而修复按钮对齐和图标居中问题。[#52353](https://github.com/ant-design/ant-design/pull/52353) [@afc163](https://github.com/afc163)
- 💄 修复 Button 丢失阴影样式的问题。[#52304](https://github.com/ant-design/ant-design/pull/52304) [@zombieJ](https://github.com/zombieJ)
- RTL
- 💄 修复 Collapse 在 RTL 模式下的箭头方向。[#52374](https://github.com/ant-design/ant-design/pull/52374) [@aojunhao123](https://github.com/aojunhao123)
- 💄 修复 Layout.Sider 在 RTL 模式下的箭头方向。[#52374](https://github.com/ant-design/ant-design/pull/52374) [@aojunhao123](https://github.com/aojunhao123)
## 5.23.0
`2025-01-06`
- 🔥 TreeSelect 新增 `maxCount` 属性以限制最大选择数量。[#51759](https://github.com/ant-design/ant-design/pull/51759) [@aojunhao123](https://github.com/aojunhao123)
- 🔥 Modal `width` 支持响应式尺寸。[#51653](https://github.com/ant-design/ant-design/pull/51653) [@zombieJ](https://github.com/zombieJ)
- 🔥 Splitter 增加 `lazy` 模式。[#51557](https://github.com/ant-design/ant-design/pull/51557) [@OysterD3](https://github.com/OysterD3)
- Button
- 🔥 Button `color` 属性支持完整色板。[#51550](https://github.com/ant-design/ant-design/pull/51550) [@OysterD3](https://github.com/OysterD3)
<img width="520" alt="Button Colors" src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*ApyYQpXQQfgAAAAAAAAAAAAADgCCAQ/original">
- 🆕 Button 组件新增 `loading={{ icon: ReactNode }}` 以自定义加载图标。[#51758](https://github.com/ant-design/ant-design/pull/51758) [@zhangchao-wooc](https://github.com/zhangchao-wooc)
- Menu
- 🆕 Menu 新增 token `subMenuItemSelectedColor`，避免 `itemSelectedColor` 覆盖子菜单标题样式。[#52182](https://github.com/ant-design/ant-design/pull/52182) [@afc163](https://github.com/afc163)
- 🐞 修复 Menu `extra` 字体大小和垂直居中对齐问题。[#52217](https://github.com/ant-design/ant-design/pull/52217) [@guoyunhe](https://github.com/guoyunhe)
- 🆕 语义化
- 🆕 ConfigProvider 支持 Empty 组件语义化 `classNames` 和 `styles`。[#52208](https://github.com/ant-design/ant-design/pull/52208) [@thinkasany](https://github.com/thinkasany)
- 🆕 ConfigProvider 支持 Slider 组件语义化 `classNames` 和 `styles`。[#52185](https://github.com/ant-design/ant-design/pull/52185) [@thinkasany](https://github.com/thinkasany)
- 🆕 ConfigProvider 支持 Popconfirm 组件语义化 `classNames` 和 `styles`。[#52126](https://github.com/ant-design/ant-design/pull/52126) [@thinkasany](https://github.com/thinkasany)
- 🆕 ConfigProvider 支持 Popover 组件语义化 `classNames` 和 `styles`。[#52110](https://github.com/ant-design/ant-design/pull/52110) [@thinkasany](https://github.com/thinkasany)
- 🆕 ConfigProvider 支持 Tooltip 组件语义化 `classNames` 和 `styles`。[#51872](https://github.com/ant-design/ant-design/pull/51872) [@thinkasany](https://github.com/thinkasany)
- 🆕 ConfigProvider 支持 Descriptions 组件语义化 `classNames` 和 `styles`。[#52120](https://github.com/ant-design/ant-design/pull/52120) [@thinkasany](https://github.com/thinkasany)
- Tree
- 🛠 重构 Tree 部分代码为 Function Component 以为 React 19 做更好性能准备。[#52209](https://github.com/ant-design/ant-design/pull/52209) [@li-jia-nan](https://github.com/li-jia-nan)
- 💄 优化 Tree `disabled` 与 `selected` 节点状态下的颜色展示。[#52173](https://github.com/ant-design/ant-design/pull/52173) [@EmilyyyLiu](https://github.com/EmilyyyLiu)
- 🆕 Transfer 支持 `showSearch` 配置 `defaultValue` 和 `placeholder`。[#52125](https://github.com/ant-design/ant-design/pull/52125) [@EmilyyyLiu](https://github.com/EmilyyyLiu)
- 🆕 Calendar 支持 `showWeek` 属性用于显示周数列。[#52072](https://github.com/ant-design/ant-design/pull/52072) [@afc163](https://github.com/afc163)
- 🆕 Mentions 新增 `onPopupScroll` 属性。[#51858](https://github.com/ant-design/ant-design/pull/51858) [@OysterD3](https://github.com/OysterD3)
- 🆕 Card 增加 `bodyPaddingSM`、`headerPaddingSM`、`bodyPadding`、`headerPadding` 组件 token。[#51762](https://github.com/ant-design/ant-design/pull/51762) [@thinkasany](https://github.com/thinkasany)
- 🆕 ColorPicker `presets` 支持传入 `key`。[#51794](https://github.com/ant-design/ant-design/pull/51794) [@li-jia-nan](https://github.com/li-jia-nan)
- 🆕 Cascader 新增 `optionSelectedColor` token。[#51769](https://github.com/ant-design/ant-design/pull/51769) [@thinkasany](https://github.com/thinkasany)
- 🐞 修复 Layout.Sider `trigger` 样式不正确的问题。[#46a8eff](https://github.com/ant-design/ant-design/commit/46a8eff) [@Wxh16144](https://github.com/Wxh16144)
- Table
- 🐞 修复 Table `expandable` 中设置 `fixed：right` 不生效的问题。[#52176](https://github.com/ant-design/ant-design/pull/52176) [@afc163](https://github.com/afc163)
- 🐞 修复 Table `sticky` 模式下水平固定滚动条在 rtl 模式下不生效的问题。[#52176](https://github.com/ant-design/ant-design/pull/52176) [@afc163](https://github.com/afc163)
- 💄 优化 Flex 使其在自定义渲染组件时总是重置 `margin`、`padding` 样式。[#52170](https://github.com/ant-design/ant-design/pull/52170) [@li-jia-nan](https://github.com/li-jia-nan)
- 🐞 修复 DatePicker.RangePicker `needConfirm` 模式偶尔在不确认仍然可以切换面板的问题。[#52102](https://github.com/ant-design/ant-design/pull/52102) [@Zyf665](https://github.com/Zyf665)
- 🐞 修复 Slider 当 `tipFormatter` 未定义时导致崩溃的问题。[#52184](https://github.com/ant-design/ant-design/pull/52184) [@thinkasany](https://github.com/thinkasany)
- 💄 优化 Collapse 聚焦样式以及折叠项圆角。[#52086](https://github.com/ant-design/ant-design/pull/52086) [@aojunhao123](https://github.com/aojunhao123)
- ⌨️ 为 Radio.Group 添加默认 `name` 属性以提升无障碍体验。[#52076](https://github.com/ant-design/ant-design/pull/52076) [@aojunhao123](https://github.com/aojunhao123)
- ⌨️ Input.Search 添加默认 `type=search` 类型。[#52083](https://github.com/ant-design/ant-design/pull/52083) [@Kaikiat1126](https://github.com/Kaikiat1126)
- ⌨️ 优化 Tabs 键盘操作时的焦点样式。[#52002](https://github.com/ant-design/ant-design/pull/52002) [@aojunhao123](https://github.com/aojunhao123)
- Segmented
- ⌨️ 优化 Segmented 聚焦样式以提升无障碍体验。[#51934](https://github.com/ant-design/ant-design/pull/51934) [@aojunhao123](https://github.com/aojunhao123)
- ⌨️ Segmented 支持 `name` 属性以提升无障碍体验。[#51725](https://github.com/ant-design/ant-design/pull/51725) [@thinkasany](https://github.com/thinkasany)
- 📦 MISC: 用 `@ant-design/fast-color` 替换 `@ctrl/tinycolor` 以降低打包体积。[#52190](https://github.com/ant-design/ant-design/pull/52190) [#52157](https://github.com/ant-design/ant-design/pull/52157) [@aojunhao123](https://github.com/aojunhao123)
- ⌨️ 调整 Input、InputNumber、Mentions、Textarea 组件清除图标从 `span` 元素更改为 `button` 元素，提高了可访问性和交互性。[#52180](https://github.com/ant-design/ant-design/pull/52180) [@li-jia-nan](https://github.com/li-jia-nan)
- 🐞 MISC: 修复 React 19 下构建报错的问题。[#52168](https://github.com/ant-design/ant-design/pull/52168) [@zombieJ](https://github.com/zombieJ)
- TypeScript
- 🤖 调整 Table `ref` 类型为 React.Ref。[#52205](https://github.com/ant-design/ant-design/pull/52205) [@li-jia-nan](https://github.com/li-jia-nan)
- 🤖 Calendar 导出 CalendarMode 类型。[#52160](https://github.com/ant-design/ant-design/pull/52160) [@Kaikiat1126](https://github.com/Kaikiat1126)
## 5.22.7
`2024-12-27`
@ -110,7 +194,7 @@ tag: vVERSION
- Form
- 🆕 Form.Item 支持隐藏 label。[#51524](https://github.com/ant-design/ant-design/pull/51524) [@crazyair](https://github.com/crazyair)
- 🐞 Form 移除了用于撑开 error 高度的 div，将 errorDom 和 extraDom 用一个 div 包裹，并为该 div 设置了最小高度。[#51254](https://github.com/ant-design/ant-design/pull/51254) [@hongzzz](https://github.com/hongzzz)
- 🐞 Form 移除了用于撑开 error 高度的 div，将 errorDom 和 extraDom 用一个 div 包裹，并为该 div 设置了最小高度。[#51254](https://github.com/ant-design/ant-design/pull/51254) [@hongzzz](https://github.com/hongzzz)
- 🐞 修复 Form 在字段触发 change 但是值没有变化时，`onValuesChange` 仍然会触发的问题。[#51437](https://github.com/ant-design/ant-design/pull/51437) [@crazyair](https://github.com/crazyair)
- 🆕 Form 支持在表单验证失败时，scrollToFirstError 中的 focus 属性。[#51231](https://github.com/ant-design/ant-design/pull/51231) [@nathanlao](https://github.com/nathanlao)
- Table
@ -184,6 +268,7 @@ tag: vVERSION
- 💄 修改 Button `textHoverBg` 在悬浮状态下的背景色为 `colorFillTertiary`。[#51187](https://github.com/ant-design/ant-design/pull/51187) [@coding-ice](https://github.com/coding-ice)
- TypeScript
- 🤖 优化 Switch `eventHandler` 类型。[#51165](https://github.com/ant-design/ant-design/pull/51165) [@thinkasany](https://github.com/thinkasany)
## 5.21.3
`2024-10-09`
@ -232,17 +317,17 @@ tag: vVERSION
<img width="520" alt="Splitter" src="https://github.com/user-attachments/assets/25fc4e3c-1aa5-41bb-8f39-f34f7149e0f6">
- Button
- 🔥 Button 支持 `variant` 变体和 `color` 颜色属性，以支持更多组合样式。[#50051](https://github.com/ant-design/ant-design/pull/50051) [@coding-ice](https://github.com/coding-ice)
<img width="420" alt="Button" src="https://github.com/user-attachments/assets/cd5cb7fb-25e8-445f-b217-7fdd4ae0f9b4">
<img width="420" alt="Button" src="https://github.com/user-attachments/assets/cd5cb7fb-25e8-445f-b217-7fdd4ae0f9b4">
- 💄 Button 添加 `textColor`、`textHoverColor` 和 `textActiveColor` 三个 token。[#47870](https://github.com/ant-design/ant-design/pull/47870) [@madocto](https://github.com/madocto)
- FloatButton
- 🆕 FloatButton 组件支持 `placement` 属性，支持从四个方向弹出菜单。（实现方式改为 `position: absolute` + flex 布局，可能会对你现有的布局造成 breaking change，请注意兼容）[#50407](https://github.com/ant-design/ant-design/pull/50407) [@li-jia-nan](https://github.com/li-jia-nan)
<img width="300" alt="float button" src="https://github.com/user-attachments/assets/4b53c0f6-7bdd-4e2a-91cc-2fb804f6e6d3" />
<img width="300" alt="float button" src="https://github.com/user-attachments/assets/4b53c0f6-7bdd-4e2a-91cc-2fb804f6e6d3" />
- 💄 统一 FloatButton 和 FloatButton.Group 的按钮圆角。[#50513](https://github.com/ant-design/ant-design/pull/50513) [@Layouwen](https://github.com/Layouwen)
- 💄 FloatButton 组件的 `z-index` 加入 `useZIndex` 管理，兼容弹层类组件。[#50311](https://github.com/ant-design/ant-design/pull/50311) [@li-jia-nan](https://github.com/li-jia-nan)
- 🆕 FloatButton 支持传入 `htmlType` 属性。[#50892](https://github.com/ant-design/ant-design/pull/50892) [@li-jia-nan](https://github.com/li-jia-nan)
- Menu
- 🆕 Menu.Item 和 Dropdown 的 menu 支持 `extra` 属性。[#50431](https://github.com/ant-design/ant-design/pull/50431) [@coding-ice](https://github.com/coding-ice)
<img width="259" alt="menu extra" src="https://github.com/user-attachments/assets/fee57c43-b948-4f98-8a6b-0d94094a8a65">
<img width="259" alt="menu extra" src="https://github.com/user-attachments/assets/fee57c43-b948-4f98-8a6b-0d94094a8a65">
- 🐞 修复 Menu `popupStyle` 在 SubMenu 上失效的问题。[#50922](https://github.com/ant-design/ant-design/pull/50922) [@Wxh16144](https://github.com/Wxh16144)
- Table
- 🆕 Table 列支持配置 `minWidth` 属性。[#50416](https://github.com/ant-design/ant-design/pull/50416) [@linxianxi](https://github.com/linxianxi)
@ -2034,7 +2119,7 @@ tag: vVERSION
- 💄 调整 Select, TreeSelect, Cascader 在多选时总是默认显示下拉箭头。[#41028](https://github.com/ant-design/ant-design/pull/41028)
- 🐞 修复 Form 组件 `Form.Item.useStatus` 导致的服务端渲染问题。[#40977](https://github.com/ant-design/ant-design/pull/40977) [@AndyBoat](https://github.com/AndyBoat)
- 🐞 杂项：修复部分组件箭头形状问题。[#40971](https://github.com/ant-design/ant-design/pull/40971)
- 🐞 修复 Layout 报错 `React does not recognize the `suffixCls` prop on a DOM element` 的问题。[#40969](https://github.com/ant-design/ant-design/pull/40969)
- 🐞 修复 Layout 报错 "React does not recognize the `suffixCls` prop on a DOM element" 的问题。[#40969](https://github.com/ant-design/ant-design/pull/40969)
- 🐞 修复 Watermark 组件图片加载异常时的问题，默认展示文字。[#40770](https://github.com/ant-design/ant-design/pull/40770) [@OriginRing](https://github.com/OriginRing)
- 🐞 Image 预览新增图片翻转功能。并修复 Image `fallback` 在 ssr 下失效的问题。[#40660](https://github.com/ant-design/ant-design/pull/40660)
- 🐞 修复 Select 中使用 Typography 不居中的问题。[#40422](https://github.com/ant-design/ant-design/pull/40422) [@Yuiai01](https://github.com/Yuiai01)

4
README-zh_CN.md
View File

@ -20,8 +20,8 @@
[npm-image]: https://img.shields.io/npm/v/antd.svg?style=flat-square
[npm-url]: https://npmjs.org/package/antd
[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
[github-action-image]: https://github.com/ant-design/ant-design/actions/workflows/test.yml/badge.svg
[github-action-url]: https://github.com/ant-design/ant-design/actions/workflows/test.yml
[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square

4
README.md
View File

@ -20,8 +20,8 @@ An enterprise-class UI design language and React UI library.
[npm-image]: https://img.shields.io/npm/v/antd.svg?style=flat-square
[npm-url]: https://npmjs.org/package/antd
[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
[github-action-image]: https://github.com/ant-design/ant-design/actions/workflows/test.yml/badge.svg
[github-action-url]: https://github.com/ant-design/ant-design/actions/workflows/test.yml
[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square

18
components/_util/PurePanel.tsx
View File

@ -19,10 +19,11 @@ export interface BaseProps {
/* istanbul ignore next */
const genPurePanel = <ComponentProps extends BaseProps = BaseProps>(
Component: any,
defaultPrefixCls?: string,
getDropdownCls?: null | ((prefixCls: string) => string),
Component: React.ComponentType<Readonly<ComponentProps>>,
alignPropName?: 'align' | 'dropdownAlign' | 'popupAlign',
postProps?: (props: ComponentProps) => ComponentProps,
defaultPrefixCls?: string,
getDropdownCls?: (prefixCls: string) => string,
) => {
type WrapProps = ComponentProps & AnyObject;
@ -55,7 +56,6 @@ const genPurePanel = <ComponentProps extends BaseProps = BaseProps>(
? `.${getDropdownCls(prefixCls)}`
: `.${prefixCls}-dropdown`;
const popup = holderRef.current?.querySelector(dropdownCls);
if (popup) {
clearInterval(interval);
resizeObserver.observe(popup);
@ -83,6 +83,16 @@ const genPurePanel = <ComponentProps extends BaseProps = BaseProps>(
if (postProps) {
mergedProps = postProps(mergedProps);
}
if (alignPropName) {
Object.assign(mergedProps, {
[alignPropName]: {
overflow: {
adjustX: false,
adjustY: false,
},
},
});
}
const mergedStyle: React.CSSProperties = {
paddingBottom: popupHeight,
position: 'relative',

3
components/_util/isNumeric.ts
View File

@ -1,3 +0,0 @@
const isNumeric = (value: any): boolean => !isNaN(parseFloat(value)) && isFinite(value);
export default isNumeric;

15
components/_util/responsiveObserver.ts
View File

@ -69,13 +69,13 @@ export default function useResponsiveObserver() {
return React.useMemo(() => {
const subscribers = new Map<number, SubscribeFunc>();
let subUid = -1;
let screens = {};
let screens: Partial<Record<Breakpoint, boolean>> = {};
return {
matchHandlers: {} as {
[prop: string]: {
mql: MediaQueryList;
listener: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null;
listener: (this: MediaQueryList, ev: MediaQueryListEvent) => void;
};
},
dispatch(pointMap: ScreenMap) {
@ -84,7 +84,9 @@ export default function useResponsiveObserver() {
return subscribers.size >= 1;
},
subscribe(func: SubscribeFunc): number {
if (!subscribers.size) this.register();
if (!subscribers.size) {
this.register();
}
subUid += 1;
subscribers.set(subUid, func);
func(screens);
@ -92,7 +94,9 @@ export default function useResponsiveObserver() {
},
unsubscribe(paramToken: number) {
subscribers.delete(paramToken);
if (!subscribers.size) this.unregister();
if (!subscribers.size) {
this.unregister();
}
},
unregister() {
Object.keys(responsiveMap).forEach((screen) => {
@ -117,7 +121,6 @@ export default function useResponsiveObserver() {
mql,
listener,
};
listener(mql);
});
},
@ -129,7 +132,7 @@ export default function useResponsiveObserver() {
export const matchScreen = (screens: ScreenMap, screenSizes?: ScreenSizeMap) => {
if (screenSizes && typeof screenSizes === 'object') {
for (let i = 0; i < responsiveArray.length; i++) {
const breakpoint: Breakpoint = responsiveArray[i];
const breakpoint = responsiveArray[i];
if (screens[breakpoint] && screenSizes[breakpoint] !== undefined) {
return screenSizes[breakpoint];
}

2
components/auto-complete/index.tsx
View File

@ -170,7 +170,7 @@ const RefAutoComplete = React.forwardRef<RefSelectProps, AutoCompleteProps>(
// We don't care debug panel
/* istanbul ignore next */
const PurePanel = genPurePanel(RefAutoComplete, undefined, undefined, (props: any) =>
const PurePanel = genPurePanel(RefAutoComplete, 'dropdownAlign', (props: any) =>
omit(props, ['visible']),
);

4
components/avatar/__tests__/Avatar.test.tsx
View File

@ -271,8 +271,8 @@ describe('Avatar Render', () => {
count: 2,
popover: {
placement: 'bottomRight',
overlayClassName: 'wanpan-111',
overlayStyle: { background: 'red' },
classNames: { root: 'wanpan-111' },
styles: { root: { background: 'red' } },
content: 'Avatar.Group',
open: true,
},

2
components/avatar/group.tsx
View File

@ -121,7 +121,7 @@ const Group: React.FC<GroupProps> = (props) => {
const mergeProps = {
content: childrenHidden,
...max?.popover,
overlayClassName: classNames(`${groupPrefixCls}-popover`, max?.popover?.overlayClassName),
classNames: { root: classNames(`${groupPrefixCls}-popover`, max?.popover?.classNames?.root) },
placement: mergePopoverPlacement,
trigger: mergePopoverTrigger,
};

2
components/badge/demo/_semantic.tsx
View File

@ -6,7 +6,7 @@ import useLocale from '../../../.dumi/hooks/useLocale';
const locales = {
cn: {
root: '根节点',
root: '根元素',
indicator: '指示器节点',
},
en: {

6
components/button/LoadingIcon.tsx → components/button/DefaultLoadingIcon.tsx
View File

@ -23,7 +23,7 @@ const InnerLoadingIcon = forwardRef<HTMLSpanElement, InnerLoadingIconProps>((pro
);
});
export type LoadingIconProps = {
export type DefaultLoadingIconProps = {
prefixCls: string;
existIcon: boolean;
loading?: boolean | object;
@ -44,7 +44,7 @@ const getRealWidth = (node: HTMLElement): React.CSSProperties => ({
transform: 'scale(1)',
});
const LoadingIcon: React.FC<LoadingIconProps> = (props) => {
const DefaultLoadingIcon: React.FC<DefaultLoadingIconProps> = (props) => {
const { prefixCls, loading, existIcon, className, style, mount } = props;
const visible = !!loading;
@ -84,4 +84,4 @@ const LoadingIcon: React.FC<LoadingIconProps> = (props) => {
);
};
export default LoadingIcon;
export default DefaultLoadingIcon;

228
components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -492,6 +492,162 @@ exports[`renders components/button/demo/color-variant.tsx extend context correct
</span>
</button>
</div>
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
>
<button
class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-solid ant-btn-sm"
type="button"
>
<span>
Solid
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-outlined ant-btn-sm"
type="button"
>
<span>
Outlined
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-dashed ant-btn-sm"
type="button"
>
<span>
Dashed
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-filled ant-btn-sm"
type="button"
>
<span>
Filled
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-text ant-btn-sm"
type="button"
>
<span>
Text
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-link ant-btn-sm"
type="button"
>
<span>
Link
</span>
</button>
</div>
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
>
<button
class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-solid ant-btn-sm"
type="button"
>
<span>
Solid
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-outlined ant-btn-sm"
type="button"
>
<span>
Outlined
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-dashed ant-btn-sm"
type="button"
>
<span>
Dashed
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-filled ant-btn-sm"
type="button"
>
<span>
Filled
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-text ant-btn-sm"
type="button"
>
<span>
Text
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-link ant-btn-sm"
type="button"
>
<span>
Link
</span>
</button>
</div>
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
>
<button
class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-solid ant-btn-sm"
type="button"
>
<span>
Solid
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-outlined ant-btn-sm"
type="button"
>
<span>
Outlined
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-dashed ant-btn-sm"
type="button"
>
<span>
Dashed
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-filled ant-btn-sm"
type="button"
>
<span>
Filled
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-text ant-btn-sm"
type="button"
>
<span>
Text
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-link ant-btn-sm"
type="button"
>
<span>
Link
</span>
</button>
</div>
</div>
`;
@ -743,6 +899,7 @@ Array [
<input
checked=""
class="ant-radio-button-input"
name="test-id"
type="radio"
value="large"
/>
@ -762,6 +919,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="default"
/>
@ -781,6 +939,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="small"
/>
@ -1434,7 +1593,7 @@ Array [
>
<input
class="ant-input ant-input-lg ant-input-outlined"
type="text"
type="search"
value=""
/>
<span
@ -2206,6 +2365,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="start"
/>
@ -2226,6 +2386,7 @@ Array [
<input
checked=""
class="ant-radio-button-input"
name="test-id"
type="radio"
value="end"
/>
@ -3155,6 +3316,37 @@ exports[`renders components/button/demo/loading.tsx extend context correctly 1`]
</span>
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-loading"
type="button"
>
<span
class="ant-btn-icon"
>
<span
aria-label="sync"
class="anticon anticon-sync anticon-spin"
role="img"
>
<svg
aria-hidden="true"
data-icon="sync"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 01755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 01512.1 856a342.24 342.24 0 01-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 00-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 00-8-8.2z"
/>
</svg>
</span>
</span>
<span>
Loading Icon
</span>
</button>
</div>
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
@ -3234,6 +3426,37 @@ exports[`renders components/button/demo/loading.tsx extend context correctly 1`]
</span>
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
type="button"
>
<span
class="ant-btn-icon"
>
<span
aria-label="poweroff"
class="anticon anticon-poweroff"
role="img"
>
<svg
aria-hidden="true"
data-icon="poweroff"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M705.6 124.9a8 8 0 00-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0162.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0127.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 01-76.3 113.3 353.06 353.06 0 01-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 01-113.2-76.4A355.92 355.92 0 01184 650.4a355 355 0 01-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"
/>
</svg>
</span>
</span>
<span>
Loading Icon
</span>
</button>
</div>
</div>
`;
@ -3422,6 +3645,7 @@ Array [
<input
checked=""
class="ant-radio-button-input"
name="test-id"
type="radio"
value="large"
/>
@ -3441,6 +3665,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="default"
/>
@ -3460,6 +3685,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="small"
/>

228
components/button/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -484,6 +484,162 @@ exports[`renders components/button/demo/color-variant.tsx correctly 1`] = `
</span>
</button>
</div>
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
>
<button
class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-solid ant-btn-sm"
type="button"
>
<span>
Solid
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-outlined ant-btn-sm"
type="button"
>
<span>
Outlined
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-dashed ant-btn-sm"
type="button"
>
<span>
Dashed
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-filled ant-btn-sm"
type="button"
>
<span>
Filled
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-text ant-btn-sm"
type="button"
>
<span>
Text
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-pink ant-btn-variant-link ant-btn-sm"
type="button"
>
<span>
Link
</span>
</button>
</div>
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
>
<button
class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-solid ant-btn-sm"
type="button"
>
<span>
Solid
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-outlined ant-btn-sm"
type="button"
>
<span>
Outlined
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-dashed ant-btn-sm"
type="button"
>
<span>
Dashed
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-filled ant-btn-sm"
type="button"
>
<span>
Filled
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-text ant-btn-sm"
type="button"
>
<span>
Text
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-purple ant-btn-variant-link ant-btn-sm"
type="button"
>
<span>
Link
</span>
</button>
</div>
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
>
<button
class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-solid ant-btn-sm"
type="button"
>
<span>
Solid
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-outlined ant-btn-sm"
type="button"
>
<span>
Outlined
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-dashed ant-btn-sm"
type="button"
>
<span>
Dashed
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-filled ant-btn-sm"
type="button"
>
<span>
Filled
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-text ant-btn-sm"
type="button"
>
<span>
Text
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-cyan ant-btn-variant-link ant-btn-sm"
type="button"
>
<span>
Link
</span>
</button>
</div>
</div>
`;
@ -727,6 +883,7 @@ Array [
<input
checked=""
class="ant-radio-button-input"
name="test-id"
type="radio"
value="large"
/>
@ -746,6 +903,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="default"
/>
@ -765,6 +923,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="small"
/>
@ -1342,7 +1501,7 @@ Array [
>
<input
class="ant-input ant-input-lg ant-input-outlined"
type="text"
type="search"
value=""
/>
<span
@ -2030,6 +2189,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="start"
/>
@ -2050,6 +2210,7 @@ Array [
<input
checked=""
class="ant-radio-button-input"
name="test-id"
type="radio"
value="end"
/>
@ -2783,6 +2944,37 @@ exports[`renders components/button/demo/loading.tsx correctly 1`] = `
</span>
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-loading"
type="button"
>
<span
class="ant-btn-icon"
>
<span
aria-label="sync"
class="anticon anticon-sync anticon-spin"
role="img"
>
<svg
aria-hidden="true"
data-icon="sync"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 01755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 01512.1 856a342.24 342.24 0 01-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 00-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 00-8-8.2z"
/>
</svg>
</span>
</span>
<span>
Loading Icon
</span>
</button>
</div>
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
@ -2862,6 +3054,37 @@ exports[`renders components/button/demo/loading.tsx correctly 1`] = `
</span>
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
type="button"
>
<span
class="ant-btn-icon"
>
<span
aria-label="poweroff"
class="anticon anticon-poweroff"
role="img"
>
<svg
aria-hidden="true"
data-icon="poweroff"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M705.6 124.9a8 8 0 00-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0162.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0127.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 01-76.3 113.3 353.06 353.06 0 01-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 01-113.2-76.4A355.92 355.92 0 01184 650.4a355 355 0 01-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"
/>
</svg>
</span>
</span>
<span>
Loading Icon
</span>
</button>
</div>
</div>
`;
@ -2943,6 +3166,7 @@ Array [
<input
checked=""
class="ant-radio-button-input"
name="test-id"
type="radio"
value="large"
/>
@ -2962,6 +3186,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="default"
/>
@ -2981,6 +3206,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="small"
/>

17
components/button/__tests__/index.test.tsx
View File

@ -2,13 +2,14 @@ import React, { Suspense, useRef, useState } from 'react';
import { SearchOutlined } from '@ant-design/icons';
import { resetWarned } from 'rc-util/lib/warning';
import Button from '..';
import Button, { _ButtonVariantTypes } from '..';
import type { GetRef } from '../../_util/type';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
import ConfigProvider from '../../config-provider';
import theme from '../../theme';
import { PresetColors } from '../../theme/interface';
import type { BaseButtonProps } from '../button';
describe('Button', () => {
@ -475,6 +476,20 @@ describe('Button', () => {
});
});
it('should render preset colors and variants correctly', () => {
PresetColors.forEach((color) => {
_ButtonVariantTypes.forEach((variant) => {
const { container } = render(
<Button color={color} variant={variant}>
{color}
</Button>,
);
expect(container.firstChild).toHaveClass(`ant-btn-color-${color}`);
expect(container.firstChild).toHaveClass(`ant-btn-variant-${variant}`);
});
});
});
it('autoFocus should work', () => {
const { container } = render(<Button autoFocus>button</Button>);

10
components/button/button.tsx
View File

@ -20,7 +20,7 @@ import type {
} from './buttonHelpers';
import { isTwoCNChar, isUnBorderedButtonVariant, spaceChildren } from './buttonHelpers';
import IconWrapper from './IconWrapper';
import LoadingIcon from './LoadingIcon';
import DefaultLoadingIcon from './DefaultLoadingIcon';
import useStyle from './style';
import Compact from './style/compact';
@ -35,7 +35,7 @@ export interface BaseButtonProps {
shape?: ButtonShape;
size?: SizeType;
disabled?: boolean;
loading?: boolean | { delay?: number };
loading?: boolean | { delay?: number; icon?: React.ReactNode };
prefixCls?: string;
className?: string;
rootClassName?: string;
@ -310,8 +310,12 @@ const InternalCompoundedButton = React.forwardRef<
<IconWrapper prefixCls={prefixCls} className={iconClasses} style={iconStyle}>
{icon}
</IconWrapper>
) : loading && typeof loading === 'object' && loading.icon ? (
<IconWrapper prefixCls={prefixCls} className={iconClasses} style={iconStyle}>
{loading.icon}
</IconWrapper>
) : (
<LoadingIcon
<DefaultLoadingIcon
existIcon={!!icon}
prefixCls={prefixCls}
loading={innerLoading}

4
components/button/buttonHelpers.tsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import { cloneElement, isFragment } from '../_util/reactNode';
import { PresetColors } from '../theme/interface';
import type { BaseButtonProps, LegacyButtonType } from './button';
const rxTwoCNChar = /^[\u4E00-\u9FA5]{2}$/;
@ -106,5 +107,6 @@ export const _ButtonVariantTypes = [
] as const;
export type ButtonVariantType = (typeof _ButtonVariantTypes)[number];
export const _ButtonColorTypes = ['default', 'primary', 'danger'] as const;
export const _ButtonColorTypes = ['default', 'primary', 'danger', ...PresetColors] as const;
export type ButtonColorType = (typeof _ButtonColorTypes)[number];

60
components/button/demo/color-variant.tsx
View File

@ -68,6 +68,66 @@ const App: React.FC = () => {
Link
</Button>
</Flex>
<Flex gap="small" wrap>
<Button color="pink" variant="solid">
Solid
</Button>
<Button color="pink" variant="outlined">
Outlined
</Button>
<Button color="pink" variant="dashed">
Dashed
</Button>
<Button color="pink" variant="filled">
Filled
</Button>
<Button color="pink" variant="text">
Text
</Button>
<Button color="pink" variant="link">
Link
</Button>
</Flex>
<Flex gap="small" wrap>
<Button color="purple" variant="solid">
Solid
</Button>
<Button color="purple" variant="outlined">
Outlined
</Button>
<Button color="purple" variant="dashed">
Dashed
</Button>
<Button color="purple" variant="filled">
Filled
</Button>
<Button color="purple" variant="text">
Text
</Button>
<Button color="purple" variant="link">
Link
</Button>
</Flex>
<Flex gap="small" wrap>
<Button color="cyan" variant="solid">
Solid
</Button>
<Button color="cyan" variant="outlined">
Outlined
</Button>
<Button color="cyan" variant="dashed">
Dashed
</Button>
<Button color="cyan" variant="filled">
Filled
</Button>
<Button color="cyan" variant="text">
Text
</Button>
<Button color="cyan" variant="link">
Link
</Button>
</Flex>
</Flex>
</ConfigProvider>
);

2
components/button/demo/debug-color-variant.tsx
View File

@ -54,7 +54,7 @@ const App: React.FC = () => {
<Flex vertical gap="small">
{/* link color */}
<Flex gap="small">
<ConfigProvider theme={{ token: { colorPrimary: 'red' } }}>
<ConfigProvider theme={{ token: { colorLink: '#FF0000' } }}>
<Button type="link">Link Button</Button>
</ConfigProvider>
<Button type="link">Link Button</Button>

4
components/button/demo/loading.md
View File

@ -1,7 +1,7 @@
## zh-CN
添加 `loading` 属性即可让按钮处于加载状态，最后三个按钮演示点击后进入加载状态。
添加 `loading` 属性即可让按钮处于加载状态，`loading.icon` 可以自定义加载图标，最后三个按钮演示点击后进入加载状态。
## en-US
A loading indicator can be added to a button by setting the `loading` property on the `Button`.
A loading indicator can be added to a button by setting the `loading` property on the `Button`. The `loading.icon` can be used to customize the loading icon.

13
components/button/demo/loading.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { PoweroffOutlined } from '@ant-design/icons';
import { PoweroffOutlined, SyncOutlined } from '@ant-design/icons';
import { Button, Flex } from 'antd';
const App: React.FC = () => {
@ -31,6 +31,9 @@ const App: React.FC = () => {
Loading
</Button>
<Button type="primary" icon={<PoweroffOutlined />} loading />
<Button type="primary" loading={{ icon: <SyncOutlined spin /> }}>
Loading Icon
</Button>
</Flex>
<Flex gap="small" wrap>
<Button type="primary" loading={loadings[0]} onClick={() => enterLoading(0)}>
@ -58,6 +61,14 @@ const App: React.FC = () => {
loading={loadings[3]}
onClick={() => enterLoading(3)}
/>
<Button
type="primary"
icon={<PoweroffOutlined />}
loading={loadings[3] && { icon: <SyncOutlined spin /> }}
onClick={() => enterLoading(3)}
>
Loading Icon
</Button>
</Flex>
</Flex>
);

8
components/button/index.en-US.md
View File

@ -63,7 +63,7 @@ Different button styles generated by setting Button properties. The recommended
| autoInsertSpace | We add a space between two Chinese characters by default, which removed by setting `autoInsertSpace` to `false`. | boolean | `true` | 5.17.0 |
| block | Option to fit button width to its parent width | boolean | false | |
| classNames | Semantic DOM class | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.4.0 |
| color | Set button color | `default` \| `primary` \| `danger` | - | 5.21.0 |
| color | Set button color | `default` \| `primary` \| `danger` \| [PresetColors](#presetcolors) | - | `default`, `primary` and `danger`: 5.21.0, `PresetColors`: 5.23.0 |
| danger | Syntactic sugar. Set the danger status of button. will follow `color` if provided | boolean | false | |
| disabled | Disabled state of button | boolean | false | |
| ghost | Make background transparent and invert text and border colors | boolean | false | |
@ -71,7 +71,7 @@ Different button styles generated by setting Button properties. The recommended
| htmlType | Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type) | `submit` \| `reset` \| `button` | `button` | |
| icon | Set the icon component of button | ReactNode | - | |
| iconPosition | Set the icon position of button | `start` \| `end` | `start` | 5.17.0 |
| loading | Set the loading status of button | boolean \| { delay: number } | false | |
| loading | Set the loading status of button | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
| shape | Can be used to set button shape | `default` \| `circle` \| `round` | `default` | |
| size | Set the size of button | `large` \| `middle` \| `small` | `middle` | |
| styles | Semantic DOM style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.4.0 |
@ -82,6 +82,10 @@ Different button styles generated by setting Button properties. The recommended
It accepts all props which native buttons support.
### PresetColors
> type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
## Semantic DOM
<code src="./demo/_semantic.tsx" simplify="true"></code>

8
components/button/index.zh-CN.md
View File

@ -69,7 +69,7 @@ group:
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 `autoInsertSpace` 为 `false` 关闭 | boolean | `true` | 5.17.0 |
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
| classNames | 语义化结构 class | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.4.0 |
| color | 设置按钮的颜色 | `default` \| `primary` \| `danger` | - | 5.21.0 |
| color | 设置按钮的颜色 | `default` \| `primary` \| `danger` \| [PresetColors](#presetcolors) | - | `default`、`primary` 和 `danger`: 5.21.0, `PresetColors`: 5.23.0 |
| danger | 语法糖，设置危险按钮。当设置 `color` 时会以后者为准 | boolean | false | |
| disabled | 设置按钮失效状态 | boolean | false | |
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
@ -77,7 +77,7 @@ group:
| htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button#type) | `submit` \| `reset` \| `button` | `button` | |
| icon | 设置按钮的图标组件 | ReactNode | - | |
| iconPosition | 设置按钮图标组件的位置 | `start` \| `end` | `start` | 5.17.0 |
| loading | 设置按钮载入状态 | boolean \| { delay: number } | false | |
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
| shape | 设置按钮形状 | `default` \| `circle` \| `round` | `default` | |
| size | 设置按钮大小 | `large` \| `middle` \| `small` | `middle` | |
| styles | 语义化结构 style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.4.0 |
@ -88,6 +88,10 @@ group:
支持原生 button 的其他所有属性。
### PresetColors
> type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
## Semantic DOM
<code src="./demo/_semantic.tsx" simplify="true"></code>

29
components/button/style/compact.ts
View File

@ -11,21 +11,20 @@ import { prepareComponentToken, prepareToken } from './token';
const genButtonCompactStyle: GenerateStyle<ButtonToken> = (token) => {
const { componentCls, colorPrimaryHover, lineWidth, calc } = token;
const insetOffset = calc(lineWidth).mul(-1).equal();
const getCompactBorderStyle = (vertical?: boolean) =>
({
[`${componentCls}-compact${vertical ? '-vertical' : ''}-item${componentCls}-primary:not([disabled])`]:
{
'& + &::before': {
position: 'absolute',
top: vertical ? insetOffset : 0,
insetInlineStart: vertical ? 0 : insetOffset,
backgroundColor: colorPrimaryHover,
content: '""',
width: vertical ? '100%' : lineWidth,
height: vertical ? lineWidth : '100%',
},
},
}) as CSSObject;
const getCompactBorderStyle = (vertical?: boolean) => {
const selector = `${componentCls}-compact${vertical ? '-vertical' : ''}-item${componentCls}-primary:not([disabled])`;
return {
[`${selector} + ${selector}::before`]: {
position: 'absolute',
top: vertical ? insetOffset : 0,
insetInlineStart: vertical ? 0 : insetOffset,
backgroundColor: colorPrimaryHover,
content: '""',
width: vertical ? '100%' : lineWidth,
height: vertical ? lineWidth : '100%',
} as CSSObject,
};
};
// Special styles for Primary Button
return {
...getCompactBorderStyle(),

95
components/button/style/index.ts
View File

@ -2,7 +2,8 @@ import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
import { unit } from '@ant-design/cssinjs';
import { genFocusStyle, resetIcon } from '../../style';
import type { GenerateStyle } from '../../theme/internal';
import { PresetColors } from '../../theme/interface';
import type { GenerateStyle, PresetColorKey } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
import type { ButtonVariantType } from '../buttonHelpers';
import genGroupStyle from './group';
@ -298,6 +299,95 @@ const genTextLinkButtonStyle = (
});
// =============================== Color ==============================
const genPresetColorStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => {
const { componentCls } = token;
return PresetColors.reduce<CSSObject>((prev: CSSObject, colorKey: PresetColorKey) => {
const darkColor = token[`${colorKey}6`];
const lightColor = token[`${colorKey}1`];
const hoverColor = token[`${colorKey}5`];
const lightHoverColor = token[`${colorKey}2`];
const lightBorderColor = token[`${colorKey}3`];
const activeColor = token[`${colorKey}7`];
const boxShadow = `0 ${unit(token.controlOutlineWidth)} 0 ${token[`${colorKey}1`]}`;
return {
...prev,
[`&${componentCls}-color-${colorKey}`]: {
color: darkColor,
boxShadow,
...genSolidButtonStyle(
token,
token.colorTextLightSolid,
darkColor,
{
background: hoverColor,
},
{
background: activeColor,
},
),
...genOutlinedDashedButtonStyle(
token,
darkColor,
token.colorBgContainer,
{
color: hoverColor,
borderColor: hoverColor,
background: token.colorBgContainer,
},
{
color: activeColor,
borderColor: activeColor,
background: token.colorBgContainer,
},
),
...genDashedButtonStyle(token),
...genFilledButtonStyle(
token,
lightColor,
{
background: lightHoverColor,
},
{
background: lightBorderColor,
},
),
...genTextLinkButtonStyle(
token,
darkColor,
'link',
{
color: hoverColor,
},
{
color: activeColor,
},
),
...genTextLinkButtonStyle(
token,
darkColor,
'text',
{
color: hoverColor,
background: lightColor,
},
{
color: activeColor,
background: lightBorderColor,
},
),
},
};
}, {});
};
const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
color: token.defaultColor,
@ -513,6 +603,8 @@ const genColorButtonStyle: GenerateStyle<ButtonToken> = (token) => {
[`${componentCls}-color-default`]: genDefaultButtonStyle(token),
[`${componentCls}-color-primary`]: genPrimaryButtonStyle(token),
[`${componentCls}-color-dangerous`]: genDangerousStyle(token),
...genPresetColorStyle(token),
};
};
@ -606,7 +698,6 @@ const genButtonStyle = (token: ButtonToken, prefixCls = ''): CSSInterpolation =>
[iconCls]: {
fontSize: buttonIconOnlyFontSize,
verticalAlign: 'calc(-0.125em - 1px)',
},
},
},

14
components/button/style/token.ts
View File

@ -160,17 +160,17 @@ export interface ComponentToken {
* @desc 只有图标的按钮图标尺寸
* @descEN Icon size of button which only contains icon
*/
onlyIconSize: number;
onlyIconSize: number | string;
/**
* @desc 大号只有图标的按钮图标尺寸
* @descEN Icon size of large button which only contains icon
*/
onlyIconSizeLG: number;
onlyIconSizeLG: number | string;
/**
* @desc 小号只有图标的按钮图标尺寸
* @descEN Icon size of small button which only contains icon
*/
onlyIconSizeSM: number;
onlyIconSizeSM: number | string;
/**
* @desc 按钮组边框颜色
* @descEN Border color of button group
@ -233,7 +233,7 @@ export interface ButtonToken extends FullToken<'Button'> {
* @desc 只有图标的按钮图标尺寸
* @descEN Icon size of button which only contains icon
*/
buttonIconOnlyFontSize: number;
buttonIconOnlyFontSize: number | string;
}
export const prepareToken: (token: Parameters<GenStyleFn<'Button'>>[0]) => ButtonToken = (
@ -275,9 +275,9 @@ export const prepareComponentToken: GetDefaultToken<'Button'> = (token) => {
paddingInline: token.paddingContentHorizontal - token.lineWidth,
paddingInlineLG: token.paddingContentHorizontal - token.lineWidth,
paddingInlineSM: 8 - token.lineWidth,
onlyIconSize: token.fontSizeLG,
onlyIconSizeSM: token.fontSizeLG - 2,
onlyIconSizeLG: token.fontSizeLG + 2,
onlyIconSize: 'inherit',
onlyIconSizeSM: 'inherit',
onlyIconSizeLG: 'inherit',
groupBorderColor: token.colorPrimaryHover,
linkHoverBg: 'transparent',
textTextColor: token.colorText,

3310
components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

2032
components/calendar/__tests__/__snapshots__/demo.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

8
components/calendar/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -147,6 +147,7 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
<input
checked=""
class="ant-radio-button-input"
name="test-id"
type="radio"
value="month"
/>
@ -166,6 +167,7 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="year"
/>
@ -1099,6 +1101,7 @@ exports[`Calendar Calendar should support locale 1`] = `
<input
checked=""
class="ant-radio-button-input"
name="test-id"
type="radio"
value="month"
/>
@ -1118,6 +1121,7 @@ exports[`Calendar Calendar should support locale 1`] = `
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="year"
/>
@ -2051,6 +2055,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
<input
checked=""
class="ant-radio-button-input"
name="test-id"
type="radio"
value="month"
/>
@ -2070,6 +2075,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="year"
/>
@ -3003,6 +3009,7 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
<input
checked=""
class="ant-radio-button-input"
name="test-id"
type="radio"
value="month"
/>
@ -3022,6 +3029,7 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="year"
/>

7
components/calendar/demo/week.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
通过将 `showWeek` 属性设置为 `true`，在全屏日历中显示周数。
## en-US
Show week number in fullscreen calendar by setting `showWeek` prop to `true`.

12
components/calendar/demo/week.tsx Normal file
View File

@ -0,0 +1,12 @@
import React from 'react';
import { Calendar } from 'antd';
const App: React.FC = () => (
<>
<Calendar fullscreen showWeek />
<br />
<Calendar fullscreen={false} showWeek />
</>
);
export default App;

3
components/calendar/generateCalendar.tsx
View File

@ -49,6 +49,7 @@ export interface CalendarProps<DateType> {
defaultValue?: DateType;
mode?: CalendarMode;
fullscreen?: boolean;
showWeek?: boolean;
onChange?: (date: DateType) => void;
onPanelChange?: (date: DateType, mode: CalendarMode) => void;
onSelect?: (date: DateType, selectInfo: SelectInfo) => void;
@ -89,6 +90,7 @@ const generateCalendar = <DateType extends AnyObject>(generateConfig: GenerateCo
mode,
validRange,
fullscreen = true,
showWeek,
onChange,
onPanelChange,
onSelect,
@ -299,6 +301,7 @@ const generateCalendar = <DateType extends AnyObject>(generateConfig: GenerateCo
picker={panelMode}
disabledDate={mergedDisabledDate}
hideHeader
showWeek={showWeek}
/>
</div>,
);

4
components/calendar/index.en-US.md
View File

@ -19,6 +19,7 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
<code src="./demo/card.tsx" clientOnly>Card</code>
<code src="./demo/select.tsx" clientOnly>Selectable Calendar</code>
<code src="./demo/lunar.tsx" clientOnly>Lunar Calendar</code>
<code src="./demo/week.tsx" clientOnly version="5.23.0">Show Week</code>
<code src="./demo/customize-header.tsx" clientOnly>Customize Header</code>
<code src="./demo/component-token.tsx" debug>Component Token</code>
@ -45,7 +46,8 @@ Common props ref：[Common props](/docs/react/common-props)
| defaultValue | The date selected by default | [dayjs](https://day.js.org/) | - | |
| disabledDate | Function that specifies the dates that cannot be selected, `currentDate` is same dayjs object as `value` prop which you shouldn't mutate it](https://github.com/ant-design/ant-design/issues/30987) | (currentDate: Dayjs) => boolean | - | |
| fullscreen | Whether to display in full-screen | boolean | true | |
| headerRender | Render custom header in panel | function(object:{value: Dayjs, type: string, onChange: f(), onTypeChange: f()}) | - | |
| showWeek | Whether to display week number | boolean | false | 5.23.0 |
| headerRender | Render custom header in panel | function(object:{value: Dayjs, type: 'year' \| 'month', onChange: f(), onTypeChange: f()}) | - | |
| locale | The calendar's locale | object | [(default)](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |
| mode | The display mode of the calendar | `month` \| `year` | `month` | |
| validRange | To set valid range | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | |

4
components/calendar/index.tsx
View File

@ -1,7 +1,7 @@
import type { Dayjs } from 'dayjs';
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
import type { CalendarProps } from './generateCalendar';
import type { CalendarMode, CalendarProps } from './generateCalendar';
import generateCalendar from './generateCalendar';
const Calendar = generateCalendar<Dayjs>(dayjsGenerateConfig);
@ -12,5 +12,5 @@ export type CalendarType = typeof Calendar & {
(Calendar as CalendarType).generateCalendar = generateCalendar;
export type { CalendarProps };
export type { CalendarMode, CalendarProps };
export default Calendar as CalendarType;

4
components/calendar/index.zh-CN.md
View File

@ -20,6 +20,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA
<code src="./demo/card.tsx" clientOnly>卡片模式</code>
<code src="./demo/select.tsx" clientOnly>选择功能</code>
<code src="./demo/lunar.tsx" clientOnly>农历日历</code>
<code src="./demo/week.tsx" clientOnly version="5.23.0">周数</code>
<code src="./demo/customize-header.tsx" clientOnly>自定义头部</code>
<code src="./demo/component-token.tsx" debug>组件 Token</code>
@ -46,7 +47,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA
| defaultValue | 默认展示的日期 | [dayjs](https://day.js.org/) | - | |
| disabledDate | 不可选择的日期，参数为当前 `value`，注意使用时[不要直接修改](https://github.com/ant-design/ant-design/issues/30987) | (currentDate: Dayjs) => boolean | - | |
| fullscreen | 是否全屏显示 | boolean | true | |
| headerRender | 自定义头部内容 | function(object:{value: Dayjs, type: string, onChange: f(), onTypeChange: f()}) | - | |
| showWeek | 是否显示周数列 | boolean | false | 5.23.0 |
| headerRender | 自定义头部内容 | function(object:{value: Dayjs, type: 'year' \| 'month', onChange: f(), onTypeChange: f()}) | - | |
| locale | 国际化配置 | object | [(默认配置)](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |
| mode | 初始模式 | `month` \| `year` | `month` | |
| validRange | 设置可以显示的日期 | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | |

12
components/calendar/style/index.ts
View File

@ -149,6 +149,18 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
},
},
},
[`${componentCls}-cell-week ${componentCls}-cell-inner`]: {
display: 'block',
borderRadius: 0,
borderTop: `${unit(token.lineWidthBold)} ${token.lineType} ${token.colorSplit}`,
width: '100%',
height: token
.calc(token.dateValueHeight)
.add(token.dateContentHeight)
.add(token.calc(token.paddingXS).div(2))
.add(token.lineWidthBold)
.equal(),
},
[`${componentCls}-cell`]: {
'&::before': {
display: 'none',

11
components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -160,6 +160,7 @@ Array [
class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs"
>
<div
aria-orientation="horizontal"
class="ant-tabs-nav"
role="tablist"
>
@ -195,7 +196,7 @@ Array [
class="ant-tabs-tab-btn"
id="rc-tabs-test-tab-tab2"
role="tab"
tabindex="0"
tabindex="-1"
>
tab2
</div>
@ -1127,6 +1128,7 @@ Array [
class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs"
>
<div
aria-orientation="horizontal"
class="ant-tabs-nav"
role="tablist"
>
@ -1162,7 +1164,7 @@ Array [
class="ant-tabs-tab-btn"
id="rc-tabs-test-tab-tab2"
role="tab"
tabindex="0"
tabindex="-1"
>
tab2
</div>
@ -1267,6 +1269,7 @@ Array [
class="ant-tabs ant-tabs-top ant-tabs-middle ant-card-head-tabs"
>
<div
aria-orientation="horizontal"
class="ant-tabs-nav"
role="tablist"
>
@ -1287,7 +1290,7 @@ Array [
class="ant-tabs-tab-btn"
id="rc-tabs-test-tab-article"
role="tab"
tabindex="0"
tabindex="-1"
>
article
</div>
@ -1317,7 +1320,7 @@ Array [
class="ant-tabs-tab-btn"
id="rc-tabs-test-tab-project"
role="tab"
tabindex="0"
tabindex="-1"
>
project
</div>

11
components/card/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -156,6 +156,7 @@ Array [
class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs"
>
<div
aria-orientation="horizontal"
class="ant-tabs-nav"
role="tablist"
>
@ -187,7 +188,7 @@ Array [
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
tabindex="-1"
>
tab2
</div>
@ -1084,6 +1085,7 @@ Array [
class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs"
>
<div
aria-orientation="horizontal"
class="ant-tabs-nav"
role="tablist"
>
@ -1115,7 +1117,7 @@ Array [
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
tabindex="-1"
>
tab2
</div>
@ -1201,6 +1203,7 @@ Array [
class="ant-tabs ant-tabs-top ant-tabs-middle ant-card-head-tabs"
>
<div
aria-orientation="horizontal"
class="ant-tabs-nav"
role="tablist"
>
@ -1219,7 +1222,7 @@ Array [
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
tabindex="-1"
>
article
</div>
@ -1245,7 +1248,7 @@ Array [
aria-selected="false"
class="ant-tabs-tab-btn"
role="tab"
tabindex="0"
tabindex="-1"
>
project
</div>

7
components/card/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -14,6 +14,7 @@ exports[`Card correct pass tabList props 1`] = `
class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-large ant-tabs-card ant-tabs-editable-card ant-card-head-tabs"
>
<div
aria-orientation="horizontal"
class="ant-tabs-nav"
role="tablist"
>
@ -76,14 +77,14 @@ exports[`Card correct pass tabList props 1`] = `
class="ant-tabs-tab-btn"
id="rc-tabs-test-tab-deprecated"
role="tab"
tabindex="0"
tabindex="-1"
>
Deprecated
</div>
<button
aria-label="remove"
class="ant-tabs-tab-remove"
tabindex="0"
tabindex="-1"
type="button"
>
<span
@ -133,7 +134,7 @@ exports[`Card correct pass tabList props 1`] = `
class="ant-tabs-tab-btn"
id="rc-tabs-test-tab-notClosable"
role="tab"
tabindex="0"
tabindex="-1"
>
NotClosable
</div>

6
components/card/demo/_semantic.tsx
View File

@ -59,11 +59,11 @@ const App: React.FC = () => {
<SemanticPreview
semantics={[
{ name: 'header', desc: locale.header, version: '5.14.0' },
{ name: 'body', desc: locale.body, version: '5.14.0' },
{ name: 'extra', desc: locale.extra, version: '5.14.0' },
{ name: 'title', desc: locale.title, version: '5.14.0' },
{ name: 'actions', desc: locale.actions, version: '5.14.0' },
{ name: 'extra', desc: locale.extra, version: '5.14.0' },
{ name: 'cover', desc: locale.cover, version: '5.14.0' },
{ name: 'body', desc: locale.body, version: '5.14.0' },
{ name: 'actions', desc: locale.actions, version: '5.14.0' },
]}
>
<BlockCard>

4
components/card/demo/component-token.tsx
View File

@ -8,6 +8,10 @@ export default () => (
components: {
Card: {
headerBg: '#e6f4ff',
bodyPaddingSM: 22,
headerPaddingSM: 20,
headerPadding: 18,
bodyPadding: 26,
headerFontSize: 20,
headerFontSizeSM: 20,
headerHeight: 60,

50
components/card/style/index.ts
View File

@ -31,6 +31,26 @@ export interface ComponentToken {
* @descEN Height of small card header
*/
headerHeightSM: number | string;
/**
* @desc 小号卡片内边距
* @descEN Padding of small card body
*/
bodyPaddingSM: number;
/**
* @desc 小号卡片头部内边距
* @descEN Padding of small card head
*/
headerPaddingSM: number;
/**
* @desc 卡片内边距
* @descEN Padding of card body
*/
bodyPadding: number;
/**
* @desc 卡片头部内边距
* @descEN Padding of card head
*/
headerPadding: number;
/**
* @desc 操作区背景色
* @descEN Background color of card actions
@ -64,11 +84,6 @@ interface CardToken extends FullToken<'Card'> {
* @descEN Padding of card header
*/
cardHeadPadding: number;
/**
* @desc 小号卡片内边距
* @descEN Padding of small card
*/
cardPaddingSM: number;
/**
* @desc 卡片基础内边距
* @descEN Padding of base card
@ -85,7 +100,7 @@ interface CardToken extends FullToken<'Card'> {
// ============================== Head ==============================
const genCardHeadStyle: GenerateStyle<CardToken> = (token): CSSObject => {
const { antCls, componentCls, headerHeight, cardPaddingBase, tabsMarginBottom } = token;
const { antCls, componentCls, headerHeight, headerPadding, tabsMarginBottom } = token;
return {
display: 'flex',
@ -93,7 +108,7 @@ const genCardHeadStyle: GenerateStyle<CardToken> = (token): CSSObject => {
flexDirection: 'column',
minHeight: headerHeight,
marginBottom: -1, // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
padding: `0 ${unit(cardPaddingBase)}`,
padding: `0 ${unit(headerPadding)}`,
color: token.colorTextHeading,
fontWeight: token.fontWeightStrong,
fontSize: token.headerFontSize,
@ -259,11 +274,11 @@ const genCardMetaStyle: GenerateStyle<CardToken> = (token): CSSObject => ({
// ============================== Inner ==============================
const genCardTypeInnerStyle: GenerateStyle<CardToken> = (token): CSSObject => {
const { componentCls, cardPaddingBase, colorFillAlter } = token;
const { componentCls, colorFillAlter, headerPadding, bodyPadding } = token;
return {
[`${componentCls}-head`]: {
padding: `0 ${unit(cardPaddingBase)}`,
padding: `0 ${unit(headerPadding)}`,
background: colorFillAlter,
'&-title': {
@ -272,7 +287,7 @@ const genCardTypeInnerStyle: GenerateStyle<CardToken> = (token): CSSObject => {
},
[`${componentCls}-body`]: {
padding: `${unit(token.padding)} ${unit(cardPaddingBase)}`,
padding: `${unit(token.padding)} ${unit(bodyPadding)}`,
},
};
};
@ -298,7 +313,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
cardHeadPadding,
colorBorderSecondary,
boxShadowTertiary,
cardPaddingBase,
bodyPadding,
extraColor,
} = token;
@ -325,7 +340,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
},
[`${componentCls}-body`]: {
padding: cardPaddingBase,
padding: bodyPadding,
borderRadius: `0 0 ${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)}`,
...clearFix(),
},
@ -400,13 +415,13 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
// ============================== Size ==============================
const genCardSizeStyle: GenerateStyle<CardToken> = (token): CSSObject => {
const { componentCls, cardPaddingSM, headerHeightSM, headerFontSizeSM } = token;
const { componentCls, bodyPaddingSM, headerPaddingSM, headerHeightSM, headerFontSizeSM } = token;
return {
[`${componentCls}-small`]: {
[`> ${componentCls}-head`]: {
minHeight: headerHeightSM,
padding: `0 ${unit(cardPaddingSM)}`,
padding: `0 ${unit(headerPaddingSM)}`,
fontSize: headerFontSizeSM,
[`> ${componentCls}-head-wrapper`]: {
@ -417,7 +432,7 @@ const genCardSizeStyle: GenerateStyle<CardToken> = (token): CSSObject => {
},
[`> ${componentCls}-body`]: {
padding: cardPaddingSM,
padding: bodyPaddingSM,
},
},
[`${componentCls}-small${componentCls}-contain-tabs`]: {
@ -442,6 +457,10 @@ export const prepareComponentToken: GetDefaultToken<'Card'> = (token) => ({
actionsLiMargin: `${token.paddingSM}px 0`,
tabsMarginBottom: -token.padding - token.lineWidth,
extraColor: token.colorText,
bodyPaddingSM: 12, // Fixed padding.
headerPaddingSM: 12,
bodyPadding: token.bodyPadding ?? token.paddingLG,
headerPadding: token.headerPadding ?? token.paddingLG,
});
// ============================== Export ==============================
@ -453,7 +472,6 @@ export default genStyleHooks(
cardHeadPadding: token.padding,
cardPaddingBase: token.paddingLG,
cardActionsIconSize: token.fontSize,
cardPaddingSM: 12, // Fixed padding.
});
return [

4
components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1158,6 +1158,7 @@ Array [
<input
checked=""
class="ant-radio-button-input"
name="test-id"
type="radio"
value="top"
/>
@ -1177,6 +1178,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="bottom"
/>
@ -1196,6 +1198,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="left"
/>
@ -1215,6 +1218,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="right"
/>

4
components/carousel/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -1147,6 +1147,7 @@ Array [
<input
checked=""
class="ant-radio-button-input"
name="test-id"
type="radio"
value="top"
/>
@ -1166,6 +1167,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="bottom"
/>
@ -1185,6 +1187,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="left"
/>
@ -1204,6 +1207,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="right"
/>

160
components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -310,6 +310,162 @@ exports[`renders components/cascader/demo/change-on-select.tsx extend context co
exports[`renders components/cascader/demo/change-on-select.tsx extend context correctly 2`] = `[]`;
exports[`renders components/cascader/demo/component-token.tsx extend context correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-placeholder"
>
Please select
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;"
>
<div>
<div
class="ant-cascader-menus"
>
<ul
class="ant-cascader-menu"
role="menu"
>
<li
aria-checked="false"
class="ant-cascader-menu-item ant-cascader-menu-item-expand"
data-path-key="zhejiang"
role="menuitemcheckbox"
title="Zhejiang"
>
<div
class="ant-cascader-menu-item-content"
>
Zhejiang
</div>
<div
class="ant-cascader-menu-item-expand-icon"
>
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</div>
</li>
<li
aria-checked="false"
class="ant-cascader-menu-item ant-cascader-menu-item-expand"
data-path-key="jiangsu"
role="menuitemcheckbox"
title="Jiangsu"
>
<div
class="ant-cascader-menu-item-content"
>
Jiangsu
</div>
<div
class="ant-cascader-menu-item-expand-icon"
>
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<span
aria-hidden="true"
class="ant-select-arrow"
style="user-select: none;"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-select-suffix"
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>
</div>
`;
exports[`renders components/cascader/demo/component-token.tsx extend context correctly 2`] = `[]`;
exports[`renders components/cascader/demo/custom-dropdown.tsx extend context correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
@ -2043,6 +2199,7 @@ Array [
<input
checked=""
class="ant-radio-button-input"
name="test-id"
type="radio"
value="topLeft"
/>
@ -2062,6 +2219,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="topRight"
/>
@ -2081,6 +2239,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="bottomLeft"
/>
@ -2100,6 +2259,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="bottomRight"
/>

69
components/cascader/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -128,6 +128,71 @@ exports[`renders components/cascader/demo/change-on-select.tsx correctly 1`] = `
</div>
`;
exports[`renders components/cascader/demo/component-token.tsx correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
readonly=""
role="combobox"
style="opacity:0"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-placeholder"
>
Please select
</span>
</span>
</div>
<span
aria-hidden="true"
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-select-suffix"
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>
</div>
`;
exports[`renders components/cascader/demo/custom-dropdown.tsx correctly 1`] = `
<div
class="ant-select ant-cascader ant-select-outlined ant-select-single ant-select-allow-clear ant-select-show-arrow"
@ -1022,6 +1087,7 @@ Array [
<input
checked=""
class="ant-radio-button-input"
name="test-id"
type="radio"
value="topLeft"
/>
@ -1041,6 +1107,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="topRight"
/>
@ -1060,6 +1127,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="bottomLeft"
/>
@ -1079,6 +1147,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="bottomRight"
/>

7
components/cascader/demo/component-token.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
组件 Token
## en-US
Component Token

64
components/cascader/demo/component-token.tsx Normal file
View File

@ -0,0 +1,64 @@
import React from 'react';
import type { CascaderProps } from 'antd';
import { Cascader, ConfigProvider } from 'antd';
interface Option {
value: string;
label: string;
children?: Option[];
}
const options: Option[] = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
];
const onChange: CascaderProps<Option>['onChange'] = (value) => {
console.log(value);
};
const App: React.FC = () => (
<ConfigProvider
theme={{
components: {
Cascader: {
optionSelectedColor: 'red',
},
},
}}
>
<Cascader options={options} onChange={onChange} placeholder="Please select" />
</ConfigProvider>
);
export default App;

1
components/cascader/index.en-US.md
View File

@ -37,6 +37,7 @@ demo:
<code src="./demo/status.tsx">Status</code>
<code src="./demo/panel.tsx" version=">= 5.10.0">Panel</code>
<code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
<code src="./demo/component-token.tsx" debug>Component Token</code>
## API

4
components/cascader/index.tsx
View File

@ -370,9 +370,7 @@ if (process.env.NODE_ENV !== 'production') {
// We don't care debug panel
/* istanbul ignore next */
const PurePanel = genPurePanel(Cascader, undefined, undefined, (props: any) =>
omit(props, ['visible']),
);
const PurePanel = genPurePanel(Cascader, 'dropdownAlign', (props: any) => omit(props, ['visible']));
Cascader.SHOW_PARENT = SHOW_PARENT;
Cascader.SHOW_CHILD = SHOW_CHILD;

1
components/cascader/index.zh-CN.md
View File

@ -38,6 +38,7 @@ demo:
<code src="./demo/status.tsx">自定义状态</code>
<code src="./demo/panel.tsx" version=">= 5.10.0">面板使用</code>
<code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
<code src="./demo/component-token.tsx" debug>Component Token</code>
## API

1
components/cascader/style/columns.ts
View File

@ -92,6 +92,7 @@ const getColumnsStyle: GenerateStyle<CascaderToken> = (token: CascaderToken): CS
[`&-active:not(${cascaderMenuItemCls}-disabled)`]: {
'&, &:hover': {
color: token.optionSelectedColor,
fontWeight: token.optionSelectedFontWeight,
backgroundColor: token.optionSelectedBg,
},

6
components/cascader/style/index.ts
View File

@ -26,6 +26,11 @@ export interface ComponentToken {
* @descEN Background color of selected item
*/
optionSelectedBg: string;
/**
* @desc 选项选中时文本颜色
* @descEN Text color when option is selected
*/
optionSelectedColor: string;
/**
* @desc 选项选中时字重
* @descEN Font weight of selected item
@ -100,6 +105,7 @@ export const prepareComponentToken = (token: GlobalToken) => {
optionSelectedFontWeight: token.fontWeightStrong,
optionPadding: `${itemPaddingVertical}px ${token.paddingSM}px`,
menuPadding: token.paddingXXS,
optionSelectedColor: token.colorText,
};
};

2
components/collapse/Collapse.tsx
View File

@ -106,7 +106,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
mergedExpandIcon(panelProps)
) : (
<RightOutlined
rotate={panelProps.isActive ? 90 : undefined}
rotate={panelProps.isActive ? (direction === 'rtl' ? -90 : 90) : undefined}
aria-label={panelProps.isActive ? 'expanded' : 'collapsed'}
/>
);

6
components/collapse/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -727,7 +727,7 @@ exports[`renders components/collapse/demo/custom.tsx correctly 1`] = `
>
<div
class="ant-collapse-item ant-collapse-item-active"
style="margin-bottom:24px;background:rgba(0, 0, 0, 0.02);border-radius:8px;border:none"
style="margin-bottom:24px;background:rgba(0,0,0,0.02);border-radius:8px;border:none"
>
<div
aria-disabled="false"
@ -782,7 +782,7 @@ exports[`renders components/collapse/demo/custom.tsx correctly 1`] = `
</div>
<div
class="ant-collapse-item"
style="margin-bottom:24px;background:rgba(0, 0, 0, 0.02);border-radius:8px;border:none"
style="margin-bottom:24px;background:rgba(0,0,0,0.02);border-radius:8px;border:none"
>
<div
aria-disabled="false"
@ -823,7 +823,7 @@ exports[`renders components/collapse/demo/custom.tsx correctly 1`] = `
</div>
<div
class="ant-collapse-item"
style="margin-bottom:24px;background:rgba(0, 0, 0, 0.02);border-radius:8px;border:none"
style="margin-bottom:24px;background:rgba(0,0,0,0.02);border-radius:8px;border:none"
>
<div
aria-disabled="false"

11
components/collapse/style/index.ts
View File

@ -1,7 +1,7 @@
import type { CSSProperties } from 'react';
import { unit } from '@ant-design/cssinjs';
import { resetComponent, resetIcon } from '../../style';
import { genFocusStyle, resetComponent, resetIcon } from '../../style';
import { genCollapseMotion } from '../../style/motion';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
@ -95,6 +95,14 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
[`& > ${componentCls}-item`]: {
borderBottom: borderBase,
'&:first-child': {
[`
&,
& > ${componentCls}-header`]: {
borderRadius: `${unit(collapsePanelBorderRadius)} ${unit(collapsePanelBorderRadius)} 0 0`,
},
},
'&:last-child': {
[`
&,
@ -115,6 +123,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
lineHeight,
cursor: 'pointer',
transition: `all ${motionDurationSlow}, visibility 0s`,
...genFocusStyle(token),
[`> ${componentCls}-header-text`]: {
flex: 'auto',

11
components/color-picker/ColorPicker.tsx
View File

@ -221,7 +221,7 @@ const ColorPicker: CompoundedComponent = (props) => {
return wrapCSSVar(
<Popover
style={styles?.popup}
overlayInnerStyle={styles?.popupOverlayInner}
styles={{ body: styles?.popupOverlayInner }}
onOpenChange={(visible) => {
if (!visible || !mergedDisabled) {
setPopupOpen(visible);
@ -253,7 +253,7 @@ const ColorPicker: CompoundedComponent = (props) => {
/>
</ContextIsolator>
}
overlayClassName={mergedPopupCls}
classNames={{ root: mergedPopupCls }}
{...popoverProps}
>
{children || (
@ -280,14 +280,15 @@ if (process.env.NODE_ENV !== 'production') {
const PurePanel = genPurePanel(
ColorPicker,
'color-picker',
/* istanbul ignore next */
(prefixCls) => prefixCls,
undefined,
(props: ColorPickerProps) => ({
...props,
placement: 'bottom' as TriggerPlacement,
autoAdjustOverflow: false,
}),
'color-picker',
/* istanbul ignore next */
(prefixCls) => prefixCls,
);
ColorPicker._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;

7
components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -3981,7 +3981,8 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
<div
aria-label="segmented control"
class="ant-segmented ant-segmented-sm"
role="listbox"
role="radiogroup"
tabindex="0"
>
<div
class="ant-segmented-group"
@ -3992,12 +3993,12 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
<input
checked=""
class="ant-segmented-item-input"
name="test-id"
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Single"
>
Single
@ -4008,12 +4009,12 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
>
<input
class="ant-segmented-item-input"
name="test-id"
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Gradient"
>
Gradient

15
components/color-picker/__tests__/index.test.tsx
View File

@ -12,7 +12,7 @@ import Form from '../../form';
import theme from '../../theme';
import { AggregationColor } from '../color';
import ColorPicker from '../ColorPicker';
import type { ColorPickerProps, ColorValueType } from '../interface';
import type { ColorPickerProps, ColorValueType, PresetsItem } from '../interface';
import { generateColor } from '../util';
function doMouseMove(
@ -178,6 +178,7 @@ describe('ColorPicker', () => {
onChange={handleColorChange}
presets={[
{
key: 'Recommended',
label: 'Recommended',
colors: [
'#000000',
@ -193,6 +194,7 @@ describe('ColorPicker', () => {
],
},
{
key: 'Recent',
label: 'Recent',
colors: [],
},
@ -243,7 +245,8 @@ describe('ColorPicker', () => {
});
describe('preset collapsed', () => {
const recommendedPreset = {
const recommendedPreset: PresetsItem = {
key: 'Recommended',
label: 'Recommended',
colors: ['#f00', '#0f0', '#00f'],
};
@ -263,6 +266,7 @@ describe('ColorPicker', () => {
presets={[
recommendedPreset,
{
key: 'Recent',
label: 'Recent',
colors: ['#f00d', '#0f0d', '#00fd'],
defaultOpen: false,
@ -381,6 +385,7 @@ describe('ColorPicker', () => {
open
presets={[
{
key: 'test',
label: 'test',
colors: ['#0000001A'],
},
@ -955,9 +960,9 @@ describe('ColorPicker', () => {
<ColorPicker
open
presets={[
{ label: <span>aaa</span>, colors: ['#333'], defaultOpen: true },
{ label: <span>bbb</span>, colors: ['#666'], defaultOpen: true },
{ label: <span>ccc</span>, colors: ['#999'], defaultOpen: true },
{ label: <span>aaa</span>, colors: ['#333'], key: 'a', defaultOpen: true },
{ label: <span>bbb</span>, colors: ['#666'], key: 'b', defaultOpen: true },
{ label: <span>ccc</span>, colors: ['#999'], key: 'c', defaultOpen: true },
]}
/>,
);

10
components/color-picker/components/ColorPresets.tsx
View File

@ -35,10 +35,10 @@ export const isBright = (value: AggregationColor, bgColorToken: string) => {
return r * 0.299 + g * 0.587 + b * 0.114 > 192;
};
const genCollapsePanelKey = (preset: PresetsItem, index: number) =>
typeof preset.label === 'string' || typeof preset.label === 'number'
? `panel-${preset.label}-${index}`
: `panel-${index}`;
const genCollapsePanelKey = (preset: PresetsItem, index: number) => {
const mergedKey = preset.key ?? index;
return `panel-${mergedKey}`;
};
const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color, onChange }) => {
const [locale] = useLocale('ColorPicker');
@ -65,7 +65,7 @@ const ColorPresets: FC<ColorPresetsProps> = ({ prefixCls, presets, value: color,
onChange?.(colorValue);
};
const items: CollapseProps['items'] = presetsValue.map((preset, index) => ({
const items = presetsValue.map<NonNullable<CollapseProps['items']>[number]>((preset, index) => ({
key: genCollapsePanelKey(preset, index),
label: <div className={`${colorPresetsPrefixCls}-label`}>{preset?.label}</div>,
children: (

8
components/color-picker/demo/panel-render.tsx
View File

@ -5,11 +5,9 @@ import type { ColorPickerProps } from 'antd';
type Presets = Required<ColorPickerProps>['presets'][number];
const genPresets = (presets = presetPalettes) =>
Object.entries(presets).map<Presets>(([label, colors]) => ({
label,
colors,
}));
function genPresets(presets = presetPalettes) {
return Object.entries(presets).map<Presets>(([label, colors]) => ({ label, colors, key: label }));
}
const HorizontalLayoutDemo = () => {
const { token } = theme.useToken();

5
components/color-picker/demo/presets.tsx
View File

@ -5,8 +5,9 @@ import type { ColorPickerProps } from 'antd';
type Presets = Required<ColorPickerProps>['presets'][number];
const genPresets = (presets = presetPalettes) =>
Object.entries(presets).map<Presets>(([label, colors]) => ({ label, colors }));
function genPresets(presets = presetPalettes) {
return Object.entries(presets).map<Presets>(([label, colors]) => ({ label, colors, key: label }));
}
const Demo: React.FC = () => {
const { token } = theme.useToken();

2
components/color-picker/index.en-US.md
View File

@ -54,7 +54,7 @@ Common props ref：[Common props](/docs/react/common-props)
| format | Format of color | `rgb` \| `hex` \| `hsb` | `hex` | |
| mode | Configure single or gradient color | `'single' \| 'gradient' \| ('single' \| 'gradient')[]` | `single` | 5.20.0 |
| open | Whether to show popup | boolean | - | |
| presets | Preset colors | `{ label: ReactNode, colors: Array<string \| Color>, defaultOpen?: boolean }[]` | - | `defaultOpen: 5.11.0` |
| presets | Preset colors | `{ label: ReactNode, colors: Array<string \| Color>, defaultOpen?: boolean, key?: React.Key }[]` | - | `defaultOpen: 5.11.0, key: 5.23.0` |
| placement | Placement of popup | The design of the [placement](/components/tooltip/#api) parameter is the same as the `Tooltips` component. | `bottomLeft` | |
| panelRender | Custom Render Panel | `(panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode` | - | 5.7.0 |
| showText | Show color text | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 |

2
components/color-picker/index.zh-CN.md
View File

@ -55,7 +55,7 @@ group:
| format | 颜色格式 | `rgb` \| `hex` \| `hsb` | `hex` | |
| mode | 选择器模式，用于配置单色与渐变 | `'single' \| 'gradient' \| ('single' \| 'gradient')[]` | `single` | 5.20.0 |
| open | 是否显示弹出窗口 | boolean | - | |
| presets | 预设的颜色 | `{ label: ReactNode, colors: Array<string \| Color>, defaultOpen?: boolean }[]` | - | `defaultOpen: 5.11.0` |
| presets | 预设的颜色 | `{ label: ReactNode, colors: Array<string \| Color>, defaultOpen?: boolean, key?: React.Key }[]` | - | `defaultOpen: 5.11.0, key: 5.23.0` |
| placement | 弹出窗口的位置 | 同 `Tooltips` 组件的 [placement](/components/tooltip-cn/#api) 参数设计 | `bottomLeft` | |
| panelRender | 自定义渲染面板 | `(panel: React.ReactNode, extra: { components: { Picker: FC; Presets: FC } }) => React.ReactNode` | - | 5.7.0 |
| showText | 显示颜色文本 | boolean \| `(color: Color) => React.ReactNode` | - | 5.7.0 |

7
components/color-picker/interface.ts
View File

@ -1,4 +1,5 @@
import type { CSSProperties, FC, ReactNode } from 'react';
import React from 'react';
import type {
ColorGenInput,
ColorPickerProps as RcColorPickerProps,
@ -33,7 +34,13 @@ export interface PresetsItem {
* @default true
*/
defaultOpen?: boolean;
/**
* The key of the panel
* @since 5.23.0
*/
key?: React.Key;
}
export type TriggerType = 'click' | 'hover';
export type TriggerPlacement = TooltipPlacement; // Alias, to prevent breaking changes.

9
components/config-provider/UnstableContext.tsx
View File

@ -15,13 +15,10 @@ const defaultReactRender: RenderType = (node, container) => {
// Warning for React 19
if (process.env.NODE_ENV !== 'production') {
const majorVersion = parseInt(React.version.split('.')[0], 10);
const fullKeys = Object.keys(ReactDOM);
warning(
majorVersion < 19 ||
!!(
ReactDOM as typeof ReactDOM & {
createRoot: VoidFunction;
}
).createRoot,
majorVersion < 19 || fullKeys.includes('createRoot'),
'compatible',
'antd v5 support React is 16 ~ 18. see https://u.ant.design/v5-for-19 for compatible.',
);

203
components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
View File

@ -1755,6 +1755,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
<input
checked=""
class="config-radio-button-input"
name="test-id"
type="radio"
value="month"
/>
@ -1774,6 +1775,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
>
<input
class="config-radio-button-input"
name="test-id"
type="radio"
value="year"
/>
@ -2639,6 +2641,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
>
<input
class="config-radio-button-input"
name="test-id"
type="radio"
value="month"
/>
@ -2659,6 +2662,7 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
<input
checked=""
class="config-radio-button-input"
name="test-id"
type="radio"
value="year"
/>
@ -3058,6 +3062,7 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
checked=""
class="config-radio-button-input"
disabled=""
name="test-id"
type="radio"
value="month"
/>
@ -3078,6 +3083,7 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
<input
class="config-radio-button-input"
disabled=""
name="test-id"
type="radio"
value="year"
/>
@ -3945,6 +3951,7 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
<input
class="config-radio-button-input"
disabled=""
name="test-id"
type="radio"
value="month"
/>
@ -3966,6 +3973,7 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
checked=""
class="config-radio-button-input"
disabled=""
name="test-id"
type="radio"
value="year"
/>
@ -4362,6 +4370,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
<input
checked=""
class="config-radio-button-input"
name="test-id"
type="radio"
value="month"
/>
@ -4381,6 +4390,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
>
<input
class="config-radio-button-input"
name="test-id"
type="radio"
value="year"
/>
@ -5246,6 +5256,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
>
<input
class="config-radio-button-input"
name="test-id"
type="radio"
value="month"
/>
@ -5266,6 +5277,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
<input
checked=""
class="config-radio-button-input"
name="test-id"
type="radio"
value="year"
/>
@ -5662,6 +5674,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
<input
checked=""
class="config-radio-button-input"
name="test-id"
type="radio"
value="month"
/>
@ -5681,6 +5694,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
>
<input
class="config-radio-button-input"
name="test-id"
type="radio"
value="year"
/>
@ -6546,6 +6560,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
>
<input
class="config-radio-button-input"
name="test-id"
type="radio"
value="month"
/>
@ -6566,6 +6581,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
<input
checked=""
class="config-radio-button-input"
name="test-id"
type="radio"
value="year"
/>
@ -6962,6 +6978,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
<input
checked=""
class="config-radio-button-input"
name="test-id"
type="radio"
value="month"
/>
@ -6981,6 +6998,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
>
<input
class="config-radio-button-input"
name="test-id"
type="radio"
value="year"
/>
@ -7846,6 +7864,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
>
<input
class="config-radio-button-input"
name="test-id"
type="radio"
value="month"
/>
@ -7866,6 +7885,7 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
<input
checked=""
class="config-radio-button-input"
name="test-id"
type="radio"
value="year"
/>
@ -8262,6 +8282,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
<input
checked=""
class="ant-radio-button-input"
name="test-id"
type="radio"
value="month"
/>
@ -8281,6 +8302,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="year"
/>
@ -9146,6 +9168,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="month"
/>
@ -9166,6 +9189,7 @@ exports[`ConfigProvider components Calendar normal 1`] = `
<input
checked=""
class="ant-radio-button-input"
name="test-id"
type="radio"
value="year"
/>
@ -9562,6 +9586,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
<input
checked=""
class="ant-radio-button-input"
name="test-id"
type="radio"
value="month"
/>
@ -9581,6 +9606,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="year"
/>
@ -10446,6 +10472,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="month"
/>
@ -10466,6 +10493,7 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
<input
checked=""
class="ant-radio-button-input"
name="test-id"
type="radio"
value="year"
/>
@ -16125,7 +16153,7 @@ exports[`ConfigProvider components Input configProvider 1`] = `
>
<input
class="config-input config-input-outlined"
type="text"
type="search"
value=""
/>
<span
@ -16225,7 +16253,7 @@ exports[`ConfigProvider components Input configProvider componentDisabled 1`] =
<input
class="config-input config-input-disabled config-input-outlined"
disabled=""
type="text"
type="search"
value=""
/>
<span
@ -16326,7 +16354,7 @@ exports[`ConfigProvider components Input configProvider componentSize large 1`]
>
<input
class="config-input config-input-lg config-input-outlined"
type="text"
type="search"
value=""
/>
<span
@ -16424,7 +16452,7 @@ exports[`ConfigProvider components Input configProvider componentSize middle 1`]
>
<input
class="config-input config-input-outlined"
type="text"
type="search"
value=""
/>
<span
@ -16522,7 +16550,7 @@ exports[`ConfigProvider components Input configProvider componentSize small 1`]
>
<input
class="config-input config-input-sm config-input-outlined"
type="text"
type="search"
value=""
/>
<span
@ -16620,7 +16648,7 @@ exports[`ConfigProvider components Input normal 1`] = `
>
<input
class="ant-input ant-input-outlined"
type="text"
type="search"
value=""
/>
<span
@ -16718,7 +16746,7 @@ exports[`ConfigProvider components Input prefixCls 1`] = `
>
<input
class="ant-input ant-input-outlined"
type="text"
type="search"
value=""
/>
<span
@ -22174,6 +22202,7 @@ exports[`ConfigProvider components Radio configProvider 1`] = `
<input
checked=""
class="config-radio-input"
name="test-id"
type="radio"
/>
<span
@ -22197,6 +22226,7 @@ exports[`ConfigProvider components Radio configProvider 1`] = `
<input
checked=""
class="config-radio-button-input"
name="test-id"
type="radio"
/>
<span
@ -22226,6 +22256,7 @@ exports[`ConfigProvider components Radio configProvider componentDisabled 1`] =
checked=""
class="config-radio-input"
disabled=""
name="test-id"
type="radio"
/>
<span
@ -22250,6 +22281,7 @@ exports[`ConfigProvider components Radio configProvider componentDisabled 1`] =
checked=""
class="config-radio-button-input"
disabled=""
name="test-id"
type="radio"
/>
<span
@ -22278,6 +22310,7 @@ exports[`ConfigProvider components Radio configProvider componentSize large 1`]
<input
checked=""
class="config-radio-input"
name="test-id"
type="radio"
/>
<span
@ -22301,6 +22334,7 @@ exports[`ConfigProvider components Radio configProvider componentSize large 1`]
<input
checked=""
class="config-radio-button-input"
name="test-id"
type="radio"
/>
<span
@ -22329,6 +22363,7 @@ exports[`ConfigProvider components Radio configProvider componentSize middle 1`]
<input
checked=""
class="config-radio-input"
name="test-id"
type="radio"
/>
<span
@ -22352,6 +22387,7 @@ exports[`ConfigProvider components Radio configProvider componentSize middle 1`]
<input
checked=""
class="config-radio-button-input"
name="test-id"
type="radio"
/>
<span
@ -22380,6 +22416,7 @@ exports[`ConfigProvider components Radio configProvider componentSize small 1`]
<input
checked=""
class="config-radio-input"
name="test-id"
type="radio"
/>
<span
@ -22403,6 +22440,7 @@ exports[`ConfigProvider components Radio configProvider componentSize small 1`]
<input
checked=""
class="config-radio-button-input"
name="test-id"
type="radio"
/>
<span
@ -22431,6 +22469,7 @@ exports[`ConfigProvider components Radio normal 1`] = `
<input
checked=""
class="ant-radio-input"
name="test-id"
type="radio"
/>
<span
@ -22454,6 +22493,7 @@ exports[`ConfigProvider components Radio normal 1`] = `
<input
checked=""
class="ant-radio-button-input"
name="test-id"
type="radio"
/>
<span
@ -22482,6 +22522,7 @@ exports[`ConfigProvider components Radio prefixCls 1`] = `
<input
checked=""
class="prefix-Radio-input"
name="test-id"
type="radio"
/>
<span
@ -22505,6 +22546,7 @@ exports[`ConfigProvider components Radio prefixCls 1`] = `
<input
checked=""
class="prefix-Radio-button-input"
name="test-id"
type="radio"
/>
<span
@ -28935,6 +28977,7 @@ exports[`ConfigProvider components Tabs configProvider 1`] = `
class="config-tabs config-tabs-top"
>
<div
aria-orientation="horizontal"
class="config-tabs-nav"
role="tablist"
>
@ -29025,6 +29068,7 @@ exports[`ConfigProvider components Tabs configProvider componentDisabled 1`] = `
class="config-tabs config-tabs-top"
>
<div
aria-orientation="horizontal"
class="config-tabs-nav"
role="tablist"
>
@ -29115,6 +29159,7 @@ exports[`ConfigProvider components Tabs configProvider componentSize large 1`] =
class="config-tabs config-tabs-top config-tabs-large"
>
<div
aria-orientation="horizontal"
class="config-tabs-nav"
role="tablist"
>
@ -29205,6 +29250,7 @@ exports[`ConfigProvider components Tabs configProvider componentSize middle 1`]
class="config-tabs config-tabs-top config-tabs-middle"
>
<div
aria-orientation="horizontal"
class="config-tabs-nav"
role="tablist"
>
@ -29295,6 +29341,7 @@ exports[`ConfigProvider components Tabs configProvider componentSize small 1`] =
class="config-tabs config-tabs-top config-tabs-small"
>
<div
aria-orientation="horizontal"
class="config-tabs-nav"
role="tablist"
>
@ -29385,6 +29432,7 @@ exports[`ConfigProvider components Tabs normal 1`] = `
class="ant-tabs ant-tabs-top"
>
<div
aria-orientation="horizontal"
class="ant-tabs-nav"
role="tablist"
>
@ -29475,6 +29523,7 @@ exports[`ConfigProvider components Tabs prefixCls 1`] = `
class="prefix-Tabs prefix-Tabs-top"
>
<div
aria-orientation="horizontal"
class="prefix-Tabs-nav"
role="tablist"
>
@ -41434,7 +41483,6 @@ exports[`ConfigProvider components Tree configProvider 1`] = `
<div>
<div
class="config-tree config-tree-icon-hide"
role="tree"
>
<div>
<input
@ -41459,6 +41507,7 @@ exports[`ConfigProvider components Tree configProvider 1`] = `
</div>
<div
class="config-tree-list"
role="tree"
style="position: relative;"
>
<div
@ -41470,9 +41519,10 @@ exports[`ConfigProvider components Tree configProvider 1`] = `
style="display: flex; flex-direction: column;"
>
<div
aria-grabbed="false"
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
aria-expanded="false"
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
draggable="false"
role="treeitem"
>
<span
aria-hidden="true"
@ -41499,7 +41549,6 @@ exports[`ConfigProvider components Tree configProvider 1`] = `
</div>
<div
class="config-tree config-tree-block-node config-tree-directory"
role="tree"
>
<div>
<input
@ -41524,6 +41573,7 @@ exports[`ConfigProvider components Tree configProvider 1`] = `
</div>
<div
class="config-tree-list"
role="tree"
style="position: relative;"
>
<div
@ -41535,9 +41585,10 @@ exports[`ConfigProvider components Tree configProvider 1`] = `
style="display: flex; flex-direction: column;"
>
<div
aria-grabbed="false"
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
aria-expanded="false"
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
draggable="false"
role="treeitem"
>
<span
aria-hidden="true"
@ -41592,7 +41643,6 @@ exports[`ConfigProvider components Tree configProvider componentDisabled 1`] = `
<div>
<div
class="config-tree config-tree-icon-hide"
role="tree"
>
<div>
<input
@ -41617,6 +41667,7 @@ exports[`ConfigProvider components Tree configProvider componentDisabled 1`] = `
</div>
<div
class="config-tree-list"
role="tree"
style="position: relative;"
>
<div
@ -41628,9 +41679,10 @@ exports[`ConfigProvider components Tree configProvider componentDisabled 1`] = `
style="display: flex; flex-direction: column;"
>
<div
aria-grabbed="false"
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
aria-expanded="false"
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
draggable="false"
role="treeitem"
>
<span
aria-hidden="true"
@ -41657,7 +41709,6 @@ exports[`ConfigProvider components Tree configProvider componentDisabled 1`] = `
</div>
<div
class="config-tree config-tree-block-node config-tree-directory"
role="tree"
>
<div>
<input
@ -41682,6 +41733,7 @@ exports[`ConfigProvider components Tree configProvider componentDisabled 1`] = `
</div>
<div
class="config-tree-list"
role="tree"
style="position: relative;"
>
<div
@ -41693,9 +41745,10 @@ exports[`ConfigProvider components Tree configProvider componentDisabled 1`] = `
style="display: flex; flex-direction: column;"
>
<div
aria-grabbed="false"
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
aria-expanded="false"
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
draggable="false"
role="treeitem"
>
<span
aria-hidden="true"
@ -41750,7 +41803,6 @@ exports[`ConfigProvider components Tree configProvider componentSize large 1`] =
<div>
<div
class="config-tree config-tree-icon-hide"
role="tree"
>
<div>
<input
@ -41775,6 +41827,7 @@ exports[`ConfigProvider components Tree configProvider componentSize large 1`] =
</div>
<div
class="config-tree-list"
role="tree"
style="position: relative;"
>
<div
@ -41786,9 +41839,10 @@ exports[`ConfigProvider components Tree configProvider componentSize large 1`] =
style="display: flex; flex-direction: column;"
>
<div
aria-grabbed="false"
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
aria-expanded="false"
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
draggable="false"
role="treeitem"
>
<span
aria-hidden="true"
@ -41815,7 +41869,6 @@ exports[`ConfigProvider components Tree configProvider componentSize large 1`] =
</div>
<div
class="config-tree config-tree-block-node config-tree-directory"
role="tree"
>
<div>
<input
@ -41840,6 +41893,7 @@ exports[`ConfigProvider components Tree configProvider componentSize large 1`] =
</div>
<div
class="config-tree-list"
role="tree"
style="position: relative;"
>
<div
@ -41851,9 +41905,10 @@ exports[`ConfigProvider components Tree configProvider componentSize large 1`] =
style="display: flex; flex-direction: column;"
>
<div
aria-grabbed="false"
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
aria-expanded="false"
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
draggable="false"
role="treeitem"
>
<span
aria-hidden="true"
@ -41908,7 +41963,6 @@ exports[`ConfigProvider components Tree configProvider componentSize middle 1`]
<div>
<div
class="config-tree config-tree-icon-hide"
role="tree"
>
<div>
<input
@ -41933,6 +41987,7 @@ exports[`ConfigProvider components Tree configProvider componentSize middle 1`]
</div>
<div
class="config-tree-list"
role="tree"
style="position: relative;"
>
<div
@ -41944,9 +41999,10 @@ exports[`ConfigProvider components Tree configProvider componentSize middle 1`]
style="display: flex; flex-direction: column;"
>
<div
aria-grabbed="false"
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
aria-expanded="false"
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
draggable="false"
role="treeitem"
>
<span
aria-hidden="true"
@ -41973,7 +42029,6 @@ exports[`ConfigProvider components Tree configProvider componentSize middle 1`]
</div>
<div
class="config-tree config-tree-block-node config-tree-directory"
role="tree"
>
<div>
<input
@ -41998,6 +42053,7 @@ exports[`ConfigProvider components Tree configProvider componentSize middle 1`]
</div>
<div
class="config-tree-list"
role="tree"
style="position: relative;"
>
<div
@ -42009,9 +42065,10 @@ exports[`ConfigProvider components Tree configProvider componentSize middle 1`]
style="display: flex; flex-direction: column;"
>
<div
aria-grabbed="false"
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
aria-expanded="false"
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
draggable="false"
role="treeitem"
>
<span
aria-hidden="true"
@ -42066,7 +42123,6 @@ exports[`ConfigProvider components Tree configProvider componentSize small 1`] =
<div>
<div
class="config-tree config-tree-icon-hide"
role="tree"
>
<div>
<input
@ -42091,6 +42147,7 @@ exports[`ConfigProvider components Tree configProvider componentSize small 1`] =
</div>
<div
class="config-tree-list"
role="tree"
style="position: relative;"
>
<div
@ -42102,9 +42159,10 @@ exports[`ConfigProvider components Tree configProvider componentSize small 1`] =
style="display: flex; flex-direction: column;"
>
<div
aria-grabbed="false"
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
aria-expanded="false"
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
draggable="false"
role="treeitem"
>
<span
aria-hidden="true"
@ -42131,7 +42189,6 @@ exports[`ConfigProvider components Tree configProvider componentSize small 1`] =
</div>
<div
class="config-tree config-tree-block-node config-tree-directory"
role="tree"
>
<div>
<input
@ -42156,6 +42213,7 @@ exports[`ConfigProvider components Tree configProvider componentSize small 1`] =
</div>
<div
class="config-tree-list"
role="tree"
style="position: relative;"
>
<div
@ -42167,9 +42225,10 @@ exports[`ConfigProvider components Tree configProvider componentSize small 1`] =
style="display: flex; flex-direction: column;"
>
<div
aria-grabbed="false"
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last"
aria-expanded="false"
class="config-tree-treenode config-tree-treenode-switcher-close config-tree-treenode-leaf-last config-tree-treenode-leaf"
draggable="false"
role="treeitem"
>
<span
aria-hidden="true"
@ -42224,7 +42283,6 @@ exports[`ConfigProvider components Tree normal 1`] = `
<div>
<div
class="ant-tree ant-tree-icon-hide"
role="tree"
>
<div>
<input
@ -42249,6 +42307,7 @@ exports[`ConfigProvider components Tree normal 1`] = `
</div>
<div
class="ant-tree-list"
role="tree"
style="position: relative;"
>
<div
@ -42260,9 +42319,10 @@ exports[`ConfigProvider components Tree normal 1`] = `
style="display: flex; flex-direction: column;"
>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
aria-expanded="false"
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
draggable="false"
role="treeitem"
>
<span
aria-hidden="true"
@ -42289,7 +42349,6 @@ exports[`ConfigProvider components Tree normal 1`] = `
</div>
<div
class="ant-tree ant-tree-block-node ant-tree-directory"
role="tree"
>
<div>
<input
@ -42314,6 +42373,7 @@ exports[`ConfigProvider components Tree normal 1`] = `
</div>
<div
class="ant-tree-list"
role="tree"
style="position: relative;"
>
<div
@ -42325,9 +42385,10 @@ exports[`ConfigProvider components Tree normal 1`] = `
style="display: flex; flex-direction: column;"
>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
aria-expanded="false"
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last ant-tree-treenode-leaf"
draggable="false"
role="treeitem"
>
<span
aria-hidden="true"
@ -42382,7 +42443,6 @@ exports[`ConfigProvider components Tree prefixCls 1`] = `
<div>
<div
class="prefix-Tree prefix-Tree-icon-hide"
role="tree"
>
<div>
<input
@ -42407,6 +42467,7 @@ exports[`ConfigProvider components Tree prefixCls 1`] = `
</div>
<div
class="prefix-Tree-list"
role="tree"
style="position: relative;"
>
<div
@ -42418,9 +42479,10 @@ exports[`ConfigProvider components Tree prefixCls 1`] = `
style="display: flex; flex-direction: column;"
>
<div
aria-grabbed="false"
class="prefix-Tree-treenode prefix-Tree-treenode-switcher-close prefix-Tree-treenode-leaf-last"
aria-expanded="false"
class="prefix-Tree-treenode prefix-Tree-treenode-switcher-close prefix-Tree-treenode-leaf-last prefix-Tree-treenode-leaf"
draggable="false"
role="treeitem"
>
<span
aria-hidden="true"
@ -42447,7 +42509,6 @@ exports[`ConfigProvider components Tree prefixCls 1`] = `
</div>
<div
class="prefix-Tree prefix-Tree-block-node prefix-Tree-directory"
role="tree"
>
<div>
<input
@ -42472,6 +42533,7 @@ exports[`ConfigProvider components Tree prefixCls 1`] = `
</div>
<div
class="prefix-Tree-list"
role="tree"
style="position: relative;"
>
<div
@ -42483,9 +42545,10 @@ exports[`ConfigProvider components Tree prefixCls 1`] = `
style="display: flex; flex-direction: column;"
>
<div
aria-grabbed="false"
class="prefix-Tree-treenode prefix-Tree-treenode-switcher-close prefix-Tree-treenode-leaf-last"
aria-expanded="false"
class="prefix-Tree-treenode prefix-Tree-treenode-switcher-close prefix-Tree-treenode-leaf-last prefix-Tree-treenode-leaf"
draggable="false"
role="treeitem"
>
<span
aria-hidden="true"
@ -42585,7 +42648,6 @@ exports[`ConfigProvider components TreeSelect configProvider 1`] = `
</span>
<div
class="config-select-tree config-select-tree-active-focused"
role="tree"
>
<div>
<input
@ -42610,6 +42672,7 @@ exports[`ConfigProvider components TreeSelect configProvider 1`] = `
</div>
<div
class="config-select-tree-list"
role="tree"
style="position: relative;"
>
<div
@ -42622,9 +42685,10 @@ exports[`ConfigProvider components TreeSelect configProvider 1`] = `
style="display: flex; flex-direction: column;"
>
<div
aria-grabbed="false"
class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last"
aria-expanded="false"
class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last config-select-tree-treenode-leaf"
draggable="false"
role="treeitem"
>
<span
aria-hidden="true"
@ -42795,7 +42859,6 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize large
</span>
<div
class="config-select-tree config-select-tree-active-focused"
role="tree"
>
<div>
<input
@ -42820,6 +42883,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize large
</div>
<div
class="config-select-tree-list"
role="tree"
style="position: relative;"
>
<div
@ -42832,9 +42896,10 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize large
style="display: flex; flex-direction: column;"
>
<div
aria-grabbed="false"
class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last"
aria-expanded="false"
class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last config-select-tree-treenode-leaf"
draggable="false"
role="treeitem"
>
<span
aria-hidden="true"
@ -42940,7 +43005,6 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize middl
</span>
<div
class="config-select-tree config-select-tree-active-focused"
role="tree"
>
<div>
<input
@ -42965,6 +43029,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize middl
</div>
<div
class="config-select-tree-list"
role="tree"
style="position: relative;"
>
<div
@ -42977,9 +43042,10 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize middl
style="display: flex; flex-direction: column;"
>
<div
aria-grabbed="false"
class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last"
aria-expanded="false"
class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last config-select-tree-treenode-leaf"
draggable="false"
role="treeitem"
>
<span
aria-hidden="true"
@ -43085,7 +43151,6 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize small
</span>
<div
class="config-select-tree config-select-tree-active-focused"
role="tree"
>
<div>
<input
@ -43110,6 +43175,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize small
</div>
<div
class="config-select-tree-list"
role="tree"
style="position: relative;"
>
<div
@ -43122,9 +43188,10 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize small
style="display: flex; flex-direction: column;"
>
<div
aria-grabbed="false"
class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last"
aria-expanded="false"
class="config-select-tree-treenode config-select-tree-treenode-switcher-close config-select-tree-treenode-active config-select-tree-treenode-leaf-last config-select-tree-treenode-leaf"
draggable="false"
role="treeitem"
>
<span
aria-hidden="true"
@ -43230,7 +43297,6 @@ exports[`ConfigProvider components TreeSelect normal 1`] = `
</span>
<div
class="ant-select-tree ant-select-tree-active-focused"
role="tree"
>
<div>
<input
@ -43255,6 +43321,7 @@ exports[`ConfigProvider components TreeSelect normal 1`] = `
</div>
<div
class="ant-select-tree-list"
role="tree"
style="position: relative;"
>
<div
@ -43267,9 +43334,10 @@ exports[`ConfigProvider components TreeSelect normal 1`] = `
style="display: flex; flex-direction: column;"
>
<div
aria-grabbed="false"
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-active ant-select-tree-treenode-leaf-last"
aria-expanded="false"
class="ant-select-tree-treenode ant-select-tree-treenode-switcher-close ant-select-tree-treenode-active ant-select-tree-treenode-leaf-last ant-select-tree-treenode-leaf"
draggable="false"
role="treeitem"
>
<span
aria-hidden="true"
@ -43375,7 +43443,6 @@ exports[`ConfigProvider components TreeSelect prefixCls 1`] = `
</span>
<div
class="prefix-TreeSelect-tree prefix-TreeSelect-tree-active-focused"
role="tree"
>
<div>
<input
@ -43400,6 +43467,7 @@ exports[`ConfigProvider components TreeSelect prefixCls 1`] = `
</div>
<div
class="prefix-TreeSelect-tree-list"
role="tree"
style="position: relative;"
>
<div
@ -43412,9 +43480,10 @@ exports[`ConfigProvider components TreeSelect prefixCls 1`] = `
style="display: flex; flex-direction: column;"
>
<div
aria-grabbed="false"
class="prefix-TreeSelect-tree-treenode prefix-TreeSelect-tree-treenode-switcher-close prefix-TreeSelect-tree-treenode-active prefix-TreeSelect-tree-treenode-leaf-last"
aria-expanded="false"
class="prefix-TreeSelect-tree-treenode prefix-TreeSelect-tree-treenode-switcher-close prefix-TreeSelect-tree-treenode-active prefix-TreeSelect-tree-treenode-leaf-last prefix-TreeSelect-tree-treenode-leaf"
draggable="false"
role="treeitem"
>
<span
aria-hidden="true"

16
components/config-provider/__tests__/theme.test.tsx
View File

@ -39,7 +39,7 @@ describe('ConfigProvider.Theme', () => {
);
expect(themeStyle).toBeTruthy();
expect(themeStyle?.innerHTML).toContain(`--bamboo-${kebabCase(colorName)}: rgb(0, 0, 255)`);
expect(themeStyle?.innerHTML).toContain(`--bamboo-${kebabCase(colorName)}: rgb(0,0,255)`);
});
});
@ -234,7 +234,7 @@ describe('ConfigProvider.Theme', () => {
expect(button).toHaveClass('foo');
expect(button).toHaveStyle({
'--ant-color-text': 'rgba(0, 0, 0, 0.88)',
'--ant-color-text': 'rgba(0,0,0,0.88)',
boxShadow: 'var(--ant-button-default-shadow)',
'border-radius': 'var(--ant-border-radius)',
});
@ -257,14 +257,14 @@ describe('ConfigProvider.Theme', () => {
expect(fooBtn).toHaveClass('foo');
expect(fooBtn).toHaveStyle({
'--ant-color-text': 'rgba(0, 0, 0, 0.88)',
'--ant-color-text': 'rgba(0,0,0,0.88)',
boxShadow: 'var(--ant-button-default-shadow)',
'border-radius': 'var(--ant-border-radius)',
});
expect(barBtn).toHaveClass('bar');
expect(barBtn).toHaveStyle({
'--bar-color-text': 'rgba(0, 0, 0, 0.88)',
'--bar-color-text': 'rgba(0,0,0,0.88)',
boxShadow: 'var(--bar-button-default-shadow)',
'border-radius': 'var(--bar-border-radius)',
});
@ -298,7 +298,7 @@ describe('ConfigProvider.Theme', () => {
const fooBtn = container.querySelector('.button-foo')!;
expect(fooBtn).toHaveClass('foo');
expect(fooBtn).toHaveStyle({
'--foo-color-text': 'rgba(0, 0, 0, 0.88)',
'--foo-color-text': 'rgba(0,0,0,0.88)',
boxShadow: 'var(--foo-button-default-shadow)',
'border-radius': 'var(--foo-border-radius)',
});
@ -306,7 +306,7 @@ describe('ConfigProvider.Theme', () => {
const barBtn = container.querySelector('.button-bar')!;
expect(barBtn).toHaveClass('bar');
expect(barBtn).toHaveStyle({
'--bar-color-text': 'rgba(0, 0, 0, 0.88)',
'--bar-color-text': 'rgba(0,0,0,0.88)',
boxShadow: 'var(--bar-button-default-shadow)',
'border-radius': 'var(--bar-border-radius)',
});
@ -314,7 +314,7 @@ describe('ConfigProvider.Theme', () => {
const bananaBtn = container.querySelector('.button-banana')!;
expect(bananaBtn).toHaveClass('banana');
expect(bananaBtn).toHaveStyle({
'--banana-color-text': 'rgba(0, 0, 0, 0.88)',
'--banana-color-text': 'rgba(0,0,0,0.88)',
boxShadow: 'var(--banana-button-default-shadow)',
'border-radius': 'var(--banana-border-radius)',
});
@ -322,7 +322,7 @@ describe('ConfigProvider.Theme', () => {
const catBtn = container.querySelector('.button-cat')!;
expect(catBtn).toHaveClass('apple');
expect(catBtn).toHaveStyle({
'--cat-color-text': 'rgba(0, 0, 0, 0.88)',
'--cat-color-text': 'rgba(0,0,0,0.88)',
boxShadow: 'var(--cat-button-default-shadow)',
'border-radius': 'var(--cat-border-radius)',
});

31
components/config-provider/context.ts
View File

@ -34,6 +34,12 @@ import type { TourProps } from '../tour/interface';
import type { TransferProps } from '../transfer';
import type { TreeSelectProps } from '../tree-select';
import type { RenderEmptyHandler } from './defaultRenderEmpty';
import type { TooltipProps } from '../tooltip';
import type { PopoverProps } from '../popover';
import type { PopconfirmProps } from '../popconfirm';
import type { DescriptionsProps } from '../descriptions';
import type { SliderProps } from '../slider';
import type { EmptyProps } from '../empty';
export const defaultPrefixCls = 'ant';
export const defaultIconPrefixCls = 'anticon';
@ -133,6 +139,11 @@ export type MenuConfig = ComponentStyleConfig & Pick<MenuProps, 'expandIcon'>;
export type TourConfig = Pick<TourProps, 'closeIcon'>;
export type DescriptionsConfig = ComponentStyleConfig &
Pick<DescriptionsProps, 'classNames' | 'styles'>;
export type EmptyConfig = ComponentStyleConfig & Pick<EmptyProps, 'classNames' | 'styles'>;
export type ModalConfig = ComponentStyleConfig &
Pick<ModalProps, 'classNames' | 'styles' | 'closeIcon' | 'closable'>;
@ -176,6 +187,17 @@ export type SelectConfig = ComponentStyleConfig & Pick<SelectProps, 'showSearch'
export type SpaceConfig = ComponentStyleConfig & Pick<SpaceProps, 'size' | 'classNames' | 'styles'>;
export type TooltipConfig = Pick<TooltipProps, 'className' | 'style' | 'styles' | 'classNames'>;
export type PopoverConfig = Pick<PopoverProps, 'className' | 'style' | 'styles' | 'classNames'>;
export type PopconfirmConfig = Pick<
PopconfirmProps,
'className' | 'style' | 'styles' | 'classNames'
>;
export type SliderConfig = ComponentStyleConfig & Pick<SliderProps, 'styles' | 'classNames'>;
export type SpinConfig = ComponentStyleConfig & Pick<SpinProps, 'indicator'>;
export type InputNumberConfig = ComponentStyleConfig & Pick<InputNumberProps, 'variant'>;
@ -269,12 +291,12 @@ export interface ConfigConsumerProps {
modal?: ModalConfig;
progress?: ComponentStyleConfig;
result?: ComponentStyleConfig;
slider?: ComponentStyleConfig;
slider?: SliderConfig;
breadcrumb?: ComponentStyleConfig;
menu?: MenuConfig;
checkbox?: ComponentStyleConfig;
descriptions?: ComponentStyleConfig;
empty?: ComponentStyleConfig;
descriptions?: DescriptionsConfig;
empty?: EmptyConfig;
badge?: BadgeConfig;
radio?: ComponentStyleConfig;
rate?: ComponentStyleConfig;
@ -289,6 +311,9 @@ export interface ConfigConsumerProps {
timeline?: ComponentStyleConfig;
timePicker?: TimePickerConfig;
tour?: TourConfig;
tooltip?: TooltipConfig;
popover?: PopoverConfig;
popconfirm?: PopconfirmConfig;
upload?: ComponentStyleConfig;
notification?: NotificationConfig;
tree?: ComponentStyleConfig;

16
components/config-provider/cssVariables.ts
View File

@ -1,5 +1,5 @@
import { generate } from '@ant-design/colors';
import { TinyColor } from '@ctrl/tinycolor';
import { FastColor } from '@ant-design/fast-color';
import canUseDom from 'rc-util/lib/Dom/canUseDom';
import { updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
@ -11,21 +11,21 @@ const dynamicStyleMark = `-ant-${Date.now()}-${Math.random()}`;
export function getStyle(globalPrefixCls: string, theme: Theme) {
const variables: Record<string, string> = {};
const formatColor = (color: TinyColor, updater?: (cloneColor: TinyColor) => TinyColor) => {
const formatColor = (color: FastColor, updater?: (cloneColor: FastColor) => FastColor) => {
let clone = color.clone();
clone = updater?.(clone) || clone;
return clone.toRgbString();
};
const fillColor = (colorVal: string, type: string) => {
const baseColor = new TinyColor(colorVal);
const baseColor = new FastColor(colorVal);
const colorPalettes = generate(baseColor.toRgbString());
variables[`${type}-color`] = formatColor(baseColor);
variables[`${type}-color-disabled`] = colorPalettes[1];
variables[`${type}-color-hover`] = colorPalettes[4];
variables[`${type}-color-active`] = colorPalettes[6];
variables[`${type}-color-outline`] = baseColor.clone().setAlpha(0.2).toRgbString();
variables[`${type}-color-outline`] = baseColor.clone().setA(0.2).toRgbString();
variables[`${type}-color-deprecated-bg`] = colorPalettes[0];
variables[`${type}-color-deprecated-border`] = colorPalettes[2];
};
@ -34,7 +34,7 @@ export function getStyle(globalPrefixCls: string, theme: Theme) {
if (theme.primaryColor) {
fillColor(theme.primaryColor, 'primary');
const primaryColor = new TinyColor(theme.primaryColor);
const primaryColor = new FastColor(theme.primaryColor);
const primaryColors = generate(primaryColor.toRgbString());
// Legacy - We should use semantic naming standard
@ -47,12 +47,12 @@ export function getStyle(globalPrefixCls: string, theme: Theme) {
variables['primary-color-deprecated-t-20'] = formatColor(primaryColor, (c) => c.tint(20));
variables['primary-color-deprecated-t-50'] = formatColor(primaryColor, (c) => c.tint(50));
variables['primary-color-deprecated-f-12'] = formatColor(primaryColor, (c) =>
c.setAlpha(c.getAlpha() * 0.12),
c.setA(c.a * 0.12),
);
const primaryActiveColor = new TinyColor(primaryColors[0]);
const primaryActiveColor = new FastColor(primaryColors[0]);
variables['primary-color-active-deprecated-f-30'] = formatColor(primaryActiveColor, (c) =>
c.setAlpha(c.getAlpha() * 0.3),
c.setA(c.a * 0.3),
);
variables['primary-color-active-deprecated-d-02'] = formatColor(primaryActiveColor, (c) =>
c.darken(2),

9
components/config-provider/index.en-US.md
View File

@ -123,11 +123,11 @@ const {
| colorPicker | Set ColorPicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| datePicker | Set datePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| rangePicker | Set rangePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
| descriptions | Set Descriptions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| descriptions | Set Descriptions common props | { className?: string, style?: React.CSSProperties, classNames?: [DescriptionsProps\["classNames"\]](/components/descriptions#api), styles?: [DescriptionsProps\["styles"\]](/components/descriptions#api) } | - | 5.7.0, `classNames` and `styles`: 5.23.0 |
| divider | Set Divider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| drawer | Set Drawer common props | { className?: string, style?: React.CSSProperties, classNames?: [DrawerProps\["classNames"\]](/components/drawer#api), styles?: [DrawerProps\["styles"\]](/components/drawer#api), closeIcon?: ReactNode } | - | 5.7.0, `classNames` and `styles`: 5.10.0, `closeIcon`: 5.14.0 |
| dropdown | Set Dropdown common props | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
| empty | Set Empty common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| empty | Set Empty common props | { className?: string, style?: React.CSSProperties, classNames?: [EmptyProps\["classNames"\]](/components/empty#api), styles?: [EmptyProps\["styles"\]](/components/empty#api) } | - | 5.7.0, `classNames` and `styles`: 5.23.0 |
| flex | Set Flex common props | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |
| floatButtonGroup | Set FloatButton.Group common props | { closeIcon?: React.ReactNode } | - | 5.16.0 |
| form | Set Form common props | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) } | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className: 5.7.0; style: 5.7.0 |
@ -149,7 +149,7 @@ const {
| skeleton | Set Skeleton common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| segmented | Set Segmented common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| select | Set Select common props | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - | 5.7.0 |
| slider | Set Slider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| slider | Set Slider common props | { className?: string, style?: React.CSSProperties, classNames?: [SliderProps\["classNames"\]](/components/slider#api), styles?: [SliderProps\["styles"\]](/components/slider#api) } | - | 5.7.0, `classNames` and `styles`: 5.23.0 |
| switch | Set Switch common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| space | Set Space common props, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: [SpaceProps\["classNames"\]](/components/space#api), styles?: [SpaceProps\["styles"\]](/components/space#api) } | - | 5.6.0 |
| splitter | Set Splitter common props | { className?: string, style?: React.CSSProperties } | - | 5.21.0 |
@ -162,6 +162,9 @@ const {
| timeline | Set Timeline common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| timePicker | Set TimePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| tour | Set Tour common props | { closeIcon?: React.ReactNode } | - | 5.14.0 |
| tooltip | Set Tooltip common props | { className?: string, style?: React.CSSProperties, classNames?:[Tooltip\["classNames"\]](/components/tooltip#api), styles?: [Tooltip\["styles"\]](/components/tooltip#api) } | - | 5.23.0 |
| popover | Set Popover common props | { className?: string, style?: React.CSSProperties, classNames?:[Popover\["classNames"\]](/components/popover#api), styles?: [Popover\["styles"\]](/components/popover#api) } | - | 5.23.0 |
| popconfirm | Set Popconfirm common props | { className?: string, style?: React.CSSProperties, classNames?:[Popconfirm\["classNames"\]](/components/popconfirm#api), styles?: [Popconfirm\["styles"\]](/components/popconfirm#api) } | - | 5.23.0 |
| transfer | Set Transfer common props | { className?: string, style?: React.CSSProperties, selectionsIcon?: React.ReactNode } | - | 5.7.0, selectionsIcon: 5.14.0 |
| tree | Set Tree common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

15
components/config-provider/index.tsx
View File

@ -51,11 +51,15 @@ import type {
Theme,
ThemeConfig,
TimePickerConfig,
TooltipConfig,
PopoverConfig,
PopconfirmConfig,
TourConfig,
TransferConfig,
TreeSelectConfig,
Variant,
WaveConfig,
EmptyConfig,
} from './context';
import {
ConfigConsumer,
@ -208,7 +212,7 @@ export interface ConfigProviderProps {
floatButtonGroup?: FloatButtonGroupConfig;
checkbox?: ComponentStyleConfig;
descriptions?: ComponentStyleConfig;
empty?: ComponentStyleConfig;
empty?: EmptyConfig;
badge?: BadgeConfig;
radio?: ComponentStyleConfig;
rate?: ComponentStyleConfig;
@ -235,6 +239,9 @@ export interface ConfigProviderProps {
*/
wave?: WaveConfig;
tour?: TourConfig;
tooltip?: TooltipConfig;
popover?: PopoverConfig;
popconfirm?: PopconfirmConfig;
}
interface ProviderChildrenProps extends ConfigProviderProps {
@ -389,6 +396,9 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
dropdown,
warning: warningConfig,
tour,
tooltip,
popover,
popconfirm,
floatButtonGroup,
variant,
inputNumber,
@ -489,6 +499,9 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
dropdown,
warning: warningConfig,
tour,
tooltip,
popover,
popconfirm,
floatButtonGroup,
variant,
inputNumber,

9
components/config-provider/index.zh-CN.md
View File

@ -125,11 +125,11 @@ const {
| colorPicker | 设置 ColorPicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| datePicker | 设置 DatePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| rangePicker | 设置 RangePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
| descriptions | 设置 Descriptions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| descriptions | 设置 Descriptions 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [DescriptionsProps\["classNames"\]](/components/descriptions-cn#api), styles?: [DescriptionsProps\["styles"\]](/components/descriptions-cn#api) } | - | 5.7.0, `classNames` 和 `styles`: 5.23.0 |
| divider | 设置 Divider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| drawer | 设置 Drawer 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [DrawerProps\["classNames"\]](/components/drawer-cn#api), styles?: [DrawerProps\["styles"\]](/components/drawer-cn#api), closeIcon?: ReactNode } | - | 5.7.0, `classNames` 和 `styles`: 5.10.0, `closeIcon`: 5.14.0 |
| dropdown | 设置 Dropdown 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
| empty | 设置 Empty 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| empty | 设置 Empty 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?:[EmptyProps\["classNames"\]](/components/empty-cn#api), styles?: [EmptyProps\["styles"\]](/components/empty-cn#api) } | - | 5.7.0, `classNames` 和 `styles`: 5.23.0 |
| flex | 设置 Flex 组件的通用属性 | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |
| floatButtonGroup | 设置 FloatButton.Group 组件的通用属性 | { closeIcon?: React.ReactNode } | - | 5.16.0 |
| form | 设置 Form 组件的通用属性 | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)} | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className: 5.7.0; style: 5.7.0 |
@ -151,7 +151,7 @@ const {
| skeleton | 设置 Skeleton 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| segmented | 设置 Segmented 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| select | 设置 Select 组件的通用属性 | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - | 5.7.0 |
| slider | 设置 Slider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| slider | 设置 Slider 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [SliderProps\["classNames"\]](/components/slider-cn#api), styles?: [SliderProps\["styles"\]](/components/slider-cn#api) } | - | 5.7.0, `classNames` 和 `styles`: 5.23.0 |
| switch | 设置 Switch 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| space | 设置 Space 的通用属性，参考 [Space](/components/space-cn) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: [SpaceProps\["classNames"\]](/components/space-cn#api), styles?: [SpaceProps\["styles"\]](/components/space-cn#api) } | - | 5.6.0 |
| splitter | 设置 Splitter 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.21.0 |
@ -164,6 +164,9 @@ const {
| timeline | 设置 Timeline 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| timePicker | 设置 TimePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| tour | 设置 Tour 组件的通用属性 | { closeIcon?: React.ReactNode } | - | 5.14.0 |
| tooltip | 设置 Tooltip 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?:[Tooltip\["classNames"\]](/components/tooltip-cn#api), styles?: [Tooltip\["styles"\]](/components/tooltip-cn#api) } | - | 5.23.0 |
| popover | 设置 Popover 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?:[Popover\["classNames"\]](/components/popover-cn#api), styles?: [Popover\["styles"\]](/components/popover-cn#api) } | - | 5.23.0 |
| popconfirm | 设置 Popconfirm 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?:[Popconfirm\["classNames"\]](/components/popconfirm-cn#api), styles?: [Popconfirm\["styles"\]](/components/popconfirm-cn#api) } | - | 5.23.0 |
| transfer | 设置 Transfer 组件的通用属性 | { className?: string, style?: React.CSSProperties, selectionsIcon?: React.ReactNode } | - | 5.7.0, selectionsIcon: 5.14.0 |
| tree | 设置 Tree 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

7
components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -47230,6 +47230,7 @@ Array [
<input
checked=""
class="ant-radio-button-input"
name="test-id"
type="radio"
value="topLeft"
/>
@ -47249,6 +47250,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="topRight"
/>
@ -47268,6 +47270,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="bottomLeft"
/>
@ -47287,6 +47290,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="bottomRight"
/>
@ -61481,6 +61485,7 @@ exports[`renders components/date-picker/demo/size.tsx extend context correctly 1
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="large"
/>
@ -61501,6 +61506,7 @@ exports[`renders components/date-picker/demo/size.tsx extend context correctly 1
<input
checked=""
class="ant-radio-button-input"
name="test-id"
type="radio"
value="middle"
/>
@ -61520,6 +61526,7 @@ exports[`renders components/date-picker/demo/size.tsx extend context correctly 1
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="small"
/>

7
components/date-picker/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -4782,6 +4782,7 @@ Array [
<input
checked=""
class="ant-radio-button-input"
name="test-id"
type="radio"
value="topLeft"
/>
@ -4801,6 +4802,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="topRight"
/>
@ -4820,6 +4822,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="bottomLeft"
/>
@ -4839,6 +4842,7 @@ Array [
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="bottomRight"
/>
@ -5999,6 +6003,7 @@ exports[`renders components/date-picker/demo/size.tsx correctly 1`] = `
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="large"
/>
@ -6019,6 +6024,7 @@ exports[`renders components/date-picker/demo/size.tsx correctly 1`] = `
<input
checked=""
class="ant-radio-button-input"
name="test-id"
type="radio"
value="middle"
/>
@ -6038,6 +6044,7 @@ exports[`renders components/date-picker/demo/size.tsx correctly 1`] = `
>
<input
class="ant-radio-button-input"
name="test-id"
type="radio"
value="small"
/>

4
components/date-picker/index.tsx
View File

@ -31,9 +31,9 @@ export type DatePickerType = typeof DatePicker & {
// We don't care debug panel
/* istanbul ignore next */
const PurePanel = genPurePanel(DatePicker, 'picker', null);
const PurePanel = genPurePanel(DatePicker, 'popupAlign', undefined, 'picker');
(DatePicker as DatePickerType)._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
const PureRangePanel = genPurePanel(DatePicker.RangePicker, 'picker', null);
const PureRangePanel = genPurePanel(DatePicker.RangePicker, 'popupAlign', undefined, 'picker');
(DatePicker as DatePickerType)._InternalRangePanelDoNotUseOrYouWillBeFired = PureRangePanel;
(DatePicker as DatePickerType).generatePicker = generatePicker;

Some files were not shown because too many files have changed in this diff Show More