File List

If you need to display attachments in a page or form, use the file list component.

Demo and Developer Guidelines

Anatomy

Behavior

Links should open an overlay preview (often called a "lightbox") with download options (either individual or bulk) inside.
Core React does not have a component dedicated to previewing media today. Despite that, using an older lightbox, or even previews within the default browser, is still the preferred experience. If you can, please contribute a lightbox to help us close this gap and improve the design system!
Correct
Download options live within the overlay.
Incorrect
Design Systems does not recommend displaying download buttons in the list, either in bulk, or for individual rows. The existing Core React component offers this functionality to support legacy experiences, but if you can avoid it, please do!
Correct
File types that cannot be previewed should also open a lightbox, with an empty state explaining why a preview is unavailable.
Incorrect
Don’t treat these types of files differently. Instead, open a lightbox clearly explaining everything.

Contribution

We’re looking for support adding the following features to File List:
File name truncation, so that file names do not wrap onto many lines
File types that cannot be previewed should also open a lightbox, with an empty state explaining why a preview is unavailable.
We are also interested in accessibility improvements, specifically using the arrow keys to navigate this list instead of tab, so that keyboard users do not get trapped.

Finally, a separate lightbox component (a modal or overlay with a file preview) will help improve this experience and break away from reliance on older patterns.