# File tree
A project's files in a panel, with the line it shows, a count of changes and when it was read.
A block: a ready-made arrangement of components, to copy into a project. Its own classes carry the `site-` prefix; rename it to your project's own. Status: experimental. Figma: the Figma file, https://www.figma.com/community/file/1688324308358870630. Built from: Card, Button, Icon, Tree view, Divider.
## 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.
```html
- simbolik
- components
- tokens
- color.tokens.json
- space.tokens.json
- README.md
```
```tsx
import { Card, CardHeader, CardFooter, CardBody } from './design-system/components/card/card.js';
import { Button } from './design-system/components/button/button.js';
import { TreeView, TreeItem } from './design-system/components/tree-view/tree-view.js';
} />} footer={}>
```
### Changed files
Only what changed on a line: the tree view marks each changed file and folder and counts what each folder holds.
```html
- src3
- pages2changed
- checkout.tsxchanged
- basket.tsxchanged
- home.tsx
- styles1changed
- package.json
```
```tsx
import { Card, CardHeader, CardFooter, CardBody } from './design-system/components/card/card.js';
import { Button } from './design-system/components/button/button.js';
import { TreeView, TreeItem } from './design-system/components/tree-view/tree-view.js';
} />} footer={}>
```
## 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.
## 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.
## 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.
## 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
| Key | What 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 Arrow or Up 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. |
| Home or End | 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. |
## 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.
## Stylesheet
```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;
}
```