Skip to content

[Task] Implement the Box primitive component extending View #44

@soroushm

Description

@soroushm

Task Description ✏️

Implement the Box primitive component extending View as part of the design system epic #40.
Box will serve as a flexible container for layout and styling purposes. It supports optional props such as aspectRatio, cursor, and transition, while inheriting all responsive styled-system props from View. This component will be the base building block for more semantic primitives.

Acceptance Criteria ✅

  • Box component implemented by extending View.
  • Supports optional props: aspectRatio, cursor, and transition.
  • Inherits all styled-system props from View (space, layout, color, border, typography, flexbox, position).
  • Unit tests verify rendering of children, application of aspectRatio, cursor, and transition props.
  • Storybook stories demonstrate Box usage with adjustable props and responsive behavior.
  • No raw CSS values — all spacing, color, and layout derived from theme tokens.
  • Code passes linting, typing, and CI checks.

Dependencies 🔗

Definition of Ready (DoR) 📋

  • Task is independent and scoped to the Box component.
  • View component is implemented and tested.
  • Theme tokens are available for spacing, color, layout, and typography.
  • Props to be supported by Box are agreed upon (aspectRatio, cursor, transition, and inherited styled-system props).

Definition of Done (DoD) 🏁

  • Box component extends View with shouldForwardProp configured.
  • Optional props aspectRatio, cursor, and transition work correctly.
  • Unit tests cover child rendering and optional prop behavior.
  • Storybook stories demonstrate various Box configurations with adjustable controls.
  • Code reviewed, linted, typed, and passes CI checks.
  • Documentation updated in Storybook for component usage.
  • Component is ready for reuse in layout compositions.

Additional Notes or Resources 📎

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions