Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Full width Text input error state and margin/padding to match design #128

Closed
Krista-Abraham mannequin opened this issue May 17, 2023 · 2 comments · Fixed by #169
Closed

Full width Text input error state and margin/padding to match design #128

Krista-Abraham mannequin opened this issue May 17, 2023 · 2 comments · Fixed by #169
Assignees
Labels
Bug Review Pending code review before closing.

Comments

@Krista-Abraham
Copy link
Mannequin

Krista-Abraham mannequin commented May 17, 2023

The full width Text input in the Gray 10 Theme Mobile carbon Figma file includes an underline and error icon below:
https://www.figma.com/file/O3KSDu2TWpMaazGkgsKqLA/(Beta)-Gray-10-Theme-Mobile---Carbon-Design-System?node-id=1880-6923&t=TO40aq4eUt9nqMHI-4

Using the FormItem type="text" component, it is possible to add style for the error state to include the underline and position the error message by passing componentProps.style to textInputProps. But since the error icon is within the input component the icon's position is out of sync with the design:
e6a3d3bb-29c4-40bd-96b5-7124e8292dab

Also, the bottom margin on the label should be 5px instead of 8:
e6a3d3bb-29c4-40bd-96b5-7124e8292dab

And the bottom margin on the error message should be 20px instead of 8:
f38912a3-8d99-462a-bb6e-c15ee55d1f6d

If there is another way to render this that we are not aware of please let us know.

@dabrad26
Copy link
Member

Adjusted some of the padding. However; the larger style changes going to hold off. As currently we piggy back off of standard form items and want to find a clean way to keep that.

@dabrad26
Copy link
Member

Added

Screenshot 2023-11-29 at 11 09 58
Screenshot 2023-11-29 at 11 09 51

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Review Pending code review before closing.
Projects
1 participant