feat(v14): button adaptation #2737
Conversation
Walkthrough此次更改主要涉及 Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (3)
src/packages/button/button.scss (1)
101-116: 建议为圆角按钮添加使用文档圆角按钮的样式实现规范合理，建议在组件文档中补充以下内容：
- 各尺寸对应的圆角大小说明
- 使用示例代码
- 与普通按钮的对比展示
需要我帮助生成文档内容吗？
src/styles/variables.scss (2)
291-295: 主按钮背景色优化为渐变效果将主按钮的背景色从纯色更改为线性渐变：
- 起始颜色：#ff475d
- 结束颜色：#ff0f23
- 渐变角度：90度（水平）
这种渐变效果能让按钮看起来更现代化，提升视觉层次感。建议添加相应的 hover 和 active 状态的渐变效果。
370-373: 新增特大按钮文本图标间距变量新增了
$button-xlarge-text-icon-margin变量：
- 标准化了特大按钮中文本和图标之间的间距
- 默认值 6px 提供了适当的分隔
- 使用 CSS 自定义属性便于主题定制
建议考虑为其他尺寸的按钮也添加类似的间距变量，保持一致性。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
src/packages/button/button.scss(6 hunks)src/styles/variables.scss(5 hunks)
🔇 Additional comments (2)
src/packages/button/button.scss (1)
25-25: 样式重置属性设置正确！
添加 -webkit-appearance: none 可以有效消除浏览器默认按钮样式，这是一个标准的跨浏览器兼容性处理方案。
src/styles/variables.scss (1)
232-232: 按钮字体大小调整更加合理
字体大小的调整形成了更合理的层级关系：
- 默认按钮：12px（小号）
- 大按钮：14px（基础）
- 特大按钮：18px（特大）
- 迷你按钮：11px（特小）
这种层级更符合按钮的视觉层次，提高了用户界面的可读性。
Also applies to: 243-243, 250-250, 276-276
| border-radius: $radius-base; | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议统一边框圆角变量的使用
当前代码中边框圆角的变量使用不统一：
- xlarge 和 large 使用
$radius-base - small 和 mini 使用
$radius-s
建议：
- 统一使用同一个变量，或
- 为不同尺寸定义专门的按钮圆角变量（如
$button-large-radius）
&-xlarge {
height: $button-xlarge-height;
padding: $button-xlarge-padding;
font-size: $button-xlarge-font-size;
font-weight: $button-large-font-weight;
- border-radius: $radius-base;
+ border-radius: $button-xlarge-radius;
// ... other styles
}
&-large {
height: $button-large-height;
padding: $button-large-padding;
font-size: $button-large-font-size;
font-weight: $button-large-font-weight;
- border-radius: $radius-base;
+ border-radius: $button-large-radius;
// ... other styles
}
&-small {
height: $button-small-height;
padding: $button-small-padding;
font-size: $button-small-font-size;
- border-radius: $radius-s;
+ border-radius: $button-small-radius;
// ... other styles
}
&-mini {
height: $button-mini-height;
padding: $button-mini-padding;
font-size: $button-mini-font-size;
- border-radius: $radius-s;
+ border-radius: $button-mini-radius;
// ... other styles
}Also applies to: 180-181, 205-205, 222-222
| .nut-button-text { | ||
| margin-left: $button-xlarge-text-icon-margin; | ||
| &-right { | ||
| margin-right: $button-xlarge-text-icon-margin; | ||
| } | ||
| } |
There was a problem hiding this comment.
修复大号按钮图标间距变量使用错误
在 large 尺寸按钮中错误使用了 xlarge 的间距变量：
.nut-button-text {
margin-left: $button-xlarge-text-icon-margin; // 错误使用
&-right {
margin-right: $button-xlarge-text-icon-margin; // 错误使用
}
}建议修复为：
&-large {
// ... other styles
.nut-button-text {
- margin-left: $button-xlarge-text-icon-margin;
+ margin-left: $button-large-text-icon-margin;
&-right {
- margin-right: $button-xlarge-text-icon-margin;
+ margin-right: $button-large-text-icon-margin;
}
}
}Also applies to: 182-187
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## V3.0 #2737 +/- ##
=======================================
Coverage 83.99% 83.99%
=======================================
Files 221 221
Lines 17878 17878
Branches 2676 2676
=======================================
Hits 15016 15016
Misses 2857 2857
Partials 5 5 ☔ View full report in Codecov by Sentry. |
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
&-round，提供不同尺寸的圆角选项。样式调整