[Input-text] Component specs #45
Description
There is a gap regarding component between design documentation, component implementation, and UI-Kit components.
Design documentation
| Property | Value |
|---|---|
| Margin | 15px |
| Height (min) | 34px |
| Height (max) | 74px |
| Widht (min) | 230px |
| Widht (max) | 100% |
| Border thickness | 1px/2px |
| Font size (with text) | 16px |
| Font size smaller text | 12px |
| Font weight | Regular |
| Icon size | 18x18(px) |
| Distance between text and underline | 12px |
| Icon margin right side | 6px |
| Distance between text and underline (animated) | 6px |
| Assistive text margin top | 6px |
https://developer.dxc.com/design/components/text-input
Margin
The design specs set the value for margin as fixed (15px), the implementation gives the flexibility to choose between different values:
| margin | value |
|---|---|
xxsmall |
6px |
xsmall |
16px |
small |
24px |
medium |
36px |
large |
48px |
xlarge |
64px |
xxlarge |
100px |
And also apply different values to each side of the component:
top bottom left right
Design guidelines should be updated to accommodate the possibility to use different margin values.
Width
The design specs set the value for min-width as fixed (230px), the implementation gives the flexibility to choose a value under it. The default value is 'fitContent' so we cannot ensure that the design guidelines are going to be followed even if the default value is used.
| width | value |
|---|---|
small |
60px |
medium |
240px |
large |
480px |
fitContent |
- |
fillParent |
- |
Design guidelines should be updated to accommodate the possibility to use different width values.
UI-Kit text-input specs set a width value of 233px. Component specs should be updated to cover the default width set as medium
Icon size
Design documentation
The design specs set the value for icon-size as 18x18(px). Visual specs inside the documentation present a size of 20x20(px). UI-Kit icon-size is between 17.75px - 20.06px.
Component implementation
| Property | Value |
|---|---|
icon-size |
20x20(px) |
Design guidelines and UI-kit icon-size should be updated to 20x20(px).