[IconButton] Better follow the spec (#9967)

Author: oliviertassinari

pages/api/icon-button.md

@@ -34,7 +34,6 @@ This property accepts the following keys:
 - `disabled`
 - `label`
 - `icon`
-- `keyboardFocused`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/tree/v1-beta/src/IconButton/IconButton.js)

src/ButtonBase/TouchRipple.js

@@ -36,7 +36,7 @@ export const styles = theme => ({
     display: 'block',
     width: '100%',
     height: '100%',
-    animation: `mui-ripple-pulsate 1500ms ${theme.transitions.easing.easeInOut} 200ms infinite`,
+    animation: `mui-ripple-pulsate 2500ms ${theme.transitions.easing.easeInOut} 200ms infinite`,
   },
   '@keyframes mui-ripple-enter': {
     '0%': {
@@ -59,7 +59,7 @@ export const styles = theme => ({
       transform: 'scale(1)',
     },
     '50%': {
-      transform: 'scale(0.9)',
+      transform: 'scale(0.92)',
     },
     '100%': {
       transform: 'scale(1)',

src/IconButton/IconButton.d.ts

@@ -16,8 +16,7 @@ export type IconButtonClassKey =
   | 'colorSecondary'
   | 'colorInherit'
   | 'label'
-  | 'icon'
-  | 'keyboardFocused';
+  | 'icon';
 
 declare const IconButton: React.ComponentType<IconButtonProps>;
 

src/IconButton/IconButton.js

@@ -46,9 +46,6 @@ export const styles = theme => ({
     width: '1em',
     height: '1em',
   },
-  keyboardFocused: {
-    backgroundColor: theme.palette.text.divider,
-  },
 });
 
 /**
@@ -69,7 +66,7 @@ function IconButton(props) {
         className,
       )}
       centerRipple
-      keyboardFocusedClassName={classes.keyboardFocused}
+      focusRipple
       disabled={disabled}
       rootRef={buttonRef}
       ref={rootRef}