segmentio / evergreen

🌲 Evergreen React UI Framework by Segment
https://evergreen.segment.com
MIT License
12.39k stars 832 forks source link

Built-in marginBottom on SelectField and TextInputField labels #1289

Closed alexhauka closed 2 years ago

alexhauka commented 3 years ago

_Apologies if this not the desired format for an issue, but the issue template provided in the contributing guidelines 404s_

There is a built-in marginBottom={8} given to the innermost Box component which is used to make the label for the FormField component, which itself is used as the basis for both the SelectField and TextInputField evergreen-ui components, as seen below on line 25:

FormField.js

Screen Shot 2021-08-09 at 1 05 57 PM

This creates a bottom margin on the components' label which I've been unable to either alter or completely remove. Adding a marginBottom value to the Label component in the theme object has no effect.

real world example of the margin in question:

Screen Shot 2021-08-09 at 1 19 24 PM

It would be very helpful if the label's marginBottom could be altered with the theme object, and/or if the label's hardcoded marginBottom was removed.

mshwery commented 3 years ago

Perhaps a simple workaround would be to construct your own FormField composition that satisfies your design constraints. The *Field variants of the various form components are basically a pre-packaged and opinionated take on how to compose the label, input, description, hints, errors, etc.

I agree that it would be nice to be configurable (or at least pull from the theme's spacing tokens) but also not a fan of exposing nested props in a composition component.