search

segmentio / evergreen

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

Badge no longer shows text if you pass color hex code #1645

Closed murtdagi closed 1 year ago

murtdagi commented 1 year ago

I was able to use the Badge and TagInput component by passing the color hex code, but it seems to have broken between release 7.1.5 and 7.1.6. The problem seems to be that the Badge background and the text color both are set to be the same color and as a result the text does not show up on the Badge.

I hope someone can look into the issue FYI @brandongregoryscott

Thanks

DarshanDixit05 commented 1 year ago

Hi 👋, I wanted to work on this issue. Can you please assign it to me?

brandongregoryscott commented 1 year ago

Hey @murtdagi,

This is probably a side effect of #1592 / #1634, since there was internal logic that was picking a light/dark color for the text based on the background color. However, I'd say this was unintended/undocumented behavior, since our TS definitions did not allow passing arbitrary colors:

https://github.com/segmentio/evergreen/blob/6a76ed17ef73da9f0d20c2ca126f786f98f7c8ba/index.d.ts#L595

aeb-london commented 1 year ago

Hi @brandongregoryscott thanks for your quick reply.

Do you think you may be able to enhance it to be able to pass arbitrary colors? In my use case i would want to show colors for the badge based on the text on the badge which is dynamic and there could be more colors required than the predefined set of colors.

brandongregoryscott commented 1 year ago

Sorry for the inconvenience, but we don't have any plans to expand this functionality right now. The Badge component is very simple, so in the meantime, you could build your own by referencing the source code here.

aeb-london commented 1 year ago

Yes i have already done that for now, but just wanted to avoid having to use my own component for a potentially a small change, but its fine, thanks

murtdagi commented 1 year ago

@brandongregoryscott i am seeing the same problem with TagInput component. Any idea if its the same root cause or something else? Quickly glanced through the code but it doesn't look its using Tinycolor or your Badge component.

brandongregoryscott commented 1 year ago

The TagInput also uses the Badge under the hood: https://github.com/segmentio/evergreen/blob/6a76ed17ef73da9f0d20c2ca126f786f98f7c8ba/src/tag-input/src/Tag.js#L27-L36

I don't think this is as easy to 'swap out' with a custom component, unfortunately.

murtdagi commented 1 year ago

OK, i have implemented a workaround to pass styles with the right color that i want to use as part of tagProps for TagInput and did something similar for the use of Badge component as well instead of creating a custom component.