Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Dec 12, 2025

Summary

Added a BEM-styled FileTree theme component with safe link handling, grid-driven collapse/expand like Sidebar, and new folder/file SVG icons exported through theme icons/index for consistent usage. Keyboard navigation (arrow keys, focus management) and break-word labels ensure accessibility and readability.

  • Component: New FileTree React component with recursive rendering, grid 1fr/0fr children animation, arrow-toggle, and safe href guarding.
  • Styling: .scss using existing theme variables and BEM blocks/elements; label overflow uses overflow-wrap: break-word.
  • Assets/Exports: Added folder/file SVGs to theme assets, re-exported in icons.ts, and surfaced FileTree from theme/index.
  • Keyboard/Focus: Arrow keys expand/collapse and move between items; first item is focusable, others receive focus via navigation.

Example usage:

<FileTree
  items={[
    { name: 'src', children: [{ name: 'index.ts', href: '/index' }] },
    { name: 'README.md', href: '/readme' },
  ]}
/>

https://github.com/user-attachments/assets/29aafc91-33dd-4bf3-aea9-c5a033dda62c

Related Issue

Checklist

  • Tests updated (or not required).
  • Documentation updated (or not required).
Original prompt

试着增加 core/theme/components/FileTree 组件

要求风格

  1. 使用 .scss,BEM,与其他组件保持风格一致
  2. 不要增加任何新的 dependencies
  3. 在 theme/assets 中增加 icon,一个文件夹的 svg,一个文件的 svg
  4. 文件夹展开的 UI 效果,仿照 Sidebar 组件中使用 grid + 1fr/0fr 切换

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@netlify
Copy link

netlify bot commented Dec 12, 2025

Deploy Preview for rspress-v2 failed. Why did it fail? →

Name Link
🔨 Latest commit dd5f7c3
🔍 Latest deploy log https://app.netlify.com/projects/rspress-v2/deploys/693bde1ce9dce90008318fdd

@CLAassistant
Copy link

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

Copilot AI changed the title [WIP] Add core/theme/components/FileTree component Add FileTree theme component with collapsible grid UI and new icons Dec 12, 2025
Copilot AI requested a review from SoonIter December 12, 2025 09:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants