Skip to content

Background styles for focused action list item - #1158

Merged
dgreif merged 3 commits into
mainfrom
action-list-state-backgrounds
May 20, 2021
Merged

Background styles for focused action list item#1158
dgreif merged 3 commits into
mainfrom
action-list-state-backgrounds

Conversation

@dgreif

@dgreifdgreif commented Apr 9, 2021

Copy link
Copy Markdown
Contributor

Work in #1135 revealed that ActionListItems were not focusable, and when made focusable, their styling was not correct.

  • Make list items focusable by setting tabindex="-1". useFocusZone will latch onto this and set the tab index to 0 when enabled.
  • Add background colors/remove outline when items are focused.
  • Added focus zone to the ActionList story to make focus state easier to test

Closes#1180

Screenshots

Before

Gray is hover, outline is focused
image

After

Lighter is hover, darker is focus
image
image

Dark Mode

image

Dark Dimmed Mode

image

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

@changeset-bot

changeset-botBot commented Apr 9, 2021

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 2647438

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
NameType
@primer/componentsPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel

vercelBot commented Apr 9, 2021

Copy link
Copy Markdown

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primer-components/GQV7e72mepwCA26ScBsbegfRcxwv
✅ Preview: https://primer-components-git-action-list-state-backgrounds-primer.vercel.app

@dgreif
dgreifforce-pushed the action-list-state-backgrounds branch 2 times, most recently from 40813d3 to eea3bb7CompareMay 19, 2021 21:07
@dgreif
dgreif requested a review from colebemisMay 19, 2021 21:09
@dgreif
dgreifforce-pushed the action-list-state-backgrounds branch from eea3bb7 to 8ff3d48CompareMay 19, 2021 21:20
@dgreif
dgreifforce-pushed the action-list-state-backgrounds branch from 8ff3d48 to c5ad77fCompareMay 19, 2021 23:24
@dgreif
dgreif enabled auto-merge (squash) May 20, 2021 20:59
@dgreif
dgreif merged commit c199131 into mainMay 20, 2021
@dgreif
dgreif deleted the action-list-state-backgrounds branch May 20, 2021 21:03
@github-actionsgithub-actionsBot mentioned this pull request May 20, 2021
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

DropdownMenu and ActionMenu focus styles need background colors

3 participants

@dgreif@colebemis@vdepizzol