Skip to content

Fix ActionList.Item hover and focus background color #1480

Description

@colebemis

ActionList.Item is missing a hover and focus background color in dark high contrast and color blind themes.

CleanShot 2021-09-29 at 17 43 01

This makes hover and focus states invisible in new Projects dropdown menus when viewing in dark high contrast or color blind themes.

CleanShot 2021-09-30 at 07 38 36

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://primer.style/react/storybook?path=/story/composite-components-actionlist--single-select-list-story&globals=dayScheme:dark_high_contrast
  2. Notice that hovering or clicking on items in the list doesn't change the background color

Expected behavior

ActionList.Item should change background colors when hovering or focusing. See example in the dark theme:

CleanShot 2021-09-29 at 17 43 40

CleanShot 2021-09-30 at 07 39 38

Additional context

The hover and focus background colors are currently hard-coded in the ActionList.Item component (source) because it was built before the new functional color system variables where published. Now that the new functional variables are published, let's use those instead. Whoever takes this on should work with @auareyou to pick the right color variables.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions