[ExpansionPanel] Rename to Accordion, add warning to current exports (#…

…21560)

docs/pages/api-docs/accordion-actions.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'api/accordion-actions';
+const requireRaw = require.context('!raw-loader!./', false, /\/accordion-actions\.md$/);
+
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

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

@@ -0,0 +1,57 @@
+---
+filename: /packages/material-ui/src/AccordionActions/AccordionActions.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# AccordionActions API
+
+<p class="description">The API documentation of the AccordionActions React component. Learn more about the props and the CSS customization points.</p>
+
+## Import
+
+```js
+import AccordionActions from '@material-ui/core/AccordionActions';
+// or
+import { AccordionActions } from '@material-ui/core';
+```
+
+You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
+
+
+
+## Component name
+
+The `MuiAccordionActions` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| <span class="prop-name">disableSpacing</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the actions do not have additional margin. |
+
+The `ref` is forwarded to the root element.
+
+Any other props supplied will be provided to the root element (native element).
+
+## CSS
+
+| Rule name | Global class | Description |
+|:-----|:-------------|:------------|
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiAccordionActions-root</span> | Styles applied to the root element.
+| <span class="prop-name">spacing</span> | <span class="prop-name">.MuiAccordionActions-spacing</span> | Styles applied to the root element if `disableSpacing={false}`.
+
+You can override the style of the component thanks to one of these customization points:
+
+- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
+- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
+- With a theme and an [`overrides` property](/customization/globals/#css).
+
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/AccordionActions/AccordionActions.js) for more detail.
+
+## Demos
+
+- [Accordion](/components/accordion/)
+

docs/pages/api-docs/accordion-details.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'api/accordion-details';
+const requireRaw = require.context('!raw-loader!./', false, /\/accordion-details\.md$/);
+
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

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

@@ -0,0 +1,55 @@
+---
+filename: /packages/material-ui/src/AccordionDetails/AccordionDetails.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# AccordionDetails API
+
+<p class="description">The API documentation of the AccordionDetails React component. Learn more about the props and the CSS customization points.</p>
+
+## Import
+
+```js
+import AccordionDetails from '@material-ui/core/AccordionDetails';
+// or
+import { AccordionDetails } from '@material-ui/core';
+```
+
+You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
+
+
+
+## Component name
+
+The `MuiAccordionDetails` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the accordion details. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+
+The `ref` is forwarded to the root element.
+
+Any other props supplied will be provided to the root element (native element).
+
+## CSS
+
+| Rule name | Global class | Description |
+|:-----|:-------------|:------------|
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiAccordionDetails-root</span> | Styles applied to the root element.
+
+You can override the style of the component thanks to one of these customization points:
+
+- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
+- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
+- With a theme and an [`overrides` property](/customization/globals/#css).
+
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/AccordionDetails/AccordionDetails.js) for more detail.
+
+## Demos
+
+- [Accordion](/components/accordion/)
+

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'api/accordion-summary';
+const requireRaw = require.context('!raw-loader!./', false, /\/accordion-summary\.md$/);
+
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

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

@@ -0,0 +1,67 @@
+---
+filename: /packages/material-ui/src/AccordionSummary/AccordionSummary.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# AccordionSummary API
+
+<p class="description">The API documentation of the AccordionSummary React component. Learn more about the props and the CSS customization points.</p>
+
+## Import
+
+```js
+import AccordionSummary from '@material-ui/core/AccordionSummary';
+// or
+import { AccordionSummary } from '@material-ui/core';
+```
+
+You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
+
+
+
+## Component name
+
+The `MuiAccordionSummary` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the accordion summary. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| <span class="prop-name">expandIcon</span> | <span class="prop-type">node</span> |  | The icon to display as the expand indicator. |
+| <span class="prop-name">IconButtonProps</span> | <span class="prop-type">object</span> |  | Props applied to the `IconButton` element wrapping the expand icon. |
+
+The `ref` is forwarded to the root element.
+
+Any other props supplied will be provided to the root element ([ButtonBase](/api/button-base/)).
+
+## CSS
+
+| Rule name | Global class | Description |
+|:-----|:-------------|:------------|
+| <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 root element if `focused={true}`.
+| <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.
+| <span class="prop-name">expandIcon</span> | <span class="prop-name">.MuiAccordionSummary-expandIcon</span> | Styles applied to the `IconButton` component when `expandIcon` is supplied.
+
+You can override the style of the component thanks to one of these customization points:
+
+- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
+- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
+- With a theme and an [`overrides` property](/customization/globals/#css).
+
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/AccordionSummary/AccordionSummary.js) for more detail.
+
+## Inheritance
+
+The props of the [ButtonBase](/api/button-base/) component are also available.
+You can take advantage of this behavior to [target nested components](/guides/api/#spread).
+
+## Demos
+
+- [Accordion](/components/accordion/)
+

docs/pages/api-docs/accordion.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'api/accordion';
+const requireRaw = require.context('!raw-loader!./', false, /\/accordion\.md$/);
+
+export default function Page({ docs }) {
+  return <MarkdownDocs docs={docs} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/api-docs/accordion.md

@@ -0,0 +1,70 @@
+---
+filename: /packages/material-ui/src/Accordion/Accordion.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# Accordion API
+
+<p class="description">The API documentation of the Accordion React component. Learn more about the props and the CSS customization points.</p>
+
+## Import
+
+```js
+import Accordion from '@material-ui/core/Accordion';
+// or
+import { Accordion } from '@material-ui/core';
+```
+
+You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
+
+
+
+## Component name
+
+The `MuiAccordion` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span class="prop-name required">children<abbr title="required">*</abbr></span> | <span class="prop-type">node</span> |  | The content of the accordion. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| <span class="prop-name">defaultExpanded</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, expands the accordion by default. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the accordion will be displayed in a disabled state. |
+| <span class="prop-name">expanded</span> | <span class="prop-type">bool</span> |  | If `true`, expands the accordion, otherwise collapse it. Setting this prop enables control over the accordion. |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the expand/collapse state is changed.<br><br>**Signature:**<br>`function(event: object, expanded: boolean) => void`<br>*event:* The event source of the callback.<br>*expanded:* The `expanded` state of the accordion. |
+| <span class="prop-name">square</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, rounded corners are disabled. |
+| <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Collapse</span> | The component used for the collapse effect. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |
+| <span class="prop-name">TransitionProps</span> | <span class="prop-type">object</span> |  | Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. |
+
+The `ref` is forwarded to the root element.
+
+Any other props supplied will be provided to the root element ([Paper](/api/paper/)).
+
+## CSS
+
+| Rule name | Global class | Description |
+|:-----|:-------------|:------------|
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiAccordion-root</span> | Styles applied to the root element.
+| <span class="prop-name">rounded</span> | <span class="prop-name">.MuiAccordion-rounded</span> | Styles applied to the root element if `square={false}`.
+| <span class="prop-name">expanded</span> | <span class="prop-name">.Mui-expanded</span> | Styles applied to the root element if `expanded={true}`.
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Styles applied to the root element if `disabled={true}`.
+
+You can override the style of the component thanks to one of these customization points:
+
+- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
+- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
+- With a theme and an [`overrides` property](/customization/globals/#css).
+
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Accordion/Accordion.js) for more detail.
+
+## Inheritance
+
+The props of the [Paper](/api/paper/) component are also available.
+You can take advantage of this behavior to [target nested components](/guides/api/#spread).
+
+## Demos
+
+- [Accordion](/components/accordion/)
+

docs/pages/api-docs/expansion-panel-actions.md

@@ -18,7 +18,10 @@ import { ExpansionPanelActions } from '@material-ui/core';
 
 You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
 
+⚠️ The ExpansionPanelActions component was renamed to AccordionActions to use a more common naming convention.
 
+You should use `import { AccordionActions } from '@material-ui/core'`
+or `import AccordionActions from '@material-ui/core/AccordionActions'`.
 
 ## Component name
 
@@ -51,7 +54,3 @@ You can override the style of the component thanks to one of these customization
 
 If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js) for more detail.
 
-## Demos
-
-- [Expansion Panels](/components/expansion-panels/)
-

docs/pages/api-docs/expansion-panel-details.md

@@ -18,7 +18,10 @@ import { ExpansionPanelDetails } from '@material-ui/core';
 
 You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
 
+⚠️ The ExpansionPanelDetails component was renamed to AccordionDetails to use a more common naming convention.
 
+You should use `import { AccordionDetails } from '@material-ui/core'`
+or `import AccordionDetails from '@material-ui/core/AccordionDetails'`.
 
 ## Component name
 
@@ -49,7 +52,3 @@ You can override the style of the component thanks to one of these customization
 
 If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js) for more detail.
 
-## Demos
-
-- [Expansion Panels](/components/expansion-panels/)
-

docs/pages/api-docs/expansion-panel-summary.md

@@ -18,7 +18,10 @@ import { ExpansionPanelSummary } from '@material-ui/core';
 
 You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
 
+⚠️ The ExpansionPanelSummary component was renamed to AccordionSummary to use a more common naming convention.
 
+You should use `import { AccordionSummary } from '@material-ui/core'`
+or `import AccordionSummary from '@material-ui/core/AccordionSummary'`.
 
 ## Component name
 
@@ -32,6 +35,7 @@ The `MuiExpansionPanelSummary` name can be used for providing [default props](/c
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">expandIcon</span> | <span class="prop-type">node</span> |  | The icon to display as the expand indicator. |
 | <span class="prop-name">IconButtonProps</span> | <span class="prop-type">object</span> |  | Props applied to the `IconButton` element wrapping the expand icon. |
+| <span class="prop-name">onFocusVisible</span> | <span class="prop-type">func</span> |  | Callback fired when the component is focused with a keyboard. We trigger a `onFocus` callback too. |
 
 The `ref` is forwarded to the root element.
 
@@ -61,7 +65,3 @@ If that's not sufficient, you can check the [implementation of the component](ht
 The props of the [ButtonBase](/api/button-base/) component are also available.
 You can take advantage of this behavior to [target nested components](/guides/api/#spread).
 
-## Demos
-
-- [Expansion Panels](/components/expansion-panels/)
-