primer / react

An implementation of GitHub's Primer Design System using React

Home Page:https://primer.style/guides/react

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ActionList.Item danger variant changes color on hover

jdrush89 opened this issue · comments

Description

It looks like there are conflicting styles on ActionList.Items when using the danger variant. There are two that have the same specificity that change the color of the text on hover, and it seems like the behavior you get depends on which style sheet happens to load first.

Image

Steps to reproduce

Create an ActionList with an ActionList.Item variant="danger"
Hover over the item
Check in the inspector that there are two styles that can possibly change the color if you don't see the color change to default.

Image

Version

v36.9.0

Browser

Chrome

Uh oh! @jdrush89, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

I'm not able to reproduce this in Storybook, can you link to the code for this specific menu? I see it in production but that item is disabled. Is it meant to be disabled in your screenshot?

The code is here, it's not doing anything special with the styles. It's not disabled in the screenshot, you can enable the button by sending a message to start a thread.

@langermank we moved this to in progress since you assigned it to yourself. Let us know if you have any concern with it 🙌