wbDesign Wiki
Storybook

Table Header — Figma Assembly Rules

Скачать .md ↓
Angularmolecule

Status: active Figma assembly contract.

Scope

Use this contract for one reusable Table Header cell. Whole-row layout belongs to table-header-row.figma.md; table scroll and column widths belong to the enclosing table composition.

Source Evidence

  • Direct Figma evidence: published set 3395:383238, key 825907d7b24368ae1024ab36f267b5bdf063f77a, contains 15 verified variants.
  • Owner key, exposed properties and exact node 3395:383238 were read again on 2026-09-05 in EO9tuCsqwuHL8cZ4Eb2psR during D-025. The read-only checks covered context, screenshot, metadata, and variables.

Required Assembly

  • Dependency classification: component.checkbox and component.icon are optional because an ordinary text header is complete; classify only the visible selection or informational anatomy as Used.
  • Rule ID: table.header-cell.published — use the published Table Header component and its verified properties; never redraw a header cell.
  • Set Alignment (Left or Right), State (Default, Hover, or Checkbox), and Sticky (No, Left, or Right) through variants.
  • Keep the full product column name in the component label. If it does not fit, widen the column and enclosing scroll minimum instead of abbreviating it.
  • Use the built-in Sort affordance for sortable columns. Use Checkbox state only for selection headers. A non-sort informational icon must be real component content beside the label.

Tokens And Sizing

  • Preserve the 40px height, 12px horizontal padding, and 4px label-to-affordance gap.
  • Preserve Google Sans Regular 11px/14px source typography, level-2 #F6F6F9 surface, #5F5F6D text/icon color, and #E0E0EB bottom separator.
  • Every variant has the bottom separator. Sticky=Left adds the end/right separator; Sticky=Right adds the start/left separator.

Verification Checklist

  • table.header-cell.published: alignment, state, sort, checkbox, and sticky choices come from the published component model.
  • Header labels remain full and legible at the documented table minimum width.
  • No whole-row Auto Layout, cell-placement, or screen-width rule is encoded in this molecule contract.
WB Logistics · Design SystemСборка 91da5ae

Поиск по Wiki

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