evergreen
evergreen copied to clipboard
segmentio
Form fields inconsistent styles
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
@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!
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!
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.
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?
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.
