fix(picker/datepicker): popup minHeight is too high and causes blank space #2929
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
概述遍历这个拉取请求引入了对选择器（Picker）组件的样式和类名进行细微调整。具体而言，在 SCSS 文件中添加了一个新的嵌套类 变更
可能相关的 PR
建议标签
建议审阅者
诗歌
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 (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #2929 +/- ##
=============================================
- Coverage 85.97% 85.58% -0.39%
=============================================
Files 277 277
Lines 18692 18187 -505
Branches 2769 2769
=============================================
- Hits 16070 15565 -505
Misses 2617 2617
Partials 5 5 ☔ View full report in Codecov by Sentry. |
![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/picker/picker.scss (2)
6-8: 建议重新考虑使用!important声明使用
!important可能会导致以下问题：
- 增加样式优先级的复杂性
- 使未来的样式修改变得困难
- 可能掩盖更深层次的样式问题
建议通过提高选择器的特异性来解决样式冲突，而不是使用
!important。&-popup { - min-height: calc($popup-title-height + $picker-list-height) !important; + min-height: calc($popup-title-height + $picker-list-height); }
7-7: 建议添加注释说明高度计算逻辑为了提高代码的可维护性，建议添加注释说明
min-height的计算逻辑和组成部分。&-popup { + // 最小高度 = 弹窗标题高度 + 选择器列表高度 min-height: calc($popup-title-height + $picker-list-height) !important; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/packages/picker/picker.scss(1 hunks)src/packages/picker/picker.taro.tsx(1 hunks)src/packages/picker/picker.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- src/packages/picker/picker.taro.tsx
- src/packages/picker/picker.tsx
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: test
- GitHub Check: build
🔇 Additional comments (1)
src/packages/picker/picker.scss (1)
6-8: 验证高度计算是否考虑了所有场景请确认：
- 这个最小高度是否适用于所有使用场景
- 是否需要考虑内容padding或margin的影响
- 在不同设备尺寸下的表现是否正常
✅ Verification successful
高度计算验证结果
经过验证，当前的最小高度计算是合理的：
- 标题栏高度(50px) + 列表高度(252px)的计算方式符合组件结构
- 使用CSS变量实现，支持主题定制和响应式调整
- 无需考虑内边距影响，因为已包含在预设高度中
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 检查是否有其他组件依赖这个最小高度设置 rg -l "nut-picker-popup" # 检查是否存在相关的自适应布局代码 rg "min-height|max-height" src/packages/picker/Length of output: 182
Script:
#!/bin/bash # Search for variable definitions rg "\$popup-title-height|\$picker-list-height" src/ # Look for related styles ast-grep --pattern 'class $_-popup { $$$ }' # Check for media queries rg "@media" src/packages/picker/Length of output: 132
Script:
#!/bin/bash # Search for variable definitions in config/theme fd -t f . -e scss | xargs rg "\$popup-title-height|\$picker-list-height" # Look for popup styles with context rg -A 5 "popup" src/packages/picker/ # Search for height-related styles rg "height:" src/packages/picker/Length of output: 9004
Script:
#!/bin/bash # Search for variable definitions in theme files fd -t f . -e scss | xargs rg "^\s*\$(popup-title-height|picker-list-height|picker-item-height)" # Check if there are any theme configuration files fd -t f "theme|config|variables" -e scssLength of output: 487
Script:
#!/bin/bash # Check variables.scss for picker-related definitions rg -A 1 "popup-title-height|picker-list-height|picker-item-height" src/styles/variables.scss # Check theme files for any overrides rg -A 1 "popup-title-height|picker-list-height|picker-item-height" src/styles/theme-*.scss # Look for any media queries that might affect these variables rg "@media.*picker" src/styles/Length of output: 630
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
.nut-picker-popup类定义了弹出层的最小高度