fix(form): form state style exception in noStyle mode

[qhanw]

中文版模板 / 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
• Workflow
• Other (about what?)

🔗 Related issue link

💡 Background and solution

When form validation is performed with the noStyle property configured, there is a style exception in the successful state, and the style is also missing when the variant property is configured as 'filled' or 'borderless'.

https://stackblitz.com/edit/react-c7ja7w?file=demo.tsx

variant: outlined

variant: filled

variant: borderless

📝 Changelog

Language	Changelog
🇺🇸 English	Fix the icon style error of success status when configuring 'noStyle' attribute in form validation. Fix form validation style error when both 'noStyle' and 'variant' properties are configured as 'filled' or 'borderless'.
🇨🇳 Chinese	修复表单验证在配置noStyle时成功状态图标样式错误 修复表单验证在同时配置noStyle与variant属性为'filled'或'borderless'时样式错误

☑️ 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

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[github-actions]

👁 Visual Regression Report for PR #48604 Failed ❌

🎯 Target branch: master (533c855)
📖 View Full Report ↗︎

Expected (Branch master)	Actual (Current PR)	Diff
form-validate-static.compact.png	form-validate-static.compact.png
form-validate-static.compact.png	form-validate-static.compact.css-var.png
form-validate-static.dark.png	form-validate-static.dark.png
form-validate-static.dark.png	form-validate-static.dark.css-var.png
form-validate-static.default.png	form-validate-static.default.png
form-validate-static.default.png	form-validate-static.default.css-var.png

Check Full Report for details

[github-actions]

[zombieJ]

What's the current wrong behavior? Is there some issue ref or provide a snapshot for this?

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[qhanw]

What's the current wrong behavior? Is there some issue ref or provide a snapshot for this?

@zombieJ

主要表示为自定义表单校验在成功状态下，图标颜色与在非noStyle模式下不一致。其次是自定义表单组件在设置variant 为filled或borderless时状态样式也不正常表现。

[afc163]

@qhanw 能提供一个重现么？

[qhanw]

@qhanw 能提供一个重现么？

@afc163 @zombieJ
https://stackblitz.com/edit/react-c7ja7w?file=demo.tsx
切换样式类型与variant属性即可看到在非normal与outlined下的其它组合都存在或多或少样式问题，主要看success、validating状态下的图标颜色样式。

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (533c855) to head (f943e11).

Additional details and impacted files

@@            Coverage Diff            @@
##            master    #48604   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          745       745           
  Lines        12946     12948    +2     
  Branches      3382      3382           
=========================================
+ Hits         12946     12948    +2     

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