feat: enhance SafeArea with className/style props and constant() iOS fallback#3388

Open

bigbigDreamer wants to merge 2 commits intojdf2e:feat_v3.x from

Open

feat: enhance SafeArea with className/style props and constant() iOS fallback #3388
bigbigDreamer wants to merge 2 commits intojdf2e:feat_v3.x from
bigbigDreamer:feature/perf_safearea

Conversation


 feat: support style and classname props,perf constant function

087b893

@pull-request-size pull-request-size bot added the size/S label

Nov 17, 2025

@github-actions github-actions bot added action:review 3.x labels

Nov 17, 2025

@coderabbitai

Copy link

coderabbitai bot commented Nov 17, 2025 •

edited

Loading

Walkthrough

新增对安全区域的常数型 inset 支持(使用 constant()),并在 Web/Taro SafeArea 组件中解构并透传 className、style、position 等 props 到根元素,保留原有功能与渲染结构。

Changes

内聚体 / 文件(s)	变更摘要
样式增强 `src/packages/safearea/safearea.scss`	在现有 `env()` 计算之外,新增基于 `constant()` 的 `padding-top` 与 `padding-bottom` 计算,均乘以 `var(--nutui-safe-area-multiple, 1)`
Web 组件调整 `src/packages/safearea/safearea.tsx`	解构 `props` 为 `className, style, position, ...rest`;将 `rest` 和 `style` 透传到根 `div`;使用本地 `position` 构建 className,并包含外部 `className`
Taro 组件调整 `src/packages/safearea/safearea.taro.tsx`	与 Web 组件等效的 props 解构与透传(`className, style, position, ...rest`);在根 `View` 上应用 `rest`、`style`、合并 className;设置 `SafeArea.displayName = 'NutSafeArea'`

Sequence Diagram(s)

sequenceDiagram
 participant App as 使用者组件
 participant SafeArea as SafeArea (Web/Taro)
 participant DOM as 根元素 (div/View)
 Note over App,SafeArea: 渲染流程(高层)
 App->>SafeArea: 传入 props (className, style, position, children, ...)
 SafeArea->>SafeArea: 解构 props,合并 className 与 position
 SafeArea->>DOM: 透传 `...rest`,应用 `style` 和 合并后的 className
 DOM-->>App: 渲染包含 children 的根元素

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 分钟

需重点检查:
- SCSS 中同时使用 constant() 与 env() 的兼容性与降级行为
- var(--nutui-safe-area-multiple) 的默认值与预期缩放效果
- Taro 与 Web 组件对 props 透传的一致性和未破坏现有行为

Possibly related PRs

fix(navbar): safearea displays abnormal when safeAreaInsetTop has been set true #2632 :与 SafeArea 组件及其 SCSS 更改直接相关,Navbar 的 safe-area 替换实现依赖本变更。

Suggested reviewers

oasis-cloud

Poem

🐰 新叶落入安全区,
常数护边续新篇,
Props 解构轻又稳,
根元素稳稳抱入怀,
小兔跳跃笑开颜 ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main changes: adding constant() iOS fallback support and forwarding className/style props to SafeArea component.
Description check	✅ Passed	The description follows the template structure with completed checklist items and provides clear explanation of the problem and solution with visual evidence.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 087b893 and 68a1e1d.

📒 Files selected for processing (2)

src/packages/safearea/safearea.taro.tsx (1 hunks)
src/packages/safearea/safearea.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

src/packages/safearea/safearea.taro.tsx
src/packages/safearea/safearea.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: test

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

@codecov

Copy link

codecov bot commented Nov 17, 2025 •

edited

Loading

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 88.16%. Comparing base (e9a80b8) to head (68a1e1d).

Additional details and impacted files

@@ Coverage Diff @@
## feat_v3.x #3388 +/- ##
==========================================
 Coverage 88.15% 88.16% 
==========================================
 Files 291 291 
 Lines 19212 19216 +4 
 Branches 2988 2988 
==========================================
+ Hits 16937 16941 +4 
 Misses 2269 2269 
 Partials 6 6

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

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@bigbigDreamer

Copy link

Contributor Author

bigbigDreamer commented Nov 17, 2025

image

I also have an idea to improve compatibility by using the CSS max() function together with env(safe-area-inset-*). The SafeArea component could expose a configurable fallback value (for example via a CSS variable), and then use max(env(safe-area-inset-bottom), var(--nutui-safe-area-fallback-bottom)) so that on Android browsers which support env() but return 0, we still get a reasonable, non‐zero safe-area inset from the fallback. @xiaoyatong

@supports(padding: max(0px)) {
 padding-bottom: max(40px, env(safe-area-inset-left)); 
}

@bigbigDreamer bigbigDreamer changed the title ~~(削除) feat: support style and classname props,perf constant function (削除ここまで)~~ (追記) feat: enhance SafeArea with className/style props and constant() iOS fallback (追記ここまで)

Nov 17, 2025

@bigbigDreamer


 fix: remove unused children prop

68a1e1d

Labels

3.x action:review size/S

1 participant

@bigbigDreamer

Conversation

@bigbigDreamer bigbigDreamer commented Nov 17, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🤔 这个变动的性质是?

🔗 相关 Issue

💡 需求背景和解决方案

☑️ 请求合并前的自查清单

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Nov 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

codecov bot commented Nov 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

bigbigDreamer commented Nov 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

@bigbigDreamer bigbigDreamer commented Nov 17, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Nov 17, 2025 •

edited

Loading

codecov bot commented Nov 17, 2025 •

edited

Loading