chore: make modal backdrop blur opt-in for better performance

[Oksamies]

No description provided.

[Oksamies]

• chore: make modal backdrop blur opt-in for better performance #1610 👈 (View in Graphite)
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

[coderabbitai]

Walkthrough

The Modal component's backdrop blur effect has been made opt-in. The .modal__overlay CSS class no longer includes a default blur, and a new .modal__overlay--blur modifier class has been created to apply the blur styling when needed. A corresponding enableBackdropBlur boolean prop (defaulting to false) has been added to ModalProps, which conditionally applies the modifier class to the overlay element during rendering.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	No description was provided by the author, which fails the requirement for the description to be related to the changeset.	Add a brief description explaining why the blur effect is being made opt-in and any migration guidance for existing consumers.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: making modal backdrop blur opt-in instead of always-on, with a performance rationale.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch 11-13-chore_make_modal_backdrop_blur_opt-in_for_better_performance

---

📜 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 06e8ed7 and 19e5331.

📒 Files selected for processing (2)

• packages/cyberstorm/src/newComponents/Modal/Modal.css (1 hunks)
• packages/cyberstorm/src/newComponents/Modal/Modal.tsx (3 hunks)

⏰ 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). (2)

• GitHub Check: Build
• GitHub Check: Generate visual diffs

🔇 Additional comments (4)

packages/cyberstorm/src/newComponents/Modal/Modal.tsx (3)

88-91: Well-documented performance optimization.

The prop documentation clearly explains the performance trade-off.

---

252-257: LGTM!

The conditional class application is correct and integrates cleanly with the existing classnames utility.

---

196-196: Verify impact on existing Modal usages.

Defaulting to false is a breaking change—all existing modals will lose the blur effect unless updated. Ensure all Modal instances in the codebase are reviewed and enableBackdropBlur={true} is added where the blur should be retained.

Run the following script to find all Modal usages:

packages/cyberstorm/src/newComponents/Modal/Modal.css (1)

9-11: LGTM!

The blur modifier class follows BEM naming conventions and correctly isolates the performance-heavy backdrop-filter.

Warning

Tools execution failed with the following error:

Failed to run tools: 13 INTERNAL: Received RST_STREAM with code 2 (Internal server error)

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[codecov]

Codecov Report

❌ Patch coverage is 0% with 6 lines in your changes missing coverage. Please review.
✅ Project coverage is 9.85%. Comparing base (86d570d) to head (19e5331).
⚠️ Report is 7 commits behind head on master.

Files with missing lines	Patch %	Lines
...kages/cyberstorm/src/newComponents/Modal/Modal.tsx	0.00%	6 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff            @@
##           master   #1610      +/-   ##
=========================================
- Coverage    9.86%   9.85%   -0.01%     
=========================================
  Files         309     309              
  Lines       22555   22560       +5     
  Branches      405     405              
=========================================
  Hits         2224    2224              
- Misses      20331   20336       +5     

☔ 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.