feat(FloatButton): support backTopIcon global config (ant-design#54493)

Author: guoyunhe

components/config-provider/context.ts

@@ -182,6 +182,10 @@ export type TransferConfig = ComponentStyleConfig & Pick<TransferProps, 'selecti
 export type FormConfig = ComponentStyleConfig &
   Pick<FormProps, 'requiredMark' | 'colon' | 'scrollToFirstError' | 'validateMessages' | 'variant'>;
 
+export type FloatButtonConfig = {
+  backTopIcon?: React.ReactNode;
+};
+
 export type FloatButtonGroupConfig = Pick<FloatButtonGroupProps, 'closeIcon'>;
 
 export type PaginationConfig = ComponentStyleConfig & Pick<PaginationProps, 'showSizeChanger'>;
@@ -267,6 +271,7 @@ export interface ConfigComponentProps {
   cascader?: CascaderConfig;
   treeSelect?: TreeSelectConfig;
   collapse?: CollapseConfig;
+  floatButton?: FloatButtonConfig;
   floatButtonGroup?: FloatButtonGroupConfig;
   typography?: ComponentStyleConfig;
   skeleton?: ComponentStyleConfig;

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

@@ -129,6 +129,7 @@ const {
 | dropdown | Set Dropdown common props | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
 | 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 |
 | flex | Set Flex common props | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |
+| floatButton | Set FloatButton common props | { backTopIcon?: React.ReactNode } | - | 5.27.0 |
 | floatButtonGroup | Set FloatButton.Group common props | { closeIcon?: React.ReactNode } | - | 5.16.0 |
 | form | Set Form common props | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) } | - | `requiredMark`: 4.8.0; `colon`: 4.18.0; `scrollToFirstError`: 5.2.0; `className` and `style`: 5.7.0 |
 | 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

@@ -29,6 +29,7 @@ import type {
   DrawerConfig,
   EmptyConfig,
   FlexConfig,
+  FloatButtonConfig,
   FloatButtonGroupConfig,
   FormConfig,
   ImageConfig,
@@ -210,6 +211,7 @@ export interface ConfigProviderProps {
   slider?: ComponentStyleConfig;
   breadcrumb?: ComponentStyleConfig;
   menu?: MenuConfig;
+  floatButton?: FloatButtonConfig;
   floatButtonGroup?: FloatButtonGroupConfig;
   checkbox?: ComponentStyleConfig;
   descriptions?: ComponentStyleConfig;
@@ -400,6 +402,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     tooltip,
     popover,
     popconfirm,
+    floatButton,
     floatButtonGroup,
     variant,
     inputNumber,
@@ -503,6 +506,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     tooltip,
     popover,
     popconfirm,
+    floatButton,
     floatButtonGroup,
     variant,
     inputNumber,

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

@@ -131,6 +131,7 @@ const {
 | dropdown | 设置 Dropdown 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
 | 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 |
 | flex | 设置 Flex 组件的通用属性 | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |
+| floatButton | 设置 FloatButton 组件的通用属性 | { backTopIcon?: React.ReactNode } | - | 5.27.0 |
 | floatButtonGroup | 设置 FloatButton.Group 组件的通用属性 | { closeIcon?: React.ReactNode } | - | 5.16.0 |
 | form | 设置 Form 组件的通用属性 | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), `requiredMark`?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)} | - | `requiredMark`: 4.8.0; `colon`: 4.18.0; `scrollToFirstError`: 5.2.0; `className` 和 `style`: 5.7.0 |
 | image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties, preview?: { closeIcon?: React.ReactNode } } | - | 5.7.0, `closeIcon`: 5.14.0 |

components/float-button/BackTop.tsx

@@ -9,6 +9,7 @@ import scrollTo from '../_util/scrollTo';
 import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
 import type { ConfigConsumerProps } from '../config-provider';
 import { ConfigContext } from '../config-provider';
+import { useComponentConfig } from '../config-provider/context';
 import FloatButtonGroupContext from './context';
 import FloatButton, { floatButtonPrefixCls } from './FloatButton';
 import type {
@@ -19,20 +20,26 @@ import type {
   FloatButtonShape,
 } from './interface';
 
+const defaultIcon = <VerticalAlignTopOutlined />;
+
 const BackTop = React.forwardRef<FloatButtonRef, BackTopProps>((props, ref) => {
+  const { backTopIcon: contextIcon } = useComponentConfig('floatButton');
+
   const {
     prefixCls: customizePrefixCls,
     className,
     type = 'default',
     shape = 'circle',
     visibilityHeight = 400,
-    icon = <VerticalAlignTopOutlined />,
+    icon,
     target,
     onClick,
     duration = 450,
     ...restProps
   } = props;
 
+  const mergedIcon = icon ?? contextIcon ?? defaultIcon;
+
   const [visible, setVisible] = useState<boolean>(visibilityHeight === 0);
 
   const internalRef = React.useRef<FloatButtonRef['nativeElement']>(null);
@@ -78,7 +85,7 @@ const BackTop = React.forwardRef<FloatButtonRef, BackTopProps>((props, ref) => {
 
   const contentProps: FloatButtonProps = {
     prefixCls,
-    icon,
+    icon: mergedIcon,
     type,
     shape: mergedShape,
     ...restProps,

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

@@ -4,6 +4,7 @@ import FloatButton from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
+import ConfigProvider from '../../config-provider';
 
 const { BackTop } = FloatButton;
 
@@ -61,4 +62,13 @@ describe('BackTop', () => {
     expect(errSpy).not.toHaveBeenCalled();
     errSpy.mockRestore();
   });
+
+  it('supports ConfigProvider backTopIcon', () => {
+    const wrapper = render(
+      <ConfigProvider floatButton={{ backTopIcon: <span>666</span> }}>
+        <BackTop visibilityHeight={0} />
+      </ConfigProvider>,
+    );
+    expect(wrapper.getByText('666')).toBeInTheDocument();
+  });
 });