ThreadPanel

ThreadPanel shows the replies to one message beside the conversation it belongs to. It is not a narrower conversation panel: its header names the thread and where it is, the original message comes first, and it has no tabs.

When to use

Anatomy

• ThreadPanelRoot: the panel. It is a Panel with edge="attached", so it draws its own left seam.
• ThreadPanelHeader: the 56px header, built on PanelHeaderRoot.
  • ThreadPanelTitle: the title, "Thread", followed by ThreadPanelTitleMeta for where the thread is.
  • ThreadPanelActions: PanelAction buttons. The last one is the × (Navigation).
• ThreadPanelContent: everything under the header.
  • ThreadPanelSearch, with ThreadPanelSearchTrailing and ThreadPanelSearchCount: an optional row for searching within the thread.
  • ThreadPanelOriginalMessage: the message the thread replies to, with a hairline under it. The hairline is a boundary: it sits a section step, 24px, under the message's last line, and the replies start a section step under it (ThreadPanelReplySummary) (Timeline rhythm).
  • ThreadPanelBody: the scrolling replies. ThreadPanelReplySummary and ThreadPanelReplyCount head the list of replies.
  • ThreadPanelFooter: the composer (Composer), with no space of its own above it, as in ConversationPanel.

Behavior

• A thread and a profile can be open together: a profile opened from the thread sits beside it, and a profile opened from the conversation replaces it (Page structure).
• Its width is in Spacing. When it sits beside the conversation and when it covers it is the product's rule (Raft Chat).
• On a phone the thread is a pushed page: the same panel covers the conversation, with Back instead of the ×, and the tab bar stays hidden, as under the conversation (Responsive layout). On desktop it covers the conversation the same way when there isn't room beside it.

Content

• Title the panel "Thread".
• Say in the header where the thread is and how many replies it has: "#launch-week · 3 replies".

Accessibility

• ThreadPanelRoot renders a section. Name it with aria-label="Thread".
• ThreadPanelTitle renders an h2.
• Give every icon-only action an aria-label: "Search in Thread", "Close Thread".

Rules

• Don't add tabs to a thread. It holds the original message, the replies and the composer, nothing else.
• Leave 20px above the original message. The hover toolbar rides on a message's top edge (MessageItem); the original message is the first item in the scroll area, so with less room the toolbar is cut off and looks pinned under the header.
• Separate the original message from the replies with a line-hairline, not a seam: both are content of the same panel.