Skip to content

Add highlighted and comment props to File and Folder components #4935

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 13 commits into
base: app
Choose a base branch
from
Open

Add highlighted and comment props to File and Folder components #4935

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
a6b9258
Add highlighted and comment props to File and Folder components
devin-ai-integration[bot] Nov 9, 2025
6416cf8
Update File and Folder layout per feedback
devin-ai-integration[bot] Nov 10, 2025
4064be6
Fix nested padding and comment positioning per feedback
devin-ai-integration[bot] Nov 10, 2025
f9e9f30
Make entire Folder row clickable while keeping title link as primary …
devin-ai-integration[bot] Nov 10, 2025
201991d
Update background highlight to use var(--accent-a4)
devin-ai-integration[bot] Nov 10, 2025
ceab878
Add flex-wrap to title and comment for better wrapping
devin-ai-integration[bot] Nov 10, 2025
6e88ffb
Update icon alignment: change items-center to items-start and wrap icons
devin-ai-integration[bot] Nov 10, 2025
4ce7709
Add underline to clickable files/folders on mobile devices
devin-ai-integration[bot] Nov 10, 2025
5568b52
Fix mobile underline to only apply to title, not comment
devin-ai-integration[bot] Nov 10, 2025
cdad070
Change underline to always show for links (both mobile and desktop)
devin-ai-integration[bot] Nov 11, 2025
8993d00
Update CSS class to match codebase conventions
devin-ai-integration[bot] Nov 11, 2025
03e2c49
ci: retry self-hosted tests
devin-ai-integration[bot] Nov 11, 2025
fd3e129
Merge branch 'app' into devin/1762720585-add-highlighted-comment-props
kgowru Nov 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 27 additions & 16 deletions packages/fern-docs/bundle/src/mdx/components/files/File.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,48 @@ export interface FileProps {
name: string;
className?: string;
href?: string;
highlighted?: boolean;
comment?: string;
}

export function File({ name, className, href }: FileProps) {
export function File({ name, className, href, highlighted = false, comment }: FileProps) {
const formattedComment = comment && !comment.trimStart().startsWith("#") ? `# ${comment}` : comment;

const content = (
<>
<FileText className="size-4 flex-shrink-0 text-(color:--grayscale-a11)" />
<span className={cn("text-default", href && "hover:underline")}>{name}</span>
<div className="w-6 h-6 shrink-0" />
<div className="flex items-start gap-2 flex-1 min-w-0">
<div className="h-5 flex items-center">
<FileText className="size-4 flex-shrink-0 text-(color:--grayscale-a11)" />
</div>
<div className="flex flex-wrap gap-2 flex-1 min-w-0 items-baseline">
<span className={cn("text-default break-words", href && "underline")}>{name}</span>
{formattedComment && (
<span className="font-mono text-xs text-(color:--grayscale-a9) break-words">
{formattedComment}
</span>
)}
</div>
</div>
</>
);

const rowClassName = cn(
"group flex items-center gap-2 p-1 rounded-3/2 transition-colors",
highlighted ? "bg-(color:--accent-a4)" : "hover:bg-(color:--grayscale-a4) hover:transition-none",
className
);

if (href) {
return (
<a
href={href}
className={cn(
"flex items-center gap-2 p-1 rounded-3/2 transition-colors hover:bg-(color:--grayscale-a4) hover:transition-none",
className
)}
>
<a href={href} className={cn(rowClassName, "no-underline")} data-highlighted={highlighted || undefined}>
{content}
</a>
);
}

return (
<div
className={cn(
"flex items-center gap-2 p-1 rounded-3/2 transition-colors hover:bg-(color:--grayscale-a4) hover:transition-none",
className
)}
>
<div className={rowClassName} data-highlighted={highlighted || undefined}>
{content}
</div>
);
Expand Down
57 changes: 44 additions & 13 deletions packages/fern-docs/bundle/src/mdx/components/files/Folder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,23 @@ export interface FolderProps {
children?: React.ReactNode;
className?: string;
href?: string;
highlighted?: boolean;
comment?: string;
}

export function Folder({ name, defaultOpen = false, children, className, href }: FolderProps) {
export function Folder({
name,
defaultOpen = false,
children,
className,
href,
highlighted = false,
comment
}: FolderProps) {
const [isOpen, setIsOpen] = useState(defaultOpen);

const formattedComment = comment && !comment.trimStart().startsWith("#") ? `# ${comment}` : comment;

const folderIcon = isOpen ? (
<FolderOpen className="size-4 flex-shrink-0 text-(color:--grayscale-a11)" />
) : (
Expand All @@ -24,29 +36,48 @@ export function Folder({ name, defaultOpen = false, children, className, href }:
<div className={cn("select-none", className)}>
<div
data-state={isOpen ? "open" : "closed"}
data-highlighted={highlighted || undefined}
onClick={() => setIsOpen(!isOpen)}
className={cn(
"fern-accordion-trigger group w-full text-left flex items-center gap-2 p-1 rounded-3/2 transition-colors hover:bg-(color:--grayscale-a4) hover:transition-none"
"fern-accordion-trigger group w-full text-left flex items-center gap-2 p-1 rounded-3/2 transition-colors cursor-pointer",
highlighted ? "bg-(color:--accent-a4)" : "hover:bg-(color:--grayscale-a4) hover:transition-none"
)}
>
<button
type="button"
onClick={() => setIsOpen(!isOpen)}
onClick={(e) => {
e.stopPropagation();
setIsOpen(!isOpen);
}}
aria-expanded={isOpen}
className="cursor-pointer"
className="w-6 h-6 flex items-center justify-center shrink-0 cursor-pointer"
>
<ChevronRight className="fern-accordion-trigger-arrow" />
</button>
{folderIcon}
{href ? (
<a href={href} className={cn("text-default", "group-hover:underline")}>
{name}
</a>
) : (
<span className="text-default">{name}</span>
)}
<div className="flex items-start gap-2 flex-1 min-w-0">
<div className="h-5 flex items-center">{folderIcon}</div>
<div className="flex flex-wrap gap-2 flex-1 min-w-0 items-baseline">
{href ? (
<a
href={href}
onClick={(e) => e.stopPropagation()}
className={cn("text-default break-words", "underline")}
>
{name}
</a>
) : (
<span className="text-default break-words">{name}</span>
)}
{formattedComment && (
<span className="font-mono text-xs text-(color:--grayscale-a9) break-words">
{formattedComment}
</span>
)}
</div>
</div>
</div>
{isOpen && children && (
<div className="relative ml-2 pl-2 space-y-1 before:content-[''] before:absolute before:left-0 before:top-2 before:bottom-2 before:border-l before:border-border-default">
<div className="relative ml-4 pl-2 space-y-1 before:content-[''] before:absolute before:left-0 before:top-2 before:bottom-2 before:border-l before:border-border-default">
{children}
</div>
)}
Expand Down
Loading