feat(spin): Adds fullscreen property to <Spin /> component

[Rafael-Martins]

🤔 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
• Workflow
• Other (about what?)

🔗 Related issue link

• close Backdrop component #44829

💡 Background and solution

Create a solution similar to https://mui.com/material-ui/api/backdrop/ but inside the <Spin /> component

📝 Changelog

Added a new prop called fullscreen that adds a css class to make it behave as it should.

Video

ant-d.spin.fullscreen.mp4

Language	Changelog
🇺🇸 English
🇨🇳 Chinese

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

• 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

---

🚀 Summary

🤖 Generated by Copilot at b2fa189

This pull request adds a new feature to the Spin component that allows it to display a fullscreen spinner and handle click events. It also adds a new demo, documentation, and style for the feature. The files affected are components/spin/index.tsx, components/spin/style/index.tsx, components/spin/demo/fullscreen.md, components/spin/demo/fullscreen.tsx, and components/spin/index.en-US.md.

🔍 Walkthrough

🤖 Generated by Copilot at b2fa189

• Add a new fullscreen demo for the Spin component (link, link, link)
• Add new props fullscreen and onClick to the Spin component (link, link, link, link)
• Add style definition for the fullscreen spinner in components/spin/style/index.tsx (link, link)

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[github-actions]

• 🚨 Please fill changelog in the PR

  • Write with a developer-oriented perspective and narrative method, without describing the details of the repair
  • Describing the problem and the impact on the developer
  • describing the user-first site problem, not your solution
  • Refer: https://ant.design/changelog#501

• 🚨 请填写 PR 中的 changelog

  • 请用面向开发者的角度和叙述方式撰写，不描述修复细节
  • 描述问题和对开发者的影响
  • 描述用户第一现场的问题，而非你的解决方式
  • 参考：https://ant.design/changelog-cn#501

[github-actions]

[li-jia-nan]

PR to feature branch please.

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	👍 Changes approved	1 change	Oct 19, 2023, 3:15 AM

[codecov]

Codecov Report

All modified lines are covered by tests ✅

Comparison is base (2e8e67f) 100.00% compared to head (d52779a) 100.00%.

Additional details and impacted files

@@            Coverage Diff            @@
##           feature    #44986   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          695       695           
  Lines        11709     11712    +3     
  Branches      3128      3131    +3     
=========================================
+ Hits         11709     11712    +3     

Files	Coverage Δ
components/spin/index.tsx	100.00% <100.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Rafael-Martins]

I automated the close action in the demo with 2s:

ant-d.fullscren.auto.mp4

We can also set a close button instead, not sure what is the best approach 🤔

[Brucia323]

I don’t know if Gaussian blur will look good, backdrop-filter: blur(8px);

[li-jia-nan]

Designer’s discussion result: change dots to #fff，and mask reuses Modal mask's backgroundColor.