0.2.2 alpha

Menu

File tree

ExperimentalGet the Figma fileBlock

A project's files in a panel, with the line it shows, a count of changes and when it was read.A block is copied, not installed: take an example's code and the stylesheet at the foot of the page, and rename the site- prefix to your project's own.

Examples

Usage

The files of one line, open on the way to the file being read, which is chosen; the header counts them and the footer says when they were read.

Files

main · 128 files · 3 changed

  • simbolik
    • components
      • card
        • card.css
        • manifest.ts
  • README.md
Updated 2 min ago
from main

Changed files

Only what changed on a line: the tree view marks each changed file and folder and counts what each folder holds.

Changes

new-checkout · 3 changed

  • src3
    • pages2changed
      • checkout.tsxchanged
      • basket.tsxchanged
      • home.tsx
    • styles1changed
      • checkout.csschanged
  • package.json
Updated just now
from new-checkout

Built from

Guidelines

Purpose

Shows a project's files in a panel beside what a reader is working on: which line of the project it shows, how many files there are and how many changed, the files as a tree to open and choose from, and when the tree was read.

When to use

  • Beside an editor, a preview or a review, where a reader moves between a project's files.

When not to use

  • For a list of a few files with no folders. Use a list.
  • For a site's pages. Use the Tree view on its own, or the site's navigation.

Usage rules

Do

  • Open the folders on the way to the file being read.
  • Say in the header which line of the project the tree shows.

Don't

  • Put two trees in one panel.
  • Let a long tree push the footer off the screen.

Anatomy

  • The panel, the Card component in its raised surface and panel layout: the header on a band, the body padded, the divider over the footer.
  • The header: the title in the small header size, a line under it with the project's line and the counts, and a menu button at its end.
  • The tree, the Tree view component, in the slot body. Past the list height it scrolls inside the panel.
  • The footer, the card's meta kind: when the tree was read, and from which line.

Behavior

The tree behaves as the Tree view does: folders open and close, one file is chosen at a time, and the arrow keys move through it. The panel takes no focus of its own.

Accessibility

What it does for you

  • The tree is one stop for the Tab key; inside it the arrow keys move, open and close, and Home and End reach its ends.
  • The chosen file is shown by its fill and its weight, never by color alone.

What you must do

  • Name the panel by its title, and the tree for what it holds, such as "Files on main".
  • Name the menu button for what it holds, such as "More file actions".

How to test

  • Tab into the tree, move through it with the arrow keys, open and close a folder, and reach its ends with Home and End; Tab again leaves it.
  • With a screen reader, the tree is read by its name, and the menu button by what it holds.
  • In a forced-color mode, the chosen file still stands out by its weight.

Keyboard

File tree keys
KeyWhat it does
Tab
Moves focus into the tree, onto the row focused last, else the chosen one, else the first; pressed again, leaves the tree.
Down ArroworUp Arrow
Moves to the next or previous row the reader can see.
Right Arrow
Opens a closed folder, or moves into an open one's first row.
Left Arrow
Closes an open folder, or moves out to the folder a row is in. In a right-to-left page Left and Right swap.
HomeorEnd
Moves to the first or the last row.
Enter
Acts on the row, and opens or closes it if it is a folder.
Space
Chooses the row without opening it.
*
Opens every folder beside the row.
Any character
Typing a row's first letters moves to it.

Source

The file tree's own layout, its classes under the site- prefix. The components inside it are drawn by the design system's stylesheet.

Stylesheet
file-tree.css
/* site-file-tree — File tree, a block: a project's files in a panel, its title saying which line it shows and how
 * many files have changed, and a footer saying when it was read. Copy it into your project and rename site- to
 * your project's own prefix. The frame is the Card component, raised surface, in its panel layout, and the tree is
 * the Tree view component; Figma draws nothing else. The block's one rule keeps a long tree inside the panel: past
 * the list height it scrolls. */

.site-file-tree__tree {
  max-block-size: var(--smbk-size-list-max-height);
  overflow-y: auto;
}