feat: FloatButton support button htmlType (#50892)

components/button/index.en-US.md

@@ -67,7 +67,7 @@ Different button styles can be generated by setting Button properties. The recom
 | 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 |  |

components/button/index.zh-CN.md

@@ -73,7 +73,7 @@ group:
 | 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 |  |

components/float-button/FloatButton.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/button-has-type */
 import React, { useContext, useMemo } from 'react';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
@@ -35,6 +36,7 @@ const InternalFloatButton = React.forwardRef<FloatButtonElement, FloatButtonProp
     icon,
     description,
     tooltip,
+    htmlType = 'button',
     badge = {},
     ...restProps
   } = props;
@@ -107,7 +109,7 @@ const InternalFloatButton = React.forwardRef<FloatButtonElement, FloatButtonProp
         {buttonNode}
       </a>
     ) : (
-      <button ref={ref} {...restProps} className={classString} style={mergedStyle} type="button">
+      <button ref={ref} {...restProps} className={classString} style={mergedStyle} type={htmlType}>
         {buttonNode}
       </button>
     ),

components/float-button/__tests__/index.test.tsx

@@ -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);
+  });
 });

components/float-button/index.en-US.md

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

components/float-button/index.zh-CN.md

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

components/float-button/interface.ts

@@ -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'];
 }
 

components/progress/Line.tsx

@@ -31,14 +31,11 @@ interface LineProps extends ProgressProps {
  *   }
  */
 export const sortGradient = (gradients: StringGradients) => {
-  let tempArr: any[] = [];
+  let tempArr: { key: number; value?: string }[] = [];
   Object.keys(gradients).forEach((key) => {
     const formattedKey = parseFloat(key.replace(/%/g, ''));
     if (!isNaN(formattedKey)) {
-      tempArr.push({
+      tempArr.push({ key: formattedKey, value: gradients[key] });
-        key: formattedKey,
-        value: gradients[key],
-      });
     }
   });
   tempArr = tempArr.sort((a, b) => a.key - b.key);
@@ -126,12 +123,12 @@ const Line: React.FC<LineProps> = (props) => {
 
   const successPercent = getSuccessPercent(props);
 
-  const successPercentStyle = {
+  const successPercentStyle: React.CSSProperties = {
     width: `${validProgress(successPercent)}%`,
     height,
     borderRadius,
     backgroundColor: success?.strokeColor,
-  } as React.CSSProperties;
+  };
 
   const outerStyle: React.CSSProperties = {
     width: width < 0 ? '100%' : width,