Add highlighted and comment props to File and Folder components #4935
+71
−29
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
- Add optional highlighted prop to visually emphasize files/folders with accent background - Add optional comment prop to display explanatory text with code-style formatting - Implement grid layout for proper icon alignment (file icons now align with folder icons) - Use bg-(color:--accent-a4) for highlighting to match code block line highlighting - Use text-(color:--grayscale-a9) for comments to match code block comment styling - Auto-prefix comments with '# ' if not already present - Add data-highlighted attribute for styling hooks - Maintain accessibility structure from PR #4926 (no nested interactive elements) 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
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
Contributor
🌱 Smoke Test PreviewTesting branch changes with smoke test content:
🕷️ Smoke Test Crawler ResultsPages crawled: 29 🎉 All pages loaded successfully with no errors! |
Contributor
🔍 Oculus Evaluation ResultsSuite: Summary
Breakdown by Category
📊 View Failed Questions (6)1. How do I add custom code to my Ruby SDK?
2. What are the design principles behind the Fern Ruby SDK?
3. How do I embed a YouTube video in my Fern documentation?
4. How do I configure header-based API versioning in my Fern api.yml file?
5. How do I enable product switching for my documentation site and what are the requirements?
6. Which .NET Framework versions are supported by Fern-generated SDKs for Unity development?
📎 View full results in workflow artifacts Tested against: https://prodferndocs-8jy16mqzr-buildwithfern.vercel.app |
- Change from grid to flex layout for both components - Make chevron click target 24px x 24px and center-aligned - Group icon, name, and comment in inner flex container - Remove truncation/ellipsis - file names and comments now fully visible - Increase nested file/folder left padding from pl-2 to pl-4 (16px) - Keep ml-auto on comments to right-align them Co-Authored-By: Colton Berry <[email protected]>
- Change nested container from ml-2 pl-4 to ml-4 pl-2 - Remove ml-auto from comment spans in both File and Folder - Comments now appear right next to file/folder names instead of right-aligned Co-Authored-By: Colton Berry <[email protected]>
…action - Add onClick to row div to toggle expand/collapse - Add stopPropagation to chevron button to prevent double toggles - Add stopPropagation to title link so navigation takes precedence over toggle - Add cursor-pointer to row to indicate clickability Co-Authored-By: Colton Berry <[email protected]>
- Replace hover:underline and [@media(hover:none)]:underline with just underline - Apply to both File and Folder components - Underline now always visible when href exists, not just on hover Co-Authored-By: Colton Berry <[email protected]>
- Change bg-[var(--accent-a4)] to bg-(color:--accent-a4) - Apply to both File and Folder components - Matches existing pattern used for other color utilities Co-Authored-By: Colton Berry <[email protected]>
Co-Authored-By: Colton Berry <[email protected]>
vercel
bot
temporarily deployed
to
Preview – prod-assets.ferndocs.com
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.
Add highlighted and comment props to File and Folder components
This PR adds two new optional props to the File and Folder MDX components:
highlighted?: boolean- Visually emphasizes files/folders with an accent backgroundcomment?: string- Displays explanatory text adjacent to the file/folder name with code-style formattingAdditionally implements several layout and interaction improvements based on iterative feedback.
What was the motivation & context behind this PR?
Users requested the ability to highlight specific files/folders and add explanatory comments in documentation, similar to how code blocks support line highlighting and inline comments. This enhances the ability to draw attention to important files and provide context directly in file tree visualizations.
Implementation details
New props:
highlighted- Usesbg-(color:--accent-a4)for background color (updated frombg-[var(--accent-a4)]to match codebase conventions), withdata-highlightedattribute for styling hookscomment- Auto-prefixed with "# " if not already present, styled with monospace font and muted gray color (text-(color:--grayscale-a9))Layout changes:
h-5) with flex centering for consistent alignmentflex-wrapanditems-baselinefor multi-line supportitems-centertoitems-startfor proper multi-line alignmentbreak-wordsutility for long text handlingml-2→ml-4)Interaction improvements:
no-underlineto File outer anchor to prevent underline propagation to commentHow has this PR been tested?
What should reviewers focus on?
Folder interaction patterns:
Text wrapping behavior:
break-wordsutility exists and worksIcon alignment:
Underline visibility:
CSS compatibility:
bg-(color:--accent-a4)renders correctly (custom Tailwind token syntax)Edge cases:
Known risks:
Link to Devin run: https://app.devin.ai/sessions/f32f9e0085974d17af5201045de6a0cb
Requested by: Colton Berry (@coltondotio)
Feedback from: Kapil (@kapilsinha)