Skip to content

fix(create-task-modal): migrate checkbox tooltip icon to bp#4518

Merged
mergify[bot] merged 6 commits intobox:masterfrom
kduncanhsu:fix/checkbox-tooltip-wcag
Apr 28, 2026
Merged

fix(create-task-modal): migrate checkbox tooltip icon to bp#4518
mergify[bot] merged 6 commits intobox:masterfrom
kduncanhsu:fix/checkbox-tooltip-wcag

Conversation

@kduncanhsu
Copy link
Copy Markdown
Contributor

@kduncanhsu kduncanhsu commented Apr 27, 2026

Migrate the checkbox info badge to Blueprint within the Create Task Modal. Also added an aria-label to the badge so that the tooltip text is read by screen readers.

BEFORE
Screenshot 2026-04-27 at 4 31 20 PM

Screenshot 2026-04-27 at 4 31 08 PM

AFTER
Screenshot 2026-04-27 at 4 31 32 PM

Screenshot 2026-04-27 at 4 30 00 PM

Summary by CodeRabbit

  • Style
    • Updated checkbox tooltip icon styling with improved visual appearance.

reneshen0328 and others added 2 commits April 27, 2026 15:30
* feat(content-sharing): Display pending collab

* fix: improve collab code

---------

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
@kduncanhsu kduncanhsu requested review from a team as code owners April 27, 2026 23:28
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 27, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: acabebec-a952-47a5-a350-d08068d408f4

📥 Commits

Reviewing files that changed from the base of the PR and between 18522fc and 67a654f.

⛔ Files ignored due to path filters (1)
  • i18n/en-US.properties is excluded by !i18n/**
📒 Files selected for processing (1)
  • flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js
🚧 Files skipped from review as they are similar to previous changes (1)
  • flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js

Walkthrough

The pull request replaces the IconInfo component with the InfoBadge icon in the Checkbox tooltip, adds corresponding Flow type declarations, removes unnecessary styles, and improves accessibility with an aria-label attribute.

Changes

Cohort / File(s) Summary
Type Declarations
flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js
Added Flow type stub export for InfoBadge icon component from the @box/blueprint-web-assets/icons/Fill module.
Component Implementation
src/components/checkbox/CheckboxTooltip.tsx
Replaced IconInfo component with InfoBadge, removed react-intl integration, added aria-label for accessibility, and applied bdlBoxBlue theme color to the icon.
Styling Cleanup
src/components/checkbox/Checkbox.scss
Removed layout sizing, positioning, and SVG path color fill styles from .checkbox-tooltip-wrapper > .info-tooltip selector, retaining only margin-left: 5px.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

Suggested labels

ready-to-merge

Suggested reviewers

  • tjuanitas
  • shahzadaziz
  • jfox-box

Poem

🐰 The InfoBadge hops in with flair,
Replacing icons with proper care,
Styles trimmed clean, a11y enhanced,
This rabbit approves of the dance! ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change: migrating a checkbox tooltip icon to Blueprint, which aligns with all three modified files (Flow types, SCSS styling, and checkbox component).
Description check ✅ Passed The description provides clear context about the migration, includes accessibility improvements (aria-label), and contains helpful before/after screenshots demonstrating the visual changes.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with 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.

❤️ Share

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

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
src/elements/content-sharing/utils/convertCollaborators.ts (1)

3-3: Prefer an explicit status allow-list in convertCollab.

Reject-only filtering can unintentionally pass unknown statuses. Safer to allow only accepted and pending.

Suggested diff
-import { INVITEE_ROLE_OWNER, STATUS_ACCEPTED, STATUS_PENDING, STATUS_REJECTED } from '../../../constants';
+import { INVITEE_ROLE_OWNER, STATUS_ACCEPTED, STATUS_PENDING } from '../../../constants';
@@
-    if (!collab || collab.status === STATUS_REJECTED) {
+    if (!collab || (collab.status !== STATUS_ACCEPTED && collab.status !== STATUS_PENDING)) {
         return null;
     }

Also applies to: 29-31

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/elements/content-sharing/utils/convertCollaborators.ts` at line 3, The
current convertCollab logic uses reject-only filtering (e.g., only excluding
STATUS_REJECTED), which can allow unknown statuses; update the function(s) named
convertCollab (and the other similar block around the code that references
STATUS_ACCEPTED/STATUS_PENDING at the same area) to use an explicit allow-list
of statuses — only accept STATUS_ACCEPTED and STATUS_PENDING — when mapping
collaborator status, and treat anything else as invalid/ignored; keep existing
owner handling (INVITEE_ROLE_OWNER) intact and ensure both occurrences that
currently check statuses (the convertCollab path and the similar 29–31 block)
are changed to this allow-list approach.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/checkbox/CheckboxTooltip.tsx`:
- Line 4: The import of InfoBadge in CheckboxTooltip.tsx is using the wrong
module path; replace the current import from
'@box/blueprint-web-assets/icons/Fill' with the correct module
'@box/blueprint-web-assets/icons/Medium' so that the InfoBadge symbol is
resolved per the Flow stub; update the import statement that references
InfoBadge in the CheckboxTooltip component accordingly.

---

Nitpick comments:
In `@src/elements/content-sharing/utils/convertCollaborators.ts`:
- Line 3: The current convertCollab logic uses reject-only filtering (e.g., only
excluding STATUS_REJECTED), which can allow unknown statuses; update the
function(s) named convertCollab (and the other similar block around the code
that references STATUS_ACCEPTED/STATUS_PENDING at the same area) to use an
explicit allow-list of statuses — only accept STATUS_ACCEPTED and STATUS_PENDING
— when mapping collaborator status, and treat anything else as invalid/ignored;
keep existing owner handling (INVITEE_ROLE_OWNER) intact and ensure both
occurrences that currently check statuses (the convertCollab path and the
similar 29–31 block) are changed to this allow-list approach.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 569bbe8b-5bf3-41d6-8eb4-abe4f8bdd68b

📥 Commits

Reviewing files that changed from the base of the PR and between 775676a and 18522fc.

📒 Files selected for processing (7)
  • flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js
  • src/common/types/core.js
  • src/components/checkbox/Checkbox.scss
  • src/components/checkbox/CheckboxTooltip.tsx
  • src/constants.js
  • src/elements/content-sharing/utils/__tests__/convertCollaborators.test.ts
  • src/elements/content-sharing/utils/convertCollaborators.ts
💤 Files with no reviewable changes (1)
  • src/components/checkbox/Checkbox.scss

Comment thread src/components/checkbox/CheckboxTooltip.tsx
jmcbgaston
jmcbgaston previously approved these changes Apr 28, 2026
reneshen0328 and others added 2 commits April 27, 2026 18:10
* feat(content-sharing): Display pending collab

* fix: improve collab code

---------

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
@mergify
Copy link
Copy Markdown
Contributor

mergify Bot commented Apr 28, 2026

Merge Queue Status

  • Entered queue2026-04-28 22:14 UTC · Rule: Automatic strict merge
  • Checks skipped · PR is already up-to-date
  • Merged2026-04-28 22:15 UTC · at 57ee9468d3d690a69d06af55e04e64d7cc002435 · squash

This pull request spent 13 seconds in the queue, including 1 second running CI.

Required conditions to merge

@mergify mergify Bot merged commit 200e6ea into box:master Apr 28, 2026
8 of 9 checks passed
@mergify mergify Bot removed the queued label Apr 28, 2026
@kduncanhsu kduncanhsu deleted the fix/checkbox-tooltip-wcag branch April 28, 2026 22:18
kduncanhsu added a commit to kduncanhsu/box-ui-elements that referenced this pull request Apr 28, 2026
* feat(content-sharing): Display pending collab (box#4509)

* feat(content-sharing): Display pending collab

* fix: improve collab code

---------

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* fix(create-task-modal): migrate badge to bp

* feat(content-sharing): Display pending collab (box#4509)

* feat(content-sharing): Display pending collab

* fix: improve collab code

---------

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

* fix(create-task-modal): fix import

---------

Co-authored-by: Rene Shen <96209918+reneshen0328@users.noreply.github.com>
Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants