[AccordionSummary] Ensure backwards compatible deprecation of classes…

….focused (#27351)

Co-authored-by: Marija Najdova <[email protected]>

docs/pages/api-docs/accordion-summary.md

@@ -44,6 +44,7 @@ Any other props supplied will be provided to the root element ([ButtonBase](/api
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiAccordionSummary-root</span> | Styles applied to the root element.
 | <span class="prop-name">expanded</span> | <span class="prop-name">.Mui-expanded</span> | Pseudo-class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`.
+| <span class="prop-name">focused</span> | <span class="prop-name">.Mui-focused</span> | Pseudo-class applied to the ButtonBase root element if the button is keyboard focused.
 | <span class="prop-name">focusVisible</span> | <span class="prop-name">.Mui-focusVisible</span> | Pseudo-class applied to the ButtonBase root element if the button is keyboard focused.
 | <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
 | <span class="prop-name">content</span> | <span class="prop-name">.MuiAccordionSummary-content</span> | Styles applied to the children wrapper element.

packages/material-ui/src/Accordion/Accordion.js

@@ -172,19 +172,7 @@ Accordion.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: chainPropTypes(PropTypes.object, (props) => {
-    if (props.classes && props.classes.focused) {
-      throw new Error(
-        [
-          'Material-UI: the classes.focused key is deprecated.',
-          'Use `classes.focusedVisible` instead',
-          'The name of the pseudo-class was changed for consistency.',
-        ].join('\n'),
-      );
-    }
-
-    return null;
-  }),
+  classes: PropTypes.object,
   /**
    * @ignore
    */

packages/material-ui/src/AccordionSummary/AccordionSummary.d.ts

@@ -41,6 +41,8 @@ declare const AccordionSummary: ExtendButtonBase<AccordionSummaryTypeMap>;
 export type AccordionSummaryClassKey =
   | 'root'
   | 'expanded'
+  // deprecated
+  | 'focused'
   | 'focusVisible'
   | 'disabled'
   | 'content'

packages/material-ui/src/AccordionSummary/AccordionSummary.js

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { chainPropTypes } from '@material-ui/utils';
 import ButtonBase from '../ButtonBase';
 import IconButton from '../IconButton';
 import withStyles from '../styles/withStyles';
@@ -25,7 +26,7 @@ export const styles = (theme) => {
       '&$expanded': {
         minHeight: 64,
       },
-      '&$focusVisible': {
+      '&$focused, &$focusVisible': {
         backgroundColor: theme.palette.action.focus,
       },
       '&$disabled': {
@@ -35,6 +36,8 @@ export const styles = (theme) => {
     /* Pseudo-class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`. */
     expanded: {},
     /* Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. */
+    focused: {},
+    /* Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. */
     focusVisible: {},
     /* Pseudo-class applied to the root element if `disabled={true}`. */
     disabled: {},
@@ -140,7 +143,19 @@ AccordionSummary.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object,
+  classes: chainPropTypes(PropTypes.object, (props) => {
+    if (props.classes.focused.indexOf(' ') !== -1) {
+      return new Error(
+        [
+          'Material-UI: The `classes.focused` key is deprecated.',
+          'Use `classes.focusVisible` instead.',
+          'The name of the pseudo-class was changed for consistency.',
+        ].join('\n'),
+      );
+    }
+
+    return null;
+  }),
   /**
    * @ignore
    */

packages/material-ui/src/AccordionSummary/AccordionSummary.test.js

@@ -1,9 +1,11 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { getClasses } from 'test/utils';
 import createMount from 'test/utils/createMount';
 import describeConformance from 'test/utils/describeConformance';
+import consoleErrorMock from 'test/utils/consoleErrorMock';
 import { createClientRender, fireEvent } from 'test/utils/createClientRender';
 import Accordion from '../Accordion';
 import AccordionSummary from './AccordionSummary';
@@ -98,4 +100,38 @@ describe('<AccordionSummary />', () => {
 
     expect(handleFocusVisible.callCount).to.equal(1);
   });
+
+  describe('warnings', () => {
+    beforeEach(() => {
+      consoleErrorMock.spy();
+      PropTypes.resetWarningCache();
+    });
+
+    afterEach(() => {
+      consoleErrorMock.reset();
+    });
+
+    it('should when using the `focused` class', () => {
+      PropTypes.checkPropTypes(
+        AccordionSummary.Naked.propTypes,
+        {
+          classes: {
+            focused:
+              // `Mui-focused` is the class generated by jss
+              // `focused` is the custom class
+              // i.e. this is the focused class when using `<AccordionSummary classes={{ focused: 'focused' }} />`
+              'Mui-focused focused',
+          },
+          children: <div />,
+        },
+        'prop',
+        'MockedName',
+      );
+
+      expect(consoleErrorMock.callCount()).to.equal(1);
+      expect(consoleErrorMock.messages()[0]).to.include(
+        'Material-UI: The `classes.focused` key is deprecated.\nUse `classes.focusVisible` instead.',
+      );
+    });
+  });
 });