From 0724dadce8bb18f957b7a104a22e8ca0af036b02 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 20 Jan 2018 12:59:53 +0100
Subject: [PATCH] [IconButton] Better follow the spec (#9967)

---
 pages/api/icon-button.md       | 1 -
 src/ButtonBase/TouchRipple.js  | 4 ++--
 src/IconButton/IconButton.d.ts | 3 +--
 src/IconButton/IconButton.js   | 5 +----
 4 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/pages/api/icon-button.md b/pages/api/icon-button.md
index b7f576169a4d58..499db8f275d285 100644
--- a/pages/api/icon-button.md
+++ b/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)
diff --git a/src/ButtonBase/TouchRipple.js b/src/ButtonBase/TouchRipple.js
index 322a4c99c793b9..e289b866b611e2 100644
--- a/src/ButtonBase/TouchRipple.js
+++ b/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)',
diff --git a/src/IconButton/IconButton.d.ts b/src/IconButton/IconButton.d.ts
index 1ec1b6c056d953..ffcc47b110bfeb 100644
--- a/src/IconButton/IconButton.d.ts
+++ b/src/IconButton/IconButton.d.ts
@@ -16,8 +16,7 @@ export type IconButtonClassKey =
   | 'colorSecondary'
   | 'colorInherit'
   | 'label'
-  | 'icon'
-  | 'keyboardFocused';
+  | 'icon';
 
 declare const IconButton: React.ComponentType<IconButtonProps>;
 
diff --git a/src/IconButton/IconButton.js b/src/IconButton/IconButton.js
index 93bae003fcc089..d8de2f9cc6e110 100644
--- a/src/IconButton/IconButton.js
+++ b/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}