wbDesign Wiki
Storybook

Data Display Single — Figma Assembly Rules

Скачать .md ↓
Angularatom

Status: active Figma assembly contract for the published Single variants only.

Verified Evidence

Read-only Plugin API inspection and screenshot on 2026-09-22 in file EO9tuCsqwuHL8cZ4Eb2psR, page 4789:72579, set 4874:4031, key 167da0204359776613ff8e4b67bd5b2029d34d01:

Variant Node Key Reference size / padding
M / Text 4874:4030 00b653f9083fec1fa3300e6040f75b4468c6a617 305×40, 4px vertical / 8px horizontal
L / Text 4874:4032 a861355b10adb67ff8132e1cc790a01614881e69 305×56, 8px vertical / 12px horizontal
L / Swap-component 9744:331104 f3267f32d63b1c29b0bdfb10153dce1a158fd2d8 305×62 baseline, 8px vertical / 12px horizontal, Hug height

All variants use centered label/value row alignment and 8px radius. Labels are Google Sans Regular 11px/14px; M value is Regular 13px/16px, L value Medium 15px/22px. L variants have a 2px label/value gap.

Background is bound to bg/dropdown hover, key 9575c280f9b31ad35abf7cc2e394310db70332ed; label uses text icon/primary gray, key 836b67081c1410f818234f536c3fdcd663fc8114; value uses text icon/primary, key 15eb8827c0c4def0127c8ebab4cf56532d90a47e.

Published controls are Size, Content, Label icon, Value icon and native Slot#17726:0. There are no exposed label/value text properties. L Swap native Slot 17726:657 has empty preferredValues and a 281×28 reference footprint. Optional info controls are published IconButton XS instances, owner c0df83d8febc4593994cbb22f5e1e255e10006d6.

Assembly Rules

  • Button and Icon are optional dependencies used only when Label icon or Value icon anatomy is enabled. Plain label/value pairs need neither.
  • Rule ID: data-display.published — use the exact published Single set and one of its three verified variants; never redraw the label/value tile. There is no published M/Swap variant. Grid is a separate owner and is not implied.
  • Rule ID: data-display.content — set ordinary label/value by overriding the existing text nodes after loading their fonts; preserve node names, typography and token bindings. Use L/Swap-component's native Slot for verified custom value content instead of layering it over the ordinary Value text.
  • Keep Slot content inside the existing native Slot. Its chosen reusable component is a separate screen-selected role; arbitrary Slot contents are not declared as generic Data Display dependencies. A Link in this Slot must remain a real mapped Link instance and follow its own contract.
  • Rule ID: data-display.layout — preserve published centered text/row alignment, radius, padding and label/value typography. Width follows the surrounding composition; avoid truncating essential content. Swap content stays in the native Slot; its own Auto Layout may use Fill/Hug to fit the inserted standard content while preserving the parent's padding and Hug behavior.
  • Rule ID: data-display.icons — enable optional info icons only through the published controls, retaining their IconButton and glyph instances; leave unneeded controls off. A visual icon does not establish a working tooltip.

Verification

For each rule, capture root-scoped readback: main/set keys, selected variant, existing label/value text or native Slot descendants, alignment/spacing/bindings, and optional icon visibility. Screenshot confirms readable labels and values. Runtime overflow handling, tooltip events and Angular width inputs are not Figma properties and are outside these assembly predicates.

Documentation Task

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

WB Logistics · Design SystemСборка 91da5ae

Поиск по Wiki

Начните вводить название или текст