[Autocomplete] Follow Material Design State spec (#23323)

mui · Oct 31, 2020 · d690483 · d690483
1 parent b34bee7
commit d690483
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 10 deletions.
diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.js b/packages/material-ui/src/Autocomplete/Autocomplete.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { withStyles } from '../styles';
+import { alpha } from '../styles/colorManipulator';
 import Popper from '../Popper';
 import ListSubheader from '../ListSubheader';
 import Paper from '../Paper';
@@ -205,19 +206,39 @@ export const styles = (theme) => ({
     [theme.breakpoints.up('sm')]: {
       minHeight: 'auto',
     },
-    '&[aria-selected="true"]': {
-      backgroundColor: theme.palette.action.selected,
-    },
     '&[data-focus="true"]': {
       backgroundColor: theme.palette.action.hover,
-    },
-    '&:active': {
-      backgroundColor: theme.palette.action.selected,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent',
+      },
     },
     '&[aria-disabled="true"]': {
       opacity: theme.palette.action.disabledOpacity,
       pointerEvents: 'none',
     },
+    '&.Mui-focusVisible': {
+      backgroundColor: theme.palette.action.focus,
+    },
+    '&[aria-selected="true"]': {
+      backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+      '&[data-focus="true"]': {
+        backgroundColor: alpha(
+          theme.palette.primary.main,
+          theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
+        ),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: theme.palette.action.selected,
+        },
+      },
+      '&.Mui-focusVisible': {
+        backgroundColor: alpha(
+          theme.palette.primary.main,
+          theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
+        ),
+      },
+    },
   },
   /* Styles applied to the group's label elements. */
   groupLabel: {

diff --git a/packages/material-ui/src/PaginationItem/PaginationItem.js b/packages/material-ui/src/PaginationItem/PaginationItem.js
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { alpha, useTheme, withStyles, useThemeVariants } from '../styles';
+import { useTheme, withStyles, useThemeVariants } from '../styles';
+import { alpha } from '../styles/colorManipulator';
 import ButtonBase from '../ButtonBase';
 import { capitalize } from '../utils';
 import FirstPageIcon from '../internal/svg-icons/FirstPage';
@@ -34,6 +35,9 @@ export const styles = (theme) => ({
         backgroundColor: 'transparent',
       },
     },
+    '&$disabled': {
+      opacity: theme.palette.action.disabledOpacity,
+    },
     '&$focusVisible': {
       backgroundColor: theme.palette.action.focus,
     },
@@ -61,9 +65,6 @@ export const styles = (theme) => ({
         backgroundColor: theme.palette.action.selected,
       },
     },
-    '&$disabled': {
-      opacity: theme.palette.action.disabledOpacity,
-    },
   },
   /* Styles applied applied to the root element if `size="small"`. */
   sizeSmall: {

diff --git a/packages/material-ui/src/useAutocomplete/useAutocomplete.js b/packages/material-ui/src/useAutocomplete/useAutocomplete.js
@@ -299,6 +299,7 @@ export default function useAutocomplete(props) {
     const prev = listboxRef.current.querySelector('[data-focus]');
     if (prev) {
       prev.removeAttribute('data-focus');
+      prev.classList.remove('Mui-focusVisible');
     }
 
     const listboxNode = listboxRef.current.parentElement.querySelector('[role="listbox"]');
@@ -320,6 +321,9 @@ export default function useAutocomplete(props) {
     }
 
     option.setAttribute('data-focus', 'true');
+    if (reason === 'keyboard') {
+      option.classList.add('Mui-focusVisible');
+    }
 
     // Scroll active descendant into view.
     // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js