Skip to content

Commit 570efda

Browse files
github-actions[bot]github-actions[bot]
authored
chore: auto merge branches (ant-design#54641)
chore: sync feature into master
2 parents 89bbc56 + 1f229dc commit 570efda

File tree

16 files changed

+98
-32
lines changed

16 files changed

+98
-32
lines changed

‎components/button/style/index.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
2121
opacityLoading,
2222
motionDurationSlow,
2323
motionEaseInOut,
24-
marginXS,
24+
iconGap,
2525
calc,
2626
} = token;
2727

@@ -30,7 +30,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
3030
outline: 'none',
3131
position: 'relative',
3232
display: 'inline-flex',
33-
gap: token.marginXS,
33+
gap: iconGap,
3434
alignItems: 'center',
3535
justifyContent: 'center',
3636
fontWeight,
@@ -96,7 +96,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
9696
[`&:not(${componentCls}-icon-end)`]: {
9797
[`${componentCls}-loading-icon-motion`]: {
9898
'&-appear-start, &-enter-start': {
99-
marginInlineEnd: calc(marginXS).mul(-1).equal(),
99+
marginInlineEnd: calc(iconGap).mul(-1).equal(),
100100
},
101101
'&-appear-active, &-enter-active': {
102102
marginInlineEnd: 0,
@@ -105,7 +105,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
105105
marginInlineEnd: 0,
106106
},
107107
'&-leave-active': {
108-
marginInlineEnd: calc(marginXS).mul(-1).equal(),
108+
marginInlineEnd: calc(iconGap).mul(-1).equal(),
109109
},
110110
},
111111
},
@@ -115,7 +115,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
115115

116116
[`${componentCls}-loading-icon-motion`]: {
117117
'&-appear-start, &-enter-start': {
118-
marginInlineStart: calc(marginXS).mul(-1).equal(),
118+
marginInlineStart: calc(iconGap).mul(-1).equal(),
119119
},
120120
'&-appear-active, &-enter-active': {
121121
marginInlineStart: 0,
@@ -124,7 +124,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
124124
marginInlineStart: 0,
125125
},
126126
'&-leave-active': {
127-
marginInlineStart: calc(marginXS).mul(-1).equal(),
127+
marginInlineStart: calc(iconGap).mul(-1).equal(),
128128
},
129129
},
130130
},

‎components/button/style/token.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@ export interface ComponentToken {
1616
* @descEN Font weight of text
1717
*/
1818
fontWeight: CSSProperties['fontWeight'];
19+
/**
20+
* @desc 图标文字间距
21+
* @descEN Gap between icon and text
22+
*/
23+
iconGap: CSSProperties['gap'];
1924
/**
2025
* @desc 默认按钮阴影
2126
* @descEN Shadow of default button
@@ -284,6 +289,7 @@ export const prepareComponentToken: GetDefaultToken<'Button'> = (token) => {
284289
return {
285290
...shadowColorTokens,
286291
fontWeight: 400,
292+
iconGap: token.marginXS,
287293
defaultShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlTmpOutline}`,
288294
primaryShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlOutline}`,
289295
dangerShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorErrorOutline}`,

‎components/config-provider/context.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,8 @@ export type TourConfig = Pick<TourProps, 'closeIcon'>;
143143
export type DescriptionsConfig = ComponentStyleConfig &
144144
Pick<DescriptionsProps, 'classNames' | 'styles'>;
145145

146-
export type EmptyConfig = ComponentStyleConfig & Pick<EmptyProps, 'classNames' | 'styles'>;
146+
export type EmptyConfig = ComponentStyleConfig &
147+
Pick<EmptyProps, 'classNames' | 'styles' | 'image'>;
147148

148149
export type ModalConfig = ComponentStyleConfig &
149150
Pick<ModalProps, 'classNames' | 'styles' | 'closeIcon' | 'closable' | 'centered'>;
@@ -181,6 +182,10 @@ export type TransferConfig = ComponentStyleConfig & Pick<TransferProps, 'selecti
181182
export type FormConfig = ComponentStyleConfig &
182183
Pick<FormProps, 'requiredMark' | 'colon' | 'scrollToFirstError' | 'validateMessages' | 'variant'>;
183184

185+
export type FloatButtonConfig = {
186+
backTopIcon?: React.ReactNode;
187+
};
188+
184189
export type FloatButtonGroupConfig = Pick<FloatButtonGroupProps, 'closeIcon'>;
185190

186191
export type PaginationConfig = ComponentStyleConfig & Pick<PaginationProps, 'showSizeChanger'>;
@@ -266,6 +271,7 @@ export interface ConfigComponentProps {
266271
cascader?: CascaderConfig;
267272
treeSelect?: TreeSelectConfig;
268273
collapse?: CollapseConfig;
274+
floatButton?: FloatButtonConfig;
269275
floatButtonGroup?: FloatButtonGroupConfig;
270276
typography?: ComponentStyleConfig;
271277
skeleton?: ComponentStyleConfig;

‎components/config-provider/index.en-US.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,8 +127,9 @@ const {
127127
| divider | Set Divider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
128128
| drawer | Set Drawer common props | { className?: string, style?: React.CSSProperties, classNames?: [DrawerProps\["classNames"\]](/components/drawer#api), styles?: [DrawerProps\["styles"\]](/components/drawer#api), closeIcon?: ReactNode } | - | 5.7.0, `classNames` and `styles`: 5.10.0, `closeIcon`: 5.14.0 |
129129
| dropdown | Set Dropdown common props | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
130-
| empty | Set Empty common props | { className?: string, style?: React.CSSProperties, classNames?: [EmptyProps\["classNames"\]](/components/empty#api), styles?: [EmptyProps\["styles"\]](/components/empty#api) } | - | 5.7.0, `classNames` and `styles`: 5.23.0 |
130+
| empty | Set Empty common props | { className?: string, style?: React.CSSProperties, classNames?: [EmptyProps\["classNames"\]](/components/empty#api), styles?: [EmptyProps\["styles"\]](/components/empty#api), image?: ReactNode } | - | 5.7.0, `classNames` and `styles`: 5.23.0, `image`: 5.27.0 |
131131
| flex | Set Flex common props | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |
132+
| floatButton | Set FloatButton common props | { backTopIcon?: React.ReactNode } | - | 5.27.0 |
132133
| floatButtonGroup | Set FloatButton.Group common props | { closeIcon?: React.ReactNode } | - | 5.16.0 |
133134
| form | Set Form common props | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) } | - | `requiredMark`: 4.8.0; `colon`: 4.18.0; `scrollToFirstError`: 5.2.0; `className` and `style`: 5.7.0 |
134135
| image | Set Image common props | { className?: string, style?: React.CSSProperties, preview?: { closeIcon?: React.ReactNode } } | - | 5.7.0, `closeIcon`: 5.14.0 |

‎components/config-provider/index.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import type {
2929
DrawerConfig,
3030
EmptyConfig,
3131
FlexConfig,
32+
FloatButtonConfig,
3233
FloatButtonGroupConfig,
3334
FormConfig,
3435
ImageConfig,
@@ -210,6 +211,7 @@ export interface ConfigProviderProps {
210211
slider?: ComponentStyleConfig;
211212
breadcrumb?: ComponentStyleConfig;
212213
menu?: MenuConfig;
214+
floatButton?: FloatButtonConfig;
213215
floatButtonGroup?: FloatButtonGroupConfig;
214216
checkbox?: ComponentStyleConfig;
215217
descriptions?: ComponentStyleConfig;
@@ -400,6 +402,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
400402
tooltip,
401403
popover,
402404
popconfirm,
405+
floatButton,
403406
floatButtonGroup,
404407
variant,
405408
inputNumber,
@@ -503,6 +506,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
503506
tooltip,
504507
popover,
505508
popconfirm,
509+
floatButton,
506510
floatButtonGroup,
507511
variant,
508512
inputNumber,

‎components/config-provider/index.zh-CN.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,8 +129,9 @@ const {
129129
| divider | 设置 Divider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
130130
| drawer | 设置 Drawer 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [DrawerProps\["classNames"\]](/components/drawer-cn#api), styles?: [DrawerProps\["styles"\]](/components/drawer-cn#api), closeIcon?: ReactNode } | - | 5.7.0, `classNames` 和 `styles`: 5.10.0, `closeIcon`: 5.14.0 |
131131
| dropdown | 设置 Dropdown 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
132-
| empty | 设置 Empty 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?:[EmptyProps\["classNames"\]](/components/empty-cn#api), styles?: [EmptyProps\["styles"\]](/components/empty-cn#api) } | - | 5.7.0, `classNames` 和 `styles`: 5.23.0 |
132+
| empty | 设置 Empty 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?:[EmptyProps\["classNames"\]](/components/empty-cn#api), styles?: [EmptyProps\["styles"\]](/components/empty-cn#api), image?: ReactNode } | - | 5.7.0, `classNames` 和 `styles`: 5.23.0, `image`: 5.27.0 |
133133
| flex | 设置 Flex 组件的通用属性 | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |
134+
| floatButton | 设置 FloatButton 组件的通用属性 | { backTopIcon?: React.ReactNode } | - | 5.27.0 |
134135
| floatButtonGroup | 设置 FloatButton.Group 组件的通用属性 | { closeIcon?: React.ReactNode } | - | 5.16.0 |
135136
| form | 设置 Form 组件的通用属性 | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), `requiredMark`?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)} | - | `requiredMark`: 4.8.0; `colon`: 4.18.0; `scrollToFirstError`: 5.2.0; `className` 和 `style`: 5.7.0 |
136137
| image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties, preview?: { closeIcon?: React.ReactNode } } | - | 5.7.0, `closeIcon`: 5.14.0 |

‎components/empty/__tests__/index.test.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,4 +91,15 @@ describe('Empty', () => {
9191
expect(emptyFooterElement.style.color).toBe('yellow');
9292
expect(emptyImageElement.style.backgroundColor).toBe('black');
9393
});
94+
95+
it('support ConfigProvider image', () => {
96+
const { container } = render(
97+
<ConfigProvider empty={{ image: 'https://example.com/foobar.jpg' }}>
98+
<Empty />
99+
</ConfigProvider>,
100+
);
101+
expect(container.querySelector<HTMLImageElement>('img')?.src).toBe(
102+
'https://example.com/foobar.jpg',
103+
);
104+
});
94105
});

‎components/empty/index.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import * as React from 'react';
22
import classNames from 'classnames';
33

44
import { devUseWarning } from '../_util/warning';
5+
import { useComponentConfig } from '../config-provider/context';
56
import { useLocale } from '../locale';
67
import DefaultEmptyImg from './empty';
78
import SimpleEmptyImg from './simple';
89
import useStyle from './style';
9-
import { useComponentConfig } from '../config-provider/context';
1010

1111
const defaultEmptyImg = <DefaultEmptyImg />;
1212
const simpleEmptyImg = <SimpleEmptyImg />;
@@ -40,7 +40,7 @@ const Empty: CompoundedComponent = (props) => {
4040
className,
4141
rootClassName,
4242
prefixCls: customizePrefixCls,
43-
image = defaultEmptyImg,
43+
image,
4444
description,
4545
children,
4646
imageStyle,
@@ -56,6 +56,7 @@ const Empty: CompoundedComponent = (props) => {
5656
style: contextStyle,
5757
classNames: contextClassNames,
5858
styles: contextStyles,
59+
image: contextImage,
5960
} = useComponentConfig('empty');
6061

6162
const prefixCls = getPrefixCls('empty', customizePrefixCls);
@@ -66,12 +67,14 @@ const Empty: CompoundedComponent = (props) => {
6667
const des = typeof description !== 'undefined' ? description : locale?.description;
6768
const alt = typeof des === 'string' ? des : 'empty';
6869

70+
const mergedImage = image ?? contextImage ?? defaultEmptyImg;
71+
6972
let imageNode: React.ReactNode = null;
7073

71-
if (typeof image === 'string') {
72-
imageNode = <img alt={alt} src={image} />;
74+
if (typeof mergedImage === 'string') {
75+
imageNode = <img alt={alt} src={mergedImage} />;
7376
} else {
74-
imageNode = image;
77+
imageNode = mergedImage;
7578
}
7679

7780
// ============================= Warning ==============================
@@ -91,7 +94,7 @@ const Empty: CompoundedComponent = (props) => {
9194
prefixCls,
9295
contextClassName,
9396
{
94-
[`${prefixCls}-normal`]: image === simpleEmptyImg,
97+
[`${prefixCls}-normal`]: mergedImage === simpleEmptyImg,
9598
[`${prefixCls}-rtl`]: direction === 'rtl',
9699
},
97100
className,

‎components/float-button/BackTop.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import scrollTo from '../_util/scrollTo';
99
import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
1010
import type { ConfigConsumerProps } from '../config-provider';
1111
import { ConfigContext } from '../config-provider';
12+
import { useComponentConfig } from '../config-provider/context';
1213
import FloatButtonGroupContext from './context';
1314
import FloatButton, { floatButtonPrefixCls } from './FloatButton';
1415
import type {
@@ -19,20 +20,26 @@ import type {
1920
FloatButtonShape,
2021
} from './interface';
2122

23+
const defaultIcon = <VerticalAlignTopOutlined />;
24+
2225
const BackTop = React.forwardRef<FloatButtonRef, BackTopProps>((props, ref) => {
26+
const { backTopIcon: contextIcon } = useComponentConfig('floatButton');
27+
2328
const {
2429
prefixCls: customizePrefixCls,
2530
className,
2631
type = 'default',
2732
shape = 'circle',
2833
visibilityHeight = 400,
29-
icon = <VerticalAlignTopOutlined />,
34+
icon,
3035
target,
3136
onClick,
3237
duration = 450,
3338
...restProps
3439
} = props;
3540

41+
const mergedIcon = icon ?? contextIcon ?? defaultIcon;
42+
3643
const [visible, setVisible] = useState<boolean>(visibilityHeight === 0);
3744

3845
const internalRef = React.useRef<FloatButtonRef['nativeElement']>(null);
@@ -78,7 +85,7 @@ const BackTop = React.forwardRef<FloatButtonRef, BackTopProps>((props, ref) => {
7885

7986
const contentProps: FloatButtonProps = {
8087
prefixCls,
81-
icon,
88+
icon: mergedIcon,
8289
type,
8390
shape: mergedShape,
8491
...restProps,

‎components/float-button/__tests__/back-top.test.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import FloatButton from '..';
44
import mountTest from '../../../tests/shared/mountTest';
55
import rtlTest from '../../../tests/shared/rtlTest';
66
import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
7+
import ConfigProvider from '../../config-provider';
78

89
const { BackTop } = FloatButton;
910

@@ -61,4 +62,13 @@ describe('BackTop', () => {
6162
expect(errSpy).not.toHaveBeenCalled();
6263
errSpy.mockRestore();
6364
});
65+
66+
it('supports ConfigProvider backTopIcon', () => {
67+
const wrapper = render(
68+
<ConfigProvider floatButton={{ backTopIcon: <span>666</span> }}>
69+
<BackTop visibilityHeight={0} />
70+
</ConfigProvider>,
71+
);
72+
expect(wrapper.getByText('666')).toBeInTheDocument();
73+
});
6474
});

0 commit comments

Comments
 (0)