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.98% -0.01%
==========================================
Files 221 221
Lines 17878 17879 +1
Branches 2676 2676
==========================================
Hits 15016 15016
- Misses 2857 2858 +1
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚨 Try these New Features:
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (4)
src/packages/button/doc.md (1)
146-149: 建议补充迷你按钮的使用场景说明迷你按钮的样式设计合理，建议在文档中补充以下内容：
- 适用场景说明
- 与其他尺寸的对比示例
- 最小点击区域的说明
建议在示例代码部分添加如下说明：
### 按钮尺寸 支持 `xlarge`、 `large`、`normal`、`small`、`mini` 尺寸，默认为 `normal`。 + > 注意：迷你按钮(`mini`)主要用于特殊场景，如表格内操作按钮等，请确保预留足够的点击区域。src/packages/button/doc.taro.md (2)
155-158: 小尺寸按钮的间距和圆角调整内边距从12px减小到8px的调整需要注意：
- 较小的内边距可能影响按钮内容的呈现
- 对于带图标的按钮，需要确保图标和文字的间距合理
建议添加关于图标按钮在小尺寸下的最佳实践说明。
159-162: 迷你尺寸按钮的样式优化迷你按钮采用了更小的字号（$font-size-xs）和更小的圆角（6px），建议：
- 在文档中补充迷你尺寸按钮的使用场景说明
- 考虑添加最小内容宽度的限制，以确保可用性
建议在文档中添加迷你按钮的最佳实践和使用限制说明。
src/packages/button/doc.en-US.md (1)
132-139: 样式系统集成度提升以下几点变更提高了组件的可定制性：
- 新增了文本与图标之间的间距变量
--nutui-button-text-icon-margin- 默认背景色改为透明，提供更好的样式覆盖能力
- 字体大小与设计系统变量（
$font-size-*）保持同步建议：
- 考虑为不同主题（暗色/亮色）提供预设的文本和图标间距值
Also applies to: 151-151
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (5)
src/packages/button/doc.en-US.md(1 hunks)src/packages/button/doc.md(1 hunks)src/packages/button/doc.taro.md(1 hunks)src/packages/button/doc.zh-TW.md(1 hunks)src/styles/variables.scss(5 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/styles/variables.scss
🧰 Additional context used
🪛 LanguageTool
src/packages/button/doc.md
[locale-violation] ~132-~132: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...olor-title| | \--nutui-button-default-background-color | type 为 default 的按钮的背景色 |trans...
(GL_BARBARISM_REPLACE)
src/packages/button/doc.taro.md
[locale-violation] ~145-~145: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...olor-title| | \--nutui-button-default-background-color | type 为 default 的按钮的背景色 |trans...
(GL_BARBARISM_REPLACE)
src/packages/button/doc.zh-TW.md
[locale-violation] ~133-~133: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...olor-title| | \--nutui-button-default-background-color | type 為 default 的按鈕的背景色 |trans...
(GL_BARBARISM_REPLACE)
🔇 Additional comments (12)
src/packages/button/doc.md (4)
127-129: 基础按钮属性更新符合现代设计趋势
圆角和内边距的调整使按钮更加紧凑，同时保持了良好的视觉效果。
141-141: 大尺寸按钮的圆角优化合理
12px的圆角值与按钮大小比例协调，视觉效果良好。
142-145: 小尺寸按钮样式调整合理
内边距和圆角的缩减与按钮尺寸相匹配，保持了整体设计的一致性。
132-137: 建议验证默认按钮的可访问性
透明背景色的设置可能会在某些背景下影响按钮的可见度，建议：
- 确保在不同背景色下保持足够的对比度
- 考虑添加hover状态的背景色以提升交互体验
🧰 Tools
🪛 LanguageTool
[locale-violation] ~132-~132: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...olor-title| | \--nutui-button-default-background-color | type 为 default 的按钮的背景色 |trans...
(GL_BARBARISM_REPLACE)
src/packages/button/doc.zh-TW.md (4)
128-128: 按钮圆角和内边距的调整符合现代设计趋势！
将按钮的默认圆角从24px调整为8px，以及将normal尺寸的内边距调整为0px 12px，这些改动使按钮更符合当前的设计趋势。
Also applies to: 130-130
132-138: 默认按钮样式的优化提升了整体设计一致性！
将默认按钮背景色设置为透明，并统一使用较小的字号（$font-size-s），这些改动使默认按钮更加轻量化，同时保持了与设计系统的一致性。
🧰 Tools
🪛 LanguageTool
[locale-violation] ~133-~133: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...olor-title| | \--nutui-button-default-background-color | type 為 default 的按鈕的背景色 |trans...
(GL_BARBARISM_REPLACE)
142-150: 按钮尺寸的圆角层级设计合理！
不同尺寸按钮的圆角采用递减设计（large: 12px -> normal/small: 8px -> mini: 6px），创造了清晰的视觉层级，使界面更加协调。
151-151: 新增图标边距变量增强了组件的可定制性！
新增的--nutui-button-text-icon-margin变量使图标与文本之间的间距可配置，这对于需要微调按钮内部布局的场景很有帮助。
src/packages/button/doc.taro.md (3)
153-154: 大尺寸按钮的圆角需要确认
大尺寸按钮的圆角值从24px调整为12px，这个改动需要确认是否符合设计规范中大尺寸组件的视觉规则。
140-142: 按钮基础样式变量的调整需要验证视觉一致性
边框圆角从24px调整为8px是一个显著的视觉变化，这可能会影响到整体设计语言的一致性。建议：
- 确认这个改动是否与设计规范同步
- 检查是否需要在其他相关组件中同步更新类似的圆角值
✅ Verification successful
Let me analyze the results to understand the broader context of border-radius usage across components and any related documentation changes.
我需要进一步确认全局样式变量的定义以及其他组件中是否采用了新的8px圆角值，以便做出更准确的判断。
按钮圆角样式变更符合设计规范
经过验证，此次将按钮圆角从24px调整为8px的改动是合理的：
- 在全局样式变量中，
$radius-base和$radius-l的默认值都是8px - 多个基础组件（Button、Tag、Switch、Popover等）都采用了8px的圆角值
- 这个改动使按钮组件与整体设计系统保持一致
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他组件是否使用了类似的圆角值
rg --type css "border-radius: 24px"
Length of output: 235
Script:
#!/bin/bash
# 检查其他组件中使用的border-radius变量定义
rg --type css "\-\-.*border-radius.*:"
# 检查popup组件的文档中是否有相关的样式变更
cat src/packages/popup/doc.taro.md || true
Length of output: 3112
Script:
#!/bin/bash
# 检查全局样式变量定义
cat src/styles/variables.scss || true
# 检查是否有其他使用border-radius: 8px的组件
rg --type css "border-radius: 8px"
Length of output: 75648
145-150:
默认按钮样式的重要变更
背景色从$white改为transparent是一个重要的改动，这会影响到按钮的视觉层次。同时，内边距和字体大小的调整也需要注意：
- 透明背景可能在不同背景色上产生可读性问题
- 内边距从16px减小到12px可能影响按钮的可点击区域
✅ Verification successful
Let's search for any references to white colors and button background styles to verify the impact of this change.
Based on the git history and code changes, I can now provide a definitive response about the button background color change:
按钮背景色变更的影响分析
从代码历史可以看出，这是一个经过深思熟虑的改动：
- 默认按钮背景色从
$white改为transparent是为了适应不同主题和场景 - 内边距从16px减小到12px是统一的样式调整，不会显著影响可点击区域
- 这些变更已经在多个主题文件中同步更新，包括默认主题、暗黑主题等
- 组件有完整的边框和文本颜色配置，确保在透明背景下的可读性
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否有其他组件依赖原来的白色背景
rg --type scss "\$white" src/
Length of output: 59
Script:
#!/bin/bash
# Search for SCSS/CSS files that might reference white background color
rg -t css "\$white|#fff|#ffffff" src/
# Search for button-related CSS variables and their usage
rg -t css "nutui-button-default-background" src/
# Check for any previous button styles
git log -p -- "src/packages/button/" | grep -A 5 "background"
Length of output: 131801
🧰 Tools
🪛 LanguageTool
[locale-violation] ~145-~145: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...olor-title| | \--nutui-button-default-background-color | type 为 default 的按钮的背景色 |trans...
(GL_BARBARISM_REPLACE)
src/packages/button/doc.en-US.md (1)
128-131: 按钮尺寸和形状变量的优化调整
各个尺寸按钮的圆角和内边距设置更加合理，形成了清晰的视觉层次：
- large 尺寸：12px圆角
- normal/small 尺寸：8px圆角
- mini 尺寸：6px圆角
内边距也进行了相应优化，使按钮在不同尺寸下都能保持良好的视觉平衡。
Also applies to: 140-150
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
&-round，提供不同尺寸的圆角选项。样式调整