[TextInput] Invalid indicator out of TextInput when using marginBottom

[lamualfa]

What package(s) are you using?

• carbon-components-react

Detailed description

The Invalid Indicator of TextInput component will out of the TextInput when marginBottom was set.

Why i use marginBottom to give a gap between two form?

I don't know. I just follow Carbon React Storybook Sample. This is the link.

Steps to reproduce the issue

1. Create a TextInput component.
2. Set the invalid & invalidText props of TextInput component.
3. Add marginBottom to TextInput component.

React:

https://codesandbox.io/s/wispy-rain-hdpfu?file=/index.js

Additional information

• Screenshots or code

[tw15egan]

Hey there @lamualfa, it seems like you can avoid this issue by adding the marginBottom to the wrapper div, as opposed to the TextInput itself. Hope that helps!

[lamualfa]

Hey there @lamualfa, it seems like you can avoid this issue by adding the marginBottom to the wrapper div, as opposed to the TextInput itself. Hope that helps!

Absolutely yes. I think in future, the use of marginBottom in Storybook Example must be replaced with the use of marginBottom in wrapper.

[tw15egan]

Agreed, I will make a PR and update this. Thanks for catching it!