diff --git a/docs/pages/api-docs/accordion-summary.md b/docs/pages/api-docs/accordion-summary.md index efdf65f42bd5eb..bb7a3b2173c889 100644 --- a/docs/pages/api-docs/accordion-summary.md +++ b/docs/pages/api-docs/accordion-summary.md @@ -44,6 +44,7 @@ Any other props supplied will be provided to the root element ([ButtonBase](/api |:-----|:-------------|:------------| | root | .MuiAccordionSummary-root | Styles applied to the root element. | expanded | .Mui-expanded | Pseudo-class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`. +| focused | .Mui-focused | Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. | focusVisible | .Mui-focusVisible | Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. | disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. | content | .MuiAccordionSummary-content | Styles applied to the children wrapper element. diff --git a/packages/material-ui/src/Accordion/Accordion.js b/packages/material-ui/src/Accordion/Accordion.js index 59cd563bc450c8..19fd000c8f3454 100644 --- a/packages/material-ui/src/Accordion/Accordion.js +++ b/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 */ diff --git a/packages/material-ui/src/AccordionSummary/AccordionSummary.d.ts b/packages/material-ui/src/AccordionSummary/AccordionSummary.d.ts index 75ee975e173e39..edfa4c92238d15 100644 --- a/packages/material-ui/src/AccordionSummary/AccordionSummary.d.ts +++ b/packages/material-ui/src/AccordionSummary/AccordionSummary.d.ts @@ -41,6 +41,8 @@ declare const AccordionSummary: ExtendButtonBase; export type AccordionSummaryClassKey = | 'root' | 'expanded' + // deprecated + | 'focused' | 'focusVisible' | 'disabled' | 'content' diff --git a/packages/material-ui/src/AccordionSummary/AccordionSummary.js b/packages/material-ui/src/AccordionSummary/AccordionSummary.js index d37bd392224dc9..d2f730e8610835 100644 --- a/packages/material-ui/src/AccordionSummary/AccordionSummary.js +++ b/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 */ diff --git a/packages/material-ui/src/AccordionSummary/AccordionSummary.test.js b/packages/material-ui/src/AccordionSummary/AccordionSummary.test.js index 43f9627288dbe6..529f0d7e7ec717 100644 --- a/packages/material-ui/src/AccordionSummary/AccordionSummary.test.js +++ b/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('', () => { 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 `` + 'Mui-focused focused', + }, + children:
, + }, + '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.', + ); + }); + }); });