mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

chore: auto merge branches (#50906)

Browse Source 
chore: merge feature to master
This commit is contained in:
github-actions[bot] 2024-09-18 16:35:51 +00:00 committed by GitHub
commit 9d5f73145e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
263 changed files with 383022 additions and 382459 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.dumi/theme/common/ThemeSwitch/index.tsx
View File

@ -1,7 +1,6 @@
import React from 'react';
import { BgColorsOutlined, SmileOutlined } from '@ant-design/icons';
import { FloatButton } from 'antd';
import { useTheme } from 'antd-style';
import { CompactTheme, DarkTheme } from 'antd-token-previewer/es/icons';
// import { Motion } from 'antd-token-previewer/es/icons';
import { FormattedMessage, useLocation } from 'dumi';
@ -20,7 +19,6 @@ export interface ThemeSwitchProps {
const ThemeSwitch: React.FC<ThemeSwitchProps> = (props) => {
const { value = ['light'], onChange } = props;
const token = useTheme();
const { pathname, search } = useLocation();
// const isMotionOff = value.includes('motion-off');
@ -38,7 +36,7 @@ const ThemeSwitch: React.FC<ThemeSwitchProps> = (props) => {
>
<Link
to={getLocalizedPathname('/theme-editor', isZhCN(pathname), search)}
style={{ display: 'block', marginBottom: token.margin }}
style={{ display: 'block' }}
>
<FloatButton
icon={<BgColorsOutlined />}

1
components/__tests__/__snapshots__/index.test.ts.snap
View File

@ -54,6 +54,7 @@ exports[`antd exports modules correctly 1`] = `
"Slider",
"Space",
"Spin",
"Splitter",
"Statistic",
"Steps",
"Switch",

145
components/_util/__tests__/useZIndex.test.tsx
View File

@ -12,6 +12,7 @@ import {
DatePicker,
Drawer,
Dropdown,
FloatButton,
Image,
Menu,
Modal,
@ -27,17 +28,16 @@ import { consumerBaseZIndexOffset, containerBaseZIndexOffset, useZIndex } from '
import { resetWarned } from '../warning';
import zIndexContext from '../zindexContext';
const WrapWithProvider: React.FC<PropsWithChildren<{ containerType: ZIndexContainer }>> = ({
const WrapWithProvider: React.FC<PropsWithChildren<{ container: ZIndexContainer }>> = ({
children,
containerType,
container,
}) => {
const [, contextZIndex] = useZIndex(containerType);
const [, contextZIndex] = useZIndex(container);
return <zIndexContext.Provider value={contextZIndex}>{children}</zIndexContext.Provider>;
};
const containerComponent: Record<
ZIndexContainer,
React.FC<PropsWithChildren<{ rootClassName?: string }>>
const containerComponent: Partial<
Record<ZIndexContainer, React.FC<Readonly<PropsWithChildren<{ rootClassName?: string }>>>>
> = {
Modal: ({ children, ...restProps }) => (
<Modal {...restProps} open>
@ -65,16 +65,7 @@ const containerComponent: Record<
</Tooltip>
),
Tour: ({ children, ...restProps }) => (
<Tour
{...restProps}
open
steps={[
{
title: 'cover title',
description: children,
},
]}
/>
<Tour {...restProps} open steps={[{ title: 'cover title', description: children }]} />
),
};
@ -126,7 +117,9 @@ const items: MenuProps['items'] = [
},
];
const consumerComponent: Record<ZIndexConsumer, React.FC<{ rootClassName: string }>> = {
const consumerComponent: Partial<
Record<ZIndexConsumer, React.FC<Readonly<{ rootClassName: string }>>>
> = {
SelectLike: ({ rootClassName, ...props }) => (
<>
<Select
@ -202,7 +195,7 @@ const consumerComponent: Record<ZIndexConsumer, React.FC<{ rootClassName: string
),
};
function getConsumerSelector(baseSelector: string, consumer: ZIndexConsumer): string {
const getConsumerSelector = (baseSelector: string, consumer: ZIndexConsumer): string => {
let selector = baseSelector;
if (consumer === 'SelectLike') {
selector = ['Select', 'Cascader', 'TreeSelect', 'AutoComplete', 'ColorPicker']
@ -227,7 +220,7 @@ function getConsumerSelector(baseSelector: string, consumer: ZIndexConsumer): st
.join(',');
}
return selector;
}
};
describe('Test useZIndex hooks', () => {
beforeEach(() => {
@ -237,15 +230,14 @@ describe('Test useZIndex hooks', () => {
afterEach(() => {
jest.useRealTimers();
});
const containers = Object.keys(containerComponent);
const consumers = Object.keys(consumerComponent);
containers.forEach((containerKey) => {
consumers.forEach((key) => {
Object.keys(containerComponent).forEach((containerKey) => {
Object.keys(consumerComponent).forEach((key) => {
const containerZIndexValue = containerBaseZIndexOffset[containerKey as ZIndexContainer];
const consumerZIndexValue = consumerBaseZIndexOffset[key as ZIndexConsumer];
describe(`Test ${key} zIndex in ${containerKey}`, () => {
it('Test hooks', () => {
const fn = jest.fn();
const Child = () => {
const Child: React.FC = () => {
const [zIndex] = useZIndex(key as ZIndexConsumer);
useEffect(() => {
fn(zIndex);
@ -253,28 +245,27 @@ describe('Test useZIndex hooks', () => {
return <div>Child</div>;
};
const Demo = () => (
<WrapWithProvider containerType={containerKey as ZIndexContainer}>
<WrapWithProvider containerType={containerKey as ZIndexContainer}>
<WrapWithProvider containerType={containerKey as ZIndexContainer}>
const Demo: React.FC = () => (
<WrapWithProvider container={containerKey as ZIndexContainer}>
<WrapWithProvider container={containerKey as ZIndexContainer}>
<WrapWithProvider container={containerKey as ZIndexContainer}>
<Child />
</WrapWithProvider>
</WrapWithProvider>
</WrapWithProvider>
);
render(<Demo />);
expect(fn).toHaveBeenLastCalledWith(
1000 +
containerBaseZIndexOffset[containerKey as ZIndexContainer] * 3 +
consumerBaseZIndexOffset[key as ZIndexConsumer],
1000 + containerZIndexValue * 3 + consumerZIndexValue,
);
});
it('Test Component', async () => {
const Container = containerComponent[containerKey as ZIndexContainer];
const Consumer = consumerComponent[key as ZIndexConsumer];
const Container = containerComponent[containerKey as ZIndexContainer]!;
const Consumer = consumerComponent[key as ZIndexConsumer]!;
const Demo = () => (
const Demo: React.FC = () => (
<>
<Consumer rootClassName="consumer1" />
<Container rootClassName="container1">
@ -295,75 +286,49 @@ describe('Test useZIndex hooks', () => {
const selector3 = getConsumerSelector('.consumer3', key as ZIndexConsumer);
if (['SelectLike', 'DatePicker', 'ImagePreview'].includes(key)) {
let comps = document.querySelectorAll(selector1);
let comps = document.querySelectorAll<HTMLElement>(selector1);
comps.forEach((comp) => {
expect((comp as HTMLDivElement).style.zIndex).toBeFalsy();
expect(comp?.style.zIndex).toBeFalsy();
});
comps = document.querySelectorAll(selector2);
comps = document.querySelectorAll<HTMLElement>(selector2);
comps.forEach((comp) => {
const isColorPicker = (comp as HTMLDivElement).className.includes('comp-ColorPicker');
const isColorPicker = comp?.className.includes('comp-ColorPicker');
const consumerOffset = isColorPicker
? containerBaseZIndexOffset.Popover
: consumerBaseZIndexOffset[key as ZIndexConsumer];
: consumerZIndexValue;
const operOffset = comp.classList.contains('ant-image-preview-operations-wrapper')
? 1
: 0;
expect((comp as HTMLDivElement).style.zIndex).toBe(
String(
1000 +
containerBaseZIndexOffset[containerKey as ZIndexContainer] +
consumerOffset +
operOffset,
),
expect(comp?.style.zIndex).toBe(
String(1000 + containerZIndexValue + consumerOffset + operOffset),
);
});
comps = document.querySelectorAll(selector3);
comps = document.querySelectorAll<HTMLElement>(selector3);
comps.forEach((comp) => {
const isColorPicker = (comp as HTMLDivElement).className.includes('comp-ColorPicker');
const isColorPicker = comp?.className.includes('comp-ColorPicker');
const consumerOffset = isColorPicker
? containerBaseZIndexOffset.Popover
: consumerBaseZIndexOffset[key as ZIndexConsumer];
: consumerZIndexValue;
const operOffset = comp.classList.contains('ant-image-preview-operations-wrapper')
? 1
: 0;
expect((comp as HTMLDivElement).style.zIndex).toBe(
String(
1000 +
containerBaseZIndexOffset[containerKey as ZIndexContainer] * 2 +
consumerOffset +
operOffset,
),
expect(comp?.style.zIndex).toBe(
String(1000 + containerZIndexValue * 2 + consumerOffset + operOffset),
);
});
} else {
if (key === 'Tour') {
expect((document.querySelector(selector1) as HTMLDivElement).style.zIndex).toBe(
'1001',
const element1 = document.querySelector<HTMLElement>(selector1);
const element2 = document.querySelector<HTMLElement>(selector2);
const element3 = document.querySelector<HTMLElement>(selector3);
expect(element1?.style.zIndex).toBe(key === 'Tour' ? '1001' : '');
expect(element2?.style.zIndex).toBe(
String(1000 + containerZIndexValue + consumerZIndexValue),
);
} else {
expect(
(document.querySelector(selector1) as HTMLDivElement).style.zIndex,
).toBeFalsy();
}
expect((document.querySelector(selector2) as HTMLDivElement).style.zIndex).toBe(
String(
1000 +
containerBaseZIndexOffset[containerKey as ZIndexContainer] +
consumerBaseZIndexOffset[key as ZIndexConsumer],
),
);
expect((document.querySelector(selector3) as HTMLDivElement).style.zIndex).toBe(
String(
1000 +
containerBaseZIndexOffset[containerKey as ZIndexContainer] * 2 +
consumerBaseZIndexOffset[key as ZIndexConsumer],
),
expect(element3?.style.zIndex).toBe(
String(1000 + containerZIndexValue * 2 + consumerZIndexValue),
);
}
unmount();
}, 20000);
});
@ -416,6 +381,24 @@ describe('Test useZIndex hooks', () => {
errorSpy.mockRestore();
});
it('FloatButton support zIndex', () => {
const { container, rerender } = render(
<WrapWithProvider container="FloatButton">
<FloatButton />
</WrapWithProvider>,
);
expect(container.querySelector<HTMLElement>('.ant-float-btn')?.style.zIndex).toBe(
// parentZIndex + containerBaseZIndexOffset["FloatButton"]
String(1100 + containerBaseZIndexOffset.FloatButton),
);
rerender(
<WrapWithProvider container="FloatButton">
<FloatButton style={{ zIndex: 666 }} />
</WrapWithProvider>,
);
expect(container.querySelector<HTMLElement>('.ant-float-btn')?.style.zIndex).toBe(String(666));
});
it('not warning for static func', () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});

10
components/_util/__tests__/wave.test.tsx
View File

@ -116,13 +116,10 @@ describe('Wave component', () => {
unmount();
});
it('wave color is grey', () => {
it('wave color is nonexistent', () => {
const { container, unmount } = render(
<Wave>
<button
type="button"
style={{ borderColor: 'rgb(0, 0, 0)', backgroundColor: 'transparent' }}
>
<button type="button" style={{ border: '#fff', background: '#fff' }}>
button
</button>
</Wave>,
@ -132,8 +129,7 @@ describe('Wave component', () => {
waitRaf();
const style = getWaveStyle();
expect(style['--wave-color']).toBeFalsy();
expect(style['--wave-color']).toEqual(undefined);
unmount();
});

14
components/_util/hooks/useClosable.tsx
View File

@ -1,10 +1,10 @@
import type { ReactNode } from 'react';
import React from 'react';
import CloseOutlined from '@ant-design/icons/CloseOutlined';
import type { DialogProps } from 'rc-dialog';
import pickAttrs from 'rc-util/lib/pickAttrs';
export type BaseClosableType = { closeIcon?: React.ReactNode } & React.AriaAttributes;
export type ClosableType = boolean | BaseClosableType;
export type ClosableType = DialogProps['closable'];
export type BaseContextClosable = { closable?: ClosableType; closeIcon?: ReactNode };
export type ContextClosable<T extends BaseContextClosable = any> = Partial<
@ -49,7 +49,7 @@ function useClosableConfig(closableCollection?: ClosableCollection | null) {
return null;
}
let closableConfig: BaseClosableType = {
let closableConfig: ClosableType = {
closeIcon: typeof closeIcon !== 'boolean' && closeIcon !== null ? closeIcon : undefined,
};
if (closable && typeof closable === 'object') {
@ -104,10 +104,12 @@ export default function useClosable(
*/
closeIconRender?: (closeIcon: ReactNode) => ReactNode;
} = EmptyFallbackCloseCollection,
): [closable: boolean, closeIcon: React.ReactNode | null] {
): [closable: boolean, closeIcon: React.ReactNode, closeBtnIsDisabled: boolean] {
// Align the `props`, `context` `fallback` to config object first
const propCloseConfig = useClosableConfig(propCloseCollection);
const contextCloseConfig = useClosableConfig(contextCloseCollection);
const closeBtnIsDisabled =
typeof propCloseConfig !== 'boolean' ? !!propCloseConfig?.disabled : false;
const mergedFallbackCloseCollection = React.useMemo(
() => ({
closeIcon: <CloseOutlined />,
@ -149,7 +151,7 @@ export default function useClosable(
// Calculate the final closeIcon
return React.useMemo(() => {
if (mergedClosableConfig === false) {
return [false, null];
return [false, null, closeBtnIsDisabled];
}
const { closeIconRender } = mergedFallbackCloseCollection;
@ -173,6 +175,6 @@ export default function useClosable(
}
}
return [true, mergedCloseIcon];
return [true, mergedCloseIcon, closeBtnIsDisabled];
}, [mergedClosableConfig, mergedFallbackCloseCollection]);
}

17
components/_util/hooks/useZIndex.ts
View File

@ -4,7 +4,14 @@ import useToken from '../../theme/useToken';
import { devUseWarning } from '../warning';
import zIndexContext from '../zindexContext';
export type ZIndexContainer = 'Modal' | 'Drawer' | 'Popover' | 'Popconfirm' | 'Tooltip' | 'Tour';
export type ZIndexContainer =
| 'Modal'
| 'Drawer'
| 'Popover'
| 'Popconfirm'
| 'Tooltip'
| 'Tour'
| 'FloatButton';
export type ZIndexConsumer = 'SelectLike' | 'Dropdown' | 'DatePicker' | 'Menu' | 'ImagePreview';
@ -32,7 +39,9 @@ export const containerBaseZIndexOffset: Record<ZIndexContainer, number> = {
Popconfirm: CONTAINER_OFFSET,
Tooltip: CONTAINER_OFFSET,
Tour: CONTAINER_OFFSET,
FloatButton: CONTAINER_OFFSET,
};
export const consumerBaseZIndexOffset: Record<ZIndexConsumer, number> = {
SelectLike: 50,
Dropdown: 50,
@ -47,10 +56,10 @@ function isContainerType(type: ZIndexContainer | ZIndexConsumer): type is ZIndex
type ReturnResult = [zIndex: number | undefined, contextZIndex: number];
export function useZIndex(
export const useZIndex = (
componentType: ZIndexContainer | ZIndexConsumer,
customZIndex?: number,
): ReturnResult {
): ReturnResult => {
const [, token] = useToken();
const parentZIndex = React.useContext(zIndexContext);
const isContainer = isContainerType(componentType);
@ -88,4 +97,4 @@ export function useZIndex(
}
return result;
}
};

9
components/_util/type.ts
View File

@ -18,8 +18,13 @@ export type CustomComponent<P = AnyObject> = React.ComponentType<P> | string;
* ```
* @since 5.13.0
*/
export type GetProps<T extends React.ComponentType<any> | object> =
T extends React.ComponentType<infer P> ? P : T extends object ? T : never;
export type GetProps<T extends React.ComponentType<any> | object> = T extends React.ComponentType<
infer P
>
? P
: T extends object
? T
: never;
/**
* Get component props by component name

11
components/_util/wave/util.ts
View File

@ -1,13 +1,3 @@
export function isNotGrey(color: string) {
// eslint-disable-next-line no-useless-escape
const match = (color || '').match(/rgba?\((\d*), (\d*), (\d*)(, [\d.]*)?\)/);
// biome-ignore lint/complexity/useOptionalChain: this is way is more simple
if (match && match[1] && match[2] && match[3]) {
return !(match[1] === match[2] && match[2] === match[3]);
}
return true;
}
export function isValidWaveColor(color: string) {
return (
color &&
@ -15,7 +5,6 @@ export function isValidWaveColor(color: string) {
color !== '#ffffff' &&
color !== 'rgb(255, 255, 255)' &&
color !== 'rgba(255, 255, 255, 1)' &&
isNotGrey(color) &&
!/rgba\((?:\d*, ){3}0\)/.test(color) && // any transparent rgba color
color !== 'transparent'
);

10
components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -7,7 +7,7 @@ Array [
class=""
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -22,7 +22,7 @@ Array [
class=""
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -51,7 +51,7 @@ exports[`renders components/affix/demo/debug.tsx extend context correctly 1`] =
style="background: red;"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -75,7 +75,7 @@ exports[`renders components/affix/demo/on-change.tsx extend context correctly 1`
class=""
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -100,7 +100,7 @@ exports[`renders components/affix/demo/target.tsx extend context correctly 1`] =
class=""
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>

10
components/affix/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -7,7 +7,7 @@ Array [
class=""
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -22,7 +22,7 @@ Array [
class=""
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -49,7 +49,7 @@ exports[`renders components/affix/demo/debug.tsx correctly 1`] = `
style="background:red"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -71,7 +71,7 @@ exports[`renders components/affix/demo/on-change.tsx correctly 1`] = `
class=""
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -94,7 +94,7 @@ exports[`renders components/affix/demo/target.tsx correctly 1`] = `
class=""
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>

12
components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -39,7 +39,7 @@ Array [
class="ant-alert-action"
>
<button
class="ant-btn ant-btn-text ant-btn-sm"
class="ant-btn ant-btn-default ant-btn-text ant-btn-sm"
type="button"
>
<span>
@ -118,7 +118,7 @@ Array [
class="ant-alert-action"
>
<button
class="ant-btn ant-btn-default ant-btn-sm ant-btn-dangerous"
class="ant-btn ant-btn-dangerous ant-btn-outlined ant-btn-sm"
type="button"
>
<span>
@ -152,7 +152,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-text ant-btn-sm"
class="ant-btn ant-btn-default ant-btn-text ant-btn-sm"
type="button"
>
<span>
@ -219,7 +219,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
type="button"
>
<span>
@ -231,7 +231,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-btn-sm ant-btn-background-ghost ant-btn-dangerous"
class="ant-btn ant-btn-dangerous ant-btn-outlined ant-btn-sm ant-btn-background-ghost"
type="button"
>
<span>
@ -1008,7 +1008,7 @@ exports[`renders components/alert/demo/description.tsx extend context correctly
exports[`renders components/alert/demo/error-boundary.tsx extend context correctly 1`] = `
<button
class="ant-btn ant-btn-default ant-btn-dangerous"
class="ant-btn ant-btn-dangerous ant-btn-outlined"
type="button"
>
<span>

12
components/alert/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -39,7 +39,7 @@ Array [
class="ant-alert-action"
>
<button
class="ant-btn ant-btn-text ant-btn-sm"
class="ant-btn ant-btn-default ant-btn-text ant-btn-sm"
type="button"
>
<span>
@ -118,7 +118,7 @@ Array [
class="ant-alert-action"
>
<button
class="ant-btn ant-btn-default ant-btn-sm ant-btn-dangerous"
class="ant-btn ant-btn-dangerous ant-btn-outlined ant-btn-sm"
type="button"
>
<span>
@ -152,7 +152,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-text ant-btn-sm"
class="ant-btn ant-btn-default ant-btn-text ant-btn-sm"
type="button"
>
<span>
@ -219,7 +219,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
type="button"
>
<span>
@ -231,7 +231,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-btn-sm ant-btn-background-ghost ant-btn-dangerous"
class="ant-btn ant-btn-dangerous ant-btn-outlined ant-btn-sm ant-btn-background-ghost"
type="button"
>
<span>
@ -992,7 +992,7 @@ Array [
exports[`renders components/alert/demo/error-boundary.tsx correctly 1`] = `
<button
class="ant-btn ant-btn-default ant-btn-dangerous"
class="ant-btn ant-btn-dangerous ant-btn-outlined"
type="button"
>
<span>

2
components/alert/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -38,7 +38,7 @@ exports[`Alert custom action 1`] = `
class="ant-alert-action"
>
<button
class="ant-btn ant-btn-text ant-btn-sm"
class="ant-btn ant-btn-default ant-btn-text ant-btn-sm"
type="button"
>
<span>

10
components/app/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -12,7 +12,7 @@ exports[`renders components/app/demo/basic.tsx extend context correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -24,7 +24,7 @@ exports[`renders components/app/demo/basic.tsx extend context correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -36,7 +36,7 @@ exports[`renders components/app/demo/basic.tsx extend context correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -62,7 +62,7 @@ exports[`renders components/app/demo/config.tsx extend context correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -74,7 +74,7 @@ exports[`renders components/app/demo/config.tsx extend context correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>

10
components/app/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -12,7 +12,7 @@ exports[`renders components/app/demo/basic.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -24,7 +24,7 @@ exports[`renders components/app/demo/basic.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -36,7 +36,7 @@ exports[`renders components/app/demo/basic.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -60,7 +60,7 @@ exports[`renders components/app/demo/config.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -72,7 +72,7 @@ exports[`renders components/app/demo/config.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>

2
components/app/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -2,7 +2,7 @@
exports[`App rtl render component should be rendered correctly in RTL direction 1`] = `
<div
class="ant-app"
class="ant-app ant-app-rtl"
/>
`;

8
components/app/index.tsx
View File

@ -35,10 +35,13 @@ const App: React.FC<AppProps> & { useApp: () => useAppProps } = (props) => {
style,
component = 'div',
} = props;
const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
const { direction, getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
const prefixCls = getPrefixCls('app', customizePrefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const customClassName = classNames(hashId, prefixCls, className, rootClassName, cssVarCls);
const customClassName = classNames(hashId, prefixCls, className, rootClassName, cssVarCls, {
[`${prefixCls}-rtl`]: direction === 'rtl',
});
const appConfig = useContext<AppConfig>(AppConfigContext);
@ -74,6 +77,7 @@ const App: React.FC<AppProps> & { useApp: () => useAppProps } = (props) => {
// ============================ Render ============================
const Component = component === false ? React.Fragment : component;
const rootProps: AppProps = {
className: customClassName,
style,

3
components/app/style/index.ts
View File

@ -15,6 +15,9 @@ const genBaseStyle: GenerateStyle<AppToken> = (token) => {
fontSize,
lineHeight,
fontFamily,
[`&${componentCls}-rtl`]: {
direction: 'rtl',
},
},
};
};

10
components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -225,7 +225,7 @@ exports[`renders components/auto-complete/demo/certain-category.tsx extend conte
class="ant-input-group-addon"
>
<button
class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only ant-input-search-button"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-lg ant-btn-icon-only ant-input-search-button"
type="button"
>
<span
@ -1517,7 +1517,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
class="ant-input-group-addon"
>
<button
class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-input-search-button"
type="button"
>
<span
@ -1749,7 +1749,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
class="ant-input-group-addon"
>
<button
class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-input-search-button"
type="button"
>
<span
@ -1798,7 +1798,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
</div>
</div>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span
@ -2332,7 +2332,7 @@ exports[`renders components/auto-complete/demo/uncertain-category.tsx extend con
class="ant-input-group-addon"
>
<button
class="ant-btn ant-btn-primary ant-btn-lg ant-input-search-button"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-lg ant-input-search-button"
type="button"
>
<span

10
components/auto-complete/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -168,7 +168,7 @@ exports[`renders components/auto-complete/demo/certain-category.tsx correctly 1`
class="ant-input-group-addon"
>
<button
class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only ant-input-search-button"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-lg ant-btn-icon-only ant-input-search-button"
type="button"
>
<span
@ -849,7 +849,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
class="ant-input-group-addon"
>
<button
class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-input-search-button"
type="button"
>
<span
@ -1007,7 +1007,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
class="ant-input-group-addon"
>
<button
class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-input-search-button"
type="button"
>
<span
@ -1044,7 +1044,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
</div>
</div>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span
@ -1320,7 +1320,7 @@ exports[`renders components/auto-complete/demo/uncertain-category.tsx correctly
class="ant-input-group-addon"
>
<button
class="ant-btn ant-btn-primary ant-btn-lg ant-input-search-button"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-lg ant-input-search-button"
type="button"
>
<span

10
components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -650,7 +650,7 @@ Array [
</span>
</span>,
<button
class="ant-btn ant-btn-default ant-btn-sm"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-sm"
style="margin: 0px 16px; vertical-align: middle;"
type="button"
>
@ -659,7 +659,7 @@ Array [
</span>
</button>,
<button
class="ant-btn ant-btn-default ant-btn-sm"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-sm"
style="vertical-align: middle;"
type="button"
>
@ -1298,7 +1298,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -1310,7 +1310,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -1322,7 +1322,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>

10
components/avatar/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -555,7 +555,7 @@ Array [
</span>
</span>,
<button
class="ant-btn ant-btn-default ant-btn-sm"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-sm"
style="margin:0 16px;vertical-align:middle"
type="button"
>
@ -564,7 +564,7 @@ Array [
</span>
</button>,
<button
class="ant-btn ant-btn-default ant-btn-sm"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-sm"
style="vertical-align:middle"
type="button"
>
@ -908,7 +908,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -920,7 +920,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -932,7 +932,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>

6
components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -156,7 +156,7 @@ exports[`renders components/badge/demo/change.tsx extend context correctly 1`] =
class="ant-btn-group"
>
<button
class="ant-btn ant-btn-default ant-btn-icon-only"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only"
type="button"
>
<span
@ -184,7 +184,7 @@ exports[`renders components/badge/demo/change.tsx extend context correctly 1`] =
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-icon-only"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only"
type="button"
>
<span
@ -215,7 +215,7 @@ exports[`renders components/badge/demo/change.tsx extend context correctly 1`] =
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-icon-only"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only"
type="button"
>
<span

6
components/badge/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -154,7 +154,7 @@ exports[`renders components/badge/demo/change.tsx correctly 1`] = `
class="ant-btn-group"
>
<button
class="ant-btn ant-btn-default ant-btn-icon-only"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only"
type="button"
>
<span
@ -182,7 +182,7 @@ exports[`renders components/badge/demo/change.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-icon-only"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only"
type="button"
>
<span
@ -213,7 +213,7 @@ exports[`renders components/badge/demo/change.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-icon-only"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only"
type="button"
>
<span

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

42
components/button/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -2,7 +2,7 @@
exports[`Button fixbug renders {0} , 0 and {false} 1`] = `
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
0
@ -11,7 +11,7 @@ exports[`Button fixbug renders {0} , 0 and {false} 1`] = `
exports[`Button fixbug renders {0} , 0 and {false} 2`] = `
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -22,14 +22,14 @@ exports[`Button fixbug renders {0} , 0 and {false} 2`] = `
exports[`Button fixbug renders {0} , 0 and {false} 3`] = `
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
/>
`;
exports[`Button renders Chinese characters correctly 1`] = `
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -40,7 +40,7 @@ exports[`Button renders Chinese characters correctly 1`] = `
exports[`Button renders Chinese characters correctly 2`] = `
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span
@ -74,7 +74,7 @@ exports[`Button renders Chinese characters correctly 2`] = `
exports[`Button renders Chinese characters correctly 3`] = `
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span
@ -104,7 +104,7 @@ exports[`Button renders Chinese characters correctly 3`] = `
exports[`Button renders Chinese characters correctly 4`] = `
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span
@ -138,7 +138,7 @@ exports[`Button renders Chinese characters correctly 4`] = `
exports[`Button renders Chinese characters correctly 5`] = `
<button
class="ant-btn ant-btn-default ant-btn-loading"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-loading"
type="button"
>
<span
@ -172,7 +172,7 @@ exports[`Button renders Chinese characters correctly 5`] = `
exports[`Button renders Chinese characters correctly 6`] = `
<button
class="ant-btn ant-btn-default ant-btn-loading"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-loading"
type="button"
>
<span
@ -207,7 +207,7 @@ exports[`Button renders Chinese characters correctly 6`] = `
exports[`Button renders Chinese characters correctly 7`] = `
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -218,7 +218,7 @@ exports[`Button renders Chinese characters correctly 7`] = `
exports[`Button renders correctly 1`] = `
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -229,21 +229,21 @@ exports[`Button renders correctly 1`] = `
exports[`Button rtl render component should be rendered correctly in RTL direction 1`] = `
<button
class="ant-btn ant-btn-default ant-btn-rtl"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-rtl"
type="button"
/>
`;
exports[`Button rtl render component should be rendered correctly in RTL direction 2`] = `
<button
class="ant-btn ant-btn-default ant-btn-lg ant-btn-rtl"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-lg ant-btn-rtl"
type="button"
/>
`;
exports[`Button rtl render component should be rendered correctly in RTL direction 3`] = `
<button
class="ant-btn ant-btn-default ant-btn-sm ant-btn-rtl"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-sm ant-btn-rtl"
type="button"
/>
`;
@ -274,7 +274,7 @@ exports[`Button rtl render component should be rendered correctly in RTL directi
exports[`Button should handle fragment as children 1`] = `
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -285,7 +285,7 @@ exports[`Button should handle fragment as children 1`] = `
exports[`Button should merge text if children using variable 1`] = `
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -296,7 +296,7 @@ exports[`Button should merge text if children using variable 1`] = `
exports[`Button should not render as link button when href is undefined 1`] = `
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -307,7 +307,7 @@ exports[`Button should not render as link button when href is undefined 1`] = `
exports[`Button should render empty button without errors 1`] = `
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
/>
`;
@ -315,7 +315,7 @@ exports[`Button should render empty button without errors 1`] = `
exports[`Button should support custom icon className 1`] = `
<div>
<button
class="ant-btn ant-btn-primary ant-btn-icon-only"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-icon-only"
type="button"
>
<span
@ -348,7 +348,7 @@ exports[`Button should support custom icon className 1`] = `
exports[`Button should support custom icon styles 1`] = `
<div>
<button
class="ant-btn ant-btn-primary ant-btn-icon-only"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-icon-only"
type="button"
>
<span
@ -381,7 +381,7 @@ exports[`Button should support custom icon styles 1`] = `
exports[`Button should support link button 1`] = `
<a
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
href="https://ant.design"
tabindex="0"
target="_blank"

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

@ -8,6 +8,7 @@ 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 type { BaseButtonProps } from '../button';
describe('Button', () => {
@ -449,4 +450,30 @@ describe('Button', () => {
const { container } = render(<Button autoInsertSpace={false}>{text}</Button>);
expect(container.querySelector<HTMLButtonElement>('button')?.textContent).toBe(text);
});
it('should support solidTextColor when theme changes', () => {
const { container: defaultContainer } = render(
<ConfigProvider theme={{ algorithm: [theme.defaultAlgorithm] }}>
<Button color="default" variant="solid">
btn1
</Button>
</ConfigProvider>,
);
expect(defaultContainer.firstChild).toHaveStyle({
color: 'rgb(255, 255, 255)',
});
const { container: darkContainer } = render(
<ConfigProvider theme={{ algorithm: [theme.darkAlgorithm] }}>
<Button color="default" variant="solid">
btn2
</Button>
</ConfigProvider>,
);
expect(darkContainer.firstChild).toHaveStyle({
color: 'rgb(0, 0, 0)',
});
});
});

55
components/button/button.tsx
View File

@ -12,8 +12,14 @@ import useSize from '../config-provider/hooks/useSize';
import type { SizeType } from '../config-provider/SizeContext';
import { useCompactItemContext } from '../space/Compact';
import Group, { GroupSizeContext } from './button-group';
import type { ButtonHTMLType, ButtonShape, ButtonType } from './buttonHelpers';
import { isTwoCNChar, isUnBorderedButtonType, spaceChildren } from './buttonHelpers';
import type {
ButtonColorType,
ButtonHTMLType,
ButtonShape,
ButtonType,
ButtonVariantType,
} from './buttonHelpers';
import { isTwoCNChar, isUnBorderedButtonVariant, spaceChildren } from './buttonHelpers';
import IconWrapper from './IconWrapper';
import LoadingIcon from './LoadingIcon';
import useStyle from './style';
@ -23,6 +29,8 @@ export type LegacyButtonType = ButtonType | 'danger';
export interface BaseButtonProps {
type?: ButtonType;
color?: ButtonColorType;
variant?: ButtonVariantType;
icon?: React.ReactNode;
iconPosition?: 'start' | 'end';
shape?: ButtonShape;
@ -45,7 +53,7 @@ type MergedHTMLAttributes = Omit<
React.HTMLAttributes<HTMLElement> &
React.ButtonHTMLAttributes<HTMLElement> &
React.AnchorHTMLAttributes<HTMLElement>,
'type'
'type' | 'color'
>;
export interface ButtonProps extends BaseButtonProps, MergedHTMLAttributes {
@ -75,6 +83,16 @@ function getLoadingConfig(loading: BaseButtonProps['loading']): LoadingConfigTyp
};
}
type ColorVariantPairType = [color?: ButtonColorType, variant?: ButtonVariantType];
const ButtonTypeMap: Partial<Record<ButtonType, ColorVariantPairType>> = {
default: ['default', 'outlined'],
primary: ['primary', 'solid'],
dashed: ['default', 'dashed'],
link: ['primary', 'link'],
text: ['default', 'text'],
};
const InternalCompoundedButton = React.forwardRef<
HTMLButtonElement | HTMLAnchorElement,
ButtonProps
@ -82,6 +100,8 @@ const InternalCompoundedButton = React.forwardRef<
const {
loading = false,
prefixCls: customizePrefixCls,
color,
variant,
type,
danger = false,
shape = 'default',
@ -107,6 +127,23 @@ const InternalCompoundedButton = React.forwardRef<
// Compatible with original `type` behavior
const mergedType = type || 'default';
const [mergedColor, mergedVariant] = useMemo<ColorVariantPairType>(() => {
if (color && variant) {
return [color, variant];
}
const colorVariantPair = ButtonTypeMap[mergedType] || [];
if (danger) {
return ['danger', colorVariantPair[1]];
}
return colorVariantPair;
}, [type, color, variant, danger]);
const isDanger = mergedColor === 'danger';
const mergedColorText = isDanger ? 'dangerous' : mergedColor;
const { getPrefixCls, direction, button } = useContext(ConfigContext);
const mergedInsertSpace = autoInsertSpace ?? button?.autoInsertSpace ?? true;
@ -131,7 +168,7 @@ const InternalCompoundedButton = React.forwardRef<
const buttonRef = composeRef(ref, internalRef);
const needInserted =
Children.count(children) === 1 && !icon && !isUnBorderedButtonType(mergedType);
Children.count(children) === 1 && !icon && !isUnBorderedButtonVariant(mergedVariant);
useEffect(() => {
let delayTimer: ReturnType<typeof setTimeout> | null = null;
@ -189,7 +226,7 @@ const InternalCompoundedButton = React.forwardRef<
);
warning(
!(ghost && isUnBorderedButtonType(mergedType)),
!(ghost && isUnBorderedButtonVariant(mergedVariant)),
'usage',
"`link` or `text` button can't be a `ghost` button.",
);
@ -213,14 +250,14 @@ const InternalCompoundedButton = React.forwardRef<
cssVarCls,
{
[`${prefixCls}-${shape}`]: shape !== 'default' && shape,
[`${prefixCls}-${mergedType}`]: mergedType,
[`${prefixCls}-${mergedColorText}`]: mergedColorText,
[`${prefixCls}-${mergedVariant}`]: mergedVariant,
[`${prefixCls}-${sizeCls}`]: sizeCls,
[`${prefixCls}-icon-only`]: !children && children !== 0 && !!iconType,
[`${prefixCls}-background-ghost`]: ghost && !isUnBorderedButtonType(mergedType),
[`${prefixCls}-background-ghost`]: ghost && !isUnBorderedButtonVariant(mergedVariant),
[`${prefixCls}-loading`]: innerLoading,
[`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && mergedInsertSpace && !innerLoading,
[`${prefixCls}-block`]: block,
[`${prefixCls}-dangerous`]: danger,
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-icon-end`]: iconPosition === 'end',
},
@ -286,7 +323,7 @@ const InternalCompoundedButton = React.forwardRef<
</button>
);
if (!isUnBorderedButtonType(mergedType)) {
if (!isUnBorderedButtonVariant(mergedVariant)) {
buttonNode = (
<Wave component="Button" disabled={innerLoading}>
{buttonNode}

17
components/button/buttonHelpers.tsx
View File

@ -19,7 +19,7 @@ export function isString(str: any): str is string {
return typeof str === 'string';
}
export function isUnBorderedButtonType(type?: ButtonType) {
export function isUnBorderedButtonVariant(type?: ButtonVariantType) {
return type === 'text' || type === 'link';
}
@ -86,3 +86,18 @@ export type ButtonShape = (typeof ButtonShapes)[number];
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const ButtonHTMLTypes = ['submit', 'button', 'reset'] as const;
export type ButtonHTMLType = (typeof ButtonHTMLTypes)[number];
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export const ButtonVariantTypes = [
'outlined',
'dashed',
'solid',
'filled',
'text',
'link',
] as const;
export type ButtonVariantType = (typeof ButtonVariantTypes)[number];
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export const ButtonColorTypes = ['default', 'primary', 'danger'] as const;
export type ButtonColorType = (typeof ButtonColorTypes)[number];

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

@ -1,7 +1,7 @@
## zh-CN
按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
通过 `type` 语法糖，使用预设的按钮样式：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。推荐主按钮在同一个操作区域最多出现一次。
## en-US
There are five type of buttons in antd, namely they are: `primary` buttons, `default` buttons, `dashed` buttons, `text` buttons, and `link` buttons.
Through the `type` syntactic sugar, use the preset button styles: `primary` buttons, `default` buttons, `dashed` buttons, `text` buttons, and `link` buttons.

7
components/button/demo/color-variant.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
同时设置 `color` 和 `variant` 属性，可以衍生出更多的变体按钮。
## en-US
You can set the `color` and `variant` attributes at the same time can derive more variant buttons.

76
components/button/demo/color-variant.tsx Normal file
View File

@ -0,0 +1,76 @@
import React from 'react';
import { Button, ConfigProvider, Flex } from 'antd';
import { useResponsive } from 'antd-style';
const App: React.FC = () => {
const { xxl } = useResponsive();
return (
<ConfigProvider componentSize={xxl ? 'middle' : 'small'}>
<Flex vertical gap="middle">
<Flex gap="middle" wrap>
<Button color="default" variant="solid">
Solid
</Button>
<Button color="default" variant="outlined">
Outlined
</Button>
<Button color="default" variant="dashed">
Dashed
</Button>
<Button color="default" variant="filled">
Filled
</Button>
<Button color="default" variant="text">
Text
</Button>
<Button color="default" variant="link">
Link
</Button>
</Flex>
<Flex gap="middle" wrap>
<Button color="primary" variant="solid">
Solid
</Button>
<Button color="primary" variant="outlined">
Outlined
</Button>
<Button color="primary" variant="dashed">
Dashed
</Button>
<Button color="primary" variant="filled">
Filled
</Button>
<Button color="primary" variant="text">
Text
</Button>
<Button color="primary" variant="link">
Link
</Button>
</Flex>
<Flex gap="middle" wrap>
<Button color="danger" variant="solid">
Solid
</Button>
<Button color="danger" variant="outlined">
Outlined
</Button>
<Button color="danger" variant="dashed">
Dashed
</Button>
<Button color="danger" variant="filled">
Filled
</Button>
<Button color="danger" variant="text">
Text
</Button>
<Button color="danger" variant="link">
Link
</Button>
</Flex>
</Flex>
</ConfigProvider>
);
};
export default App;

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

@ -33,7 +33,8 @@ And 4 other properties additionally.
## Examples
<!-- prettier-ignore -->
<code src="./demo/basic.tsx">Type</code>
<code src="./demo/basic.tsx">Syntactic sugar</code>
<code src="./demo/color-variant.tsx" version="5.21.0">Color & Variant</code>
<code src="./demo/icon.tsx">Icon</code>
<code src="./demo/icon-position.tsx" version="5.17.0">Icon Position</code>
<code src="./demo/debug-icon.tsx" debug>Debug Icon</code>
@ -61,11 +62,12 @@ Different button styles can be generated by setting Button properties. The recom
| autoInsertSpace | We add a space between two Chinese characters by default, which can be 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 |
| danger | Set the danger status of button | boolean | false | |
| color | Set button color | `default` \| `primary` \| `danger` | - | 5.21.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 | |
| href | Redirect url of link button | string | - | |
| htmlType | Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | |
| 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 | |
@ -73,8 +75,9 @@ Different button styles can be generated by setting Button properties. The recom
| size | Set the size of button | `large` \| `middle` \| `small` | `middle` | |
| styles | Semantic DOM style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.4.0 |
| target | Same as target attribute of a, works when href is specified | string | - | |
| type | Set button type | `primary` \| `dashed` \| `link` \| `text` \| `default` | `default` | |
| type | Syntactic sugar. Set button type. Will follow `variant` & `color` if provided | `primary` \| `dashed` \| `link` \| `text` \| `default` | `default` | |
| onClick | Set the handler to handle `click` event | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - | |
| variant | Set button variant | `outlined` \| `dashed` \| `solid` \| `filled` \| `text` \| `link` | - | 5.21.0 |
It accepts all props which native buttons support.
@ -88,6 +91,22 @@ It accepts all props which native buttons support.
## FAQ
### How to choose type and color & variant?
Type is essentially syntactic sugar for colors and variants. It internally provides a set of mapping relationships between colors and variants for the type. If both exist at the same time, the colors and variants will be used first.
```jsx
<Button type="primary">click</Button>
```
Equivalent
```jsx
<Button color="primary" variant="solid">
click
</Button>
```
### How to close the click wave effect?
If you don't need this feature, you can set `disabled` of `wave` in [ConfigProvider](/components/config-provider#api) as `true`.

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

@ -36,7 +36,8 @@ group:
## 代码演示
<!-- prettier-ignore -->
<code src="./demo/basic.tsx">按钮类型</code>
<code src="./demo/basic.tsx">语法糖</code>
<code src="./demo/color-variant.tsx" version="5.21.0">颜色与变体</code>
<code src="./demo/icon.tsx">按钮图标</code>
<code src="./demo/icon-position.tsx" version="5.17.0">按钮图标位置</code>
<code src="./demo/debug-icon.tsx" debug>调试图标按钮</code>
@ -67,11 +68,12 @@ group:
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 `autoInsertSpace` 为 `false` 关闭 | boolean | `true` | 5.17.0 |
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
| classNames | 语义化结构 class | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.4.0 |
| danger | 设置危险按钮 | boolean | false | |
| color | 设置按钮的颜色 | `default` \| `primary` \| `danger` | - | 5.21.0 |
| danger | 语法糖，设置危险按钮。当设置 `color` 时会以后者为准 | boolean | false | |
| disabled | 设置按钮失效状态 | boolean | false | |
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
| htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | |
| 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 | |
@ -79,8 +81,9 @@ group:
| size | 设置按钮大小 | `large` \| `middle` \| `small` | `middle` | |
| styles | 语义化结构 style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.4.0 |
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
| type | 设置按钮类型 | `primary` \| `dashed` \| `link` \| `text` \| `default` | `default` | |
| type | 语法糖，设置按钮类型。当设置 `variant` 与 `color` 时以后者为准 | `primary` \| `dashed` \| `link` \| `text` \| `default` | `default` | |
| onClick | 点击按钮时的回调 | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - | |
| variant | 设置按钮的变体 | `outlined` \| `dashed` \| `solid` \| `filled` \| `text` \| `link` | - | 5.21.0 |
支持原生 button 的其他所有属性。
@ -94,6 +97,22 @@ group:
## FAQ
### 类型和颜色与变体如何选择？
类型本质上是颜色与变体的语法糖，内部为其提供了一组颜色与变体的映射关系。如果两者同时存在，优先使用颜色与变体。
```jsx
<Button type="primary">click</Button>
```
等同于
```jsx
<Button color="primary" variant="solid">
click
</Button>
```
### 如何关闭点击波纹效果？
如果你不需要这个特性，可以设置 [ConfigProvider](/components/config-provider-cn#api) 的 `wave` 的 `disabled` 为 `true`。

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

@ -4,6 +4,7 @@ import { unit } from '@ant-design/cssinjs';
import { genFocusStyle } from '../../style';
import type { GenerateStyle } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
import type { ButtonVariantType } from '../buttonHelpers';
import genGroupStyle from './group';
import type { ButtonToken, ComponentToken } from './token';
import { prepareComponentToken, prepareToken } from './token';
@ -95,7 +96,6 @@ const genRoundButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
paddingInlineEnd: token.calc(token.controlHeight).div(2).equal(),
});
// =============================== Type ===============================
const genDisabledStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
cursor: 'not-allowed',
borderColor: token.borderColorDisabled,
@ -146,10 +146,6 @@ const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (toke
},
});
const genSolidButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
...genSolidDisabledButtonStyle(token),
});
const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
[`&:disabled, &${token.componentCls}-disabled`]: {
cursor: 'not-allowed',
@ -157,18 +153,112 @@ const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token
},
});
// Type: Default
const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
...genSolidButtonStyle(token),
// ============================== Variant =============================
const genVariantButtonStyle = (
token: ButtonToken,
hoverStyle: CSSObject,
activeStyle: CSSObject,
variant?: ButtonVariantType,
): CSSObject => {
const isPureDisabled = variant && ['link', 'text'].includes(variant);
const genDisabledButtonStyle = isPureDisabled
? genPureDisabledButtonStyle
: genSolidDisabledButtonStyle;
background: token.defaultBg,
borderColor: token.defaultBorderColor,
return {
...genDisabledButtonStyle(token),
...genHoverActiveButtonStyle(token.componentCls, hoverStyle, activeStyle),
};
};
const genSolidButtonStyle = (
token: ButtonToken,
textColor: string,
background: string,
hoverStyle: CSSObject,
activeStyle: CSSObject,
): CSSObject => ({
[`&${token.componentCls}-solid`]: {
color: textColor,
background,
...genVariantButtonStyle(token, hoverStyle, activeStyle),
},
});
const genOutlinedDashedButtonStyle = (
token: ButtonToken,
borderColor: string,
background: string,
hoverStyle: CSSObject,
activeStyle: CSSObject,
) => ({
[`&${token.componentCls}-outlined, &${token.componentCls}-dashed`]: {
borderColor,
background,
...genVariantButtonStyle(token, hoverStyle, activeStyle),
},
});
const genDashedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
[`&${token.componentCls}-dashed`]: {
borderStyle: 'dashed',
},
});
const genFilledButtonStyle = (
token: ButtonToken,
background: string,
hoverStyle: CSSObject,
activeStyle: CSSObject,
) => ({
[`&${token.componentCls}-filled`]: {
boxShadow: 'none',
background,
...genVariantButtonStyle(token, hoverStyle, activeStyle),
},
});
const genTextLinkButtonStyle = (
token: ButtonToken,
textColor: string,
variant: 'text' | 'link',
hoverStyle: CSSObject,
activeStyle: CSSObject,
) => ({
[`&${token.componentCls}-${variant}`]: {
color: textColor,
boxShadow: 'none',
...genVariantButtonStyle(token, hoverStyle, activeStyle, variant),
},
});
// =============================== Color ==============================
const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
color: token.defaultColor,
boxShadow: token.defaultShadow,
...genHoverActiveButtonStyle(
token.componentCls,
...genSolidButtonStyle(
token,
token.solidTextColor,
token.colorBgSolid,
{
background: token.colorBgSolidHover,
},
{
background: token.colorBgSolidActive,
},
),
...genOutlinedDashedButtonStyle(
token,
token.defaultBorderColor,
token.defaultBg,
{
color: token.defaultHoverColor,
borderColor: token.defaultHoverBorderColor,
@ -181,6 +271,45 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
},
),
...genDashedButtonStyle(token),
...genFilledButtonStyle(
token,
token.colorFillTertiary,
{
background: token.colorFillSecondary,
},
{
background: token.colorFill,
},
),
...genTextLinkButtonStyle(
token,
token.textTextColor,
'text',
{
color: token.textTextHoverColor,
background: token.textHoverBg,
},
{
color: token.textTextActiveColor,
background: token.colorBgTextActive,
},
),
...genTextLinkButtonStyle(
token,
token.textTextColor,
'link',
{
color: token.colorLinkHover,
background: token.linkHoverBg,
},
{
color: token.colorLinkActive,
},
),
...genGhostButtonStyle(
token.componentCls,
token.ghostBg,
@ -189,56 +318,81 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
token.colorTextDisabled,
token.colorBorder,
),
[`&${token.componentCls}-dangerous`]: {
color: token.colorError,
borderColor: token.colorError,
...genHoverActiveButtonStyle(
token.componentCls,
{
color: token.colorErrorHover,
borderColor: token.colorErrorBorderHover,
},
{
color: token.colorErrorActive,
borderColor: token.colorErrorActive,
},
),
...genGhostButtonStyle(
token.componentCls,
token.ghostBg,
token.colorError,
token.colorError,
token.colorTextDisabled,
token.colorBorder,
),
...genSolidDisabledButtonStyle(token),
},
});
// Type: Primary
const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
...genSolidButtonStyle(token),
color: token.primaryColor,
background: token.colorPrimary,
color: token.colorPrimary,
boxShadow: token.primaryShadow,
...genHoverActiveButtonStyle(
token.componentCls,
...genSolidButtonStyle(
token,
token.primaryColor,
token.colorPrimary,
{
color: token.colorTextLightSolid,
background: token.colorPrimaryHover,
},
{
color: token.colorTextLightSolid,
background: token.colorPrimaryActive,
},
),
...genOutlinedDashedButtonStyle(
token,
token.colorPrimary,
token.colorBgContainer,
{
color: token.colorPrimaryTextHover,
borderColor: token.colorPrimaryHover,
background: token.colorBgContainer,
},
{
color: token.colorPrimaryTextActive,
borderColor: token.colorPrimaryActive,
background: token.colorBgContainer,
},
),
...genDashedButtonStyle(token),
...genFilledButtonStyle(
token,
token.colorPrimaryBg,
{
background: token.colorPrimaryBgHover,
},
{
background: token.colorPrimaryBorder,
},
),
...genTextLinkButtonStyle(
token,
token.colorPrimary,
'text',
{
color: token.colorPrimaryTextHover,
background: token.colorPrimaryBg,
},
{
color: token.colorPrimaryTextActive,
background: token.colorPrimaryBorder,
},
),
...genTextLinkButtonStyle(
token,
token.colorPrimary,
'link',
{
color: token.colorPrimaryTextHover,
background: token.linkHoverBg,
},
{
color: token.colorPrimaryTextActive,
},
),
...genGhostButtonStyle(
token.componentCls,
token.ghostBg,
@ -255,14 +409,16 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
borderColor: token.colorPrimaryActive,
},
),
});
[`&${token.componentCls}-dangerous`]: {
background: token.colorError,
const genDangerousStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
color: token.colorError,
boxShadow: token.dangerShadow,
color: token.dangerColor,
...genHoverActiveButtonStyle(
token.componentCls,
...genSolidButtonStyle(
token,
token.dangerColor,
token.colorError,
{
background: token.colorErrorHover,
},
@ -271,6 +427,59 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
},
),
...genOutlinedDashedButtonStyle(
token,
token.colorError,
token.colorBgContainer,
{
color: token.colorErrorHover,
borderColor: token.colorErrorBorderHover,
},
{
color: token.colorErrorActive,
borderColor: token.colorErrorActive,
},
),
...genDashedButtonStyle(token),
...genFilledButtonStyle(
token,
token.colorErrorBg,
{
background: token.colorErrorBgFilledHover,
},
{
background: token.colorErrorBgActive,
},
),
...genTextLinkButtonStyle(
token,
token.colorError,
'text',
{
color: token.colorErrorHover,
background: token.colorErrorBg,
},
{
color: token.colorErrorHover,
background: token.colorErrorBgActive,
},
),
...genTextLinkButtonStyle(
token,
token.colorError,
'link',
{
color: token.colorErrorHover,
},
{
color: token.colorErrorActive,
},
),
...genGhostButtonStyle(
token.componentCls,
token.ghostBg,
@ -287,101 +496,15 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
borderColor: token.colorErrorActive,
},
),
...genSolidDisabledButtonStyle(token),
},
});
// Type: Dashed
const genDashedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
...genDefaultButtonStyle(token),
borderStyle: 'dashed',
});
// Type: Link
const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
color: token.colorLink,
...genHoverActiveButtonStyle(
token.componentCls,
{
color: token.colorLinkHover,
background: token.linkHoverBg,
},
{
color: token.colorLinkActive,
},
),
...genPureDisabledButtonStyle(token),
[`&${token.componentCls}-dangerous`]: {
color: token.colorError,
...genHoverActiveButtonStyle(
token.componentCls,
{
color: token.colorErrorHover,
},
{
color: token.colorErrorActive,
},
),
...genPureDisabledButtonStyle(token),
},
});
// Type: Text
const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
...genHoverActiveButtonStyle(
token.componentCls,
{
color: token.colorText,
background: token.textHoverBg,
},
{
color: token.colorText,
background: token.colorBgTextActive,
},
),
...genPureDisabledButtonStyle(token),
[`&${token.componentCls}-dangerous`]: {
color: token.colorError,
...genPureDisabledButtonStyle(token),
...genHoverActiveButtonStyle(
token.componentCls,
{
color: token.colorErrorHover,
background: token.colorErrorBg,
},
{
color: token.colorErrorHover,
background: token.colorErrorBgActive,
},
),
},
});
const genTypeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
const genColorButtonStyle: GenerateStyle<ButtonToken> = (token) => {
const { componentCls } = token;
return {
[`${componentCls}-default`]: genDefaultButtonStyle(token),
[`${componentCls}-primary`]: genPrimaryButtonStyle(token),
[`${componentCls}-dashed`]: genDashedButtonStyle(token),
[`${componentCls}-link`]: genLinkButtonStyle(token),
[`${componentCls}-text`]: genTextButtonStyle(token),
[`${componentCls}-ghost`]: genGhostButtonStyle(
token.componentCls,
token.ghostBg,
token.colorBgContainer,
token.colorBgContainer,
token.colorTextDisabled,
token.colorBorder,
),
[`${componentCls}-dangerous`]: genDangerousStyle(token),
};
};
@ -515,8 +638,8 @@ export default genStyleHooks(
// Block
genBlockButtonStyle(buttonToken),
// Group (type, ghost, danger, loading)
genTypeButtonStyle(buttonToken),
// Color
genColorButtonStyle(buttonToken),
// Button Group
genGroupStyle(buttonToken),

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

@ -1,6 +1,8 @@
import type { CSSProperties } from 'react';
import type { FullToken, GetDefaultToken, GenStyleFn } from '../../theme/internal';
import { AggregationColor } from '../../color-picker/color';
import { isBright } from '../../color-picker/components/ColorPresets';
import type { FullToken, GenStyleFn, GetDefaultToken } from '../../theme/internal';
import { getLineHeight, mergeToken } from '../../theme/internal';
/** Component only token. Which will handle additional calculation of alias token */
@ -100,6 +102,30 @@ export interface ComponentToken {
* @descEN Border color of default ghost button
*/
defaultGhostBorderColor: string;
/**
* @desc 主要填充按钮的浅色背景颜色
* @descEN Background color of primary filled button
*/
/**
* @desc 默认实心按钮的文本色
* @descEN Default text color for solid buttons.
*/
solidTextColor: string;
/**
* @desc 默认文本按钮的文本色
* @descEN Default text color for text buttons
*/
textTextColor: string;
/**
* @desc 默认文本按钮悬浮态文本颜色
* @descEN Default text color for text buttons on hover
*/
textTextHoverColor: string;
/**
* @desc 默认文本按钮激活态文字颜色
* @descEN Default text color for text buttons on active
*/
textTextActiveColor: string;
/**
* @desc 按钮横向内间距
* @descEN Horizontal padding of button
@ -231,6 +257,9 @@ export const prepareComponentToken: GetDefaultToken<'Button'> = (token) => {
const contentLineHeight = token.contentLineHeight ?? getLineHeight(contentFontSize);
const contentLineHeightSM = token.contentLineHeightSM ?? getLineHeight(contentFontSizeSM);
const contentLineHeightLG = token.contentLineHeightLG ?? getLineHeight(contentFontSizeLG);
const solidTextColor = isBright(new AggregationColor(token.colorBgSolid), '#fff')
? '#000'
: '#fff';
return {
fontWeight: 400,
@ -251,6 +280,9 @@ export const prepareComponentToken: GetDefaultToken<'Button'> = (token) => {
onlyIconSizeLG: token.fontSizeLG + 2,
groupBorderColor: token.colorPrimaryHover,
linkHoverBg: 'transparent',
textTextColor: token.colorText,
textTextHoverColor: token.colorText,
textTextActiveColor: token.colorText,
textHoverBg: token.colorBgTextHover,
defaultColor: token.colorText,
defaultBg: token.colorBgContainer,
@ -262,6 +294,7 @@ export const prepareComponentToken: GetDefaultToken<'Button'> = (token) => {
defaultActiveBg: token.colorBgContainer,
defaultActiveColor: token.colorPrimaryActive,
defaultActiveBorderColor: token.colorPrimaryActive,
solidTextColor,
contentFontSize,
contentFontSizeSM,
contentFontSizeLG,

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

@ -299,46 +299,6 @@ exports[`Card should still have padding when card which set padding to 0 is load
</div>
`;
exports[`Card title should be vertically aligned 1`] = `
<div
class="ant-card ant-card-bordered"
style="width: 300px;"
>
<div
class="ant-card-head"
>
<div
class="ant-card-head-wrapper"
>
<div
class="ant-card-head-title"
>
Card title
</div>
<div
class="ant-card-extra"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Button
</span>
</button>
</div>
</div>
</div>
<div
class="ant-card-body"
>
<p>
Card content
</p>
</div>
</div>
`;
exports[`Card should support custom className 1`] = `
<div>
<div
@ -397,3 +357,43 @@ exports[`Card should support custom styles 1`] = `
</div>
</div>
`;
exports[`Card title should be vertically aligned 1`] = `
<div
class="ant-card ant-card-bordered"
style="width: 300px;"
>
<div
class="ant-card-head"
>
<div
class="ant-card-head-wrapper"
>
<div
class="ant-card-head-title"
>
Card title
</div>
<div
class="ant-card-extra"
>
<button
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
Button
</span>
</button>
</div>
</div>
</div>
<div
class="ant-card-body"
>
<p>
Card content
</p>
</div>
</div>
`;

2
components/checkbox/Checkbox.tsx
View File

@ -28,6 +28,8 @@ export interface AbstractCheckboxProps<T> {
onMouseLeave?: React.MouseEventHandler<HTMLElement>;
onKeyPress?: React.KeyboardEventHandler<HTMLElement>;
onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
onFocus?: React.FocusEventHandler<HTMLElement>;
onBlur?: React.FocusEventHandler<HTMLElement>;
value?: any;
tabIndex?: number;
name?: string;

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

@ -143,7 +143,7 @@ Array [
</p>,
<p>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
type="button"
>
<span>
@ -151,7 +151,7 @@ Array [
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
style="margin: 0px 10px;"
type="button"
>

4
components/checkbox/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -139,7 +139,7 @@ Array [
</p>,
<p>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
type="button"
>
<span>
@ -147,7 +147,7 @@ Array [
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
style="margin:0 10px"
type="button"
>

15
components/checkbox/__tests__/checkbox.test.tsx
View File

@ -37,4 +37,19 @@ describe('Checkbox', () => {
);
errorSpy.mockRestore();
});
// https://github.com/ant-design/ant-design/issues/50768
it('onFocus / onBlur', () => {
const onBlur = jest.fn();
const onFocus = jest.fn();
const { container } = render(<Checkbox onBlur={onBlur} onFocus={onFocus} />);
const inputEl = container.querySelector('input')!;
fireEvent.focus(inputEl);
fireEvent.blur(inputEl);
expect(onFocus).toHaveBeenCalledTimes(1);
expect(onBlur).toHaveBeenCalledTimes(1);
});
});

2
components/checkbox/index.en-US.md
View File

@ -41,6 +41,8 @@ Common props ref：[Common props](/docs/react/common-props)
| disabled | If disable checkbox | boolean | false | |
| indeterminate | The indeterminate checked state of checkbox | boolean | false | |
| onChange | The callback function that is triggered when the state changes | (e: CheckboxChangeEvent) => void | - | |
| onBlur | Called when leaving the component | function() | - | |
| onFocus | Called when entering the component | function() | - | |
#### Checkbox Group

2
components/checkbox/index.zh-CN.md
View File

@ -42,6 +42,8 @@ demo:
| disabled | 失效状态 | boolean | false | |
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false | |
| onChange | 变化时的回调函数 | (e: CheckboxChangeEvent) => void | - | |
| onBlur | 失去焦点时的回调 | function() | - | |
| onFocus | 获得焦点时的回调 | function() | - | |
#### Checkbox Group

22
components/collapse/__tests__/index.test.tsx
View File

@ -275,4 +275,26 @@ describe('Collapse', () => {
'collapsed',
);
});
it('should support styles and classNames', () => {
const { container } = render(
<Collapse
activeKey={['1']}
items={[
{
key: '1',
label: 'title',
styles: { header: { color: 'red' }, body: { color: 'blue' } },
classNames: { header: 'header-class', body: 'body-class' },
},
]}
/>,
);
expect(container.querySelector('.ant-collapse-header')).toHaveClass('header-class');
expect(container.querySelector('.ant-collapse-content-box')).toHaveClass('body-class');
expect(container.querySelector('.ant-collapse-header')).toHaveStyle({ color: 'red' });
expect(container.querySelector('.ant-collapse-content-box')).toHaveStyle({ color: 'blue' });
});
});

50
components/collapse/demo/_semantic.tsx Normal file
View File

@ -0,0 +1,50 @@
import React from 'react';
import type { CollapseProps } from 'antd';
import { Collapse } from 'antd';
import SemanticPreview from '../../../.dumi/components/SemanticPreview';
import useLocale from '../../../.dumi/hooks/useLocale';
const locales = {
cn: {
header: '头部元素',
body: '内容元素',
},
en: {
header: 'Header element',
body: 'Body element',
},
};
const BlockCollapse: React.FC = (props) => {
const items: CollapseProps['items'] = [
{
key: '1',
label: 'This is panel header',
children: <p>This is panel body</p>,
...props,
},
];
return (
<div style={{ position: 'absolute', inset: 0 }}>
<Collapse {...props} items={items} defaultActiveKey={['1']} />
</div>
);
};
const App: React.FC = () => {
const [locale] = useLocale(locales);
return (
<SemanticPreview
semantics={[
{ name: 'header', desc: locale.header, version: '5.21.0' },
{ name: 'body', desc: locale.body, version: '5.21.0' },
]}
>
<BlockCollapse />
</SemanticPreview>
);
};
export default App;

20
components/collapse/index.en-US.md
View File

@ -89,7 +89,21 @@ Common props ref：[Common props](/docs/react/common-props)
| ghost | Make the collapse borderless and its background transparent | boolean | false | 4.4.0 |
| size | Set the size of collapse | `large` \| `middle` \| `small` | `middle` | 5.2.0 |
| onChange | Callback function executed when active panel is changed | function | - | |
| items | collapse items content | [ItemType](https://github.com/react-component/collapse/blob/27250ca5415faab16db412b9bff2c131bb4f32fc/src/interface.ts#L6) | - | 5.6.0 |
| items | collapse items content | [ItemType](#ItemType) | - | 5.6.0 |
### ItemType
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| classNames | Semantic structure className | [`Record<header \| body, string>`](#semantic-dom) | - | 5.21.0 |
| collapsible | Specify whether the panel be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - | |
| children | Body area content | ReactNode | - | |
| extra | The extra element in the corner | ReactNode | - | |
| forceRender | Forced render of content on panel, instead of lazy rendering after clicking on header | boolean | false | |
| key | Unique key identifying the panel from among its siblings | string \| number | - | |
| label | Title of the panel | ReactNode | - | - |
| showArrow | If false, panel will not show arrow icon. If false, collapsible can't be set as icon | boolean | true | |
| styles | Semantic DOM style | [`Record<header \| body, CSSProperties>`](#semantic-dom) | - | 5.21.0 |
### Collapse.Panel
@ -107,6 +121,10 @@ When using version >= 5.6.0, we prefer to configuring the panel by `items`.
| key | Unique key identifying the panel from among its siblings | string \| number | - | |
| showArrow | If false, panel will not show arrow icon. If false, collapsible can't be set as icon | boolean | true | |
## Semantic DOM
<code src="./demo/_semantic.tsx" simplify="true"></code>
## Design Token
<ComponentTokenTable component="Collapse"></ComponentTokenTable>

26
components/collapse/index.zh-CN.md
View File

@ -90,7 +90,21 @@ const items: CollapseProps['items'] = [
| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
| size | 设置折叠面板大小 | `large` \| `middle` \| `small` | `middle` | 5.2.0 |
| onChange | 切换面板的回调 | function | - | |
| items | 折叠项目内容 | [ItemType](https://github.com/react-component/collapse/blob/27250ca5415faab16db412b9bff2c131bb4f32fc/src/interface.ts#L6) | - | 5.6.0 |
| items | 折叠项目内容 | [ItemType](#ItemType) | - | 5.6.0 |
### ItemType
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| classNames | 语义化结构 className | [`Record<header \| body, string>`](#semantic-dom) | - | 5.21.0 |
| collapsible | 是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | |
| children | body 区域内容 | ReactNode | - | |
| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - | |
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
| key | 对应 activeKey | string \| number | - | |
| label | 面板标题 | ReactNode | - | - |
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
| styles | 语义化结构 style | [`Record<header \| body, CSSProperties>`](#semantic-dom) | - | 5.21.0 |
### Collapse.Panel
@ -103,10 +117,14 @@ const items: CollapseProps['items'] = [
| --- | --- | --- | --- | --- |
| collapsible | 是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | 4.9.0 (icon: 4.24.0) |
| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - | |
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
| header | 面板头内容 | ReactNode | - | |
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
| header | 面板标题 | ReactNode | - | |
| key | 对应 activeKey | string \| number | - | |
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能置为 icon） | boolean | true | |
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
## Semantic DOM
<code src="./demo/_semantic.tsx" simplify="true"></code>
## 主题变量（Design Token）

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

@ -3943,7 +3943,9 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
class="ant-color-picker-operation"
>
<div
aria-label="segmented control"
class="ant-segmented ant-segmented-sm"
role="listbox"
>
<div
class="ant-segmented-group"
@ -3957,7 +3959,9 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Single"
>
Single
@ -3971,7 +3975,9 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Gradient"
>
Gradient
@ -10943,7 +10949,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
exports[`renders components/color-picker/demo/trigger.tsx extend context correctly 1`] = `
Array [
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
style="background-color: rgb(22, 119, 255);"
type="button"
>

2
components/color-picker/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -637,7 +637,7 @@ exports[`renders components/color-picker/demo/text-render.tsx correctly 1`] = `
exports[`renders components/color-picker/demo/trigger.tsx correctly 1`] = `
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
style="background-color:#1677ff"
type="button"
>

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

@ -25,7 +25,7 @@ const genPresetColor = (list: PresetsItem[]) =>
return value;
});
const isBright = (value: AggregationColor, bgColorToken: string) => {
export const isBright = (value: AggregationColor, bgColorToken: string) => {
const { r, g, b, a } = value.toRgb();
const hsv = new RcColor(value.toRgbString()).onBackground(bgColorToken).toHsv();
if (a <= 0.5) {

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

File diff suppressed because it is too large Load Diff

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

@ -25,6 +25,7 @@ import FloatButton from '../../float-button';
import Form from '../../form';
import Image from '../../image';
import Input from '../../input';
import InputNumber from '../../input-number';
import Layout from '../../layout';
import List from '../../list';
import Mentions from '../../mentions';
@ -44,6 +45,7 @@ import Skeleton from '../../skeleton';
import Slider from '../../slider';
import Space from '../../space';
import Spin from '../../spin';
import Splitter from '../../splitter';
import Statistic from '../../statistic';
import Steps from '../../steps';
import Switch from '../../switch';
@ -55,10 +57,9 @@ import Timeline from '../../timeline';
import Tour from '../../tour';
import Transfer from '../../transfer';
import Tree from '../../tree';
import TreeSelect from '../../tree-select';
import Typography from '../../typography';
import Upload from '../../upload';
import InputNumber from '../../input-number';
import TreeSelect from '../../tree-select';
describe('ConfigProvider support style and className props', () => {
it('Should Space classNames works', () => {
@ -1551,6 +1552,17 @@ describe('ConfigProvider support style and className props', () => {
expect(element).toHaveStyle({ backgroundColor: 'red' });
});
it('Should Splitter className & style works', () => {
const { container } = render(
<ConfigProvider splitter={{ className: 'cp-splitter', style: { backgroundColor: 'yellow' } }}>
<Splitter>test</Splitter>
</ConfigProvider>,
);
const element = container.querySelector<HTMLDivElement>('.ant-splitter');
expect(element).toHaveClass('cp-splitter');
expect(element).toHaveStyle({ backgroundColor: 'yellow' });
});
it('Should Tour closeIcon works', () => {
const { container } = render(
<ConfigProvider

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

@ -238,6 +238,7 @@ export interface ConfigConsumerProps {
locale?: Locale;
direction?: DirectionType;
space?: SpaceConfig;
splitter?: ComponentStyleConfig;
virtual?: boolean;
popupMatchSelectWidth?: boolean;
popupOverflow?: PopupOverflow;

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

@ -152,6 +152,7 @@ const {
| slider | Set Slider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.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 |
| spin | Set Spin common props | { className?: string, style?: React.CSSProperties, indicator?: React.ReactElement } | - | 5.7.0, indicator: 5.20.0 |
| statistic | Set Statistic common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| steps | Set Steps common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

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

@ -166,6 +166,7 @@ export interface ConfigProviderProps {
*/
direction?: DirectionType;
space?: SpaceConfig;
splitter?: ComponentStyleConfig;
/**
* @descCN 设置 `false` 时关闭虚拟滚动。
* @descEN Close the virtual scrolling when setting `false`.
@ -326,6 +327,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
componentSize,
direction,
space,
splitter,
virtual,
dropdownMatchSelectWidth,
popupMatchSelectWidth,
@ -428,6 +430,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
locale: locale || legacyLocale,
direction,
space,
splitter,
virtual,
popupMatchSelectWidth: popupMatchSelectWidth ?? dropdownMatchSelectWidth,
popupOverflow,

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

@ -154,6 +154,7 @@ const {
| slider | 设置 Slider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.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 |
| spin | 设置 Spin 组件的通用属性 | { className?: string, style?: React.CSSProperties, indicator?: React.ReactElement } | - | 5.7.0, indicator: 5.20.0 |
| statistic | 设置 Statistic 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| steps | 设置 Steps 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

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

@ -5907,7 +5907,7 @@ exports[`renders components/date-picker/demo/buddhist-era.tsx extend context cor
class="ant-picker-ok"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
type="button"
>
<span>
@ -8694,7 +8694,7 @@ exports[`renders components/date-picker/demo/buddhist-era.tsx extend context cor
class="ant-picker-ok"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
type="button"
>
<span>
@ -10667,7 +10667,7 @@ exports[`renders components/date-picker/demo/components.tsx extend context corre
</div>
</div>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -17369,7 +17369,7 @@ exports[`renders components/date-picker/demo/disabled-date.tsx extend context co
class="ant-picker-ok"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
disabled=""
type="button"
>
@ -20438,7 +20438,7 @@ exports[`renders components/date-picker/demo/disabled-date.tsx extend context co
class="ant-picker-ok"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
disabled=""
type="button"
>
@ -23181,7 +23181,7 @@ exports[`renders components/date-picker/demo/extra-footer.tsx extend context cor
class="ant-picker-ok"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
disabled=""
type="button"
>
@ -26542,7 +26542,7 @@ exports[`renders components/date-picker/demo/extra-footer.tsx extend context cor
class="ant-picker-ok"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
disabled=""
type="button"
>
@ -40698,7 +40698,7 @@ exports[`renders components/date-picker/demo/mode.tsx extend context correctly 1
class="ant-picker-ok"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
disabled=""
type="button"
>
@ -47196,7 +47196,7 @@ Array [
class="ant-picker-ok"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
disabled=""
type="button"
>
@ -53128,7 +53128,7 @@ exports[`renders components/date-picker/demo/preset-ranges.tsx extend context co
class="ant-picker-ok"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
disabled=""
type="button"
>
@ -56486,7 +56486,7 @@ exports[`renders components/date-picker/demo/range-picker.tsx extend context cor
class="ant-picker-ok"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
disabled=""
type="button"
>
@ -66358,7 +66358,7 @@ exports[`renders components/date-picker/demo/start-end.tsx extend context correc
class="ant-picker-ok"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
disabled=""
type="button"
>
@ -68463,7 +68463,7 @@ exports[`renders components/date-picker/demo/start-end.tsx extend context correc
class="ant-picker-ok"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
disabled=""
type="button"
>
@ -79285,7 +79285,7 @@ exports[`renders components/date-picker/demo/switchable.tsx extend context corre
class="ant-picker-ok"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
disabled=""
type="button"
>
@ -81400,7 +81400,7 @@ exports[`renders components/date-picker/demo/time.tsx extend context correctly 1
class="ant-picker-ok"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
disabled=""
type="button"
>
@ -82942,7 +82942,7 @@ exports[`renders components/date-picker/demo/time.tsx extend context correctly 1
class="ant-picker-ok"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
disabled=""
type="button"
>

6
components/descriptions/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -655,7 +655,7 @@ exports[`renders components/descriptions/demo/component-token.tsx extend context
class="ant-descriptions-extra"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -1565,7 +1565,7 @@ exports[`renders components/descriptions/demo/size.tsx extend context correctly
class="ant-descriptions-extra"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -1751,7 +1751,7 @@ exports[`renders components/descriptions/demo/size.tsx extend context correctly
class="ant-descriptions-extra"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>

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

@ -599,7 +599,7 @@ exports[`renders components/descriptions/demo/component-token.tsx correctly 1`]
class="ant-descriptions-extra"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -1453,7 +1453,7 @@ exports[`renders components/descriptions/demo/size.tsx correctly 1`] = `
class="ant-descriptions-extra"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -1623,7 +1623,7 @@ exports[`renders components/descriptions/demo/size.tsx correctly 1`] = `
class="ant-descriptions-extra"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>

40
components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
View File

@ -3,7 +3,7 @@
exports[`renders components/drawer/demo/basic-right.tsx extend context correctly 1`] = `
Array [
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -107,7 +107,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -119,7 +119,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -385,7 +385,7 @@ exports[`renders components/drawer/demo/config-provider.tsx extend context corre
class="site-drawer-render-in-current-wrapper"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -575,7 +575,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -654,7 +654,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -666,7 +666,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -707,7 +707,7 @@ exports[`renders components/drawer/demo/extra.tsx extend context correctly 2`] =
exports[`renders components/drawer/demo/form-in-drawer.tsx extend context correctly 1`] = `
Array [
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span
@ -810,7 +810,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -822,7 +822,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -2796,7 +2796,7 @@ exports[`renders components/drawer/demo/form-in-drawer.tsx extend context correc
exports[`renders components/drawer/demo/loading.tsx extend context correctly 1`] = `
Array [
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -2906,7 +2906,7 @@ exports[`renders components/drawer/demo/loading.tsx extend context correctly 2`]
exports[`renders components/drawer/demo/multi-level-drawer.tsx extend context correctly 1`] = `
Array [
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -2952,7 +2952,7 @@ Array [
class="ant-drawer-body"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -3027,7 +3027,7 @@ exports[`renders components/drawer/demo/multi-level-drawer.tsx extend context co
exports[`renders components/drawer/demo/no-mask.tsx extend context correctly 1`] = `
Array [
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -3213,7 +3213,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -3293,7 +3293,7 @@ exports[`renders components/drawer/demo/render-in-current.tsx extend context cor
style="margin-top: 16px;"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -3780,7 +3780,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -3792,7 +3792,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -3871,7 +3871,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -3883,7 +3883,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>

26
components/drawer/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -2,7 +2,7 @@
exports[`renders components/drawer/demo/basic-right.tsx correctly 1`] = `
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -19,7 +19,7 @@ exports[`renders components/drawer/demo/classNames.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -31,7 +31,7 @@ exports[`renders components/drawer/demo/classNames.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -108,7 +108,7 @@ exports[`renders components/drawer/demo/config-provider.tsx correctly 1`] = `
class="site-drawer-render-in-current-wrapper"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -211,7 +211,7 @@ exports[`renders components/drawer/demo/extra.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -224,7 +224,7 @@ exports[`renders components/drawer/demo/extra.tsx correctly 1`] = `
exports[`renders components/drawer/demo/form-in-drawer.tsx correctly 1`] = `
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span
@ -261,7 +261,7 @@ exports[`renders components/drawer/demo/form-in-drawer.tsx correctly 1`] = `
exports[`renders components/drawer/demo/loading.tsx correctly 1`] = `
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -272,7 +272,7 @@ exports[`renders components/drawer/demo/loading.tsx correctly 1`] = `
exports[`renders components/drawer/demo/multi-level-drawer.tsx correctly 1`] = `
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -283,7 +283,7 @@ exports[`renders components/drawer/demo/multi-level-drawer.tsx correctly 1`] = `
exports[`renders components/drawer/demo/no-mask.tsx correctly 1`] = `
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -385,7 +385,7 @@ exports[`renders components/drawer/demo/placement.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -405,7 +405,7 @@ exports[`renders components/drawer/demo/render-in-current.tsx correctly 1`] = `
style="margin-top:16px"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -608,7 +608,7 @@ exports[`renders components/drawer/demo/size.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -620,7 +620,7 @@ exports[`renders components/drawer/demo/size.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>

293
components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -15,7 +15,7 @@ exports[`renders components/dropdown/demo/arrow.tsx extend context correctly 1`]
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -151,7 +151,7 @@ exports[`renders components/dropdown/demo/arrow.tsx extend context correctly 1`]
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -287,7 +287,7 @@ exports[`renders components/dropdown/demo/arrow.tsx extend context correctly 1`]
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -432,7 +432,7 @@ exports[`renders components/dropdown/demo/arrow.tsx extend context correctly 1`]
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -568,7 +568,7 @@ exports[`renders components/dropdown/demo/arrow.tsx extend context correctly 1`]
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -704,7 +704,7 @@ exports[`renders components/dropdown/demo/arrow.tsx extend context correctly 1`]
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -858,7 +858,7 @@ exports[`renders components/dropdown/demo/arrow-center.tsx extend context correc
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -994,7 +994,7 @@ exports[`renders components/dropdown/demo/arrow-center.tsx extend context correc
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -1130,7 +1130,7 @@ exports[`renders components/dropdown/demo/arrow-center.tsx extend context correc
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -1275,7 +1275,7 @@ exports[`renders components/dropdown/demo/arrow-center.tsx extend context correc
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -1411,7 +1411,7 @@ exports[`renders components/dropdown/demo/arrow-center.tsx extend context correc
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -1547,7 +1547,7 @@ exports[`renders components/dropdown/demo/arrow-center.tsx extend context correc
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -2191,7 +2191,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -2219,7 +2219,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx extend context cor
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
>
<button
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
type="button"
>
<span>
@ -2227,7 +2227,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx extend context cor
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
type="button"
>
<span
@ -2471,7 +2471,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx extend context cor
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
>
<button
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
type="button"
>
<span>
@ -2479,7 +2479,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx extend context cor
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
type="button"
>
<span
@ -2723,7 +2723,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx extend context cor
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
>
<button
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
disabled=""
type="button"
>
@ -2732,7 +2732,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx extend context cor
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
disabled=""
type="button"
>
@ -2977,7 +2977,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx extend context cor
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
>
<button
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
type="button"
>
<span>
@ -3004,7 +3004,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx extend context cor
</div>
</div>
<button
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-loading ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-loading ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
type="button"
>
<span
@ -3245,7 +3245,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx extend context cor
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<div
@ -3497,7 +3497,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx extend context cor
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
>
<button
class="ant-btn ant-btn-default ant-btn-dangerous ant-btn-compact-item ant-btn-compact-first-item"
class="ant-btn ant-btn-dangerous ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
type="button"
>
<span>
@ -3505,7 +3505,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx extend context cor
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-dangerous ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
class="ant-btn ant-btn-dangerous ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
type="button"
>
<span
@ -3893,6 +3893,219 @@ Array [
exports[`renders components/dropdown/demo/event.tsx extend context correctly 2`] = `[]`;
exports[`renders components/dropdown/demo/extra.tsx extend context correctly 1`] = `
Array [
<a
class="ant-dropdown-trigger"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
>
Hover me
</div>
<div
class="ant-space-item"
>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</div>
</div>
</a>,
<div
class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<ul
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
data-menu-list="true"
role="menu"
tabindex="0"
>
<li
aria-disabled="true"
class="ant-dropdown-menu-item ant-dropdown-menu-item-disabled ant-dropdown-menu-item-only-child"
data-menu-id="rc-menu-uuid-test-1"
role="menuitem"
>
<span
class="ant-dropdown-menu-title-content"
>
My Account
</span>
</li>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
<li
class="ant-dropdown-menu-item-divider"
role="separator"
/>
<li
class="ant-dropdown-menu-item"
data-menu-id="rc-menu-uuid-test-2"
role="menuitem"
tabindex="-1"
>
<span
class="ant-dropdown-menu-title-content"
>
Profile
<span
class="ant-dropdown-menu-item-extra"
>
⌘P
</span>
</span>
</li>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
<li
class="ant-dropdown-menu-item"
data-menu-id="rc-menu-uuid-test-3"
role="menuitem"
tabindex="-1"
>
<span
class="ant-dropdown-menu-title-content"
>
Billing
<span
class="ant-dropdown-menu-item-extra"
>
⌘B
</span>
</span>
</li>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
<li
class="ant-dropdown-menu-item"
data-menu-id="rc-menu-uuid-test-4"
role="menuitem"
tabindex="-1"
>
<span
aria-label="setting"
class="anticon anticon-setting ant-dropdown-menu-item-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="setting"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
/>
</svg>
</span>
<span
class="ant-dropdown-menu-title-content"
>
Settings
<span
class="ant-dropdown-menu-item-extra"
>
⌘S
</span>
</span>
</li>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
</ul>
<div
aria-hidden="true"
style="display: none;"
/>
</div>,
]
`;
exports[`renders components/dropdown/demo/extra.tsx extend context correctly 2`] = `[]`;
exports[`renders components/dropdown/demo/icon-debug.tsx extend context correctly 1`] = `
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
@ -3904,7 +4117,7 @@ exports[`renders components/dropdown/demo/icon-debug.tsx extend context correctl
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
>
<button
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
type="button"
>
<span>
@ -3912,7 +4125,7 @@ exports[`renders components/dropdown/demo/icon-debug.tsx extend context correctl
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
type="button"
>
<span
@ -4134,7 +4347,7 @@ exports[`renders components/dropdown/demo/loading.tsx extend context correctly 1
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
>
<button
class="ant-btn ant-btn-primary ant-btn-loading ant-btn-compact-item ant-btn-compact-first-item"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-loading ant-btn-compact-item ant-btn-compact-first-item"
type="button"
>
<span
@ -4166,7 +4379,7 @@ exports[`renders components/dropdown/demo/loading.tsx extend context correctly 1
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
type="button"
>
<span
@ -4247,7 +4460,7 @@ exports[`renders components/dropdown/demo/loading.tsx extend context correctly 1
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading ant-btn-compact-item ant-btn-compact-first-item"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm ant-btn-loading ant-btn-compact-item ant-btn-compact-first-item"
type="button"
>
<span
@ -4279,7 +4492,7 @@ exports[`renders components/dropdown/demo/loading.tsx extend context correctly 1
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
type="button"
>
<span
@ -4360,7 +4573,7 @@ exports[`renders components/dropdown/demo/loading.tsx extend context correctly 1
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
>
<button
class="ant-btn ant-btn-primary ant-btn-compact-item ant-btn-compact-first-item"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-compact-item ant-btn-compact-first-item"
type="button"
>
<span>
@ -4368,7 +4581,7 @@ exports[`renders components/dropdown/demo/loading.tsx extend context correctly 1
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
type="button"
>
<span
@ -4449,7 +4662,7 @@ exports[`renders components/dropdown/demo/loading.tsx extend context correctly 1
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
>
<button
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
type="button"
>
<span>
@ -4457,7 +4670,7 @@ exports[`renders components/dropdown/demo/loading.tsx extend context correctly 1
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
type="button"
>
<span
@ -5490,7 +5703,7 @@ exports[`renders components/dropdown/demo/placement.tsx extend context correctly
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -5623,7 +5836,7 @@ exports[`renders components/dropdown/demo/placement.tsx extend context correctly
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -5756,7 +5969,7 @@ exports[`renders components/dropdown/demo/placement.tsx extend context correctly
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -5898,7 +6111,7 @@ exports[`renders components/dropdown/demo/placement.tsx extend context correctly
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -6031,7 +6244,7 @@ exports[`renders components/dropdown/demo/placement.tsx extend context correctly
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -6164,7 +6377,7 @@ exports[`renders components/dropdown/demo/placement.tsx extend context correctly
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>

117
components/dropdown/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -15,7 +15,7 @@ exports[`renders components/dropdown/demo/arrow.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -27,7 +27,7 @@ exports[`renders components/dropdown/demo/arrow.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -39,7 +39,7 @@ exports[`renders components/dropdown/demo/arrow.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -60,7 +60,7 @@ exports[`renders components/dropdown/demo/arrow.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -72,7 +72,7 @@ exports[`renders components/dropdown/demo/arrow.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -84,7 +84,7 @@ exports[`renders components/dropdown/demo/arrow.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -112,7 +112,7 @@ exports[`renders components/dropdown/demo/arrow-center.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -124,7 +124,7 @@ exports[`renders components/dropdown/demo/arrow-center.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -136,7 +136,7 @@ exports[`renders components/dropdown/demo/arrow-center.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -157,7 +157,7 @@ exports[`renders components/dropdown/demo/arrow-center.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -169,7 +169,7 @@ exports[`renders components/dropdown/demo/arrow-center.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -181,7 +181,7 @@ exports[`renders components/dropdown/demo/arrow-center.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -293,7 +293,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
>
<button
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
type="button"
>
<span>
@ -301,7 +301,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
type="button"
>
<span
@ -337,7 +337,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
>
<button
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
type="button"
>
<span>
@ -345,7 +345,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
type="button"
>
<span
@ -381,7 +381,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
>
<button
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
disabled=""
type="button"
>
@ -390,7 +390,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
disabled=""
type="button"
>
@ -427,7 +427,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
>
<button
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
type="button"
>
<span>
@ -435,7 +435,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-loading ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-loading ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
type="button"
>
<span
@ -468,7 +468,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<div
@ -512,7 +512,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
>
<button
class="ant-btn ant-btn-default ant-btn-dangerous ant-btn-compact-item ant-btn-compact-first-item"
class="ant-btn ant-btn-dangerous ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
type="button"
>
<span>
@ -520,7 +520,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-dangerous ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
class="ant-btn ant-btn-dangerous ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
type="button"
>
<span
@ -591,6 +591,45 @@ exports[`renders components/dropdown/demo/event.tsx correctly 1`] = `
</a>
`;
exports[`renders components/dropdown/demo/extra.tsx correctly 1`] = `
<a
class="ant-dropdown-trigger"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
>
Hover me
</div>
<div
class="ant-space-item"
>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</div>
</div>
</a>
`;
exports[`renders components/dropdown/demo/icon-debug.tsx correctly 1`] = `
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
@ -602,7 +641,7 @@ exports[`renders components/dropdown/demo/icon-debug.tsx correctly 1`] = `
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
>
<button
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
type="button"
>
<span>
@ -610,7 +649,7 @@ exports[`renders components/dropdown/demo/icon-debug.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
type="button"
>
<span
@ -692,7 +731,7 @@ exports[`renders components/dropdown/demo/loading.tsx correctly 1`] = `
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
>
<button
class="ant-btn ant-btn-primary ant-btn-loading ant-btn-compact-item ant-btn-compact-first-item"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-loading ant-btn-compact-item ant-btn-compact-first-item"
type="button"
>
<span
@ -723,7 +762,7 @@ exports[`renders components/dropdown/demo/loading.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
type="button"
>
<span
@ -759,7 +798,7 @@ exports[`renders components/dropdown/demo/loading.tsx correctly 1`] = `
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading ant-btn-compact-item ant-btn-compact-first-item"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm ant-btn-loading ant-btn-compact-item ant-btn-compact-first-item"
type="button"
>
<span
@ -790,7 +829,7 @@ exports[`renders components/dropdown/demo/loading.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
type="button"
>
<span
@ -826,7 +865,7 @@ exports[`renders components/dropdown/demo/loading.tsx correctly 1`] = `
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
>
<button
class="ant-btn ant-btn-primary ant-btn-compact-item ant-btn-compact-first-item"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-compact-item ant-btn-compact-first-item"
type="button"
>
<span>
@ -834,7 +873,7 @@ exports[`renders components/dropdown/demo/loading.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
type="button"
>
<span
@ -870,7 +909,7 @@ exports[`renders components/dropdown/demo/loading.tsx correctly 1`] = `
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
>
<button
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
type="button"
>
<span>
@ -878,7 +917,7 @@ exports[`renders components/dropdown/demo/loading.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
type="button"
>
<span
@ -1003,7 +1042,7 @@ exports[`renders components/dropdown/demo/placement.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -1015,7 +1054,7 @@ exports[`renders components/dropdown/demo/placement.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -1027,7 +1066,7 @@ exports[`renders components/dropdown/demo/placement.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -1048,7 +1087,7 @@ exports[`renders components/dropdown/demo/placement.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -1060,7 +1099,7 @@ exports[`renders components/dropdown/demo/placement.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>
@ -1072,7 +1111,7 @@ exports[`renders components/dropdown/demo/placement.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
type="button"
>
<span>

8
components/dropdown/__tests__/__snapshots__/dropdown-button.test.tsx.snap
View File

@ -5,11 +5,11 @@ exports[`DropdownButton rtl render component should be rendered correctly in RTL
class="ant-space-compact ant-space-compact-rtl ant-space-compact-block ant-dropdown-button"
>
<button
class="ant-btn ant-btn-default ant-btn-rtl ant-btn-compact-item ant-btn-compact-first-item ant-btn-compact-item-rtl"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-rtl ant-btn-compact-item ant-btn-compact-first-item ant-btn-compact-item-rtl"
type="button"
/>
<button
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-rtl ant-btn-compact-item ant-btn-compact-last-item ant-btn-compact-item-rtl ant-dropdown-trigger ant-dropdown-rtl"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-rtl ant-btn-compact-item ant-btn-compact-last-item ant-btn-compact-item-rtl ant-dropdown-trigger ant-dropdown-rtl"
type="button"
>
<span
@ -44,12 +44,12 @@ exports[`DropdownButton should support href like Button 1`] = `
class="ant-space-compact ant-space-compact-block ant-dropdown-button"
>
<a
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
href="https://ant.design"
tabindex="0"
/>
<button
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
type="button"
>
<span

11
components/dropdown/__tests__/index.test.tsx
View File

@ -351,4 +351,15 @@ describe('Dropdown', () => {
);
expect(container3.querySelector('button')).not.toHaveAttribute('disabled');
});
it('menu item with extra prop', () => {
const text = '⌘P';
const { container } = render(
<Dropdown menu={{ items: [{ label: 'profile', key: 1, extra: text }] }} open>
<a />
</Dropdown>,
);
expect(container.querySelector('.ant-dropdown-menu-item-extra')?.textContent).toBe(text);
});
});

7
components/dropdown/demo/extra.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
带有快捷方式的下拉菜单。
## en-US
The dropdown menu with shortcut.

44
components/dropdown/demo/extra.tsx Normal file
View File

@ -0,0 +1,44 @@
import React from 'react';
import { DownOutlined, SettingOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';
const items: MenuProps['items'] = [
{
key: '1',
label: 'My Account',
disabled: true,
},
{
type: 'divider',
},
{
key: '2',
label: 'Profile',
extra: '⌘P',
},
{
key: '3',
label: 'Billing',
extra: '⌘B',
},
{
key: '4',
label: 'Settings',
icon: <SettingOutlined />,
extra: '⌘S',
},
];
const App: React.FC = () => (
<Dropdown menu={{ items }}>
<a onClick={(e) => e.preventDefault()}>
<Space>
Hover me
<DownOutlined />
</Space>
</a>
</Dropdown>
);
export default App;

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

@ -17,6 +17,7 @@ When there are more than a few options to choose from, you can wrap them in a `D
<!-- prettier-ignore -->
<code src="./demo/basic.tsx">Basic</code>
<code src="./demo/extra.tsx" version="5.21.0">Extra node</code>
<code src="./demo/placement.tsx">Placement</code>
<code src="./demo/arrow.tsx">Arrow</code>
<code src="./demo/item.tsx">Other elements</code>

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

@ -21,6 +21,7 @@ demo:
<!-- prettier-ignore -->
<code src="./demo/basic.tsx">基本</code>
<code src="./demo/extra.tsx" version="5.21.0">额外节点</code>
<code src="./demo/placement.tsx">弹出位置</code>
<code src="./demo/arrow.tsx">箭头</code>
<code src="./demo/item.tsx">其他元素</code>

9
components/dropdown/style/index.ts
View File

@ -236,6 +236,8 @@ const genBaseStyle: GenerateStyle<DropdownToken> = (token) => {
},
[`${menuCls}-title-content`]: {
display: 'flex',
alignItems: 'center',
flex: 'auto',
'> a': {
@ -252,6 +254,13 @@ const genBaseStyle: GenerateStyle<DropdownToken> = (token) => {
content: '""',
},
},
[`${menuCls}-item-extra`]: {
paddingInlineStart: token.padding,
marginInlineStart: 'auto',
fontSize: token.fontSizeSM,
color: token.colorTextDescription,
},
},
// =========================== Item ===========================

6
components/empty/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -628,7 +628,7 @@ Array [
class="ant-transfer-operation"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm ant-btn-icon-only"
disabled=""
type="button"
>
@ -657,7 +657,7 @@ Array [
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm ant-btn-icon-only"
disabled=""
type="button"
>
@ -1038,7 +1038,7 @@ exports[`renders components/empty/demo/customize.tsx extend context correctly 1`
class="ant-empty-footer"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>

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

@ -419,7 +419,7 @@ Array [
class="ant-transfer-operation"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm ant-btn-icon-only"
disabled=""
type="button"
>
@ -448,7 +448,7 @@ Array [
</span>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm ant-btn-icon-only"
disabled=""
type="button"
>
@ -756,7 +756,7 @@ exports[`renders components/empty/demo/customize.tsx correctly 1`] = `
class="ant-empty-footer"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>

88
components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -8,7 +8,9 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
Select justify :
</p>
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -22,7 +24,9 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="flex-start"
>
flex-start
@ -36,7 +40,9 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="center"
>
center
@ -50,7 +56,9 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="flex-end"
>
flex-end
@ -64,7 +72,9 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="space-between"
>
space-between
@ -78,7 +88,9 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="space-around"
>
space-around
@ -92,7 +104,9 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="space-evenly"
>
space-evenly
@ -104,7 +118,9 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
Select align :
</p>
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -118,7 +134,9 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="flex-start"
>
flex-start
@ -132,7 +150,9 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="center"
>
center
@ -146,7 +166,9 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="flex-end"
>
flex-end
@ -159,7 +181,7 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
style="width: 100%; height: 120px; border-radius: 6px; border: 1px solid #40a9ff;"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -167,7 +189,7 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -175,7 +197,7 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -183,7 +205,7 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -291,7 +313,7 @@ exports[`renders components/flex/demo/combination.tsx extend context correctly 1
“antd is an enterprise-class UI design language and React UI library.”
</h3>
<a
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
href="https://ant.design"
tabindex="0"
target="_blank"
@ -437,7 +459,7 @@ exports[`renders components/flex/demo/gap.tsx extend context correctly 1`] = `
class="ant-flex ant-flex-gap-small"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -445,7 +467,7 @@ exports[`renders components/flex/demo/gap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -453,7 +475,7 @@ exports[`renders components/flex/demo/gap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-dashed"
class="ant-btn ant-btn-default ant-btn-dashed"
type="button"
>
<span>
@ -461,7 +483,7 @@ exports[`renders components/flex/demo/gap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-link"
class="ant-btn ant-btn-primary ant-btn-link"
type="button"
>
<span>
@ -479,7 +501,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -487,7 +509,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -495,7 +517,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -503,7 +525,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -511,7 +533,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -519,7 +541,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -527,7 +549,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -535,7 +557,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -543,7 +565,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -551,7 +573,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -559,7 +581,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -567,7 +589,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -575,7 +597,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -583,7 +605,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -591,7 +613,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -599,7 +621,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -607,7 +629,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -615,7 +637,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -623,7 +645,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -631,7 +653,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -639,7 +661,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -647,7 +669,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -655,7 +677,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -663,7 +685,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>

88
components/flex/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -8,7 +8,9 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
Select justify :
</p>
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -22,7 +24,9 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="flex-start"
>
flex-start
@ -36,7 +40,9 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="center"
>
center
@ -50,7 +56,9 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="flex-end"
>
flex-end
@ -64,7 +72,9 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="space-between"
>
space-between
@ -78,7 +88,9 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="space-around"
>
space-around
@ -92,7 +104,9 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="space-evenly"
>
space-evenly
@ -104,7 +118,9 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
Select align :
</p>
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -118,7 +134,9 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="flex-start"
>
flex-start
@ -132,7 +150,9 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="center"
>
center
@ -146,7 +166,9 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="flex-end"
>
flex-end
@ -159,7 +181,7 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
style="width:100%;height:120px;border-radius:6px;border:1px solid #40a9ff"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -167,7 +189,7 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -175,7 +197,7 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -183,7 +205,7 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -287,7 +309,7 @@ exports[`renders components/flex/demo/combination.tsx correctly 1`] = `
“antd is an enterprise-class UI design language and React UI library.”
</h3>
<a
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
href="https://ant.design"
tabindex="0"
target="_blank"
@ -429,7 +451,7 @@ exports[`renders components/flex/demo/gap.tsx correctly 1`] = `
class="ant-flex ant-flex-gap-small"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -437,7 +459,7 @@ exports[`renders components/flex/demo/gap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -445,7 +467,7 @@ exports[`renders components/flex/demo/gap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-dashed"
class="ant-btn ant-btn-default ant-btn-dashed"
type="button"
>
<span>
@ -453,7 +475,7 @@ exports[`renders components/flex/demo/gap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-link"
class="ant-btn ant-btn-primary ant-btn-link"
type="button"
>
<span>
@ -469,7 +491,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -477,7 +499,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -485,7 +507,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -493,7 +515,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -501,7 +523,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -509,7 +531,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -517,7 +539,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -525,7 +547,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -533,7 +555,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -541,7 +563,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -549,7 +571,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -557,7 +579,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -565,7 +587,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -573,7 +595,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -581,7 +603,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -589,7 +611,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -597,7 +619,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -605,7 +627,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -613,7 +635,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -621,7 +643,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -629,7 +651,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -637,7 +659,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -645,7 +667,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -653,7 +675,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>

19
components/float-button/FloatButton.tsx
View File

@ -1,7 +1,9 @@
/* eslint-disable react/button-has-type */
import React, { useContext, useMemo } from 'react';
import classNames from 'classnames';
import omit from 'rc-util/lib/omit';
import { useZIndex } from '../_util/hooks/useZIndex';
import { devUseWarning } from '../_util/warning';
import Badge from '../badge';
import type { ConfigConsumerProps } from '../config-provider';
@ -13,7 +15,6 @@ import FloatButtonGroupContext from './context';
import Content from './FloatButtonContent';
import type FloatButtonGroup from './FloatButtonGroup';
import type {
FloatButtonBadgeProps,
FloatButtonContentProps,
FloatButtonElement,
FloatButtonProps,
@ -29,11 +30,13 @@ const InternalFloatButton = React.forwardRef<FloatButtonElement, FloatButtonProp
prefixCls: customizePrefixCls,
className,
rootClassName,
style,
type = 'default',
shape = 'circle',
icon,
description,
tooltip,
htmlType = 'button',
badge = {},
...restProps
} = props;
@ -59,11 +62,13 @@ const InternalFloatButton = React.forwardRef<FloatButtonElement, FloatButtonProp
},
);
// ============================ zIndex ============================
const [zIndex] = useZIndex('FloatButton', style?.zIndex as number);
const mergedStyle: React.CSSProperties = { ...style, zIndex };
// 虽然在 ts 中已经 omit 过了，但是为了防止多余的属性被透传进来，这里再 omit 一遍，以防万一
const badgeProps = useMemo<FloatButtonBadgeProps>(
() => omit(badge, ['title', 'children', 'status', 'text'] as any[]),
[badge],
);
const badgeProps = omit(badge, ['title', 'children', 'status', 'text'] as any[]);
const contentProps = useMemo<FloatButtonContentProps>(
() => ({ prefixCls, description, icon, type }),
@ -100,11 +105,11 @@ const InternalFloatButton = React.forwardRef<FloatButtonElement, FloatButtonProp
return wrapCSSVar(
props.href ? (
<a ref={ref} {...restProps} className={classString}>
<a ref={ref} {...restProps} className={classString} style={mergedStyle}>
{buttonNode}
</a>
) : (
<button ref={ref} {...restProps} className={classString} type="button">
<button ref={ref} {...restProps} className={classString} style={mergedStyle} type={htmlType}>
{buttonNode}
</button>
),

42
components/float-button/FloatButtonGroup.tsx
View File

@ -1,4 +1,4 @@
import React, { memo, useContext } from 'react';
import React from 'react';
import CloseOutlined from '@ant-design/icons/CloseOutlined';
import FileTextOutlined from '@ant-design/icons/FileTextOutlined';
import classNames from 'classnames';
@ -6,6 +6,7 @@ import CSSMotion from 'rc-motion';
import { useEvent } from 'rc-util';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import { useZIndex } from '../_util/hooks/useZIndex';
import { devUseWarning } from '../_util/warning';
import type { ConfigConsumerProps } from '../config-provider';
import { ConfigContext } from '../config-provider';
@ -15,13 +16,14 @@ import FloatButton, { floatButtonPrefixCls } from './FloatButton';
import type { FloatButtonGroupProps } from './interface';
import useStyle from './style';
const FloatButtonGroup: React.FC<FloatButtonGroupProps> = (props) => {
const FloatButtonGroup: React.FC<Readonly<FloatButtonGroupProps>> = (props) => {
const {
prefixCls: customizePrefixCls,
className,
style,
shape = 'circle',
type = 'default',
placement = 'top',
icon = <FileTextOutlined />,
closeIcon,
description,
@ -34,21 +36,31 @@ const FloatButtonGroup: React.FC<FloatButtonGroupProps> = (props) => {
} = props;
const { direction, getPrefixCls, floatButtonGroup } =
useContext<ConfigConsumerProps>(ConfigContext);
React.useContext<ConfigConsumerProps>(ConfigContext);
const mergedCloseIcon = closeIcon ?? floatButtonGroup?.closeIcon ?? <CloseOutlined />;
const prefixCls = getPrefixCls(floatButtonPrefixCls, customizePrefixCls);
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const groupPrefixCls = `${prefixCls}-group`;
const isMenuMode = trigger && ['click', 'hover'].includes(trigger);
const isValidPlacement = placement && ['top', 'left', 'right', 'bottom'].includes(placement);
const groupCls = classNames(groupPrefixCls, hashId, cssVarCls, rootCls, className, {
[`${groupPrefixCls}-rtl`]: direction === 'rtl',
[`${groupPrefixCls}-${shape}`]: shape,
[`${groupPrefixCls}-${shape}-shadow`]: !trigger,
[`${groupPrefixCls}-${shape}-shadow`]: !isMenuMode,
[`${groupPrefixCls}-${placement}`]: isMenuMode && isValidPlacement, // 只有菜单模式才支持弹出方向
});
// ============================ zIndex ============================
const [zIndex] = useZIndex('FloatButton', style?.zIndex as number);
const mergedStyle: React.CSSProperties = { ...style, zIndex };
const wrapperCls = classNames(hashId, `${groupPrefixCls}-wrap`);
const [open, setOpen] = useMergedState(false, { value: customOpen });
@ -67,13 +79,13 @@ const FloatButtonGroup: React.FC<FloatButtonGroupProps> = (props) => {
});
// ===================== Trigger: Hover =====================
const onMouseEnter = () => {
const onMouseEnter: React.MouseEventHandler<HTMLDivElement> = () => {
if (hoverTrigger) {
triggerOpen(true);
}
};
const onMouseLeave = () => {
const onMouseLeave: React.MouseEventHandler<HTMLDivElement> = () => {
if (hoverTrigger) {
triggerOpen(false);
}
@ -94,18 +106,10 @@ const FloatButtonGroup: React.FC<FloatButtonGroupProps> = (props) => {
if (floatButtonGroupRef.current?.contains(e.target as Node)) {
return;
}
triggerOpen(false);
};
document.addEventListener('click', onDocClick, {
capture: true,
});
return () => {
document.removeEventListener('click', onDocClick, {
capture: true,
});
};
document.addEventListener('click', onDocClick, { capture: true });
return () => document.removeEventListener('click', onDocClick, { capture: true });
}
}, [clickTrigger]);
@ -126,12 +130,12 @@ const FloatButtonGroup: React.FC<FloatButtonGroupProps> = (props) => {
<div
ref={floatButtonGroupRef}
className={groupCls}
style={style}
style={mergedStyle}
// Hover trigger
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
{trigger && ['click', 'hover'].includes(trigger) ? (
{isMenuMode ? (
<>
<CSSMotion visible={open} motionName={`${groupPrefixCls}-wrap`}>
{({ className: motionClassName }) => (
@ -156,4 +160,4 @@ const FloatButtonGroup: React.FC<FloatButtonGroupProps> = (props) => {
);
};
export default memo(FloatButtonGroup);
export default FloatButtonGroup;

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

@ -574,7 +574,7 @@ Array [
</span>
</button>,
<div
class="ant-float-btn-group ant-float-btn-group-circle"
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-top"
style="inset-inline-end: 24px;"
>
<div
@ -737,7 +737,7 @@ Array [
</button>
</div>,
<div
class="ant-float-btn-group ant-float-btn-group-square"
class="ant-float-btn-group ant-float-btn-group-square ant-float-btn-group-top"
style="inset-inline-end: 88px;"
>
<div
@ -1292,7 +1292,7 @@ exports[`renders components/float-button/demo/group.tsx extend context correctly
exports[`renders components/float-button/demo/group-menu.tsx extend context correctly 1`] = `
Array [
<div
class="ant-float-btn-group ant-float-btn-group-circle"
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-top"
style="inset-inline-end: 24px;"
>
<button
@ -1333,7 +1333,7 @@ Array [
</button>
</div>,
<div
class="ant-float-btn-group ant-float-btn-group-circle"
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-top"
style="inset-inline-end: 94px;"
>
<button
@ -1378,6 +1378,184 @@ Array [
exports[`renders components/float-button/demo/group-menu.tsx extend context correctly 2`] = `[]`;
exports[`renders components/float-button/demo/placement.tsx extend context correctly 1`] = `
<div
class="ant-flex ant-flex-align-center ant-flex-justify-space-evenly"
style="width: 100%; height: 100vh; overflow: hidden; position: relative;"
>
<div
style="width: 100px; height: 100px; position: relative;"
>
<div
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-top"
style="position: absolute; inset-inline-end: 30px; bottom: 80px;"
>
<button
class="ant-float-btn ant-float-btn-group-trigger ant-float-btn-default ant-float-btn-circle"
type="button"
>
<div
class="ant-float-btn-body"
>
<div
class="ant-float-btn-content"
>
<div
class="ant-float-btn-icon"
>
<span
aria-label="up"
class="anticon anticon-up"
role="img"
>
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
</div>
</div>
</div>
</button>
</div>
<div
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-right"
style="position: absolute; inset-inline-end: -20px; bottom: 30px;"
>
<button
class="ant-float-btn ant-float-btn-group-trigger ant-float-btn-default ant-float-btn-circle"
type="button"
>
<div
class="ant-float-btn-body"
>
<div
class="ant-float-btn-content"
>
<div
class="ant-float-btn-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>
</div>
</div>
</button>
</div>
<div
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-bottom"
style="position: absolute; inset-inline-end: 30px; bottom: -20px;"
>
<button
class="ant-float-btn ant-float-btn-group-trigger ant-float-btn-default ant-float-btn-circle"
type="button"
>
<div
class="ant-float-btn-body"
>
<div
class="ant-float-btn-content"
>
<div
class="ant-float-btn-icon"
>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</div>
</div>
</div>
</button>
</div>
<div
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-left"
style="position: absolute; inset-inline-end: 80px; bottom: 30px;"
>
<button
class="ant-float-btn ant-float-btn-group-trigger ant-float-btn-default ant-float-btn-circle"
type="button"
>
<div
class="ant-float-btn-body"
>
<div
class="ant-float-btn-content"
>
<div
class="ant-float-btn-icon"
>
<span
aria-label="left"
class="anticon anticon-left"
role="img"
>
<svg
aria-hidden="true"
data-icon="left"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
/>
</svg>
</span>
</div>
</div>
</div>
</button>
</div>
</div>
</div>
`;
exports[`renders components/float-button/demo/placement.tsx extend context correctly 2`] = `[]`;
exports[`renders components/float-button/demo/render-panel.tsx extend context correctly 1`] = `
<div
style="display: flex; column-gap: 16px; align-items: center;"
@ -1614,7 +1792,7 @@ exports[`renders components/float-button/demo/render-panel.tsx extend context co
</button>
</div>
<div
class="ant-float-btn-group ant-float-btn-pure ant-float-btn-group-circle"
class="ant-float-btn-group ant-float-btn-pure ant-float-btn-group-circle ant-float-btn-group-top"
>
<div
class="ant-float-btn-group-wrap-appear ant-float-btn-group-wrap-appear-start ant-float-btn-group-wrap ant-float-btn-group-wrap"

186
components/float-button/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -526,7 +526,7 @@ Array [
</span>
</button>,
<div
class="ant-float-btn-group ant-float-btn-group-circle"
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-top"
style="inset-inline-end:24px"
>
<div
@ -689,7 +689,7 @@ Array [
</button>
</div>,
<div
class="ant-float-btn-group ant-float-btn-group-square"
class="ant-float-btn-group ant-float-btn-group-square ant-float-btn-group-top"
style="inset-inline-end:88px"
>
<div
@ -1238,7 +1238,7 @@ Array [
exports[`renders components/float-button/demo/group-menu.tsx correctly 1`] = `
Array [
<div
class="ant-float-btn-group ant-float-btn-group-circle"
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-top"
style="inset-inline-end:24px"
>
<button
@ -1279,7 +1279,7 @@ Array [
</button>
</div>,
<div
class="ant-float-btn-group ant-float-btn-group-circle"
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-top"
style="inset-inline-end:94px"
>
<button
@ -1322,6 +1322,182 @@ Array [
]
`;
exports[`renders components/float-button/demo/placement.tsx correctly 1`] = `
<div
class="ant-flex ant-flex-align-center ant-flex-justify-space-evenly"
style="width:100%;height:100vh;overflow:hidden;position:relative"
>
<div
style="width:100px;height:100px;position:relative"
>
<div
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-top"
style="position:absolute;inset-inline-end:30px;bottom:80px"
>
<button
class="ant-float-btn ant-float-btn-group-trigger ant-float-btn-default ant-float-btn-circle"
type="button"
>
<div
class="ant-float-btn-body"
>
<div
class="ant-float-btn-content"
>
<div
class="ant-float-btn-icon"
>
<span
aria-label="up"
class="anticon anticon-up"
role="img"
>
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
</div>
</div>
</div>
</button>
</div>
<div
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-right"
style="position:absolute;inset-inline-end:-20px;bottom:30px"
>
<button
class="ant-float-btn ant-float-btn-group-trigger ant-float-btn-default ant-float-btn-circle"
type="button"
>
<div
class="ant-float-btn-body"
>
<div
class="ant-float-btn-content"
>
<div
class="ant-float-btn-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>
</div>
</div>
</button>
</div>
<div
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-bottom"
style="position:absolute;inset-inline-end:30px;bottom:-20px"
>
<button
class="ant-float-btn ant-float-btn-group-trigger ant-float-btn-default ant-float-btn-circle"
type="button"
>
<div
class="ant-float-btn-body"
>
<div
class="ant-float-btn-content"
>
<div
class="ant-float-btn-icon"
>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</div>
</div>
</div>
</button>
</div>
<div
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-left"
style="position:absolute;inset-inline-end:80px;bottom:30px"
>
<button
class="ant-float-btn ant-float-btn-group-trigger ant-float-btn-default ant-float-btn-circle"
type="button"
>
<div
class="ant-float-btn-body"
>
<div
class="ant-float-btn-content"
>
<div
class="ant-float-btn-icon"
>
<span
aria-label="left"
class="anticon anticon-left"
role="img"
>
<svg
aria-hidden="true"
data-icon="left"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
/>
</svg>
</span>
</div>
</div>
</div>
</button>
</div>
</div>
</div>
`;
exports[`renders components/float-button/demo/render-panel.tsx correctly 1`] = `
<div
style="display:flex;column-gap:16px;align-items:center"
@ -1558,7 +1734,7 @@ exports[`renders components/float-button/demo/render-panel.tsx correctly 1`] = `
</button>
</div>
<div
class="ant-float-btn-group ant-float-btn-pure ant-float-btn-group-circle"
class="ant-float-btn-group ant-float-btn-pure ant-float-btn-group-circle ant-float-btn-group-top"
>
<div
class="ant-float-btn-group-wrap"

44
components/float-button/__tests__/group.test.tsx
View File

@ -86,6 +86,38 @@ describe('FloatButtonGroup', () => {
expect(onOpenChange).toHaveBeenCalledTimes(2);
});
it('support onClick for floatButtonGroup', () => {
const onClick = jest.fn();
const { container } = render(
<FloatButton.Group trigger="click" onClick={onClick}>
<FloatButton />
<FloatButton />
<FloatButton />
</FloatButton.Group>,
);
const floatButton = container
.querySelector('.ant-float-btn-group')!
.querySelector('.ant-float-btn');
fireEvent.click(floatButton!);
expect(onClick).toHaveBeenCalled();
});
it('support click floatButtonGroup when children has onClick', () => {
const onClick = jest.fn();
const onClick2 = jest.fn();
const { container } = render(
<FloatButton.Group trigger="click" onClick={onClick}>
<FloatButton onClick={onClick2} />
<FloatButton onClick={onClick2} />
<FloatButton onClick={onClick2} />
</FloatButton.Group>,
);
fireEvent.click(container.querySelector('.ant-float-btn')!);
fireEvent.click(container.querySelector('.ant-float-btn-group')!);
expect(onClick).toHaveBeenCalled();
expect(onClick2).not.toHaveBeenCalled();
});
it('warning if set `open` but not set `trigger`', () => {
const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
@ -120,4 +152,16 @@ describe('FloatButtonGroup', () => {
expect(container.querySelector('.ant-badge')).toBeTruthy();
});
it('FloatButton.Group should support placement', () => {
(['bottom', 'left', 'right', 'top'] as const).forEach((placement) => {
const { container } = render(
<FloatButton.Group placement={placement} trigger="click" open>
<FloatButton />
</FloatButton.Group>,
);
const element = container.querySelector<HTMLDivElement>('.ant-float-btn-group');
expect(element).toHaveClass(`ant-float-btn-group-${placement}`);
});
});
});

7
components/float-button/__tests__/index.test.tsx
View File

@ -92,4 +92,11 @@ describe('FloatButton', () => {
const badgeElement = container?.querySelector<HTMLSpanElement>('.ant-float-btn .ant-badge');
expect(badgeElement?.querySelector<HTMLElement>('.ant-badge-dot')).toBeTruthy();
});
it('support button htmlType', () => {
const type = 'submit';
const { container } = render(<FloatButton htmlType={type} />);
const element = container?.querySelector<HTMLButtonElement>('.ant-float-btn');
expect(element?.type).toBe(type);
});
});

7
components/float-button/demo/placement.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
自定义弹出位置，提供了四个预设值：`top`、`right`、`bottom`、`left`，默认值为 `top`。
## en-US
Customize animation placement, providing four preset placement: `top`, `right`, `bottom`, `left`, the `top` position by default.

74
components/float-button/demo/placement.tsx Normal file
View File

@ -0,0 +1,74 @@
import React from 'react';
import {
CommentOutlined,
DownOutlined,
LeftOutlined,
RightOutlined,
UpOutlined,
} from '@ant-design/icons';
import { Flex, FloatButton } from 'antd';
const BOX_SIZE = 100;
const BUTTON_SIZE = 40;
const wrapperStyle: React.CSSProperties = {
width: '100%',
height: '100vh',
overflow: 'hidden',
position: 'relative',
};
const boxStyle: React.CSSProperties = {
width: BOX_SIZE,
height: BOX_SIZE,
position: 'relative',
};
const insetInlineEnd: React.CSSProperties['insetInlineEnd'][] = [
(BOX_SIZE - BUTTON_SIZE) / 2,
-(BUTTON_SIZE / 2),
(BOX_SIZE - BUTTON_SIZE) / 2,
BOX_SIZE - BUTTON_SIZE / 2,
];
const bottom: React.CSSProperties['bottom'][] = [
BOX_SIZE - BUTTON_SIZE / 2,
(BOX_SIZE - BUTTON_SIZE) / 2,
-BUTTON_SIZE / 2,
(BOX_SIZE - BUTTON_SIZE) / 2,
];
const icons = [
<UpOutlined key="up" />,
<RightOutlined key="right" />,
<DownOutlined key="down" />,
<LeftOutlined key="left" />,
];
const App: React.FC = () => (
<Flex justify="space-evenly" align="center" style={wrapperStyle}>
<div style={boxStyle}>
{(['top', 'right', 'bottom', 'left'] as const).map((placement, i) => {
const style: React.CSSProperties = {
position: 'absolute',
insetInlineEnd: insetInlineEnd[i],
bottom: bottom[i],
};
return (
<FloatButton.Group
key={placement}
trigger="click"
placement={placement}
style={style}
icon={icons[i]}
>
<FloatButton />
<FloatButton icon={<CommentOutlined />} />
</FloatButton.Group>
);
})}
</div>
</Flex>
);
export default App;

4
components/float-button/index.en-US.md
View File

@ -26,6 +26,7 @@ tag: 5.0.0
<code src="./demo/group.tsx" iframe="360">FloatButton Group</code>
<code src="./demo/group-menu.tsx" iframe="360">Menu mode</code>
<code src="./demo/controlled.tsx" iframe="360">Controlled mode</code>
<code src="./demo/placement.tsx" iframe="380" version="5.21.0">placement</code>
<code src="./demo/back-top.tsx" iframe="360">BackTop</code>
<code src="./demo/badge.tsx" iframe="360">badge</code>
<code src="./demo/badge-debug.tsx" iframe="360" debug>debug dot</code>
@ -49,6 +50,7 @@ Common props ref：[Common props](/docs/react/common-props)
| onClick | Set the handler to handle `click` event | (event) => void | - | |
| href | The target of hyperlink | string | - | |
| target | Specifies where to display the linked URL | string | - | |
| 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` | 5.21.0 |
| badge | Attach Badge to FloatButton. `status` and other props related are not supported. | [BadgeProps](/components/badge#api) | - | 5.4.0 |
### FloatButton.Group
@ -59,7 +61,9 @@ Common props ref：[Common props](/docs/react/common-props)
| trigger | Which action can trigger menu open/close | `click` \| `hover` | - | |
| open | Whether the menu is visible or not, use it with trigger | boolean | - | |
| closeIcon | Customize close button icon | React.ReactNode | `<CloseOutlined />` | |
| placement | Customize menu animation placement | `top` \| `left` \| `right` \| `bottom` | `top` | 5.21.0 |
| onOpenChange | Callback executed when active menu is changed, use it with trigger | (open: boolean) => void | - | |
| onClick | Set the handler to handle `click` event (only work in `Menu mode`) | (event) => void | - | 5.3.0 |
### FloatButton.BackTop

4
components/float-button/index.zh-CN.md
View File

@ -27,6 +27,7 @@ tag: 5.0.0
<code src="./demo/group.tsx" iframe="360">浮动按钮组</code>
<code src="./demo/group-menu.tsx" iframe="360">菜单模式</code>
<code src="./demo/controlled.tsx" iframe="360">受控模式</code>
<code src="./demo/placement.tsx" iframe="380" version="5.21.0">弹出方向</code>
<code src="./demo/back-top.tsx" iframe="360">回到顶部</code>
<code src="./demo/badge.tsx" iframe="360">徽标数</code>
<code src="./demo/badge-debug.tsx" iframe="360" debug>调试小圆点使用</code>
@ -50,6 +51,7 @@ tag: 5.0.0
| onClick | 点击按钮时的回调 | (event) => void | - | |
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
| target | 相当于 a 标签的 target 属性，href 存在时生效 | string | - | |
| htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button#type) | `submit` \| `reset` \| `button` | `button` | 5.21.0 |
| badge | 带徽标数字的悬浮按钮（不支持 `status` 以及相关属性） | [BadgeProps](/components/badge-cn#api) | - | 5.4.0 |
### FloatButton.Group
@ -60,7 +62,9 @@ tag: 5.0.0
| trigger | 触发方式（有触发方式为菜单模式） | `click` \| `hover` | - | |
| open | 受控展开，需配合 trigger 一起使用 | boolean | - | |
| closeIcon | 自定义关闭按钮 | React.ReactNode | `<CloseOutlined />` | |
| placement | 自定义菜单弹出位置 | `top` \| `left` \| `right` \| `bottom` | `top` | 5.21.0 |
| onOpenChange | 展开收起时的回调，需配合 trigger 一起使用 | (open: boolean) => void | - | |
| onClick | 点击按钮时的回调（仅在菜单模式中有效） | (event) => void | - | 5.3.0 |
### FloatButton.BackTop

8
components/float-button/interface.ts
View File

@ -1,6 +1,7 @@
import type React from 'react';
import type { BadgeProps } from '../badge';
import type { ButtonHTMLType } from '../button';
import type { TooltipProps } from '../tooltip';
export type FloatButtonElement = HTMLAnchorElement & HTMLButtonElement;
@ -30,6 +31,11 @@ export interface FloatButtonProps extends React.DOMAttributes<FloatButtonElement
href?: string;
target?: React.HTMLAttributeAnchorTarget;
badge?: FloatButtonBadgeProps;
/**
* @since 5.21.0
* @default button
*/
htmlType?: ButtonHTMLType;
'aria-label'?: React.HtmlHTMLAttributes<HTMLElement>['aria-label'];
}
@ -49,6 +55,8 @@ export interface FloatButtonGroupProps extends FloatButtonProps {
open?: boolean;
// 关闭按钮自定义图标
closeIcon?: React.ReactNode;
// 菜单弹出方向
placement?: 'top' | 'left' | 'right' | 'bottom';
// 展开收起的回调
onOpenChange?: (open: boolean) => void;
}

149
components/float-button/style/index.ts
View File

@ -1,12 +1,12 @@
import type { CSSObject } from '@ant-design/cssinjs';
import { Keyframes, unit } from '@ant-design/cssinjs';
import { unit } from '@ant-design/cssinjs';
import { resetComponent } from '../../style';
import { initFadeMotion } from '../../style/motion/fade';
import { initMotion } from '../../style/motion/motion';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
import getOffset from '../util';
import floatButtonGroupMotion from './keyframes';
/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {
@ -26,7 +26,7 @@ export interface ComponentToken {
* @desc FloatButton 组件的 Token
* @descEN Token for FloatButton component
*/
type FloatButtonToken = FullToken<'FloatButton'> & {
export type FloatButtonToken = FullToken<'FloatButton'> & {
/**
* @desc FloatButton 颜色
* @descEN Color of FloatButton
@ -86,58 +86,6 @@ type FloatButtonToken = FullToken<'FloatButton'> & {
floatButtonInsetInlineEnd: number;
};
const initFloatButtonGroupMotion = (token: FloatButtonToken) => {
const { componentCls, floatButtonSize, motionDurationSlow, motionEaseInOutCirc } = token;
const groupPrefixCls = `${componentCls}-group`;
const moveDownIn = new Keyframes('antFloatButtonMoveDownIn', {
'0%': {
transform: `translate3d(0, ${unit(floatButtonSize)}, 0)`,
transformOrigin: '0 0',
opacity: 0,
},
'100%': {
transform: 'translate3d(0, 0, 0)',
transformOrigin: '0 0',
opacity: 1,
},
});
const moveDownOut = new Keyframes('antFloatButtonMoveDownOut', {
'0%': {
transform: 'translate3d(0, 0, 0)',
transformOrigin: '0 0',
opacity: 1,
},
'100%': {
transform: `translate3d(0, ${unit(floatButtonSize)}, 0)`,
transformOrigin: '0 0',
opacity: 0,
},
});
return [
{
[`${groupPrefixCls}-wrap`]: {
...initMotion(`${groupPrefixCls}-wrap`, moveDownIn, moveDownOut, motionDurationSlow, true),
},
},
{
[`${groupPrefixCls}-wrap`]: {
[`
&${groupPrefixCls}-wrap-enter,
&${groupPrefixCls}-wrap-appear
`]: {
opacity: 0,
animationTimingFunction: motionEaseInOutCirc,
},
[`&${groupPrefixCls}-wrap-leave`]: {
animationTimingFunction: motionEaseInOutCirc,
},
},
},
];
};
// ============================== Group ==============================
const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
const {
@ -149,29 +97,33 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token
borderRadiusSM,
badgeOffset,
floatButtonBodyPadding,
zIndexPopupBase,
calc,
} = token;
const groupPrefixCls = `${componentCls}-group`;
return {
[groupPrefixCls]: {
...resetComponent(token),
zIndex: token.zIndexPopupBase,
display: 'block',
zIndex: zIndexPopupBase,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
border: 'none',
position: 'fixed',
width: floatButtonSize,
height: 'auto',
boxShadow: 'none',
minWidth: floatButtonSize,
minHeight: floatButtonSize,
insetInlineEnd: token.floatButtonInsetInlineEnd,
insetBlockEnd: token.floatButtonInsetBlockEnd,
bottom: token.floatButtonInsetBlockEnd,
borderRadius: borderRadiusLG,
[`${groupPrefixCls}-wrap`]: {
zIndex: -1,
display: 'block',
position: 'relative',
marginBottom: margin,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
},
[`&${groupPrefixCls}-rtl`]: {
direction: 'rtl',
@ -180,14 +132,30 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token
position: 'static',
},
},
[`${groupPrefixCls}-circle`]: {
[`${componentCls}-circle:not(:last-child)`]: {
marginBottom: token.margin,
[`${componentCls}-body`]: {
width: floatButtonSize,
height: floatButtonSize,
borderRadius: '50%',
[`${groupPrefixCls}-top > ${groupPrefixCls}-wrap`]: {
flexDirection: 'column',
top: 'auto',
bottom: calc(floatButtonSize).add(margin).equal(),
},
[`${groupPrefixCls}-bottom > ${groupPrefixCls}-wrap`]: {
flexDirection: 'column',
top: calc(floatButtonSize).add(margin).equal(),
bottom: 'auto',
},
[`${groupPrefixCls}-right > ${groupPrefixCls}-wrap`]: {
flexDirection: 'row',
left: { _skip_check_: true, value: calc(floatButtonSize).add(margin).equal() },
right: { _skip_check_: true, value: 'auto' },
},
[`${groupPrefixCls}-left > ${groupPrefixCls}-wrap`]: {
flexDirection: 'row',
left: { _skip_check_: true, value: 'auto' },
right: { _skip_check_: true, value: calc(floatButtonSize).add(margin).equal() },
},
[`${groupPrefixCls}-circle`]: {
gap: margin,
[`${groupPrefixCls}-wrap`]: {
gap: margin,
},
},
[`${groupPrefixCls}-square`]: {
@ -216,14 +184,23 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token
},
},
[`${groupPrefixCls}-wrap`]: {
display: 'block',
borderRadius: borderRadiusLG,
boxShadow: token.boxShadowSecondary,
[`${componentCls}-square`]: {
boxShadow: 'none',
marginTop: 0,
borderRadius: 0,
padding: floatButtonBodyPadding,
[`${componentCls}-body`]: {
width: token.floatButtonBodySize,
height: token.floatButtonBodySize,
borderRadius: borderRadiusSM,
},
},
},
},
[`${groupPrefixCls}-top > ${groupPrefixCls}-wrap, ${groupPrefixCls}-bottom > ${groupPrefixCls}-wrap`]:
{
[`> ${componentCls}-square`]: {
'&:first-child': {
borderStartStartRadius: borderRadiusLG,
borderStartEndRadius: borderRadiusLG,
@ -235,13 +212,25 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token
'&:not(:last-child)': {
borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
},
[`${componentCls}-body`]: {
width: token.floatButtonBodySize,
height: token.floatButtonBodySize,
},
},
},
[`${groupPrefixCls}-left > ${groupPrefixCls}-wrap, ${groupPrefixCls}-right > ${groupPrefixCls}-wrap`]:
{
[`> ${componentCls}-square`]: {
'&:first-child': {
borderStartStartRadius: borderRadiusLG,
borderEndStartRadius: borderRadiusLG,
},
'&:last-child': {
borderStartEndRadius: borderRadiusLG,
borderEndEndRadius: borderRadiusLG,
},
'&:not(:last-child)': {
borderInlineEnd: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
},
},
},
[`${groupPrefixCls}-circle-shadow`]: {
boxShadow: 'none',
},
@ -272,6 +261,7 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (toke
badgeOffset,
dotOffsetInSquare,
dotOffsetInCircle,
zIndexPopupBase,
calc,
} = token;
return {
@ -280,7 +270,7 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (toke
border: 'none',
position: 'fixed',
cursor: 'pointer',
zIndex: token.zIndexPopupBase,
zIndex: zIndexPopupBase,
// Do not remove the 'display: block' here.
// Deleting it will cause marginBottom to become ineffective.
// Ref: https://github.com/ant-design/ant-design/issues/44700
@ -288,7 +278,7 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (toke
width: floatButtonSize,
height: floatButtonSize,
insetInlineEnd: token.floatButtonInsetInlineEnd,
insetBlockEnd: token.floatButtonInsetBlockEnd,
bottom: token.floatButtonInsetBlockEnd,
boxShadow: token.boxShadowSecondary,
// Pure Panel
'&-pure': {
@ -452,12 +442,11 @@ export default genStyleHooks(
floatButtonBodyPadding: paddingXXS,
badgeOffset: calc(paddingXXS).mul(1.5).equal(),
});
return [
floatButtonGroupStyle(floatButtonToken),
sharedFloatButtonStyle(floatButtonToken),
initFadeMotion(token),
initFloatButtonGroupMotion(floatButtonToken),
floatButtonGroupMotion(floatButtonToken),
];
},
prepareComponentToken,

153
components/float-button/style/keyframes.ts Normal file
View File

@ -0,0 +1,153 @@
import { Keyframes, unit } from '@ant-design/cssinjs';
import type { FloatButtonToken } from '.';
import { initMotion } from '../../style/motion/motion';
const floatButtonGroupMotion = (token: FloatButtonToken) => {
const { componentCls, floatButtonSize, motionDurationSlow, motionEaseInOutCirc, calc } = token;
const moveTopIn = new Keyframes('antFloatButtonMoveTopIn', {
'0%': {
transform: `translate3d(0, ${unit(floatButtonSize)}, 0)`,
transformOrigin: '0 0',
opacity: 0,
},
'100%': {
transform: 'translate3d(0, 0, 0)',
transformOrigin: '0 0',
opacity: 1,
},
});
const moveTopOut = new Keyframes('antFloatButtonMoveTopOut', {
'0%': {
transform: 'translate3d(0, 0, 0)',
transformOrigin: '0 0',
opacity: 1,
},
'100%': {
transform: `translate3d(0, ${unit(floatButtonSize)}, 0)`,
transformOrigin: '0 0',
opacity: 0,
},
});
const moveRightIn = new Keyframes('antFloatButtonMoveRightIn', {
'0%': {
transform: `translate3d(${calc(floatButtonSize).mul(-1).equal()}, 0, 0)`,
transformOrigin: '0 0',
opacity: 0,
},
'100%': {
transform: 'translate3d(0, 0, 0)',
transformOrigin: '0 0',
opacity: 1,
},
});
const moveRightOut = new Keyframes('antFloatButtonMoveRightOut', {
'0%': {
transform: 'translate3d(0, 0, 0)',
transformOrigin: '0 0',
opacity: 1,
},
'100%': {
transform: `translate3d(${calc(floatButtonSize).mul(-1).equal()}, 0, 0)`,
transformOrigin: '0 0',
opacity: 0,
},
});
const moveBottomIn = new Keyframes('antFloatButtonMoveBottomIn', {
'0%': {
transform: `translate3d(0, ${calc(floatButtonSize).mul(-1).equal()}, 0)`,
transformOrigin: '0 0',
opacity: 0,
},
'100%': {
transform: 'translate3d(0, 0, 0)',
transformOrigin: '0 0',
opacity: 1,
},
});
const moveBottomOut = new Keyframes('antFloatButtonMoveBottomOut', {
'0%': {
transform: 'translate3d(0, 0, 0)',
transformOrigin: '0 0',
opacity: 1,
},
'100%': {
transform: `translate3d(0, ${calc(floatButtonSize).mul(-1).equal()}, 0)`,
transformOrigin: '0 0',
opacity: 0,
},
});
const moveLeftIn = new Keyframes('antFloatButtonMoveLeftIn', {
'0%': {
transform: `translate3d(${unit(floatButtonSize)}, 0, 0)`,
transformOrigin: '0 0',
opacity: 0,
},
'100%': {
transform: 'translate3d(0, 0, 0)',
transformOrigin: '0 0',
opacity: 1,
},
});
const moveLeftOut = new Keyframes('antFloatButtonMoveLeftOut', {
'0%': {
transform: 'translate3d(0, 0, 0)',
transformOrigin: '0 0',
opacity: 1,
},
'100%': {
transform: `translate3d(${unit(floatButtonSize)}, 0, 0)`,
transformOrigin: '0 0',
opacity: 0,
},
});
const groupPrefixCls = `${componentCls}-group`;
return [
{
[groupPrefixCls]: {
[`&${groupPrefixCls}-top ${groupPrefixCls}-wrap`]: initMotion(
`${groupPrefixCls}-wrap`,
moveTopIn,
moveTopOut,
motionDurationSlow,
true,
),
[`&${groupPrefixCls}-bottom ${groupPrefixCls}-wrap`]: initMotion(
`${groupPrefixCls}-wrap`,
moveBottomIn,
moveBottomOut,
motionDurationSlow,
true,
),
[`&${groupPrefixCls}-left ${groupPrefixCls}-wrap`]: initMotion(
`${groupPrefixCls}-wrap`,
moveLeftIn,
moveLeftOut,
motionDurationSlow,
true,
),
[`&${groupPrefixCls}-right ${groupPrefixCls}-wrap`]: initMotion(
`${groupPrefixCls}-wrap`,
moveRightIn,
moveRightOut,
motionDurationSlow,
true,
),
},
},
{
[`${groupPrefixCls}-wrap`]: {
[`&${groupPrefixCls}-wrap-enter, &${groupPrefixCls}-wrap-appear`]: {
opacity: 0,
animationTimingFunction: motionEaseInOutCirc,
},
[`&${groupPrefixCls}-wrap-leave`]: {
opacity: 1,
animationTimingFunction: motionEaseInOutCirc,
},
},
},
];
};
export default floatButtonGroupMotion;

117
components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -554,7 +554,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -566,7 +566,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -785,7 +785,7 @@ exports[`renders components/form/demo/basic.tsx extend context correctly 1`] = `
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -1186,7 +1186,7 @@ Array [
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -1327,7 +1327,7 @@ Array [
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -1898,7 +1898,7 @@ exports[`renders components/form/demo/control-hooks.tsx extend context correctly
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -1910,7 +1910,7 @@ exports[`renders components/form/demo/control-hooks.tsx extend context correctly
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -1922,7 +1922,7 @@ exports[`renders components/form/demo/control-hooks.tsx extend context correctly
class="ant-space-item"
>
<button
class="ant-btn ant-btn-link"
class="ant-btn ant-btn-primary ant-btn-link"
type="button"
>
<span>
@ -2095,7 +2095,7 @@ exports[`renders components/form/demo/custom-feedback-icons.tsx extend context c
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="submit"
>
<span>
@ -2315,7 +2315,7 @@ exports[`renders components/form/demo/customized-form-controls.tsx extend contex
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -5086,6 +5086,7 @@ Array [
<input
accept=""
disabled=""
name="file"
style="display: none;"
type="file"
/>
@ -5156,7 +5157,7 @@ Array [
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
disabled=""
type="button"
>
@ -6696,7 +6697,7 @@ exports[`renders components/form/demo/dynamic-form-item.tsx extend context corre
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-dashed"
class="ant-btn ant-btn-default ant-btn-dashed"
style="width: 60%;"
type="button"
>
@ -6731,7 +6732,7 @@ exports[`renders components/form/demo/dynamic-form-item.tsx extend context corre
</span>
</button>
<button
class="ant-btn ant-btn-dashed"
class="ant-btn ant-btn-default ant-btn-dashed"
style="width: 60%; margin-top: 20px;"
type="button"
>
@ -6786,7 +6787,7 @@ exports[`renders components/form/demo/dynamic-form-item.tsx extend context corre
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -6826,7 +6827,7 @@ exports[`renders components/form/demo/dynamic-form-items.tsx extend context corr
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-dashed ant-btn-block"
class="ant-btn ant-btn-default ant-btn-dashed ant-btn-block"
type="button"
>
<span
@ -6880,7 +6881,7 @@ exports[`renders components/form/demo/dynamic-form-items.tsx extend context corr
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -7017,7 +7018,7 @@ exports[`renders components/form/demo/dynamic-form-items-complex.tsx extend cont
style="display: flex; flex-direction: column; row-gap: 16px;"
>
<button
class="ant-btn ant-btn-dashed ant-btn-block"
class="ant-btn ant-btn-default ant-btn-dashed ant-btn-block"
type="button"
>
<span>
@ -7033,7 +7034,7 @@ exports[`renders components/form/demo/dynamic-form-items-complex.tsx extend cont
</div>
</div>
<button
class="ant-btn ant-btn-dashed ant-btn-block"
class="ant-btn ant-btn-default ant-btn-dashed ant-btn-block"
type="button"
>
<span>
@ -7105,7 +7106,7 @@ exports[`renders components/form/demo/dynamic-form-items-no-style.tsx extend con
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-dashed ant-btn-block"
class="ant-btn ant-btn-default ant-btn-dashed ant-btn-block"
type="button"
>
<span
@ -7164,7 +7165,7 @@ exports[`renders components/form/demo/dynamic-form-items-no-style.tsx extend con
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -7318,7 +7319,7 @@ exports[`renders components/form/demo/dynamic-rule.tsx extend context correctly
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -7450,7 +7451,7 @@ exports[`renders components/form/demo/form-context.tsx extend context correctly
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -7458,7 +7459,7 @@ exports[`renders components/form/demo/form-context.tsx extend context correctly
</span>
</button>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
style="margin: 0px 8px;"
type="button"
>
@ -7615,7 +7616,7 @@ exports[`renders components/form/demo/form-dependencies.tsx extend context corre
exports[`renders components/form/demo/form-in-modal.tsx extend context correctly 1`] = `
Array [
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -7745,7 +7746,7 @@ exports[`renders components/form/demo/form-item-path.tsx extend context correctl
</div>
</div>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -8451,7 +8452,7 @@ exports[`renders components/form/demo/getValueProps-normalize.tsx extend context
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -8664,7 +8665,7 @@ exports[`renders components/form/demo/inline-login.tsx extend context correctly
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
disabled=""
type="submit"
>
@ -8993,7 +8994,7 @@ exports[`renders components/form/demo/layout.tsx extend context correctly 1`] =
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -9123,7 +9124,7 @@ exports[`renders components/form/demo/layout-can-wrap.tsx extend context correct
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -9491,7 +9492,7 @@ exports[`renders components/form/demo/login.tsx extend context correctly 1`] = `
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary ant-btn-block"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-block"
type="submit"
>
<span>
@ -9788,7 +9789,7 @@ exports[`renders components/form/demo/nest-messages.tsx extend context correctly
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -9874,7 +9875,7 @@ exports[`renders components/form/demo/ref-item.tsx extend context correctly 1`]
</div>
</div>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -9882,7 +9883,7 @@ exports[`renders components/form/demo/ref-item.tsx extend context correctly 1`]
</span>
</button>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -11174,7 +11175,7 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
style="padding-left: 4px; padding-right: 4px;"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -11253,7 +11254,7 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -11571,7 +11572,7 @@ exports[`renders components/form/demo/required-mark.tsx extend context correctly
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -13007,7 +13008,7 @@ exports[`renders components/form/demo/size.tsx extend context correctly 1`] = `
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -15790,7 +15791,7 @@ exports[`renders components/form/demo/time-related-controls.tsx extend context c
class="ant-picker-ok"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
disabled=""
type="button"
>
@ -19468,7 +19469,7 @@ exports[`renders components/form/demo/time-related-controls.tsx extend context c
class="ant-picker-ok"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
disabled=""
type="button"
>
@ -21059,7 +21060,7 @@ exports[`renders components/form/demo/time-related-controls.tsx extend context c
class="ant-picker-ok"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
disabled=""
type="button"
>
@ -21095,7 +21096,7 @@ exports[`renders components/form/demo/time-related-controls.tsx extend context c
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -21380,7 +21381,7 @@ exports[`renders components/form/demo/validate-only.tsx extend context correctly
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
disabled=""
type="submit"
>
@ -21393,7 +21394,7 @@ exports[`renders components/form/demo/validate-only.tsx extend context correctly
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="reset"
>
<span>
@ -22857,11 +22858,12 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
accept=""
aria-describedby="validate_other_upload_extra"
id="validate_other_upload"
name="logo"
style="display: none;"
type="file"
/>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span
@ -22947,6 +22949,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
<input
accept=""
id="validate_other_dragger"
name="files"
style="display: none;"
type="file"
/>
@ -23428,7 +23431,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -23440,7 +23443,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="reset"
>
<span>
@ -23480,7 +23483,7 @@ exports[`renders components/form/demo/validate-scroll-to-field.tsx extend contex
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -23807,7 +23810,7 @@ exports[`renders components/form/demo/validate-scroll-to-field.tsx extend contex
class="ant-flex ant-flex-gap-small"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -23815,7 +23818,7 @@ exports[`renders components/form/demo/validate-scroll-to-field.tsx extend contex
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-dangerous"
class="ant-btn ant-btn-dangerous ant-btn-outlined"
type="button"
>
<span>
@ -26536,7 +26539,7 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
class="ant-picker-ok"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
disabled=""
type="button"
>
@ -30753,8 +30756,10 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] =
class="ant-form-item-control-input-content"
>
<div
aria-label="segmented control"
class="ant-segmented"
id="variant"
role="listbox"
>
<div
class="ant-segmented-group"
@ -30767,7 +30772,9 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] =
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="outlined"
>
outlined
@ -30782,7 +30789,9 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] =
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="filled"
>
filled
@ -30796,7 +30805,9 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] =
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="borderless"
>
borderless
@ -33389,7 +33400,7 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] =
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -33472,7 +33483,7 @@ exports[`renders components/form/demo/warning-only.tsx extend context correctly
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -33484,7 +33495,7 @@ exports[`renders components/form/demo/warning-only.tsx extend context correctly
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>

109
components/form/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -394,7 +394,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -406,7 +406,7 @@ Array [
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -623,7 +623,7 @@ exports[`renders components/form/demo/basic.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -917,7 +917,7 @@ Array [
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -1058,7 +1058,7 @@ Array [
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -1425,7 +1425,7 @@ exports[`renders components/form/demo/control-hooks.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -1437,7 +1437,7 @@ exports[`renders components/form/demo/control-hooks.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -1449,7 +1449,7 @@ exports[`renders components/form/demo/control-hooks.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-link"
class="ant-btn ant-btn-primary ant-btn-link"
type="button"
>
<span>
@ -1578,7 +1578,7 @@ exports[`renders components/form/demo/custom-feedback-icons.tsx correctly 1`] =
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="submit"
>
<span>
@ -1715,7 +1715,7 @@ exports[`renders components/form/demo/customized-form-controls.tsx correctly 1`]
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -2591,6 +2591,7 @@ Array [
<input
accept=""
disabled=""
name="file"
style="display:none"
type="file"
/>
@ -2661,7 +2662,7 @@ Array [
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
disabled=""
type="button"
>
@ -3627,7 +3628,7 @@ exports[`renders components/form/demo/dynamic-form-item.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-dashed"
class="ant-btn ant-btn-default ant-btn-dashed"
style="width:60%"
type="button"
>
@ -3662,7 +3663,7 @@ exports[`renders components/form/demo/dynamic-form-item.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-dashed"
class="ant-btn ant-btn-default ant-btn-dashed"
style="width:60%;margin-top:20px"
type="button"
>
@ -3717,7 +3718,7 @@ exports[`renders components/form/demo/dynamic-form-item.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -3755,7 +3756,7 @@ exports[`renders components/form/demo/dynamic-form-items.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-dashed ant-btn-block"
class="ant-btn ant-btn-default ant-btn-dashed ant-btn-block"
type="button"
>
<span
@ -3809,7 +3810,7 @@ exports[`renders components/form/demo/dynamic-form-items.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -3944,7 +3945,7 @@ exports[`renders components/form/demo/dynamic-form-items-complex.tsx correctly 1
style="display:flex;flex-direction:column;row-gap:16px"
>
<button
class="ant-btn ant-btn-dashed ant-btn-block"
class="ant-btn ant-btn-default ant-btn-dashed ant-btn-block"
type="button"
>
<span>
@ -3960,7 +3961,7 @@ exports[`renders components/form/demo/dynamic-form-items-complex.tsx correctly 1
</div>
</div>
<button
class="ant-btn ant-btn-dashed ant-btn-block"
class="ant-btn ant-btn-default ant-btn-dashed ant-btn-block"
type="button"
>
<span>
@ -4026,7 +4027,7 @@ exports[`renders components/form/demo/dynamic-form-items-no-style.tsx correctly
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-dashed ant-btn-block"
class="ant-btn ant-btn-default ant-btn-dashed ant-btn-block"
type="button"
>
<span
@ -4085,7 +4086,7 @@ exports[`renders components/form/demo/dynamic-form-items-no-style.tsx correctly
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -4237,7 +4238,7 @@ exports[`renders components/form/demo/dynamic-rule.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -4367,7 +4368,7 @@ exports[`renders components/form/demo/form-context.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -4375,7 +4376,7 @@ exports[`renders components/form/demo/form-context.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
style="margin:0 8px"
type="button"
>
@ -4528,7 +4529,7 @@ exports[`renders components/form/demo/form-dependencies.tsx correctly 1`] = `
exports[`renders components/form/demo/form-in-modal.tsx correctly 1`] = `
Array [
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -4656,7 +4657,7 @@ exports[`renders components/form/demo/form-item-path.tsx correctly 1`] = `
</div>
</div>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -4785,7 +4786,7 @@ exports[`renders components/form/demo/getValueProps-normalize.tsx correctly 1`]
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -4996,7 +4997,7 @@ exports[`renders components/form/demo/inline-login.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
disabled=""
type="submit"
>
@ -5321,7 +5322,7 @@ exports[`renders components/form/demo/layout.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -5449,7 +5450,7 @@ exports[`renders components/form/demo/layout-can-wrap.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -5813,7 +5814,7 @@ exports[`renders components/form/demo/login.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary ant-btn-block"
class="ant-btn ant-btn-primary ant-btn-solid ant-btn-block"
type="submit"
>
<span>
@ -6108,7 +6109,7 @@ exports[`renders components/form/demo/nest-messages.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -6192,7 +6193,7 @@ exports[`renders components/form/demo/ref-item.tsx correctly 1`] = `
</div>
</div>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -6200,7 +6201,7 @@ exports[`renders components/form/demo/ref-item.tsx correctly 1`] = `
</span>
</button>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -7114,7 +7115,7 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
style="padding-left:4px;padding-right:4px"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -7193,7 +7194,7 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -7471,7 +7472,7 @@ exports[`renders components/form/demo/required-mark.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -8125,7 +8126,7 @@ exports[`renders components/form/demo/size.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -8683,7 +8684,7 @@ exports[`renders components/form/demo/time-related-controls.tsx correctly 1`] =
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -8964,7 +8965,7 @@ exports[`renders components/form/demo/validate-only.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
disabled=""
type="submit"
>
@ -8977,7 +8978,7 @@ exports[`renders components/form/demo/validate-only.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="reset"
>
<span>
@ -10261,11 +10262,12 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
accept=""
aria-describedby="validate_other_upload_extra"
id="validate_other_upload"
name="logo"
style="display:none"
type="file"
/>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span
@ -10351,6 +10353,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
<input
accept=""
id="validate_other_dragger"
name="files"
style="display:none"
type="file"
/>
@ -10464,7 +10467,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -10476,7 +10479,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="reset"
>
<span>
@ -10514,7 +10517,7 @@ exports[`renders components/form/demo/validate-scroll-to-field.tsx correctly 1`]
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -10744,7 +10747,7 @@ exports[`renders components/form/demo/validate-scroll-to-field.tsx correctly 1`]
class="ant-flex ant-flex-gap-small"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -10752,7 +10755,7 @@ exports[`renders components/form/demo/validate-scroll-to-field.tsx correctly 1`]
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-dangerous"
class="ant-btn ant-btn-dangerous ant-btn-outlined"
type="button"
>
<span>
@ -12972,8 +12975,10 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
aria-label="segmented control"
class="ant-segmented"
id="variant"
role="listbox"
>
<div
class="ant-segmented-group"
@ -12986,7 +12991,9 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="outlined"
>
outlined
@ -13001,7 +13008,9 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="filled"
>
filled
@ -13015,7 +13024,9 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="borderless"
>
borderless
@ -13724,7 +13735,7 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -13805,7 +13816,7 @@ exports[`renders components/form/demo/warning-only.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="submit"
>
<span>
@ -13817,7 +13828,7 @@ exports[`renders components/form/demo/warning-only.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>

3
components/form/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -938,6 +938,7 @@ exports[`Form form should support disabled 1`] = `
<input
accept=""
disabled=""
name="file"
style="display: none;"
type="file"
/>
@ -978,7 +979,7 @@ exports[`Form form should support disabled 1`] = `
class="ant-form-item-control-input-content"
>
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
disabled=""
type="button"
>

48
components/image/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -209,7 +209,7 @@ Array [
</div>,
<br />,
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -351,7 +351,7 @@ exports[`renders components/image/demo/imageRender.tsx extend context correctly
exports[`renders components/image/demo/nested.tsx extend context correctly 1`] = `
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -428,7 +428,7 @@ exports[`renders components/image/demo/placeholder.tsx extend context correctly
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -829,13 +829,14 @@ exports[`renders components/image/demo/previewSrc.tsx extend context correctly 1
exports[`renders components/image/demo/previewSrc.tsx extend context correctly 2`] = `[]`;
exports[`renders components/image/demo/toolbarRender.tsx extend context correctly 1`] = `
Array [
<div
class="ant-image"
style="width: 200px;"
>
<img
class="ant-image-img"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
width="200"
/>
<div
@ -866,7 +867,46 @@ exports[`renders components/image/demo/toolbarRender.tsx extend context correctl
Preview
</div>
</div>
</div>,
<div
class="ant-image"
style="width: 200px;"
>
<img
class="ant-image-img"
src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
width="200"
/>
<div
class="ant-image-mask"
>
<div
class="ant-image-mask-info"
>
<span
aria-label="eye"
class="anticon anticon-eye"
role="img"
>
<svg
aria-hidden="true"
data-icon="eye"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
/>
</svg>
</span>
Preview
</div>
</div>
</div>,
]
`;
exports[`renders components/image/demo/toolbarRender.tsx extend context correctly 2`] = `[]`;

48
components/image/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -206,7 +206,7 @@ Array [
</div>,
<br />,
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -342,7 +342,7 @@ exports[`renders components/image/demo/imageRender.tsx correctly 1`] = `
exports[`renders components/image/demo/nested.tsx correctly 1`] = `
<button
class="ant-btn ant-btn-default"
class="ant-btn ant-btn-default ant-btn-outlined"
type="button"
>
<span>
@ -417,7 +417,7 @@ exports[`renders components/image/demo/placeholder.tsx correctly 1`] = `
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -804,13 +804,14 @@ exports[`renders components/image/demo/previewSrc.tsx correctly 1`] = `
`;
exports[`renders components/image/demo/toolbarRender.tsx correctly 1`] = `
Array [
<div
class="ant-image"
style="width:200px"
>
<img
class="ant-image-img"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
width="200"
/>
<div
@ -841,5 +842,44 @@ exports[`renders components/image/demo/toolbarRender.tsx correctly 1`] = `
Preview
</div>
</div>
</div>,
<div
class="ant-image"
style="width:200px"
>
<img
class="ant-image-img"
src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
width="200"
/>
<div
class="ant-image-mask"
>
<div
class="ant-image-mask-info"
>
<span
aria-label="eye"
class="anticon anticon-eye"
role="img"
>
<svg
aria-hidden="true"
data-icon="eye"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
/>
</svg>
</span>
Preview
</div>
</div>
</div>,
]
`;

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

@ -248,14 +248,9 @@ exports[`Image Default Group preview props 1`] = `
class="ant-image-preview ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
role="dialog"
>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>
<div
style="outline: none;"
tabindex="-1"
tabindex="0"
>
<div
class="ant-image-preview-content"
@ -276,7 +271,6 @@ exports[`Image Default Group preview props 1`] = `
</div>
</div>
<div
aria-hidden="true"
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
tabindex="0"
/>

4
components/image/demo/toolbarRender.md
View File

@ -8,15 +8,11 @@ You can customize the toolbar and add a button for downloading the original imag
```css
.toolbar-wrapper {
position: fixed;
bottom: 32px;
inset-inline-start: 50%;
padding: 0px 24px;
color: #fff;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 100px;
transform: translateX(-50%);
}
.toolbar-wrapper .anticon {

62
components/image/demo/toolbarRender.tsx
View File

@ -1,6 +1,8 @@
import React from 'react';
import {
DownloadOutlined,
LeftOutlined,
RightOutlined,
RotateLeftOutlined,
RotateRightOutlined,
SwapOutlined,
@ -10,40 +12,60 @@ import {
} from '@ant-design/icons';
import { Image, Space } from 'antd';
const src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
const imageList = [
'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
];
// you can download flipped and rotated image
// https://codesandbox.io/s/zi-ding-yi-gong-ju-lan-antd-5-7-0-forked-c9jvmp
const onDownload = (imgUrl: string) => {
fetch(imgUrl)
const App: React.FC = () => {
const [current, setCurrent] = React.useState(0);
// or you can download flipped and rotated image
// https://codesandbox.io/s/zi-ding-yi-gong-ju-lan-antd-5-7-0-forked-c9jvmp
const onDownload = () => {
const url = imageList[current];
const suffix = url.slice(url.lastIndexOf('.'));
const filename = Date.now() + suffix;
fetch(url)
.then((response) => response.blob())
.then((blob) => {
const url = URL.createObjectURL(new Blob([blob]));
const link = document.createElement<'a'>('a');
link.href = url;
link.download = 'image.png';
const blobUrl = URL.createObjectURL(new Blob([blob]));
const link = document.createElement('a');
link.href = blobUrl;
link.download = filename;
document.body.appendChild(link);
link.click();
URL.revokeObjectURL(url);
URL.revokeObjectURL(blobUrl);
link.remove();
});
};
const App: React.FC = () => (
<Image
width={200}
src={src}
return (
<Image.PreviewGroup
preview={{
toolbarRender: (
_,
{
image: { url },
transform: { scale },
actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn, onReset },
actions: {
onActive,
onFlipY,
onFlipX,
onRotateLeft,
onRotateRight,
onZoomOut,
onZoomIn,
onReset,
},
},
) => (
<Space size={12} className="toolbar-wrapper">
<DownloadOutlined onClick={() => onDownload(url)} />
<LeftOutlined onClick={() => onActive?.(-1)} />
<RightOutlined onClick={() => onActive?.(1)} />
<DownloadOutlined onClick={onDownload} />
<SwapOutlined rotate={90} onClick={onFlipY} />
<SwapOutlined onClick={onFlipX} />
<RotateLeftOutlined onClick={onRotateLeft} />
@ -53,8 +75,16 @@ const App: React.FC = () => (
<UndoOutlined onClick={onReset} />
</Space>
),
onChange: (index) => {
setCurrent(index);
},
}}
/>
>
{imageList.map((item) => (
<Image key={item} src={item} width={200} />
))}
</Image.PreviewGroup>
);
};
export default App;

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

@ -150,6 +150,7 @@ type TransformAction =
zoomInIcon: React.ReactNode;
};
actions: {
onActive?: (index: number) => void; // support after 5.21.0
onFlipY: () => void;
onFlipX: () => void;
onRotateLeft: () => void;

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

@ -152,6 +152,7 @@ type TransformAction =
zoomInIcon: React.ReactNode;
};
actions: {
onActive?: (index: number) => void; // 5.21.0 之后支持
onFlipY: () => void;
onFlipX: () => void;
onRotateLeft: () => void;

2
components/index.ts
View File

@ -170,3 +170,5 @@ export type { UploadFile, UploadProps } from './upload';
export { default as version } from './version';
export { default as Watermark } from './watermark';
export type { WatermarkProps } from './watermark';
export { default as Splitter } from './splitter';
export type { SplitterProps } from './splitter';

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

@ -1501,7 +1501,7 @@ Array [
style="margin-top: 20px;"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>
@ -3190,7 +3190,7 @@ exports[`renders components/input-number/demo/out-of-range.tsx extend context co
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
class="ant-btn ant-btn-primary ant-btn-solid"
type="button"
>
<span>

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