Add focus styles (#284)

microsoft · Sep 26, 2018 · 7e186cc · 7e186cc
1 parent 7f70b3a
commit 7e186cc
Showing 1 changed file with 18 additions and 15 deletions.
diff --git a/src/themes/teams/components/List/listItemStyles.ts b/src/themes/teams/components/List/listItemStyles.ts
@@ -2,6 +2,22 @@ import { pxToRem } from '../../../../lib'
 import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
 import { IListItemProps } from '../../../../components/List/ListItem'
 
+const hoverStyle = variables => ({
+  background: variables.selectionHoverBackgroundColor,
+  color: variables.selectionHoverColor,
+  cursor: 'pointer',
+
+  '& .ui-item-layout__header': { color: 'inherit' },
+  '& .ui-item-layout__content': { color: 'inherit' },
+
+  // hide the header media and content media on hover
+  '& .ui-item-layout__headerMedia': { display: 'none', color: 'inherit' },
+  '& .ui-item-layout__contentMedia': { display: 'none', color: 'inherit' },
+
+  // show the end media on hover
+  '& .ui-item-layout__endMedia': { display: 'unset', color: 'inherit' },
+})
+
 const listItemStyles: IComponentPartStylesInput<IListItemProps, any> = {
   root: ({ props: { selection, important }, variables }): ICSSInJSStyle => ({
     ...(selection && {
@@ -10,21 +26,8 @@ const listItemStyles: IComponentPartStylesInput<IListItemProps, any> = {
       // show the end media on hover
       '& .ui-item-layout__endMedia': { display: 'none' },
 
-      ':hover': {
-        background: variables.selectionHoverBackgroundColor,
-        color: variables.selectionHoverColor,
-        cursor: 'pointer',
-
-        '& .ui-item-layout__header': { color: 'inherit' },
-        '& .ui-item-layout__content': { color: 'inherit' },
-
-        // hide the header media and content media on hover
-        '& .ui-item-layout__headerMedia': { display: 'none', color: 'inherit' },
-        '& .ui-item-layout__contentMedia': { display: 'none', color: 'inherit' },
-
-        // show the end media on hover
-        '& .ui-item-layout__endMedia': { display: 'unset', color: 'inherit' },
-      },
+      '&:hover': hoverStyle(variables),
+      '&:focus': hoverStyle(variables),
     }),
     ...(important && {
       fontWeight: 'bold',