Raft 设计系统
English

组件 · 文件

FilesPanel

The list of files shared in a place, one row per file with its type, name, size and time, which opens a preview and offers Jump to Message and Download.

稳定也叫 Files, FileRow, Channel files
import { FilesPanel } from "@botiverse/raft-ui";
本页尚未翻译
译文完成之前，这里显示英文原文。 阅读英文版

The files panel lists the files shared in a place, such as #launch-week, newest first. Each row shows the file's type, its name, its size and when it was shared; clicking the row opens a preview, and two icon buttons jump to the message it came with and download it. It fills a side panel or a tab of a channel.

files/compositions/default

When to use

SituationUse
All the files shared in a channel or conversationFilesPanel
A file attached to one messageThe file card (MessageAttachment)
A file in the composer, before it is sentFilePreview, in the Composer
An image or video opened from a rowLightbox

Where the files of a place sit on a screen (a tab, a side panel or the channel details) is in Navigation and Page structure.

Anatomy

  • FilesPanel: a section on layer-canvas that fills its column. Required.
  • FilesViewport: the scroll container. Required.
  • FilesList: the column of rows, 8px apart.
  • FileRow: one file, on layer-card with a line-hairline outline and radius-container.
    • FileRowOpen: the button that covers the type, name and details and opens the preview.
      • FileThumbnail: a 36px box for the file's FilePreview, or a thumbnail through FileImage.
      • FileContent: FileName, then FileMeta with one FileMetaItem per detail (size, time), in text-mono-meta and foreground-hint.
    • FileActions: the row's FileAction icon buttons, ghost by default.
files/compositions/file-row

Variants

The file's type changes only its icon: a document, code, an archive or other file, or a thumbnail of an image or video (FilePreview).

files/compositions/file-types

States

How empty, loading and failed differ is in Feedback.

  • Empty: an EmptyState in the viewport, with a paperclip icon, No files yet, and where files come from.
  • Loading: a skeleton of rows, the same size as the rows that replace it.
  • Failed: the error at the panel's scope, with Retry, not an empty state.
  • More to load: the next page loads as people near the end of the list. A Load More button below the last row covers the case where scrolling can't trigger it.
  • Menu open: while a menu opened from one of its FileActions is up, the row lays fill-subtle over itself, the same subtle tier as its hover, so the file the menu acts on stays marked (Hover and press).
  • Not available: disable a FileAction or FileRowOpen whose action isn't available.

Content

  • Show the file name as it was uploaded, with its extension. A long name is cut off at the end of the row.
  • Give the size with its unit (184 KB) and the time as people read it elsewhere (Yesterday, 4:18 PM).

Accessibility

FilesPanel adds no Base UI primitive; its parts are a section, buttons and an image.

  • Name FilesPanel with aria-label: Files.
  • Give every FileAction an aria-label and a tooltip that say what it does: Jump to Original Message, Download File.
  • FileRowOpen is named by the file name inside it. The type drawing is decorative (FilePreview).
  • Give a thumbnail in FileImage an empty alt: the name beside it already says what the file is.

Rules

  • Make the whole row the target for the preview, and keep the actions outside FileRowOpen so each is its own button.
  • Keep FileAction at its default, a ghost 32px icon button, so the row stays quiet (Button).
  • Don't color a row by its file type (FilePreview).

API

FilesPanel, FilesViewport, FilesList, FileRow, FileRowOpen, FileThumbnail

Prop类型默认值
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

FileImage

Prop类型默认值
fit"contain" | "cover""cover"
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

FileContent, FileName, FileMeta, FileMetaItem, FileActions

Prop类型默认值
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

FileAction

Prop类型默认值
loadingboolean
loadingLabelstring
size`md` (32px) and `icon-md` for rows, cards, banners, toolbars and panel headers; `lg` and `icon-lg` (the control height) for dialog footers, forms and beside a field; `xl` for a full-width call to action. The size follows the place: see Button › Size by place."md" | "lg" | "xl" | "icon-md" | "icon-lg" | DeprecatedButtonSize"icon-md"
variant"primary" | "accent" | "warning" | "danger" | "default" | "outline" | "information" | "muted" | "success" | "danger-secondary" | "danger-outline" | "ghost" | "on-frame"
focusableWhenDisabledWhether the button should be focusable when disabled.booleanfalse
nativeButtonWhether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).booleantrue
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

相关组件

改动

  • 0.9.5 · FixedOn a touch screen, a tap no longer leaves a hover highlight on: TableBody rows, an InboxItem's pressed toggle action, the Activity inbox sort button and a FileRow (when its FileRowOpen is hovered) now only show their hover on devices that can hover. With a mouse they look and behave as before.