feat: New Component Float Button

[li-jia-nan]

[中文版模板 / Chinese template]

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• Component style update
• TypeScript definition update
• Bundle size optimization
• Performance optimization
• Enhancement feature
• Internationalization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Other (about what?)

🔗 Related issue link

💡 Background and solution

📝 Changelog

[New Component] Float Button

悬浮按钮。自 5.0.0 版本开始提供该组件。

何时使用

• 用于网站上的全局功能；
• 无论浏览到何处都可以看见的按钮。

API

共同的 API

参数	说明	类型	默认值	版本
icon	自定义图标	ReactNode	-
description	文字及其它内容	ReactNode	-
tooltip	气泡卡片的内容	ReactNode | () => ReactNode	-
type	设置按钮类型	default | primary	default
shape	设置按钮形状	circle | square	circle
onClick	点击按钮时的回调	(event) => void	-
href	点击跳转的地址，指定此属性 button 的行为和 a 链接一致	string	-
target	相当于 a 标签的 target 属性，href 存在时生效	string	-

FloatButton.Group

参数	说明	类型	默认值	版本
shape	设置包含的 FloatButton 按钮形状	circle | square	circle
trigger	触发方式（有触发方式为菜单模式）	click | hover	-
open	受控展开	boolean	-
onOpenChange	展开收起时的回调	(open: boolean) => void	-

FloatButton.BackTop

参数	说明	类型	默认值	版本
duration	回到顶部所需时间（ms）	number	450
target	设置需要监听其滚动事件的元素	() => HTMLElement	() => window
visibilityHeight	滚动高度达到此参数值才出现 BackTop	number	400
onClick	点击按钮的回调函数	() => void	-

Language	Changelog
🇺🇸 English	Add FloatButton component.
🇨🇳 Chinese	新增悬浮按钮 FloatButton 组件。

• 基础功能
• 自定义样式
• 按钮组
• 按钮组自定义样式
• 带有气泡卡片的按钮
• 回到顶部
• 菜单模式动画
• 回到顶部动画
• 中文文档
• 英文文档
• demo
• 测试用例

☑️ Self-Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

[github-actions]

[codecov]

Codecov Report

Base: 99.98% // Head: 99.98% // Increases project coverage by +0.00% 🎉

Coverage data is based on head (377d444) compared to base (6cbcb25).
Patch coverage: 100.00% of modified lines in pull request are covered.

Additional details and impacted files

@@           Coverage Diff            @@
##             next   #37520    +/-   ##
========================================
  Coverage   99.98%   99.98%            
========================================
  Files         527      532     +5     
  Lines        9017     9133   +116     
  Branches     2461     2498    +37     
========================================
+ Hits         9016     9132   +116     
  Misses          1        1            

Impacted Files	Coverage Δ
components/index.tsx	100.00% <ø> (ø)
components/float-button/BackTop.tsx	100.00% <100.00%> (ø)
components/float-button/FloatButtonContent.tsx	100.00% <100.00%> (ø)
components/float-button/FloatButtonGroup.tsx	100.00% <100.00%> (ø)
components/float-button/context.ts	100.00% <100.00%> (ø)
components/float-button/index.tsx	100.00% <100.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[MadCcc]

demo 留这些就可以，我悄咪咪改下

[gabschne]

I know I'm late to this pull request as it's already merged, but isn't the button missing an :active state? It looks a bit inconsistent with the basic button component having one. I think such a state would improve the user experience.

[li-jia-nan]

I know I'm late to this pull request as it's already merged, but isn't the button missing an :active state? It looks a bit inconsistent with the basic button component having one. I think such a state would improve the user experience.

@MadCcc What do you think?

[gabschne]

@MadCcc What do you think?

Any updates on a decision on this? I still think it's a valid point and seems like v5 is getting closer to the release.

[MadCcc]

Any updates on a decision on this? I still think it's a valid point and seems like v5 is getting closer to the release.

Currently :active state is not considered because FloatButton is used as link or menu for most cases by design.
But we will keep maintaining and improving this component after releasing 5.0.
Thank you for your advice~