Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Button "Invisible" loses accent color when using a leadingVisual #4333

Open
maximedegreve opened this issue Mar 1, 2024 · 4 comments
Open
Labels
bug Something isn't working component: Button Issues related to the Button component

Comments

@maximedegreve
Copy link
Contributor

Description

Button variant "invisible" loses accent color when using a leadingVisual.

video.mov

In Figma the component doesn't lose the accent color but the icon doesn't have the accent color applied when added.

Screenshot of the Figma problem

Steps to reproduce

Go to Storybook

Version

Latest

Browser

Safari

@maximedegreve maximedegreve added the bug Something isn't working label Mar 1, 2024
@maximedegreve maximedegreve added component: Button Issues related to the Button component and removed react labels Mar 1, 2024
@mohanadkandil
Copy link

mohanadkandil commented Mar 1, 2024

Hey,
I can work on this, could you please assign it to me ?

Copy link
Contributor

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

@TylerJDev
Copy link
Contributor

Was taking a look at this issue, and I'm a bit unsure of what the expected color should be 🤔 I took a look at the most recent version of PRC (pre-release), and I see that the default color for "invisible" without the leading visual has changed from the screenshot. I think this was part of #4940, so I'm not sure if this is the expectation or not for invisible. If it is, then I think we can close this issue.

@langermank, you might have more context than I do 🙇

Screen capture of "invisible" variant in Storybook

Screen capture of "invisible" button variant in Storybook, the button has a invisible background with black text saying "button"

@langermank
Copy link
Contributor

@TylerJDev thanks for tagging me! Yes, the original design for the invisible variant was never intended to retain the accent blue color if visuals were present. Therefore, it was only ever blue if no visuals were present.

We recently made a change to make the invisible button the default text color in all scenarios. We found that in most cases the blue color was being overridden by consumers, and it was difficult to use the variant with an inconsistent text color.

As far as I'm concerned there are no current color bugs with Button 😀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working component: Button Issues related to the Button component
Projects
None yet
Development

No branches or pull requests

5 participants