Data Display · WB Design Wiki

Level: atom.

Purpose and use

Present a read-only label/value pair. Use Input for editing and Data Display Grid for arranging multiple pairs. Use Swap for verified custom value content.

Anatomy and behavior

Label and value rows have independent optional info actions. Null value becomes empty text. Overflow is measured on mouseenter/focusin and enables a Tooltip. Swap projects [wblDataDisplaySwap] and suppresses the standard value and its info icon. Width auto normalizes to content; fixedWidth is used for fixed layout.

Accessibility and content

The value row is labelled by the generated label ID. Icon buttons use their tooltip text as names and emit separate labelIconClick/valueIconClick events. Plain overflow text spans are not made focusable by the component; do not rely on a hover tooltip as the only way to read essential content. Projected content owns its own semantics.

Open Questions

Keyboard access to truncated noninteractive text needs verification in the containing layout; overflow handling does not itself add a tab stop.

Figma source and verified mapping

Figma component set: Data Display/Single — 4874:4031, key 167da0204359776613ff8e4b67bd5b2029d34d01.
Verified in D-021 (GitLab Issue).
The published set contains Size=M, Content=Text, Size=L, Content=Text, and Size=L, Content=Swap-component. Local size maps directly; local content="Swap" maps to Figma Swap-component.
Figma Label icon and Value icon controls map to local labelIcon and valueIcon. The text label/value map to local label and value; the component-owned Figma Slot maps to [wblDataDisplaySwap] projection.

Documented differences

Local width, fixedWidth, tooltip text, overflow detection, and the two icon-click outputs are runtime behavior, not published Figma properties.
Angular allows Size=M with content="Swap"; that combination is not a published Figma variant and remains implementation-only.

Local component contract

This is the current owned contract for component.data-display. Behavior above was checked against the local implementation, template and focused tests listed below. Historical migration evidence does not override these current sources.

Public type values

Classes and selectors

WblDataDisplayComponent — wbl-data-display (src/app/design-system/primitives/data-display/data-display.component.ts).

Inputs

WblDataDisplayComponent.size = input<WblDataDisplaySize>('L')
WblDataDisplayComponent.content = input<WblDataDisplayContent>('Text')
WblDataDisplayComponent.width = input<WblDataDisplayWidth>('full')
WblDataDisplayComponent.fixedWidth = input('12rem')
WblDataDisplayComponent.label = input<string | number>('Label')
WblDataDisplayComponent.value = input<string | number | null>('Value')
WblDataDisplayComponent.labelIcon = input(false)
WblDataDisplayComponent.valueIcon = input(false)
WblDataDisplayComponent.labelTooltip = input<string | null>(null)
WblDataDisplayComponent.valueTooltip = input<string | null>(null)
WblDataDisplayComponent.labelIconTooltip = input('Label')
WblDataDisplayComponent.valueIconTooltip = input('Value')

Models

None.

Outputs

WblDataDisplayComponent.labelIconClick = output<void>()
WblDataDisplayComponent.valueIconClick = output<void>()

Slots and projection markers

WblDataDisplayComponent: <ng-content select="[wblDataDisplaySwap]">

Local evidence

Behavior/template: src/app/design-system/primitives/data-display/data-display.component.html (reviewed in D-025, 2026-09-05).
Code: src/app/design-system/primitives/data-display/data-display.component.ts.
Focused test: src/app/design-system/primitives/data-display/data-display.component.spec.ts.
Public export: export * from './primitives/data-display/data-display.component'; in src/app/design-system/index.ts.
Storybook: storybook/stories/data-display.stories.ts (Design System/Primitives/wbl-data-display). This is the shared exact Source story for this family.

Figma status

The source above is the verified Figma owner for the published Single states. Fresh read-only Plugin API inspection and screenshot on 2026-09-22 verified the Single set and its three variants. The sibling Single assembly contract now owns native Slot content, centered alignment, spacing, token bindings and optional icon construction. This adds no Angular API or Data Display Grid contract.

Documentation task: LUU-427 · GitHub Issue 10 · verified member danil-lebedev, GitHub ID 50231562 · agent Codex / Specs · run/session luu427-drawer-20260922.

Provenance

The archived source-document copy is historical evidence only. The active resolver is local code/test/export and the exact Storybook story above.