From f6863086e3bc72074e49716f28f2264337527607 Mon Sep 17 00:00:00 2001
From: Radoslav Demirov <rdemirov@gmail.com>
Date: Sat, 19 May 2018 13:03:18 +0300
Subject: [PATCH] [ListItem] Take the focusVisibleClassName property into
 account (#11451)

* fix : #11432 Take the focusVisibleClassName property into account

* fix : #11432 : Correct classNames call in ListItem.js

* chore: #11432 Add property description to the list-item.md file

* add a test
---
 packages/material-ui/src/ListItem/ListItem.js      | 10 +++++++++-
 packages/material-ui/src/ListItem/ListItem.test.js | 11 +++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/material-ui/src/ListItem/ListItem.js b/packages/material-ui/src/ListItem/ListItem.js
index 99189577053bfd..12d5049ad073b7 100644
--- a/packages/material-ui/src/ListItem/ListItem.js
+++ b/packages/material-ui/src/ListItem/ListItem.js
@@ -78,6 +78,7 @@ class ListItem extends React.Component {
       disabled,
       disableGutters,
       divider,
+      focusVisibleClassName,
       ...other
     } = this.props;
 
@@ -105,7 +106,10 @@ class ListItem extends React.Component {
 
     if (button) {
       componentProps.component = componentProp || 'div';
-      componentProps.focusVisibleClassName = classes.focusVisible;
+      componentProps.focusVisibleClassName = classNames(
+        classes.focusVisible,
+        focusVisibleClassName,
+      );
       Component = ButtonBase;
     }
 
@@ -186,6 +190,10 @@ ListItem.propTypes = {
    * If `true`, a 1px light border is added to the bottom of the list item.
    */
   divider: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  focusVisibleClassName: PropTypes.string,
 };
 
 ListItem.defaultProps = {
diff --git a/packages/material-ui/src/ListItem/ListItem.test.js b/packages/material-ui/src/ListItem/ListItem.test.js
index 540dc3be4d9c2f..4e1779e3c527b0 100644
--- a/packages/material-ui/src/ListItem/ListItem.test.js
+++ b/packages/material-ui/src/ListItem/ListItem.test.js
@@ -158,4 +158,15 @@ describe('<ListItem />', () => {
       assert.strictEqual(wrapper.hasClass('bubu'), true);
     });
   });
+
+  describe('prop: focusVisibleClassName', () => {
+    it('should merge the class names', () => {
+      const wrapper = shallow(<ListItem button focusVisibleClassName="focusVisibleClassName" />);
+      assert.strictEqual(wrapper.props().component, 'div');
+      assert.strictEqual(
+        wrapper.props().focusVisibleClassName,
+        `${classes.focusVisible} focusVisibleClassName`,
+      );
+    });
+  });
 });