展示
StatusDot - 状态点
状态词旁边的那个点。
用法
import { StatusDot } from '@misoto22/folio'说明
状态词旁边的那个点。
无一例外地 aria-hidden：这个点重复的是旁边标签已经说过的状态，而读屏软件把“可接洽”念两遍，比压根不播报这个装饰更糟。如果某个调用处没有可见标签，解法是加标签，不是给这个点加 aria-label。
光晕是一个独立的绝对定位圆环，而不是 box-shadow，因为这套系统的法则 2 是“阴影从不模糊”——而且它是 motion-safe 的，所以要求减少动效的读者拿到的是一个静止的点。
结构
| 部件 | 说明 |
|---|---|
| 外盒必填 | 整个东西所在的那个 aria-hidden <span>——md 下 8px 见方，sm 下 7px，inline-grid 且 shrink-0，所以无论旁边的标签有多长，它在 flex 行里都保持是个圆。 |
| 点必填 | 一个绝对定位的实心圆，颜色取 --ok、--warn、--danger 或 --ink-3-aa。它是这个组件里 tone 唯一够得到的部分。 |
| 光晕 | 同色的第二圈环，跑 folio-halo 那组 keyframes，只在 pulse 为 true 时存在。它是一个独立元素而不是 box-shadow，因为这套系统里的阴影从来不带模糊。 |
实践建议
推荐
- 任何已经尘埃落定的东西都要 pulse={false}。它默认是 true，所以一个表示构建已完成、或者今天不会再变的点，会顶着一圈宣称此刻正在发生什么的光晕。
- 一旦发现自己在把点和它的标签写在一起，就换成 StatusPill——这一对在每个调用处各拼一次，正是同一个站点上同一种状态长出三种点尺寸和两种脉冲节奏的原因。
- 让它直接待在标签旁边那个 flex 行里：让它保持圆形的是 shrink-0，而一个被包进可收缩 div 里的点，只要标签一长就会被压成椭圆。
避免
- 给这个点加 aria-label 什么也换不来——aria-hidden 照样设着，而一个被隐藏的元素没有名字可给。一个没有可见标签的调用处，是一种任何读屏软件都不会报出来的状态。
- sm 和 md 是 7px 和 8px，差一个像素。那是为了配小一号的字做的视觉微调，不是一套尺寸阶梯，布局里不该有任何东西建立在这一像素之上。
示例
tones
四种 tone，每一种旁边都配着那个命名它的词。这个点无一例外都是 aria-hidden 的，所以 tone 是这个组件里辅助技术永远看不见的那一部分，状态只能由标签自己扛——在点上加 aria-label 什么也换不来，因为一个被隐藏的元素没有名字可给。只有正在进行中的那个会脉动；一切已经落定的都把 pulse 设成 false。
Live Degraded Down Idle
live and settled
同一种 tone，两遍：脉动的意思是此刻正在发生什么，而且它是默认值——所以一个表示构建已完成、或者今天不会再变的状态的点，是在播报一份并没有在做的工作，除非把 pulse 设成 false。那圈光晕是 motion-safe 的，所以一个要求减少动效的读者，两边拿到的都是静止的点。
Deploying 0.4.1 to production Deployed 0.4.0, fourteen minutes ago
down a table
一列状态，用的是这个点该有的尺寸。sm 是 7px，对着 md 的 8px——那是为了坐在更小的字旁边而做的视觉微调，不是一套尺寸阶梯，所以布局里不该有任何东西建立在这个差值上。这个点直接坐在它标签旁边那个 flex 行里：shrink-0 才是让它保持圆形的东西，而一个被裹进可收缩盒子里的点，只要标签一长就会变成椭圆。
| Service | State | Last check |
|---|---|---|
| api.misoto22.com | Healthy | 30s ago |
| Search index | Rebuilding | 2m ago |
| Image pipeline | Paused | 1h ago |
类型
export type StatusTone = 'success' | 'warning' | 'danger' | 'neutral'无障碍
- 一律 aria-hidden：它重复的是旁边标签已经说过的状态。
- 光晕只在 motion-safe 下运行，要求减少动效的读者看到的是静止的点。