Molecule
Scope bar
What am I looking at, answered before the first row is read. 38 instances across 38 screens: exactly one per surface that has one.
Design principle 4 says tenant context is never more than a glance away, and the analyst carries 40 or more tenants: the same signal is a Tuesday at one client and an incident at another. The bar is that glance, and it is the reason the queue can be a flat list rather than forty grouped ones.
Anatomy
dark, shipped
light, the pair
.scopebara wrapping flex row with a hairline under it. That is the whole declarationchipone to four of them. Set filters first, unset ones after, and the order is the markup’s
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 whole rule. The bar wraps at every width because it is a flex row with flex-wrap and nothing in it is counted: three chips or four is a fact about the screen, and neither the count nor the window changes the bar.
Variants
| Axis | Value | The rule |
|---|---|---|
| count | three or four chips | A count, not a variant, and this is the clearest case of that rule in the product. The number of filters is a fact about the screen, and nothing in the bar changes when it goes from three to four |
| emphasis | no values | Prohibited. The bar is a place, and the chips inside it carry the only emphasis axis there is |
| alignment | no values | A right aligned action in the bar would be a control competing with the filters. Where the queue needs one it is in qfoot |
When to use it
Above a list that can be narrowed: the queue on 38 screens, and the reject dialog where the chips name what the rejection applies to.
Where she meets it. Twice a shift, and never in the middle of ruling on a case. The scope is set at the start and then left alone, which is why the bar is quiet at rest and why the caret is the only thing offering to be pressed.
Rule and anti-rule
Do
Set and unset side by side, above the list they narrow, with a hairline separating them from it.
Do not
Never states. A bar that promises to change the list and holds words you cannot press is the one mistake this component invites, and state has its own page saying the same thing from the other side.
States
It has none, and it is not interactive. The chips inside it are, and they carry their own.
dark, shipped
light, the pair
What it reads, and where it stands
| Role | Surface | Where on the component | Dark | Light |
|---|---|---|---|---|
--line-separator | line, exempt | the hairline under it, through --rule-hair |