How to enforce Devs to consistently use HelperText on Inputs

[duranmla]

I have seen many times devs and/or designers using different spaces from helper text to inputs. This seems to be the result of something lacking in our implementation. https://stash.intapps.it/projects/SUP/repos/partner-dashboard/pull-requests/803/overview?commentId=278497

Basically, people need to "know" the rule of HelperText having mt={1} when placed as a sibling of an input. What can we do? I am inferring the rule from https://wave.free-now.com/components/helper-text

[snapsnapturtle]

I'm definitely in favour of simplifying the use of the inputs together with helper texts. My initial idea would be to add a new component that acts as a wrapper for an input together with the helper text. I've seen some other design systems implement something similar and found it to be easy to use, expressive and it keeps the components independent enough, so they can still be used in other scenarios.

The usage could look like the following (all just some pseudo-code below)

const SignupForm = () => (
    <FormControl error="This is an invalid input">
        <Input name="username" />
    <FormControl/>
);


// which results in the following

const SignupForm = () => (
    <div>
        <Input name="username" />
        <HelperText mt={1} variant="danger">This is an invalid input"><HelperText/>
    <div/>
);

[duranmla]

I love this one! If we all agree we can move this issue into an "enhancement" instead and remove the "question" as it would be clear how to proceed here.