search

segmentio / evergreen

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

Form fields inconsistent styles #1508

Closed ahsan-sabir closed 1 year ago

ahsan-sabir commented 2 years ago

TextInputField and SelectField have inconsistent border and box-shadow styles. There could be other inconsistencies as well. On a side note it would be nice to have placeholder prop for SelectField as well.


TextInputField SelectField


Same thing noticed between Combobox input and menu button


Screen Shot 2022-08-05 at 7 41 24 PM Screen Shot 2022-08-05 at 7 42 06 PM Screen Shot 2022-08-05 at 7 42 25 PM

krshnknsr21 commented 2 years ago

Hey can I take up this issue?

brandongregoryscott commented 2 years ago

@krshnknsr21 Sure! PRs are always welcome. Double check our public Figma library for reference: https://www.figma.com/@segment

Edit: I'm just now seeing our Evergreen Figma file is missing... will edit once I track down where it went!

TheLazron commented 1 year ago

Hey, I wish to take up this issue, but I fear the figma file is still missing. So if you could provide me with that Thanks!

brandongregoryscott commented 1 year ago

Woops! Sorry, I meant to link out the re-uploaded version on the Twilio Figma: https://www.figma.com/@twilio

Let me know if you're still having issues finding the right styles in there, I haven't used it in a minute.

TheLazron commented 1 year ago

Hey I couldn't find any defined styles except a banner image in the figma file, so if you could look into it

Besides that I was working on this other thing that was asked for i.e. a placeholder for the selectField. I could only think of implementing it using the "default hidden" option. Should it be fine?

brandongregoryscott commented 1 year ago

Sorry for the delayed response here. @TheLazron There are multiple pages in the Figma (use the little dropdown in the bottom left corner to change from the introduction slide), but maybe the community version of Figma doesn't allow the ability to inspect elements - just the viewer mode.

As far as this issue goes, let's update the following:

Select component's default border (currently colors.gray500) consistent with the Input component's border, colors.gray400

Select component's focus border (currently implicitly set to colors.gray500 because there is no border change on focus) consistent with the Input component's focus border, colors.blue200

The Combobox is a little different since it does not have its own theme object (it is a composition of the Autocomplete and IconButton components) - buttons do have the darker border by default, and it has its own set of selectors for hover/focus/etc internally. Let me think about that one for a bit before we move forward changing it.

iharshspatel commented 1 year ago

Hey, can I work on this issue? If no one has started working on it.