[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

@@ -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 = {

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`,
+      );
+    });
+  });
 });