Inconsistent spacing between TextField and Select

[stephenmathieson]

The "whitespace" between the <TextField/> and <Select/> components is inconsistent. I'm building a form which is something like:

<>
  <TextField
    id="url"
    type="url"
    label="URL"
    onChange={...}
    value={url}
    aria-describedby="url-field-help"
    disabled={disabled}
  />
  <Select
    label="HTTP Method"
    value={...}
    onSelect={...}
    options={[ ... ]}
    disabled={disabled}
  />
  <Select
    listId="g"
    selectedId="g"
    label="Request Mechanism"
    value={...}
    onSelect={...}
    options={[ ... ]}
    disabled={disabled}
  />
</>

Without any custom styles, this looks like:

Is there a particular reason the <TextField/> takes up so much more vertical space? Can we add an option to not do this, or do I need to write custom CSS to disable this behavior?

[stephenmathieson]

It looks like this additional whitespace comes from the <div class="dqpl-error-wrap" />. A possible/simple fix could be to add a hidden prop to that element unless it has content.

[stephenmathieson]

I added this CSS for now:

.Form-url .dqpl-error-wrap:empty {
  display: none;
}

NOTE: my <TextField/> has className="Form-url".

[schne324]

I've noticed this problem myself too...I think we (probably just the designer) need to revisit this and come up with a consistent way to display all form fields. IMO there is too large of a gap in between normal text fields to the point where it looks kinda awkward.

A possible/simple fix could be to add a hidden prop to that element unless it has content.

That would cause a "jump" of content if/when errors are added but maybe we're cool with that 🤷‍♂