InboxItem

An InboxItem is one thing that happened elsewhere and that the person should see: someone mentioned them, an agent waits for their approval, work was handed to them. An unread item has a bold title and a pink attention dot; an action it needs sits in the row. It is the row of ActivityInbox.

跟随页面浅色深色并排

When to use

Which message goes where is in Choosing a component.

Anatomy

• InboxItem: the row. Required.
• InboxItemTrigger: an invisible button that covers the whole row and opens the item. Required.
• InboxItemSelection: a Checkbox for selecting several items. Optional.
• InboxItemLeading: a 36px leading visual before the text: the person's or agent's avatar, or a channel's IconTile. The divider starts after it. Optional.
  • InboxItemLeadingBadge: the thread badge, in the bottom-right corner of the avatar or tile, holding one icon, ThreadIcon (Icons). Only on a thread row (The leading image). Optional; experimental, from @botiverse/raft-ui/wip.
• InboxItemContent: the text column. Required.
  • InboxItemContext: where it happened: a channel, a task, a computer.
  • InboxItemHeading with InboxItemTitle: what happened, with an optional 14px icon before it.
  • InboxItemSubtitle: a second line of context, such as "Thread in #launch-week".
  • InboxItemBody or InboxItemMessage: the excerpt, starting with InboxItemSender.
  • InboxItemMetadata: chips for the task, replies and mentions.
  • InboxItemHoverTarget: wraps a badge that has a tooltip, so the pointer reaches it (the rest of the text lets the pointer through to the trigger). A click on it still opens the item.
• InboxItemTrailing: InboxItemTimestamp, InboxItemActions and, while unread, the attention dot.
  • InboxItemMarks: marks at the end of the excerpt's line: a mention, muted, an unread count. Optional.

The leading image

The leading image shows the conversation the item lives in. A thread is not a conversation of its own, so its row shows the conversation the thread lives in, with the thread badge in the corner:

跟随页面浅色深色并排

• Show the conversation, not a channel shape. A # tile on a thread in a direct message would say the thread lives in a channel. The avatar says who the conversation is with, and it is the face the person already knows from that direct message.
• The badge is the same on a tile and on an avatar: the same size, in the same corner, so "this is a thread" reads the same in both columns of the list.
• On an avatar, the badge takes the presence light's corner. One corner holds one mark (Avatar). The row is about the thread, not about how the agent is doing now, so the badge wins and the thread row shows no presence light. The light stays on the direct message's own row.
• The second line doesn't repeat the leading image. In a direct message the avatar already names the other side, so "@Lagoon · Lagoon: …" says the name twice; the line starts with the latest message. A tile doesn't name its channel, so a channel thread keeps "#channel ·" before it.
• A screen reader still hears where the thread is. The row's trigger aria-label keeps the conversation's name ("Thread in a direct message with Lagoon: …") even though "@Lagoon ·" is no longer on screen, so someone who doesn't see the avatar still knows which direct message the thread belongs to.
• Until the direct message has loaded, lead with an IconTile holding DirectMessageIcon, never a # tile: the row must not claim a channel it isn't in, even for a moment.
• The thread follows its conversation's settings. A thread in a muted direct message is muted too, the same as a thread in a muted channel.

Variants

In density="compact" the timestamp and InboxItemMarks sit in InboxItemTrailing, one beside each line. The unread count there says the row is unread, so data-unread only makes the title bold and there is no attention dot. Leave data-unread off a muted conversation and show a muted mark in place of its count.

跟随页面浅色深色并排

States

跟随页面浅色深色并排

Behavior

• The trigger covers the whole row. Buttons in the row sit above it, and each one can be pressed on its own.

• Divide items with line-hairline, starting at the text, or after InboxItemLeading when there is one.

• With a mouse, show Mark as Done only while the row is hovered, holds focus, is active or has a menu open: give InboxItemActions reveal="hover". A list where every row shows its button reads as a wall of buttons, and the row itself is the main target. While the actions show they take the place of the rest of InboxItemTrailing: the timestamp, the marks and the attention dot step aside.

• On a touch screen, show Mark as Done at rest and put it in the press-and-hold menu too; a swipe may add a shortcut but never replace it (Responsive layout). reveal="hover" does this: the rest of InboxItemTrailing moves over to make room for it.

• In the default density InboxItemTrailing takes room only beside the first two lines of InboxItemContent (the context line and the title, or the title and the excerpt); the lines after them run the full width, under it. The column is about two lines tall (the timestamp and the dot, or the 32px Mark as Done), so taking room beside every line would only make a phone's narrow rows wrap more and grow taller. In density="compact" it stays beside both lines.

• data-unread turns on both the bold title and the attention dot. In the default density the dot is how an unread item reads; keep it. In density="compact" the unread count in InboxItemMarks takes its place, so the dot is off.

• The text lets the pointer through to the trigger, so a badge there gets no hover. Wrap a badge that has a tooltip in InboxItemHoverTarget.

• On a touch screen (pointer: coarse, at any width) each action in InboxItemActions keeps a 44px target and the actions spread 12px apart so their targets don't overlap; with a mouse they stay 32px, 2px apart.

跟随页面浅色深色并排

Content

• Write the context line as where it happened: #launch-week · task #25.
• Write the title as who did what, with a teammate verb: "Martin needs your OK", "Bugen handed off #25" (Writing).
• Keep the excerpt to at most 2 lines.
• On a thread row, start the second line with the channel only when the leading image is a channel's tile: "#launch-week · Mira: …". In a direct message, start it with the latest message: "Lagoon: …" (The leading image).

Accessibility

• The parts render native elements through Base UI's useRender. InboxItemTrigger is a native button; with disabled it gets aria-disabled and ignores clicks.
• Give the trigger an accessible name that names the item: aria-label="Open Martin needs your OK". Set aria-current on the trigger of the open item.
• Name the selection checkbox and every icon-only action: aria-label="Select activity item", aria-label="Mark as done".
• Actions with reveal="hover" stay in the tab order while hidden, and show as soon as focus reaches the row or them.
• The attention dot is drawn in CSS and isn't announced. Say "unread" in the trigger's name, or add a visually hidden word.
• InboxItemLeadingBadge is hidden from assistive technology. Say "thread" in the trigger's name: aria-label="Open thread with Lagoon".

Rules

• Use ink-outline small buttons for actions in the row, never pink: a list can hold several items that wait for the person at once (Button).
• Lead with who, when there is a who: the person's or agent's avatar. A notice from the system has no who; see NotificationCenter.
• Lead a thread row with the conversation it lives in: the channel's tile, or in a direct message the other side's avatar, each with the thread badge in its corner. Never give a thread in a direct message a # tile, and never show a presence light on a thread row (The leading image).