Skip to content

Input component padding mismatch between Figma and implementation #403

@pricefield-web

Description

@pricefield-web

Before submitting a new issue

  • I tested using the latest version of the library, as the bug might be already fixed.
  • I tested using a supported version of react native.
  • I checked for possible duplicate issues, with possible answers.

Bug summary

Title: Input component padding mismatch between Figma and implementation

Description:
There is an inconsistency between the input component design in Figma and the actual implementation in code.

  • In Figma, the input component has:

    • Height: 36px
    • Vertical padding: py-2
  • In the codebase, the same component is implemented with:

    • py-3.5

This creates a visual mismatch between design and production, causing the implemented input to appear taller than the approved design.

Expected Result:
The implemented input component should match the Figma specification:

  • Height: 36px
  • Vertical padding equivalent to py-2

Actual Result:
The current implementation uses py-3.5, resulting in a larger input height than designed.

Impact:

  • UI inconsistency between design and production
  • Potential layout/alignment issues in forms
  • Reduced design system consistency

Suggested Fix:
Update the input component padding to match the Figma specification (py-2) or align the Figma design and codebase to a single agreed standard.

Library version

1.0.2

Environment info

-

Steps to reproduce

Reproducible example repository

Metadata

Metadata

Assignees

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions