API and Development
PendingValue, PendingValueAppearance, PendingValueLines, PendingValueWidth from @prepared911/ui/pending-value.
Required boolean. True while the value is on its way: the label shows and the value is hidden from sight, assistive technology and the tab order. False once it has arrived. The host sets data-loading while pending.
Required LocalizedMessage. The pending copy, such as "Locating address". It is real text in the document, so assistive technology that reaches the value reads it. It is the visible text unless placeholder is set, and the hidden name of the line in the skeleton appearance.
ReactNode. The arrived value. It takes the color and type of the surrounding text and host. Children passed while pending are not shown but still reserve size.
ReactNode. A short visible stand-in for label, such as an ellipsis. It is aria-hidden; label is read instead as visually hidden text. Ignored in the skeleton appearance.
LocalizedMessage. Read once through the shared polite live announcer when pending turns from true to false. Not read on the first render, and not read when a value goes back to pending. Omitted, the arrival is silent.
PendingValueAppearance: Text (default) or Skeleton. Skeleton renders a Skeleton line named by label.
A TextType from PENDING_VALUE_TYPES: Subtitle, SubtitleMedium, BodyLarge, BodyLargeEmphasis, BodyMedium (default), BodyMediumEmphasis, Label, Caption, CaptionEmphasis, Code1, Code2. Page, section, title and overline roles are rejected at compile time.
Foreground.Subtle (default) or Foreground.Default, from PENDING_VALUE_FOREGROUNDS. It colors the pending label only. Muted, status and accent colors are rejected at compile time.
PendingValueWidth: Label, Short, Medium, Long. Inline size kept in both states. Label (the default in the text appearance) is the width of the pending label; Short is 4rem, Medium 8rem, Long 12rem. In the skeleton appearance the default is Medium.
PendingValueLines: One (default), Two, Three. Block size kept in both states, in lines of type.
className is appended after the generated classes. ref is typed Ref<HTMLElement>. style, role, every aria-* attribute and every on* handler are not accepted: only id and data-* reach the host.
PendingValue, PendingValueProps, PendingValueLayoutProps, and from the component entry PendingValueAppearance, PendingValueWidth, PendingValueLines, PENDING_VALUE_TYPES, PENDING_VALUE_FOREGROUNDS and their types.
| Prop | Default | Meaning |
|---|---|---|
pending | Whether the value is still on its way. While true the pending label shows; when it turns false children swaps in. | |
label | What assistive technology reads while the value is pending, such as "Locating address". It is real text in the document, so a screen reader that reaches the value hears it instead of a blank. It is also the visible text unless placeholder is set, and the name of the skeleton in the skeleton appearance. | |
children | The value once it has arrived. It stays out of the accessibility tree and the tab order until pending is false. It takes the surrounding color. Pass Text with value for a number: later changes then roll. | |
placeholder | Short visible stand-in for label, such as an ellipsis. It is hidden from assistive technology and label is read instead. Ignored in the skeleton appearance, which shows no text. | |
announcement | Polite announcement read once when the value arrives (pending turns from true to false), such as "Address found". Without it the arrival is silent: the value is plain text and is read when the person reaches it. Not read on the first render. | |
appearance | How the pending state looks. Defaults to the label as text. | |
type | Chroma typography role of the label and of the host. Defaults to body medium (13px). | |
foreground | Foreground of the pending label. Defaults to subtle. The arrived value takes the surrounding color. | |
width | Inline size kept in both states. Defaults to the label's width, or to Medium in the skeleton appearance. | |
lines | Block size kept in both states, in lines of type. Defaults to one. | |
className | Classes appended after the generated classes. Put overrides in @layer chroma.overrides. | |
id | Element id. | |
ref | Ref to the rendered element. |
| Name | Type | Default | Description |
|---|---|---|---|
label | LocalizedMessage | — | What assistive technology reads while the value is pending, such as "Locating address". It is real text in the
document, so a screen reader that reaches the value hears it instead of a blank. It is also the visible text unless
placeholder is set, and the name of the skeleton in the skeleton appearance. |
pending | boolean | — | Whether the value is still on its way. While true the pending label shows; when it turns false children swaps in. |
announcement | LocalizedMessage | — | Polite announcement read once when the value arrives (pending turns from true to false), such as "Address found".
Without it the arrival is silent: the value is plain text and is read when the person reaches it. Not read on the
first render. |
appearance | PendingValueAppearance | — | How the pending state looks. Defaults to the label as text. |
children | ReactNode | — | The value once it has arrived. It stays out of the accessibility tree and the tab order until pending is false.
It takes the surrounding color. Pass Text with value for a number: later changes then roll. |
className | string | — | Classes appended after the generated classes. Put overrides in @layer chroma.overrides. |
foreground | Foreground.Default | Foreground.Subtle | — | Foreground of the pending label. Defaults to subtle. The arrived value takes the surrounding color. |
id | string | — | Element id. |
lines | PendingValueLines | — | Block size kept in both states, in lines of type. Defaults to one. |
placeholder | ReactNode | — | Short visible stand-in for label, such as an ellipsis. It is hidden from assistive technology and label is read
instead. Ignored in the skeleton appearance, which shows no text. |
ref | Ref<HTMLElement> | — | Ref to the rendered element. |
type | TextType.Subtitle | TextType.SubtitleMedium | TextType.BodyLarge | TextType.BodyLargeEmphasis | TextType.BodyMedium | TextType.BodyMediumEmphasis | TextType.Label | TextType.Caption | TextType.CaptionEmphasis | TextType.Code1 | TextType.Code2 | — | Chroma typography role of the label and of the host. Defaults to body medium (13px). |
width | PendingValueWidth | — | Inline size kept in both states. Defaults to the label's width, or to Medium in the skeleton appearance. |