diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx index d22996a5bcb..afc236e5fcd 100644 --- a/src/ActionList/Item.tsx +++ b/src/ActionList/Item.tsx @@ -53,12 +53,16 @@ const StyledItem = styled.div<{variant: ItemProps['variant']} & SxProp>` @media (hover: hover) and (pointer: fine) { :hover { - background: ${props => - props.variant === 'danger' ? get('colors.bg.danger') : get('colors.selectMenu.tapHighlight')}; + background: ${props => (props.variant === 'danger' ? '#FFF0F2' : '#F0F3F5')}; cursor: pointer; } } + &:focus { + background: ${props => (props.variant === 'danger' ? '#FFDBE0' : '#E0E4E7')}; + outline: none; + } + ${sx} ` @@ -103,7 +107,7 @@ export function Item({ ...props }: Partial): JSX.Element { return ( - + {LeadingVisual && ( diff --git a/src/stories/ActionList.stories.tsx b/src/stories/ActionList.stories.tsx index 1ed60e29324..1bb2ee21a63 100644 --- a/src/stories/ActionList.stories.tsx +++ b/src/stories/ActionList.stories.tsx @@ -10,12 +10,13 @@ import { GearIcon } from '@primer/octicons-react' import {Meta} from '@storybook/react' -import React from 'react' +import React, {useRef} from 'react' import styled from 'styled-components' import {ThemeProvider} from '..' import {ActionList as _ActionList} from '../ActionList' import {Header} from '../ActionList/Header' import BaseStyles from '../BaseStyles' +import {useFocusZone} from '../hooks/useFocusZone' import sx from '../sx' const ActionList = Object.assign(_ActionList, { @@ -77,10 +78,13 @@ export function ActionsStory(): JSX.Element { ActionsStory.storyName = 'Actions' export function SimpleListStory(): JSX.Element { + const containerRef = useRef(null) + useFocusZone({containerRef}) + return ( <>

Simple List

- +