MessageForwardedBundle

A card with the messages someone forwarded: a Forwarded header with the count and where they came from, then each message with its author, time, text and attachments. It is built on MessageEmbed and sits in MessageItemEmbedded, under the body of the message that forwarded it (MessageItem). Long bundles fold on their own.

跟随页面浅色深色并排

When to use

Anatomy

• MessageForwardedBundle: the card. Required.
• MessageForwardedBundleHeader: the top row; it wraps on a narrow column. Required.
  • MessageForwardedBundleHeaderContent, with MessageForwardedBundleHeaderLabel (an icon and Forwarded) and MessageForwardedBundleHeaderCount (in Space Mono, foreground-hint).
  • The source, at the end of the row: MessageForwardedBundleSource when it can be opened, MessageForwardedBundleSourceLabel when it can't. Optional.
• MessageForwardedBundleItems: the list of messages, and the part that folds. Required.
• MessageForwardedBundleItem: one forwarded message. At least 1.
  • MessageForwardedBundleItemMeta: MessageForwardedBundleItemAuthor, then the time in Space Mono.
  • MessageForwardedBundleItemContent: the text. Required: the fold measures only this part.
  • MessageForwardedBundleAttachments: MessageForwardedBundleAttachment chips (MessageForwardedBundleAttachmentName, MessageForwardedBundleAttachmentMeta), and MessageForwardedBundleGallery with a MessageForwardedBundleGalleryTile per image. Optional.
• MessageForwardedBundleFooter with MessageForwardedBundleFooterAction: the action that unfolds the list. Optional.

Variants

跟随页面浅色深色并排

跟随页面浅色深色并排

跟随页面浅色深色并排

跟随页面浅色深色并排

Behavior

• The card is at most 544px wide, and narrower when the column is.
• By default the bundle folds itself: when the text of all items together runs past foldLineLimit lines (8), the list is cut at that height and fades out at the bottom into layer-card.
• The footer shows only while the list is folded. Its action unfolds the list and folds it again; expandedContent is its label while unfolded.
• The bundle measures again when content arrives or the width changes. Once the person has folded or unfolded it, it stays as they left it, unless the content no longer needs folding.
• Pass collapsed to MessageForwardedBundleItems to control the fold yourself, as a detail view that shows everything does. The footer then always renders, and you label it.
• To make the footer action open a detail view instead of unfolding, call preventDefault in its onClick.
• MessageForwardedBundleGallery lays images in rows of 3, and 4 images as 2 rows of 2, at the sizes of a message's own gallery (MessageAttachment).

Content

• Label the header Forwarded, and give the count in Space Mono: "3 messages".
• Write the source as "from #launch-week", with "· thread" when it is a thread.
• Show a source only when the person may see it; leave it out for a direct message, a private channel or a missing source.
• Name each author by their display name, not a handle (Writing).
• Label the footer action with what it does, in Title Case: Show All 6 Messages, then Collapse.
• Give each attachment chip its file name and type: "release-notes.md · markdown".
• An attachment chip takes 5.5px before its icon and 6.5px after its text, 12px in all as before: a file icon is drawn 1.75px inside its box, so its ink and the last letter both sit about 7.2px from the edges (Alignment).

Accessibility

• The parts are plain elements built with Base UI useRender; each MessageForwardedBundleItem is an <article>.
• MessageForwardedBundleSource is a <button>. When it navigates, render it as an <a> with an aria-label that names the place: "Open source thread in #launch-week".
• While the bundle owns the fold, MessageForwardedBundleFooterAction sets aria-expanded. With collapsed, set it yourself.
• Put each item's time in a <time> element with its dateTime.
• interactive on MessageForwardedBundleAttachment only adds the hover and focus look. Render the chip as a <button> or <a> that opens the file, with an aria-label such as "Open release-notes.md".
• Give gallery images an alt as in MessageAttachment.

Rules

• Wrap each item's text in MessageForwardedBundleItemContent: text outside it isn't measured, and the bundle won't fold.
• Don't render a bundle with no items.