Priority row
A row of chips that gives up words in order: shorter forms first, then the least important go icon-only, before anything is cut.
import { PriorityRow, PriorityItem } from "@arcadia/ui"A row of chips and pickers that gives up words in order of importance before anything is cut. When the row runs short, its items first say the same thing in fewer characters: an item holding a FadeText or a PickerTrigger with forms steps down to its shorter forms, lowest priority first. When that is not enough, the item with the lowest priority goes icon-only, then the next, until the rest fit. The highest never goes icon-only: it shows its shortest form, then fades its end. priority="fixed" keeps an item as it is (a meter, a count); priority="flex" takes what is left and fits itself in it, down to its own minimum.
The row takes the width its parent gives it, never its items' width, and decides before it paints, so nothing jumps. It decides again when its width changes and when an item's content does (a glyph swapped, a name changed), and the top item always keeps room for the glyph and chevron it holds now. Words come back only with a few pixels to spare, so a row at the edge doesn't flicker.
Examples
Narrowing
Drag to narrow the row: the account says ada and the branch drops its namespace first; then rules, connectors and the account go to their glyphs, then the machine and the folder; the branch fades last.
Content that changes
Switch to Loaded: the picker is narrower than the placeholder it replaces, and the chip beside it moves up, since the top item's room follows what it holds.
Which gives way first
Fewer characters before fewer words, lowest priority first in both.
Every item with shorter forms takes them before any item goes icon-only: the lowest priority steps down through its forms first, then the next, and the top item last. Only then does the lowest go icon-only, then the next. A shorter form still names the value in words, so the row gives up characters before it gives up a word.
Identity keeps its words longest: the branch, the chat's title, the file name. Place comes next: the folder, a remote machine. Configuration and meta collapse first: the account, connectors, rules, the mode, this Mac. Meters and counts never collapse. A collapsed chip that needs attention keeps a warning dot on its glyph, so going icon-only never hides a problem.
rootStyle takes where the row sits (margins, flex and grid placement, size bounds) and the gap between items.
--priority-row-gap- Ref<Space>Default var(--space-2)
- Space between items (8px).
Going icon-only hides an item's words from the eye, not from the page: a chip's or a trigger's label stays its accessible name, so a screen reader hears the same control at every width. A shorter form works the same way: the full text stays in the page as the name, and the form on screen is hidden from assistive technology, so nothing is read twice. On hover, a collapsed item shows its tip, which names what it holds. Nothing moves in the tab order, and every control stays where it was.