LabeledDivider
Problem
PDS v2 has no divider, and nothing that marks a point in a stream of content. Event logs, runtime and edge logs, chat threads and agent timelines all need a labeled break: a date, a "load earlier" jump, or a state change such as "Zappy engaged". Teams currently draw these by hand.
Proposal
Net-new LabeledDivider: a horizontal rule with a pill-shaped label centered on it.
- Label is required text (for example "Text", "Yesterday", "Zappy engaged").
- Leading icon is optional (the circle, the bolt).
- Time selector: the label can be a trigger with a trailing chevron that opens a menu to jump in time (Today, Yesterday, Last week, Last month, The very beginning, Jump to a specific date). Built on the existing MenuButton, not a new menu.
- Tone: neutral (default), and agentic (AI gradient border, e.g. "Zappy engaged"). A purple
agentic-filledtone was removed 2026-10-21.
Stories: Default, With time selector (menu and date picker), Agentic (the two agentic stylings), All sizes and variants. Compositions in context are recipes: Recipes/Event log with agent and Recipes/Logs table with divider.
Source
Designer's screenshots (label variants; a Slack-style date jump menu as the time selector reference). No Figma link.
Constraints
- Tokens only; light and dark.
- Keyboard operable, visible focus. The time selector is a real button with a menu; a static label is not focusable.
- The rule is decorative. The label carries the meaning, so a static divider is
role='separator'with an accessible name from the label. - Reuse MenuButton for the selector; agentic border follows the settled
--pds-gradient-ai-activepattern.
Open questions
Settled in decisions.md: the chevron means a time selector only; the icons are prefixIcon and suffixIcon props; tones are neutral and agentic. Still open (also in decisions.md):
- Modal or popover for the date picker?
- Is a vertical orientation needed for left-to-right timelines?