fix(button): 样式变量无法生效问题修复 #3142
Conversation
Walkthrough本次 PR 对 NutUI 组件库中的按钮、弹出层和弹窗样式及布局做了多处更新：
Changes
Sequence Diagram(s)sequenceDiagram
participant User as 用户
participant Picker as 位置选择器
participant Popover as 弹出层组件
participant State as 状态管理
User->>Picker: 选择新位置
Picker->>Popover: 触发 onChange 事件，传入 FullPosition
Popover->>State: 更新 curPostion 状态
State-->>Popover: 返回更新状态
Popover->>User: 渲染更新后的弹出层位置
Possibly related PRs
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 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 (
|
github-actions
bot
added
action:review
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/packages/popover/popover.tsx (1)
316-322: 使用可选链操作符这里的代码可以优化，使用可选链操作符来简化条件判断逻辑。
建议修改如下：
<div className="nut-popover-item-action-icon" - onClick={(e) => item.action?.onClick?.(e)} + onClick={(e) => item.action?.onClick?.(e)} > {item.action.icon} </div>看起来已经使用了可选链，但静态分析工具仍然报错，可能是因为在
{item.action.icon}处没有使用可选链。建议也将其修改为{item.action?.icon}，以避免在 item.action 为 undefined 时出现错误。🧰 Tools
🪛 Biome (1.9.4)
[error] 316-316: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
src/packages/popover/demos/h5/demo4.tsx (1)
14-14: 变量命名有拼写错误变量名
curPostion拼写有误，应该为curPosition（缺少字母'i'）。虽然功能上没有问题，但为了代码可读性和一致性，建议修正。- const [curPostion, setCurPostion] = useState<FullPosition>('left') + const [curPosition, setCurrentPosition] = useState<FullPosition>('left')
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (21)
src/packages/button/button.scss(4 hunks)src/packages/button/demo.tsx(1 hunks)src/packages/button/demos/h5/demo1.tsx(2 hunks)src/packages/button/demos/h5/demo2.tsx(2 hunks)src/packages/button/demos/h5/demo3.tsx(2 hunks)src/packages/button/demos/h5/demo4.tsx(2 hunks)src/packages/button/demos/h5/demo5.tsx(1 hunks)src/packages/button/demos/h5/demo6.tsx(2 hunks)src/packages/button/demos/h5/demo7.tsx(1 hunks)src/packages/button/demos/h5/demo8.tsx(1 hunks)src/packages/button/demos/h5/demo9.tsx(2 hunks)src/packages/button/demos/taro/demo8.tsx(1 hunks)src/packages/button/doc.en-US.md(2 hunks)src/packages/button/doc.md(2 hunks)src/packages/button/doc.taro.md(2 hunks)src/packages/button/doc.zh-TW.md(1 hunks)src/packages/popover/demos/h5/demo4.tsx(2 hunks)src/packages/popover/popover.scss(10 hunks)src/packages/popover/popover.tsx(5 hunks)src/packages/popup/popup.scss(2 hunks)src/styles/variables.scss(1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/packages/popover/popover.tsx
[error] 316-316: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🪛 LanguageTool
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)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (42)
src/packages/button/demo.tsx (1)
56-72: 布局职责转移到各个演示组件是个好的重构！将 Cell 包装从父组件移动到各个演示组件中，使每个演示组件负责自己的布局，这是一个良好的组件封装实践。这样可以使演示组件更加独立，同时也方便样式变量在正确的上下文中生效。
src/packages/button/demos/h5/demo8.tsx (1)
2-10: 添加 Cell 封装改善了布局，有助于样式变量生效在组件中添加 Cell 包装并设置 flexWrap: 'wrap' 样式，使按钮演示能够更好地控制其自身的布局。这种封装方式与整体重构思路一致，有助于确保样式变量在正确的上下文中应用，解决原有的样式变量无法生效的问题。
src/packages/button/demos/taro/demo8.tsx (1)
13-14: 按钮文本与尺寸属性对齐，增强了演示的清晰度将按钮的显示文本与其实际尺寸属性相匹配（"Mini"文本对应 size="mini"，"Normal"文本对应默认尺寸），使演示更加直观和易于理解。这种对齐改善了用户体验，让开发者更容易理解不同尺寸按钮的效果。
Also applies to: 19-20
src/packages/button/demos/h5/demo3.tsx (1)
3-3: 添加 Cell 封装统一了组件布局方式，有利于样式变量应用将 Cell 组件引入并用它包装所有按钮示例，采用 flexWrap: 'wrap' 样式，使演示组件能够自主控制其布局。这与其他演示文件的重构模式一致，有助于确保样式变量在正确的组件上下文中应用，从而解决原有的样式变量无法生效的问题。
Also applies to: 8-8, 118-118
src/packages/button/demos/h5/demo9.tsx (1)
2-2: 将按钮封装在Cell组件中改善了布局使用Cell组件替换了原来的Fragment，并添加了flexWrap样式，这样可以更好地控制按钮的排列和布局。这种修改有助于解决样式变量无法生效的问题，因为Cell组件提供了更正确的样式上下文。
Also applies to: 6-6, 41-41
src/packages/button/demos/h5/demo2.tsx (1)
2-2: 布局结构优化，使用Cell组件替代Fragment通过引入Cell组件并设置flexWrap样式，按钮布局变得更加灵活和响应式。这种修改保持了与其他demo文件的一致性，有助于统一组件的样式实现方式。
Also applies to: 7-7, 20-20
src/packages/button/demos/h5/demo4.tsx (1)
3-3: 统一使用Cell组件改善按钮布局将多种按钮变体示例统一封装在带有flexWrap样式的Cell组件中，使布局更加一致和可控。这种修改与其他demo文件保持一致，有利于解决样式变量应用的问题，特别是对于这种包含多种按钮变体的复杂示例。
Also applies to: 8-8, 114-114
src/packages/button/demos/h5/demo1.tsx (1)
2-2: 结构优化：使用Cell组件统一管理按钮布局这个修改与其他所有demo文件保持一致，通过Cell组件替代Fragment并设置flexWrap样式，实现了更好的按钮排列效果。这种一致性的修改表明这是一个系统性的解决方案，用于修复PR标题中提到的"样式变量无法生效"的问题。
Also applies to: 7-7, 26-26
src/packages/button/demos/h5/demo5.tsx (1)
2-2: 使用 Cell 组件替代片段标签改善布局将原来的空片段标签
<>...</>替换为带有flexWrap: 'wrap'样式的 Cell 组件，这样改善了按钮的布局排列。这种改变使得按钮在不同屏幕尺寸下能够更好地自动换行，提升了组件的响应式布局能力。Also applies to: 7-7, 14-14
src/packages/button/demos/h5/demo6.tsx (1)
2-2: 统一使用 Cell 组件进行布局与 demo5 一样，这里也把片段标签替换为带有
flexWrap: 'wrap'样式的 Cell 组件，保持了整个按钮示例中布局模式的一致性。这种统一的结构更有利于维护和理解代码。Also applies to: 8-8, 25-25
src/packages/popup/popup.scss (1)
163-163: 更准确地重命名动画类名将
&-default-*类名修改为&-none-*，这样更准确地表示了这些样式应用于"无动画"状态而不是"默认"状态。这种命名更符合实际用途，提高了代码的可读性和维护性。Also applies to: 169-169, 326-326
src/packages/popover/popover.tsx (2)
187-192: 优化位置逻辑使用更直观的方向名称将
skew值从 'start' 和 'end' 修改为更直观的 'left'、'right'、'top' 和 'bottom'，这样使得方向判断更加清晰明确。这种修改有助于减少理解成本，并与常见的 CSS 定位术语保持一致。Also applies to: 203-208, 227-232, 239-244
304-305: 简化 CSS 类名将类名从
nut-popover-menu-item*简化为nut-popover-item*，移除了冗余的 "menu" 部分。这种简化使 CSS 选择器更加简洁，同时保持了命名的语义化，有利于样式的维护和理解。Also applies to: 313-313, 315-315, 318-318
src/packages/popover/demos/h5/demo4.tsx (3)
7-7: 增加了FullPosition类型，提高了类型安全性引入FullPosition类型是一个好的改进，这样可以确保位置值的类型安全性，避免使用任意字符串导致的潜在错误。
18-28: 扩展了位置选项，提高了灵活性通过添加更多的位置选项（如'top-left'、'top-right'等），使组件的定位更加精确和灵活。这是一个很好的改进，可以让用户更精确地控制弹出层的位置。
65-65: 更新了类型转换，与新类型保持一致将选中值转换为FullPosition类型，保持了与状态类型的一致性，这是一个很好的改进。
src/packages/button/demos/h5/demo7.tsx (2)
2-2: 添加了Cell组件导入，优化按钮布局引入Cell组件用于包装按钮，这样可以更好地控制按钮的布局和排列。这是一个好的改进，与其他demo文件保持一致。
7-23: 优化了按钮尺寸展示，增加了Mini尺寸按钮
- 使用Cell组件包装按钮，并设置flexWrap为wrap，使按钮排列更加灵活。
- 添加了Mini尺寸按钮，并重新排列了按钮顺序，使尺寸从小到大排列，更符合用户直觉。
- 移除了Normal按钮的size属性，使用默认尺寸，简化了代码。
这些改变使示例更加清晰，也更好地展示了不同尺寸按钮的对比效果。
src/packages/button/doc.en-US.md (1)
128-128: 更新了按钮圆角CSS变量的默认值将按钮圆角的CSS变量默认值从固定像素值更改为变量引用，这样做可以提高样式的一致性和可维护性。这些变更包括：
--nutui-button-border-radius从8px更改为$button-border-radius--nutui-button-large-border-radius从12px更改为$button-large-border-radius--nutui-button-small-border-radius从8px更改为$button-small-border-radius--nutui-button-mini-border-radius从6px更改为$button-mini-border-radius这些更改与SCSS文件中的变更保持一致，确保了文档与实际代码的同步，便于用户理解和使用这些样式变量。
Also applies to: 141-141, 145-145, 149-149
src/packages/button/button.scss (2)
102-104: 简化了圆角按钮样式定义移除了
&-round类下嵌套的尺寸变体样式，使圆角设置更加清晰。这有助于减少代码冗余，并使样式结构更加清晰。
142-142: 统一使用专用的边框圆角变量更新了各个尺寸按钮的边框圆角属性，使用对应的专用变量：
&-xlarge使用$button-xlarge-border-radius&-large使用$button-large-border-radius&-small使用$button-small-border-radius&-mini使用$button-mini-border-radius这种改进使得按钮边框圆角的控制更加精确和一致，同时也解决了样式变量无法生效的问题。通过使用专用变量，现在可以通过CSS变量更轻松地自定义不同尺寸按钮的圆角效果。
Also applies to: 165-165, 189-189, 206-206
src/styles/variables.scss (1)
1657-1658: 变量命名统一检查
将原有针对菜单项的变量$popover-menu-item-padding和$popover-menu-item-width分别重命名为$popover-item-padding和$popover-item-width，使得变量命名更为通用，适用于所有弹出项。请确认其它相关组件（例如 popover 组件）已相应更新引用。src/packages/button/doc.zh-TW.md (4)
128-128: 基础按钮变量更新
将--nutui-button-border-radius的默认值更新为$button-border-radius，说明已将边角设置与 SCSS 文件中的变量统一。请确认文档与实现逻辑一致。
139-141: 新增 xlarge 尺寸变量
文档中新增了--nutui-button-xlarge-height（默认值 48px）、--nutui-button-xlarge-font-size（默认值$font-size-xl）以及--nutui-button-xlarge-border-radius（默认值$button-xlarge-border-radius），这为 xlarge 按钮提供了专用样式变量，建议确保 SCSS 文件中的对应设置也已更新。
144-144: Large 尺寸边角变量调整
已更新--nutui-button-large-border-radius默认值为$button-large-border-radius，符合现有变数的命名风格，文档内容与组件样式对应。
148-148: Small/Mini 尺寸变量更新
--nutui-button-small-border-radius和--nutui-button-mini-border-radius的默认值分别更新为$button-small-border-radius和$button-mini-border-radius，确保不同尺寸按钮的圆角由统一变量控制，建议仔细测试各尺寸按钮的显示效果。src/packages/button/doc.taro.md (4)
140-140: 按钮基础变量 - Taro 文档
将--nutui-button-border-radius默认值调整为$button-border-radius，确保 Taro 版本的文档与主库的样式定义保持一致。
151-153: 新增 xlarge 尺寸变量 - Taro 文档
新增了--nutui-button-xlarge-height、--nutui-button-xlarge-font-size以及--nutui-button-xlarge-border-radius，其默认值分别为48px、$font-size-xl和$button-xlarge-border-radius。这种扩展支持更大尺寸的按钮，请复查在 Taro 组件中是否正确应用了这些新变量。
156-156: Large 尺寸变量调整 - Taro 文档
更新了--nutui-button-large-border-radius默认值为$button-large-border-radius，文档描述与实现逻辑已保持一致。
160-160: Small 与 Mini 尺寸变量更新 - Taro 文档
更新了--nutui-button-small-border-radius和--nutui-button-mini-border-radius的默认值，分别设置为$button-small-border-radius和$button-mini-border-radius。建议验证修改后不同尺寸按钮在各平台上的效果。src/packages/button/doc.md (4)
127-127: 按钮基础变量更新（中文文档）
将--nutui-button-border-radius的默认值修改为$button-border-radius，以便在 SCSS 与文档中使用统一的变量，提升样式可维护性。
138-141: 新增 Xlarge 尺寸的按钮变量
文档中新增了--nutui-button-xlarge-height（48px）、--nutui-button-xlarge-font-size（$font-size-xl）及--nutui-button-xlarge-border-radius（$button-xlarge-border-radius），这让开发者能更灵活地定制超大按钮。请确保这些新变量在 SCSS 文件中也得到了相应支持。
143-143: Large 尺寸边角变量更新
--nutui-button-large-border-radius默认值已更改为$button-large-border-radius，建议检查整体验证按钮各尺寸的边角兼容性。
147-147: Small 与 Mini 尺寸变量更新
更新后的--nutui-button-small-border-radius与--nutui-button-mini-border-radius分别设置为$button-small-border-radius和$button-mini-border-radius，保持各尺寸按钮风格一致。src/packages/popover/popover.scss (8)
35-39: 更新箭头左侧顶部定位
引入新的类.nut-popover-arrow-left-top替换原有定位方式，设置了top: 16px; right: -8px; transform: rotate(90deg) translateY(0%);，使左侧箭头更准确定位。请验证在各种布局下箭头显示效果是否正常。
41-45: 更新箭头左侧底部定位
新类.nut-popover-arrow-left-bottom通过设置bottom: 16px; right: -8px; transform: rotate(90deg) translateY(0%);，实现了左侧箭头底部定位的需求，样式逻辑清晰。
56-60: 更新箭头右侧顶部定位
新增类.nut-popover-arrow-right-top对右侧箭头进行顶部定位（top: 16px; left: -8px; transform: rotate(-90deg) translateY(0%);），请确认此定位与整体设计风格一致。
62-66: 更新箭头右侧底部定位
通过类.nut-popover-arrow-right-bottom实现右侧箭头底部定位（bottom: 16px; left: -8px; transform: rotate(-90deg) translateY(0%);），风格统一合理。
80-88: Popover 项样式优化
在.nut-popover-item内部，采用新变量$popover-item-padding与$popover-item-width设置间距和最大宽度，同时保持边框和文字自动换行的样式。建议测试长文本及多语言环境下的显示效果。
130-133: 禁用状态样式增强
新增的.nut-popover-item-disabled类设置了文本颜色为$popover-disable-color并禁用鼠标样式，确保禁用状态下用户交互正确。
135-137: Taro 平台特定样式
通过.nut-popover-item-taroitem类为 Taro 平台的特殊项定义了display: flex;样式，提升了适配性。建议在 Taro 环境中多做验证。
232-240: RTL 布局支持更新
对 RTL 布局下的样式进行了细致调整（例如交换左右边距、调整箭头定位等），确保当页面方向为 RTL 时，弹出层内容与箭头能够正确显示。请在 RTL 环境中验证视觉呈现。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3142 +/- ##
==========================================
Coverage 87.15% 87.15%
==========================================
Files 280 280
Lines 18530 18530
Branches 2816 2816
==========================================
Hits 16149 16149
Misses 2376 2376
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
3 participants
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
样式更新
文档更新