跳到正文
册页

展示

StatusPill - 状态胶囊

一种活着的状态：一个点，加一行大写等宽标签。

用法

TSX
import { StatusPill } from '@misoto22/folio'

说明

一个有名字的实时状态：一个点，加一个描边药丸里的等宽大写标签。

做成一个组件，而不是每个调用处自己拿点和药丸拼一遍——同一个“可接洽”的小标签，正是那样在一个站点里长出了三种点的尺寸和两种脉动节奏。

warning 和 danger 这两种 tone 会由一个视觉隐藏的严重程度词再说一遍，所以那个点被藏起来时，tone 还在。它熬不过单色：药丸自己的文字在每种 tone 下都是 --ink-2，而状态本身，依然属于调用处写下的那些字。

结构

StatusPill anatomy
部件说明
胶囊必填那个描边的 <span>：--radius-pill、一条 --rule-2 细线、--paper 底色，以及一份刻意不对称的内边距——点之前 10px，标签之后 12px——好让这一对在视觉上居中，而不是在算术上居中。
点必填一个被交了 tone 和 pulse 的 StatusDot。它是 aria-hidden 的，所以 tone 并不是从这里抵达一个看不见颜色的读者。
标签文字必填children，用眉标那套写法——11px 大写等宽字，字距从 0.2em 收回到 0.12em，因为一个胶囊比一条章节眉标要短。
严重度warning 和 danger 两档下一个视觉上隐藏的“Warning”或“Error”，好让这两档能通过颜色之外的东西抵达读者——而不是靠一个被隐藏的点上的颜色。success 和 neutral 什么都不加：它们是“没有警报”，而这本来就是读者默认的前提。

实践建议

推荐

  • 状态还是要写进字里。那个严重度词只到读屏软件为止，别处都到不了——胶囊自己的文字在每一档 tone 下都是 --ink-2，所以在单色屏幕上，警告胶囊里的「Degraded」和中性胶囊里的「Degraded」仍然是同一个胶囊。
  • 状态一旦落定就 pulse={false}——默认那圈光晕的意思是“此刻”，而一个已归档、已发布的胶囊永远脉动下去，是在告诉读者有什么东西还活着，而其实什么都没有。
  • 整个胶囊拿去用，不要在调用处拿一个点加一个 span 自己拼：正是这种拼法，让同一个“接受合作”的标记在同一个站点上长出三种点尺寸和两种脉冲节奏。

避免

  • 它不是 live region。这个胶囊就是一个普通的 <span>，所以读者还停在页面上时，状态从 Available 翻成 Degraded 是悄无声息的——如果这次变化本身就是新闻，那么外面那个 role="status" 归调用处管。
  • 一屏一个，不是一行一个。这个标签是 0.12em 字距的大写眉标——这套系统里最响的小字——而顺着表格排下来的一整列是 Badge 的活，这也正是 Badge 用朴素的 12px 等宽字带着同样那几种状态色的原因。

示例

default

整枚药丸，而不是在调用处拿一个点和一个 span 拼起来，后者正是同一枚「接受委托中」的芯片在同一个站点上长出三种点尺寸、两种脉动节奏的经过。tone 只够得着那个点，而点是 aria-hidden 的，所以那些字必须自己把状态说出来：「部分故障」放在一枚 warning 药丸里和放在一枚 neutral 药丸里，对任何看不见颜色的人来说是同一句话。

Available for workWarningPartial outage

settled and live

每一种 tone，而脉动只花在那个真正正在发生的状态上。光晕的意思是「此刻」，所以一枚已归档或已发布的药丸还留着脉动，是在告诉读者有什么是活的，而其实什么都没有。这枚药丸还只是一个普通的 span，不是一个实时区域：一个在读者停留期间从 Live 翻到 Degraded 的状态，除非调用处把它包进 role="status"，否则是悄悄变过去的。

LiveWarningDegradedErrorIncident openArchived

one per view

一个视图配一枚药丸，它底下那些行配徽标。这个标签是一行 0.12em 字距的大写引题——这套系统里最响的小字号——所以一列药丸顺着列表排下去，就是每一行都在用同样的方式喊。Badge 用朴素的 12px 等宽字承载同样那几种状态色，而那才是一条记录级的状态该有的样子。

Deploy pipelineWarningDegraded
  • Build Passed
  • Typecheck Passed
  • Visual diff 2 changed

无障碍

  • warning 和 danger 两档由一个视觉上隐藏的严重度词重复表达，因为承载颜色的那个点是 aria-hidden 的，它没有名字可给。
  • success 和 neutral 保持沉默是故意的：在每一个已经落定的胶囊前面播报一句「OK」，是把噪音记在那两档真正值得打断人的状态账上。
  • 不是 live region。读者还停在页面上时翻掉的状态是悄无声息的，除非调用处自己在外面套一个 role="status"。

相关组件

StatusDotBadge