Skip to main content

Message scroller

A scrolling list of messages that keeps the newest in view.

Left out of Content first Readers need sections, navigation and little else. It keeps live chat in view, and people here read from start to end. Use instead: Pagination

See it live​

Start Storybook to see it live: npm run storybook
Live from StorybookOpen Message scroller in StorybookSee it in dark

When to use it​

  • Use it when: A live conversation where new messages arrive at the bottom.
  • Not when: A static list (a scroll area).

Instead:

Words​

  • Write to one person: "you", not "users".
  • Short sentences with room to breathe.
  • Explain why before asking for anything.
  • Use: Read, Save for later, You, Next issue. Avoid: Click here, Submit, Users, Content.

The labels components use, from the voice tokens:

  • content.action.commit: Save
  • content.action.cancel: Not now
  • content.action.destroy: Remove
  • content.action.retry: Try again
  • content.action.empty-action: Browse guides

See Voice and tone for the whole voice.

Accessibility and keyboard​

Test before you ship:

  • New messages are announced politely without moving focus. undefined

Use it in code​

npx open-ds add message-scroller

The component reads only component keys and semantic tokens, so it follows the brand and mode on <html>.

Tokens it reads​

Message scroller reads 5 tokens of its own, each an alias of a semantic token. Each row is one part: its own token, the semantic it aliases, and the value it ends at. Change a semantic and every component that reads it follows; override one of Message scroller's tokens to change Message scroller alone.

Changes with theme

Content first decides what changes when you switch theme. Here a switch changes colors only, so the marked rows differ between light and dark; everything else holds steady.

PartIts token and the semantic it aliasesValue
Message scroller
Gapcomponent.message-scroller.gapspace.gap.groupvar(--message-scroller-gap)space.32:2rem
Cornercomponent.message-scroller.radiusradius.controlvar(--message-scroller-radius)radius.8:0.5rem
Focus
on focus		component.message-scroller.focusborder-width.focusvar(--message-scroller-focus)border-width.2:2px
Focus ring focus
Changes with theme
on focus		component.message-scroller.focus-ring-focuscolor.border.focusvar(--message-scroller-focus-ring-focus)Lightnavy.light.600:#1E3A5FDarknavy.dark.600:#8FA6C4
Focus ring offset focus
Changes with theme
on focus		component.message-scroller.focus-ring-offset-focuscolor.surface.canvasvar(--message-scroller-focus-ring-offset-focus)Lightstone.light.50:#FFFDF8Darkstone.dark.0:#14110D