[docs] Small changes

docs/pages/api/app-bar.js

@@ -2,8 +2,6 @@ import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import markdown from './app-bar.md';
 
-function Page() {
+export default function Page() {
   return <MarkdownDocs markdown={markdown} />;
 }
-
-export default Page;

docs/pages/api/app-bar.md

@@ -8,10 +8,16 @@ filename: /packages/material-ui/src/AppBar/AppBar.js
 
 <p class="description">The API documentation of the AppBar React component. Learn more about the props and the CSS customization points.</p>
 
+## Import
+
 ```js
 import AppBar from '@material-ui/core/AppBar';
+// or
+import { AppBar } from '@material-ui/core';
 ```
 
+You can learn more about the difference by [reading our guide](/guides/minimizing-bundle-size/).
+
 
 
 ## Props
@@ -57,10 +63,6 @@ If that's not sufficient, you can check the [implementation of the component](ht
 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).
 
-## Notes
-
-The component is fully [StrictMode](https://reactjs.org/docs/strict-mode.html) compatible.
-
 ## Demos
 
 - [App Bar](/components/app-bar/)

docs/pages/api/avatar.js

@@ -2,8 +2,6 @@ import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import markdown from './avatar.md';
 
-function Page() {
+export default function Page() {
   return <MarkdownDocs markdown={markdown} />;
 }
-
-export default Page;

docs/pages/api/avatar.md

@@ -8,10 +8,16 @@ filename: /packages/material-ui/src/Avatar/Avatar.js
 
 <p class="description">The API documentation of the Avatar React component. Learn more about the props and the CSS customization points.</p>
 
+## Import
+
 ```js
 import Avatar from '@material-ui/core/Avatar';
+// or
+import { Avatar } from '@material-ui/core';
 ```
 
+You can learn more about the difference by [reading our guide](/guides/minimizing-bundle-size/).
+
 
 
 ## Props
@@ -50,10 +56,6 @@ 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/Avatar/Avatar.js) for more detail.
 
-## Notes
-
-The component is fully [StrictMode](https://reactjs.org/docs/strict-mode.html) compatible.
-
 ## Demos
 
 - [Avatars](/components/avatars/)

docs/pages/api/backdrop.js

@@ -2,8 +2,6 @@ import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import markdown from './backdrop.md';
 
-function Page() {
+export default function Page() {
   return <MarkdownDocs markdown={markdown} />;
 }
-
-export default Page;

docs/pages/api/backdrop.md

@@ -8,10 +8,16 @@ filename: /packages/material-ui/src/Backdrop/Backdrop.js
 
 <p class="description">The API documentation of the Backdrop React component. Learn more about the props and the CSS customization points.</p>
 
+## Import
+
 ```js
 import Backdrop from '@material-ui/core/Backdrop';
+// or
+import { Backdrop } from '@material-ui/core';
 ```
 
+You can learn more about the difference by [reading our guide](/guides/minimizing-bundle-size/).
+
 
 
 ## Props
@@ -46,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/Backdrop/Backdrop.js) for more detail.
 
-## Notes
-
-The component can cause issues in [StrictMode](https://reactjs.org/docs/strict-mode.html).
-

docs/pages/api/badge.js

@@ -2,8 +2,6 @@ import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import markdown from './badge.md';
 
-function Page() {
+export default function Page() {
   return <MarkdownDocs markdown={markdown} />;
 }
-
-export default Page;

docs/pages/api/badge.md

@@ -8,10 +8,16 @@ filename: /packages/material-ui/src/Badge/Badge.js
 
 <p class="description">The API documentation of the Badge React component. Learn more about the props and the CSS customization points.</p>
 
+## Import
+
 ```js
 import Badge from '@material-ui/core/Badge';
+// or
+import { Badge } from '@material-ui/core';
 ```
 
+You can learn more about the difference by [reading our guide](/guides/minimizing-bundle-size/).
+
 
 
 ## Props
@@ -55,10 +61,6 @@ 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/Badge/Badge.js) for more detail.
 
-## Notes
-
-The component is fully [StrictMode](https://reactjs.org/docs/strict-mode.html) compatible.
-
 ## Demos
 
 - [Badges](/components/badges/)

docs/pages/api/bottom-navigation-action.js

@@ -2,8 +2,6 @@ import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import markdown from './bottom-navigation-action.md';
 
-function Page() {
+export default function Page() {
   return <MarkdownDocs markdown={markdown} />;
 }
-
-export default Page;

docs/pages/api/bottom-navigation-action.md

@@ -8,10 +8,16 @@ filename: /packages/material-ui/src/BottomNavigationAction/BottomNavigationActio
 
 <p class="description">The API documentation of the BottomNavigationAction React component. Learn more about the props and the CSS customization points.</p>
 
+## Import
+
 ```js
 import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
+// or
+import { BottomNavigationAction } from '@material-ui/core';
 ```
 
+You can learn more about the difference by [reading our guide](/guides/minimizing-bundle-size/).
+
 
 
 ## Props
@@ -55,10 +61,6 @@ 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).
 
-## Notes
-
-The component can cause issues in [StrictMode](https://reactjs.org/docs/strict-mode.html).
-
 ## Demos
 
 - [Bottom Navigation](/components/bottom-navigation/)

docs/pages/api/bottom-navigation.js

@@ -2,8 +2,6 @@ import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import markdown from './bottom-navigation.md';
 
-function Page() {
+export default function Page() {
   return <MarkdownDocs markdown={markdown} />;
 }
-
-export default Page;

docs/pages/api/bottom-navigation.md

@@ -8,10 +8,16 @@ filename: /packages/material-ui/src/BottomNavigation/BottomNavigation.js
 
 <p class="description">The API documentation of the BottomNavigation React component. Learn more about the props and the CSS customization points.</p>
 
+## Import
+
 ```js
 import BottomNavigation from '@material-ui/core/BottomNavigation';
+// or
+import { BottomNavigation } from '@material-ui/core';
 ```
 
+You can learn more about the difference by [reading our guide](/guides/minimizing-bundle-size/).
+
 
 
 ## Props
@@ -46,10 +52,6 @@ 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/BottomNavigation/BottomNavigation.js) for more detail.
 
-## Notes
-
-The component is fully [StrictMode](https://reactjs.org/docs/strict-mode.html) compatible.
-
 ## Demos
 
 - [Bottom Navigation](/components/bottom-navigation/)

docs/pages/api/breadcrumbs.js

@@ -2,8 +2,6 @@ import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import markdown from './breadcrumbs.md';
 
-function Page() {
+export default function Page() {
   return <MarkdownDocs markdown={markdown} />;
 }
-
-export default Page;

docs/pages/api/breadcrumbs.md

@@ -8,10 +8,16 @@ filename: /packages/material-ui/src/Breadcrumbs/Breadcrumbs.js
 
 <p class="description">The API documentation of the Breadcrumbs React component. Learn more about the props and the CSS customization points.</p>
 
+## Import
+
 ```js
 import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+// or
+import { Breadcrumbs } from '@material-ui/core';
 ```
 
+You can learn more about the difference by [reading our guide](/guides/minimizing-bundle-size/).
+
 
 
 ## Props
@@ -50,10 +56,6 @@ 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/Breadcrumbs/Breadcrumbs.js) for more detail.
 
-## Notes
-
-The component is fully [StrictMode](https://reactjs.org/docs/strict-mode.html) compatible.
-
 ## Demos
 
 - [Breadcrumbs](/components/breadcrumbs/)

docs/pages/api/button-base.js

@@ -2,8 +2,6 @@ import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import markdown from './button-base.md';
 
-function Page() {
+export default function Page() {
   return <MarkdownDocs markdown={markdown} />;
 }
-
-export default Page;

docs/pages/api/button-base.md

@@ -8,10 +8,16 @@ filename: /packages/material-ui/src/ButtonBase/ButtonBase.js
 
 <p class="description">The API documentation of the ButtonBase React component. Learn more about the props and the CSS customization points.</p>
 
+## Import
+
 ```js
 import ButtonBase from '@material-ui/core/ButtonBase';
+// or
+import { ButtonBase } from '@material-ui/core';
 ```
 
+You can learn more about the difference by [reading our guide](/guides/minimizing-bundle-size/).
+
 `ButtonBase` contains as few styles as possible.
 It aims to be a simple building block for creating a button.
 It contains a load of style reset and some focus/ripple logic.
@@ -58,10 +64,6 @@ 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/ButtonBase/ButtonBase.js) for more detail.
 
-## Notes
-
-The component is fully [StrictMode](https://reactjs.org/docs/strict-mode.html) compatible.
-
 ## Demos
 
 - [Buttons](/components/buttons/)

docs/pages/api/button-group.js

@@ -2,8 +2,6 @@ import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import markdown from './button-group.md';
 
-function Page() {
+export default function Page() {
   return <MarkdownDocs markdown={markdown} />;
 }
-
-export default Page;

docs/pages/api/button-group.md

@@ -8,10 +8,16 @@ filename: /packages/material-ui/src/ButtonGroup/ButtonGroup.js
 
 <p class="description">The API documentation of the ButtonGroup React component. Learn more about the props and the CSS customization points.</p>
 
+## Import
+
 ```js
 import ButtonGroup from '@material-ui/core/ButtonGroup';
+// or
+import { ButtonGroup } from '@material-ui/core';
 ```
 
+You can learn more about the difference by [reading our guide](/guides/minimizing-bundle-size/).
+
 
 
 ## Props
@@ -59,10 +65,6 @@ 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/ButtonGroup/ButtonGroup.js) for more detail.
 
-## Notes
-
-The component is fully [StrictMode](https://reactjs.org/docs/strict-mode.html) compatible.
-
 ## Demos
 
 - [Buttons](/components/buttons/)

docs/pages/api/button.js

@@ -2,8 +2,6 @@ import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import markdown from './button.md';
 
-function Page() {
+export default function Page() {
   return <MarkdownDocs markdown={markdown} />;
 }
-
-export default Page;

docs/pages/api/button.md

@@ -8,10 +8,16 @@ filename: /packages/material-ui/src/Button/Button.js
 
 <p class="description">The API documentation of the Button React component. Learn more about the props and the CSS customization points.</p>
 
+## Import
+
 ```js
 import Button from '@material-ui/core/Button';
+// or
+import { Button } from '@material-ui/core';
 ```
 
+You can learn more about the difference by [reading our guide](/guides/minimizing-bundle-size/).
+
 
 
 ## Props
@@ -72,10 +78,6 @@ 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).
 
-## Notes
-
-The component can cause issues in [StrictMode](https://reactjs.org/docs/strict-mode.html).
-
 ## Demos
 
 - [Buttons](/components/buttons/)

docs/pages/api/card-action-area.js

@@ -2,8 +2,6 @@ import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import markdown from './card-action-area.md';
 
-function Page() {
+export default function Page() {
   return <MarkdownDocs markdown={markdown} />;
 }
-
-export default Page;