feat(preview): use @box/item-icon markdown icon for loading screen by mickr · Pull Request #4646 · box/box-ui-elements

mickr · 2026-06-23T22:55:05Z

Summary

Markdown files (md, markdown, mdown) on the preview loading screen previously rendered the legacy IconFileCode content icon. This switches them to the dedicated markdown icon from @box/item-icon.

Changes

Bump @box/item-icon ^2.37.5 → ^3.2.0 (resolves to 3.2.2). The markdown file category / icon was introduced in 3.2.0; 2.x only had code.
Register itemIconTable.markdown for md, markdown, mdown in previewIcons.ts (previously these fell under IconFileCode).
Update PreviewLoading tests: assert the markdown icon for those extensions, and that HTML still uses the code icon.
yarn.lock change limited to the single @box/item-icon resolution (lockfile stays v1).

Test plan

PreviewLoading unit tests pass (11/11)
ItemTypeIcon (other in-repo @box/item-icon consumer) passes under the major bump (7/7)
Verified rendering in EndUserApp via local link

🤖 Generated with Claude Code

Summary by CodeRabbit

New Features
- Updated the preview icon mapping so .md, .markdown, and .mdown use a dedicated Markdown icon (while .html continues to use the code icon)
Tests
- Expanded preview rendering tests to verify the extension-to-icon behavior for Markdown aliases and HTML
Chores
- Updated the icon package dependency to version 3.2.0

Markdown files (md, markdown, mdown) on the preview loading screen previously rendered the legacy IconFileCode content icon. Switch them to the dedicated markdown icon from @box/item-icon. Bump @box/item-icon ^2.37.5 -> ^3.2.0 (resolves 3.2.2); the markdown file category/icon was added in 3.2.0, 2.x only had code. Register itemIconTable.markdown for those extensions in previewIcons.ts and update PreviewLoading tests (markdown for md/markdown/mdown, code still for html). PREVIEW-739 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

coderabbitai · 2026-06-23T22:55:21Z

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: 0b55ca83-2d7b-4fac-bd7c-8d2a7d381639

📥 Commits

Reviewing files that changed from the base of the PR and between 3e4b23d and e8c1dee.

⛔ Files ignored due to path filters (1)

yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (1)

package.json

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

package.json

Walkthrough

Updates @box/item-icon to ^3.2.0, retypes preview icon entries to ComponentType, remaps markdown extensions to a dedicated markdown icon, and adds tests for the new mapping and the existing html behavior.

Changes

Markdown Icon Registration and @box/item-icon Upgrade

Layer / File(s)	Summary
Icon contract and markdown mapping `package.json`, `src/components/preview/previewIcons.ts`	`@box/item-icon` is bumped in both dependency sections. `Icon` is retyped to `ComponentType<{ className?: string }>`, `md` is removed from the code-icon list, and `md`/`markdown`/`mdown` are mapped to `itemIconTable.markdown` with preview-blue color.
PreviewLoading icon assertions `src/components/preview/__tests__/PreviewLoading.test.tsx`	Imports are updated to use `itemIconTable` and `IconFileCode`. New tests verify the markdown extensions map to the markdown icon and `html` still maps to the code icon.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

box/box-ui-elements#4490: Also updates package.json for an @box/item-icon version change.

Suggested reviewers

jfox-box
tjiang-box

Poem

🐰 A little md hopped off the code icon trail,
And found a markdown home with a blue-tinted tail.
The icon version climbed, neat and spry,
While tests said “html still passes by.”

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is well-formed, but it does not follow the repository's required ready-to-merge checklist template.	Rewrite the PR description to match the template's label/approval/merge-queue checklist, or update the template if it is no longer required.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main change: switching preview markdown files to the dedicated item-icon markdown icon.
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
Commit unit tests in branch mickryan/PREVIEW-739-preview-markdown-icon

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

socket-security · 2026-06-23T22:55:58Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/@box/item-icon@2.37.5 ⏵ 3.2.2	⁺¹		⁺¹

View full report

jpan-box

straightforward!

mergify · 2026-06-24T15:14:21Z

Queued — the merge queue status continues in this comment ↓.

mergify · 2026-06-24T15:14:26Z

mickr requested a review from a team as a code owner June 23, 2026 22:55

ahorowitz123 approved these changes Jun 24, 2026

View reviewed changes

jpan-box approved these changes Jun 24, 2026

View reviewed changes

mickr assigned mickr and unassigned mickr Jun 24, 2026

mickr added the ready-to-merge label Jun 24, 2026

mergify Bot added the queued label Jun 24, 2026

Merge branch 'master' into mickryan/PREVIEW-739-preview-markdown-icon

e8c1dee

mergify Bot merged commit ec9c883 into master Jun 24, 2026
14 checks passed

mergify Bot deleted the mickryan/PREVIEW-739-preview-markdown-icon branch June 24, 2026 15:27

mergify Bot removed the queued label Jun 24, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(preview): use @box/item-icon markdown icon for loading screen#4646

feat(preview): use @box/item-icon markdown icon for loading screen#4646
mergify[bot] merged 2 commits into
masterfrom
mickryan/PREVIEW-739-preview-markdown-icon

mickr commented Jun 23, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jun 23, 2026 •

edited

Loading

❌ Failed checks (1 warning)

Uh oh!

socket-security Bot commented Jun 23, 2026 •

edited

Loading

Uh oh!

jpan-box left a comment

Uh oh!

mergify Bot commented Jun 24, 2026 •

edited

Loading

Uh oh!

mergify Bot commented Jun 24, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

mickr commented Jun 23, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Test plan

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

socket-security Bot commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jpan-box left a comment

Choose a reason for hiding this comment

Uh oh!

mergify Bot commented Jun 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mergify Bot commented Jun 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge Queue Status

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mickr commented Jun 23, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 23, 2026 •

edited

Loading

socket-security Bot commented Jun 23, 2026 •

edited

Loading

mergify Bot commented Jun 24, 2026 •

edited

Loading

mergify Bot commented Jun 24, 2026 •

edited

Loading