facebook / facebook/astryx

Generalize XDSLightbox to host arbitrary React content (rich previews)

Open
#2,486 1 comment 0 reactions 0 assignees View on GitHub
component enhancement
Dominant language
TypeScript
Stars
13k
Forks
1.1k
Avg merge
1d 15h
Merged PRs (30d)
690

Description

## Context

Follow-up from PR #2474 (template preview dialog). Reviewer (@cixzhang) suggested the prev/next navigation chrome in `TemplatePreviewDialog` overlaps with `XDSLightbox`'s gallery mode and could potentially live in `XDSLightbox` instead.

## Current limitation

`XDSLightbox` already supports gallery mode with controlled `index` + `onIndexChange` and built-in prev/next navigation + keyboard arrows — which is exactly the pattern `TemplatePreviewDialog` reimplements. However, its `media` prop only accepts:

```ts
interface XDSLightboxMedia {
src: string;
alt: string;
caption?: ReactNode;
type?: 'image' | 'video';
}
```

It cannot host an arbitrary React subtree, which the template preview needs (a live template rendered inside a nested `XDSAppShell`, plus a metadata footer with a copy-command button and an Open-in-Playground action).

## Proposal

Generalize `XDSLightbox` to accept rich `ReactNode` content items (e.g. a `content`/`children` variant alongside `media`), so callers can reuse its gallery navigation, keyboard handling, scroll lock, and backdrop/Escape behavior for non-media previews. This would let `TemplatePreviewDialog` (and future rich previews) drop their hand-rolled fixed nav arrows + `keydown` handling.

## Scope notes

- Keep image/video zoom-pan behavior unchanged for `type: 'image'` media.
- Allow per-item footer/caption as `ReactNode`.
- Preserve controlled `index`/`onIndexChange` API.

Linking PR: #2474

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.