search

formaat-design / reshaped

Community repository for storing examples, reporting issues and tracking roadmap
https://reshaped.so
97 stars 3 forks source link

Aligner for headless text fields/areas, similar to Button.Aligner #180

Closed b-graves closed 8 months ago

b-graves commented 9 months ago

Is your feature request related to a problem? Please describe.

Headless text fields/area still have padding, so become misaligned from the text. See example:

Screenshot 2023-10-05 at 14 55 51

Describe the solution you'd like Either no padding on headless options or an Aligner the same was we have for ghost Buttons

Describe alternatives you've considered Manually changing the styling

blvdmitry commented 8 months ago

Ready for the next release for TextField and TextArea. I went with the Aligner approach to make sure DX is aligned with other components. To make sure there is not much additional overhead though, I've added a common internal aligner utility that works across mutliple component. Keeping it internal since there are dependencies on data-attributes and css variables to get the padding value instead of hardcoding them.

https://twitter.com/blvdmitry/status/1713653015742202316

Image

blvdmitry commented 8 months ago

One change I've added after the screenshot was made is to use alignment on all sides for inputs. That way View gaps will stay predictable since headless inputs padding is invisible on all sides

b-graves commented 8 months ago

Love this, thanks so much!