fix(blueprint-web): Upgrade blueprint-web packages #4261
Conversation
WalkthroughI pity the fool — updated Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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). (3)
✨ Finishing Touches🧪 Generate unit tests
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:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type 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: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP (Model Context Protocol) integration is disabled
- Jira integration is disabled
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (1)
package.json(2 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: tjuanitas
PR: box/box-ui-elements#4224
File: package.json:296-297
Timestamp: 2025-08-12T18:04:17.698Z
Learning: In the box-ui-elements project, the team is comfortable with raising peerDependency minimum versions when upgrading blueprint-web packages, even if it's a breaking change for consumers.
📚 Learning: 2025-08-12T18:04:17.698Z
Learnt from: tjuanitas
PR: box/box-ui-elements#4224
File: package.json:296-297
Timestamp: 2025-08-12T18:04:17.698Z
Learning: In the box-ui-elements project, the team is comfortable with raising peerDependency minimum versions when upgrading blueprint-web packages, even if it's a breaking change for consumers.
Applied to files:
package.json
⏰ 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). (3)
- GitHub Check: lint_test_build
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: Summary
🔇 Additional comments (1)
package.json (1)
296-297: Peer minima bump is fine by team norms—ship it, fool!Raising peerDependency floors to
^12.64.2/^4.65.0matches our prior guidance. Just call out the bump in release notes so consumers aren’t surprised.Confirm Storybook and a smoke build still render core components (Buttons, Inputs, Tokens) without style regressions under the new Blueprint versions.
…blueprint-web-2025-09
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
src/elements/common/modal.scss (4)
43-47: Call your source shot, sucka — pin the Blueprint version/path in the comment.Add the exact blueprint file and version these tokens came from to avoid drift during future upgrades.
Apply this diff to enrich the comment:
/* - These tokens are pasted from blueprint modal.module.scss. + These tokens are pasted from blueprint modal.module.scss. + Source: @box/blueprint-web v12.64.2 (packages/blueprint-web/src/components/modal/modal.module.scss) We need these because we use a custom modal component instead of the Blueprint modal root component. This should be removed once we can fully migrate to the Blueprint component. */
48-81: Scope so the whole crew benefits — make overlay consume the token too.Defining tokens on .be-modal-dialog-content won’t reach .be-modal-*overlay siblings. Wire the overlay background to the new var with a safe fallback.
Apply this diff outside the changed block to consume the token:
.be-modal-wrapper-overlay { position: fixed; inset: 0; - background-color: $darker-black; + /* Prefer modal token; fall back to legacy color */ + background-color: var(--modal-overlay-background, #000c); } .be-modal-dialog-overlay { @extend .be-modal-wrapper-overlay; position: absolute; }Verification:
- Open any of the affected modals and confirm the overlay color matches Blueprint expectations. If your theming defines --overlay-modal-overlay, you should see it applied; otherwise it should look unchanged.
57-57: Use the token you declare, fool — hook up border radius.You define --modal-border-radius but still use a hard-coded radius later. Use the token to stay in sync with Blueprint.
Apply this diff outside the changed block:
.be-modal-create-folder .be-modal-dialog-content, .be-modal-rename .be-modal-dialog-content, .be-modal-share .be-modal-dialog-content, .be-modal-delete .be-modal-dialog-content { padding: 0; - border-radius: var(--radius-4); + border-radius: var(--modal-border-radius, var(--radius-4)); } .be-modal-dialog-content { @@ - padding: 25px; - border-radius: $bdl-border-radius-size; + padding: 25px; + border-radius: var(--modal-border-radius, $bdl-border-radius-size);
69-73: Let the tokens drive spacing — ditch the hard-coded padding.Title/body padding tokens are defined but unused. Wire them up with fallbacks to avoid style drift.
Apply this diff outside the changed block:
.be-modal-dialog-content { @@ - padding: 25px; + /* Use body padding token; keep legacy fallback for safety */ + padding: var(--modal-body-padding, 25px); }Optionally, if you have a title region selector, apply var(--modal-title-padding, ) there too.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP (Model Context Protocol) integration is disabled
- Jira integration is disabled
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (2)
package.json(2 hunks)src/elements/common/modal.scss(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- package.json
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: tjuanitas
PR: box/box-ui-elements#4224
File: package.json:296-297
Timestamp: 2025-08-12T18:04:17.698Z
Learning: In the box-ui-elements project, the team is comfortable with raising peerDependency minimum versions when upgrading blueprint-web packages, even if it's a breaking change for consumers.
⏰ 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). (3)
- GitHub Check: lint_test_build
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: Summary
🔇 Additional comments (1)
src/elements/common/modal.scss (1)
48-81: Good shim to align with Blueprint tokens.This local token map unblocks the upgrade while you migrate to the Blueprint modal root. Clean and scoped.
jfox-box
force-pushed
the
upgrade-blueprint-web-2025-09
branch
from
a4865a6 to
d2c287e
Compare
Summary by CodeRabbit
Chores
Style