Organism

Pane foot

This is where the analyst rules. Accept, Amend, Reject, Escalate: four buttons that carry the main job of the whole product between them, and 86 of the product’s 157 buttons stand here. 35 instances across 35 screens.

It is sticky at the bottom of the pane, so the decision is reachable without scrolling back from the end of nine signals. margin-top:auto pushes it down when the case is short, position:sticky holds it when the case is long, and a ruling that has to be scrolled to is a ruling that gets postponed.

Sticky and never stuck, twice over, and both were found by measurement. At the desk, min-height:100vh on the shell let it grow with its content, so there was no scroll container for bottom:0 to resolve against; the shell is pinned to exactly one viewport now and the columns scroll instead of the page. At 360 the shell stops scrolling and the document takes over, but the pane kept its own overflow-y:auto, so bottom:0 pinned to a box that never scrolls and the decision sat two viewports down. Node 4.2 had found that and fixed it privately for one screen; every other pane kept the defect until stage 07.

Anatomy

What the bench is standing in. A 340px box at --pane-w with the pane’s ground and its own overflow-y, which is z5. bottom:0 resolves against the nearest scrolling ancestor and nothing else, so a bench that did not scroll would show a foot standing still and prove the opposite of the component. Scroll inside it: the evidence moves, the four buttons do not.

• .pane-footthe strip. A wrapping flex row with two steps of gap, three of padding down and four across, and an edge above it
• margin-top:autoit sits at the bottom of the pane even when the case is two paragraphs long, rather than floating under the last line
• position:sticky; bottom:0the declaration the component exists for. It resolves against z5, and only while z5 is the thing that scrolls
• background:inheritthe foot takes the pane’s own surface, whichever it is. A paper pane and a console pane both get a foot that matches, and neither needs a variant
• .btnone to four of them. The first is --primary and carries the accepted verdict; the rest are outline, and each carries its key

Behaviour at width

Below 1280, the system's one point (Width), the padding drops from --space-3 --space-4 to --space-2 --space-3. That is the one line this file writes at width. The sticky is unchanged; what changes is the box it resolves against, because the shell releases its scroll at the point and the document takes it back. Both halves of that were found by measurement: at the desk the foot pinned to nothing because the shell grew with its content, and below the point it pinned to a pane that never scrolled and the decision sat two viewports down.

Variants

The verdict foot, and it arranges itself

A count of four is the one count that changes the arrangement. Below four the strip is a row: nothing on it is competing with anything, and every button is the same size. At four the main action takes the whole first line and the three that qualify it share the second, because Accept carries the job this product is built around and a quarter of a strip is not what that looks like. It is conditioned on the count rather than written as a variant, which is why the file still says it has none.

It is also taller. The strip that holds a single Open the log and the strip where the analyst rules on a case were sharing one padding, and the second is the point of its screen. Six screens in the product carry the four button set.

When to use it

At the bottom of a detail pane that is asking for a decision, and only there. The route decides how many buttons: four on a case, two on the permalink, one on a shift that has been sealed, none on a record.

Where she meets it. Dozens of times a shift, at the end of every case she reads. This is the strip that carries the main job in the whole product, and design principle 3 is measured against it: accept costs two taps and reject costs four, and the fourth is Enter rather than a confirmation. The fifth is what nothing after this stage may add.

Rule and anti-rule

Limits

Rules of composition and context, which no anti-rule can carry: nothing else is the right component to take, and what is wrong is the count or the neighbour. Counted on the grey corpus at stage 09, and every one of them is a function in design/kit/checks/rules.mjs. Full table with sources on Architecture.

• R1. Not more than one .btn--primary per layer, and a foot does not compete with it. A second is allowed only as the viewport twin of the first, or in a modal layer over the screen.

States

The strip has none. The buttons carry theirs. Point at one, hold it down, tab along the row. What the strip has instead is a failure mode, and it is below.

The one thing worth drawing here is the defect, and it is not a class. Below is the same foot in a pane that keeps its own overflow-y and has no height to be constrained by, inside something else that scrolls. bottom:0 resolves against a box that never moves, so the strip is not sticky at all: it sits at the end of the evidence, and the buttons are wherever the argument happened to finish. This is what the product did at 360 on every pane but one until stage 07. Scroll to find the ruling.

Out of reach is shown rather than hidden, and the third button in the first bench is one of the 5 in the product. A control that cannot be used stays visible with the ceiling stated, because a hidden control teaches nothing. That rule belongs to btn; the foot is where the analyst meets it.

What it reads, and where it stands

Copy this

Where it stands