Skip to content

[Web][W1.2] Implement layout, typography, surface, and feedback primitives #77

Description

@code-tc

Objective

Implement the non-interactive primitive layer using only the approved semantic tokens.

Components

Box/Stack/Inline/Grid, Text/Heading, Surface/Card/Divider, Icon/Image/Avatar, Spinner/Progress/Skeleton, Badge and visually hidden content. Keep the public API minimal and compatible with React Native Web; platform-specific behavior must be explicit.

Acceptance criteria

  • Each primitive has typed props, examples, accessibility notes and supported responsive behavior.
  • RTL, text scaling, long content, overflow, loading and reduced-motion cases are covered.
  • SSR output hydrates without mismatch.
  • No application-domain semantics or ad-hoc colors/spacing are embedded.
  • Unit, browser, accessibility and screenshot tests pass.

Parent: #7

Required visual evidence

The draft PR must provide a runnable component-gallery route plus before/after screenshots at 390×844, 768×1024, and 1440×900. Cover light, dark, high-contrast, default, hover, focus-visible, disabled, loading, empty, error, and overflow states applicable to the component. Playwright must exercise keyboard interaction and capture deterministic screenshots. A reviewer other than the implementing agent must approve intentional baseline changes; screenshot generation or a passing pixel threshold is not visual approval.

Tembo execution contract

automation:
  eligible: true
  executor_profile: tembo
  readiness: blocked
  primary_repository: TinyChain-Inc/client
  base_branch: main
  writable_scope:
    - web/src/ui/primitives/**
    - web/src/ui/gallery/**
    - web/tests/**
  prerequisites:
    - "#76"
  concurrency_group: ui-foundation-primitives
  required_commands:
    - "cd web && npm ci"
    - "cd web && npm run test:all"
  external_actions: none
  draft_pr_only: true
  completion_authority: human
  visual_validation:
    required: true
    browsers: [chromium]
    viewports: [mobile, tablet, desktop]
    evidence: [component-gallery-url, screenshot-bundle, playwright-report]
    baseline_update_requires: human-visual-approval
    failure_policy: never-auto-accept-diff
  budget:
    size: large
    max_revisions: 3
    max_wall_minutes: 120

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions