Add highlighted and comment props to File and Folder components #1877
+272
−0
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Co-Authored-By: Colton Berry <[email protected]>
Contributor
Author
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
Contributor
- Add custom File, Folder, and Files components with grid layout for proper icon alignment - Add highlighted prop to visually emphasize files/folders - Add comment prop to display explanatory text on the right - Add custom CSS for highlighting and comment styling - Fix icon alignment so file icons align with folder icons Co-Authored-By: Colton Berry <[email protected]>
Contributor
- Replace CSS classes with inline styles to ensure visibility - Add backgroundColor inline style for highlighted prop - Add color and opacity inline styles for comment text - This ensures the styling works regardless of CSS class support Co-Authored-By: Colton Berry <[email protected]>
Contributor
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Implement highlighted and comment props for File and Folder components
Summary
Implemented custom MDX component overrides for
<Files>,<Folder>, and<File>components to support two new optional props:highlighted(boolean): Visually emphasizes files/folders with a yellow backgroundcomment(string): Displays explanatory text to the right of items with "# " prefixChanges include:
fern/components/(File.tsx, Folder.tsx, Files.tsx)grid-cols-[24px_24px_1fr_auto]) to fix icon alignmentbackgroundColor: 'rgba(255, 235, 59, 0.15)') and comments (color: '#6b7280')Review & Testing Checklist for Human
experimental.mdx-components: - ./componentsis working correctly and the custom components are being used instead of built-in Fern componentsTest Plan
Notes