From 1e21aa8f47c8ac5504e55ddd1c3ab164c152a7f4 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 2 Jun 2018 21:49:52 +0200 Subject: [PATCH] [core] Upgrade react and marked --- .size-limit.js | 2 +- docs/src/modules/components/withRoot.js | 4 +- docs/src/modules/utils/generateMarkdown.js | 2 +- .../pages/demos/dialogs/ConfirmationDialog.js | 4 +- .../tables/CustomPaginationActionsTable.js | 4 +- docs/src/pages/demos/tables/EnhancedTable.js | 4 +- examples/gatsby/src/withRoot.js | 4 +- examples/nextjs/src/withRoot.js | 4 +- package.json | 4 +- packages/material-ui-docs/package.json | 2 +- .../src/MarkdownElement/MarkdownElement.js | 2 - .../src/ExpansionPanel/ExpansionPanel.js | 4 +- .../src/FormControl/FormControl.js | 4 +- packages/material-ui/src/Input/Textarea.js | 4 +- packages/material-ui/src/Modal/Modal.js | 4 +- packages/material-ui/src/Modal/Modal.test.js | 3 ++ .../src/SwipeableDrawer/SwipeableDrawer.js | 25 +++++++--- .../SwipeableDrawer/SwipeableDrawer.test.js | 16 +++++++ packages/material-ui/src/Tooltip/Tooltip.js | 4 +- .../material-ui/src/internal/SwitchBase.js | 4 +- pages/api/app-bar.md | 4 +- pages/api/avatar.md | 14 +++--- pages/api/backdrop.md | 6 +-- pages/api/badge.md | 6 +-- pages/api/bottom-navigation-action.md | 10 ++-- pages/api/bottom-navigation.md | 8 ++-- pages/api/button-base.md | 16 +++---- pages/api/button.md | 8 ++-- pages/api/card-actions.md | 4 +- pages/api/card-content.md | 2 +- pages/api/card-header.md | 10 ++-- pages/api/card-media.md | 6 +-- pages/api/card.md | 2 +- pages/api/checkbox.md | 20 ++++---- pages/api/chip.md | 10 ++-- pages/api/circular-progress.md | 2 +- pages/api/click-away-listener.md | 4 +- pages/api/collapse.md | 6 +-- pages/api/dialog-actions.md | 4 +- pages/api/dialog-content-text.md | 4 +- pages/api/dialog-content.md | 4 +- pages/api/dialog-title.md | 4 +- pages/api/dialog.md | 28 +++++------ pages/api/divider.md | 2 +- pages/api/drawer.md | 12 ++--- pages/api/expansion-panel-actions.md | 4 +- pages/api/expansion-panel-details.md | 4 +- pages/api/expansion-panel-summary.md | 6 +-- pages/api/expansion-panel.md | 10 ++-- pages/api/fade.md | 4 +- pages/api/form-control-label.md | 18 +++---- pages/api/form-control.md | 4 +- pages/api/form-group.md | 4 +- pages/api/form-helper-text.md | 10 ++-- pages/api/form-label.md | 12 ++--- pages/api/grid-list-tile-bar.md | 8 ++-- pages/api/grid-list-tile.md | 4 +- pages/api/grid-list.md | 4 +- pages/api/grid.md | 4 +- pages/api/grow.md | 4 +- pages/api/hidden.md | 6 +-- pages/api/icon-button.md | 6 +-- pages/api/icon.md | 4 +- pages/api/input-adornment.md | 6 +-- pages/api/input-label.md | 18 +++---- pages/api/input.md | 40 ++++++++-------- pages/api/linear-progress.md | 6 +-- pages/api/list-item-avatar.md | 4 +- pages/api/list-item-icon.md | 4 +- pages/api/list-item-secondary-action.md | 4 +- pages/api/list-item-text.md | 8 ++-- pages/api/list-item.md | 8 ++-- pages/api/list-subheader.md | 4 +- pages/api/list.md | 6 +-- pages/api/menu-item.md | 4 +- pages/api/menu-list.md | 2 +- pages/api/menu.md | 26 +++++----- pages/api/mobile-stepper.md | 8 ++-- pages/api/modal.md | 18 +++---- pages/api/mui-theme-provider.md | 8 ++-- pages/api/native-select.md | 10 ++-- pages/api/paper.md | 4 +- pages/api/popover.md | 34 ++++++------- pages/api/portal.md | 6 +-- pages/api/radio-group.md | 8 ++-- pages/api/radio.md | 24 +++++----- pages/api/root-ref.md | 4 +- pages/api/select.md | 22 ++++----- pages/api/slide.md | 4 +- pages/api/snackbar-content.md | 6 +-- pages/api/snackbar.md | 34 ++++++------- pages/api/step-button.md | 8 ++-- pages/api/step-connector.md | 2 +- pages/api/step-content.md | 6 +-- pages/api/step-icon.md | 4 +- pages/api/step-label.md | 10 ++-- pages/api/step.md | 4 +- pages/api/stepper.md | 4 +- pages/api/svg-icon.md | 8 ++-- pages/api/swipeable-drawer.md | 6 +-- pages/api/switch-base.md | 28 +++++------ pages/api/switch.md | 24 +++++----- pages/api/tab.md | 8 ++-- pages/api/table-body.md | 4 +- pages/api/table-cell.md | 12 ++--- pages/api/table-footer.md | 4 +- pages/api/table-head.md | 4 +- pages/api/table-pagination.md | 18 +++---- pages/api/table-row.md | 4 +- pages/api/table-sort-label.md | 4 +- pages/api/table.md | 4 +- pages/api/tabs.md | 12 ++--- pages/api/text-field.md | 48 +++++++++---------- pages/api/toolbar.md | 4 +- pages/api/tooltip.md | 16 +++---- pages/api/touch-ripple.md | 2 +- pages/api/typography.md | 6 +-- pages/api/zoom.md | 4 +- pages/lab/api/slider.md | 18 +++---- pages/lab/api/speed-dial-action.md | 8 ++-- pages/lab/api/speed-dial-icon.md | 6 +-- pages/lab/api/speed-dial.md | 18 +++---- yarn.lock | 18 +++---- 123 files changed, 550 insertions(+), 522 deletions(-) diff --git a/.size-limit.js b/.size-limit.js index d4bc08ddd72e38..ac662de364d6d8 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -27,7 +27,7 @@ module.exports = [ name: 'The size of all the modules of material-ui.', webpack: true, path: 'packages/material-ui/build/index.js', - limit: '94.5 KB', + limit: '94.6 KB', }, { name: 'The main bundle of the docs', diff --git a/docs/src/modules/components/withRoot.js b/docs/src/modules/components/withRoot.js index 4ea57002a13b29..31f56d66e453ae 100644 --- a/docs/src/modules/components/withRoot.js +++ b/docs/src/modules/components/withRoot.js @@ -260,8 +260,8 @@ function findActivePage(currentPages, router) { function withRoot(Component) { class WithRoot extends React.Component { - constructor(props, context) { - super(props, context); + constructor(props) { + super(props); this.redux = initRedux(this.props.reduxServerState || {}); } diff --git a/docs/src/modules/utils/generateMarkdown.js b/docs/src/modules/utils/generateMarkdown.js index f5076b1fd10783..e3ce2054bd6745 100644 --- a/docs/src/modules/utils/generateMarkdown.js +++ b/docs/src/modules/utils/generateMarkdown.js @@ -185,7 +185,7 @@ function generateProps(reactAPI) { return textProps; } - let defaultValue = ''; + let defaultValue = '\u00a0'; if (prop.defaultValue) { defaultValue = `${escapeCell( diff --git a/docs/src/pages/demos/dialogs/ConfirmationDialog.js b/docs/src/pages/demos/dialogs/ConfirmationDialog.js index 5afc99586521fa..9ff25bf78dfc5c 100644 --- a/docs/src/pages/demos/dialogs/ConfirmationDialog.js +++ b/docs/src/pages/demos/dialogs/ConfirmationDialog.js @@ -33,8 +33,8 @@ const options = [ ]; class ConfirmationDialog extends React.Component { - constructor(props, context) { - super(props, context); + constructor(props) { + super(props); this.state.value = this.props.value; } diff --git a/docs/src/pages/demos/tables/CustomPaginationActionsTable.js b/docs/src/pages/demos/tables/CustomPaginationActionsTable.js index 62fa72c49f2b15..4827dd36ca7504 100644 --- a/docs/src/pages/demos/tables/CustomPaginationActionsTable.js +++ b/docs/src/pages/demos/tables/CustomPaginationActionsTable.js @@ -113,8 +113,8 @@ const styles = theme => ({ }); class CustomPaginationActionsTable extends React.Component { - constructor(props, context) { - super(props, context); + constructor(props) { + super(props); this.state = { data: [ diff --git a/docs/src/pages/demos/tables/EnhancedTable.js b/docs/src/pages/demos/tables/EnhancedTable.js index 55ed1b91af509c..067dd3754cc00c 100644 --- a/docs/src/pages/demos/tables/EnhancedTable.js +++ b/docs/src/pages/demos/tables/EnhancedTable.js @@ -176,8 +176,8 @@ const styles = theme => ({ }); class EnhancedTable extends React.Component { - constructor(props, context) { - super(props, context); + constructor(props) { + super(props); this.state = { order: 'asc', diff --git a/examples/gatsby/src/withRoot.js b/examples/gatsby/src/withRoot.js index 17f80120672969..978b2d9e0de4d2 100644 --- a/examples/gatsby/src/withRoot.js +++ b/examples/gatsby/src/withRoot.js @@ -6,8 +6,8 @@ import getPageContext from './getPageContext'; function withRoot(Component) { class WithRoot extends React.Component { - constructor(props, context) { - super(props, context); + constructor(props) { + super(props); this.pageContext = this.props.pageContext || getPageContext(); } diff --git a/examples/nextjs/src/withRoot.js b/examples/nextjs/src/withRoot.js index e0170e27657139..6991e050f3a178 100644 --- a/examples/nextjs/src/withRoot.js +++ b/examples/nextjs/src/withRoot.js @@ -6,8 +6,8 @@ import getPageContext from './getPageContext'; function withRoot(Component) { class WithRoot extends React.Component { - constructor(props, context) { - super(props, context); + constructor(props) { + super(props); this.pageContext = this.props.pageContext || getPageContext(); } diff --git a/package.json b/package.json index 806eb43d30749d..a6e07094a3bb9b 100644 --- a/package.json +++ b/package.json @@ -126,10 +126,10 @@ "postcss": "^6.0.16", "prettier": "^1.8.2", "raw-loader": "^0.5.1", - "react": "16.3.0", + "react": "16.4.0", "react-autosuggest": "^9.3.2", "react-docgen": "^3.0.0-beta10", - "react-dom": "16.3.0", + "react-dom": "16.4.0", "react-inspector": "^2.2.2", "react-number-format": "^3.0.2", "react-redux": "^5.0.6", diff --git a/packages/material-ui-docs/package.json b/packages/material-ui-docs/package.json index 9801e2acfafcb8..dedc87c9898de3 100644 --- a/packages/material-ui-docs/package.json +++ b/packages/material-ui-docs/package.json @@ -36,7 +36,7 @@ "react-dom": "^16.3.0" }, "dependencies": { - "marked": "^0.3.12", + "marked": "^0.4.0", "nprogress": "^0.2.0", "prismjs": "^1.8.4" }, diff --git a/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js b/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js index f0153016b66aeb..a32a098bac7f70 100644 --- a/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js +++ b/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js @@ -49,8 +49,6 @@ marked.setOptions({ sanitize: false, smartLists: true, smartypants: false, - // prism uses the following class prefix. - langPrefix: 'language-', highlight(code, lang) { let language; switch (lang) { diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js index 81a15b673b0164..8d327bb8236f20 100644 --- a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js +++ b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js @@ -77,8 +77,8 @@ export const styles = theme => { }; class ExpansionPanel extends React.Component { - constructor(props, context) { - super(props, context); + constructor(props) { + super(props); this.isControlled = props.expanded != null; if (!this.isControlled) { diff --git a/packages/material-ui/src/FormControl/FormControl.js b/packages/material-ui/src/FormControl/FormControl.js index e39e37b529aff7..fbac60caad0165 100644 --- a/packages/material-ui/src/FormControl/FormControl.js +++ b/packages/material-ui/src/FormControl/FormControl.js @@ -41,8 +41,8 @@ export const styles = theme => ({ * - InputLabel */ class FormControl extends React.Component { - constructor(props, context) { - super(props, context); + constructor(props) { + super(props); // We need to iterate through the children and find the Input in order // to fully support server side rendering. diff --git a/packages/material-ui/src/Input/Textarea.js b/packages/material-ui/src/Input/Textarea.js index a5a89ddb493838..06f867287dc334 100644 --- a/packages/material-ui/src/Input/Textarea.js +++ b/packages/material-ui/src/Input/Textarea.js @@ -42,8 +42,8 @@ export const styles = { * @ignore - internal component. */ class Textarea extends React.Component { - constructor(props, context) { - super(props, context); + constructor(props) { + super(props); // expects the components it renders to respond to 'value' // so that it can check whether they are filled. diff --git a/packages/material-ui/src/Modal/Modal.js b/packages/material-ui/src/Modal/Modal.js index 3750a6dd79529d..1188af231ccc34 100644 --- a/packages/material-ui/src/Modal/Modal.js +++ b/packages/material-ui/src/Modal/Modal.js @@ -57,8 +57,8 @@ class Modal extends React.Component { return null; } - constructor(props, context) { - super(props, context); + constructor(props) { + super(props); this.state = { exited: !this.props.open, diff --git a/packages/material-ui/src/Modal/Modal.test.js b/packages/material-ui/src/Modal/Modal.test.js index 9245ffd034dcf6..990b6b7da6fcb9 100644 --- a/packages/material-ui/src/Modal/Modal.test.js +++ b/packages/material-ui/src/Modal/Modal.test.js @@ -371,6 +371,9 @@ describe('', () => { , ); + wrapper.setProps({ + open: false, + }); wrapper .find('Transition') .at(1) diff --git a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js index 2ab657ede3c034..67cfd7b7fa583a 100644 --- a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js +++ b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js @@ -10,8 +10,6 @@ import withTheme from '../styles/withTheme'; import { getTransitionProps } from '../transitions/utils'; import SwipeArea from './SwipeArea'; -const Fragment = React.Fragment || 'div'; - // This value is closed to what browsers are using internally to // trigger a native scroll. const UNCERTAINTY_THRESHOLD = 3; // px @@ -27,10 +25,23 @@ export function reset() { } class SwipeableDrawer extends React.Component { - static getDerivedStateFromProps() { - // Reset the maybeSwiping state everytime we receive new properties. + static getDerivedStateFromProps(nextProps, prevState) { + if (typeof prevState.maybeSwiping === 'undefined') { + return { + maybeSwiping: false, + open: nextProps.open, + }; + } + + if (!nextProps.open && prevState.open) { + return { + maybeSwiping: false, + open: nextProps.open, + }; + } + return { - maybeSwiping: false, + open: nextProps.open, }; } @@ -326,7 +337,7 @@ class SwipeableDrawer extends React.Component { const { maybeSwiping } = this.state; return ( - + )} - + ); } } diff --git a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.test.js b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.test.js index 981efb9a06b028..be0264826eb388 100644 --- a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.test.js +++ b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.test.js @@ -338,6 +338,22 @@ describe('', () => { }); }); + it('should abort when the SwipeableDrawer is closed', () => { + wrapper.setProps({ + open: true, + }); + assert.strictEqual(instance.isSwiping, null); + fireBodyMouseEvent('touchstart', { touches: [{ pageX: 0, clientY: 0 }] }); + assert.strictEqual(instance.isSwiping, null); + fireBodyMouseEvent('touchmove', { touches: [{ pageX: 10, clientY: 0 }] }); + assert.strictEqual(instance.isSwiping, true); + assert.strictEqual(wrapper.state().maybeSwiping, true); + wrapper.setProps({ + open: false, + }); + assert.strictEqual(wrapper.state().maybeSwiping, false); + }); + it('should wait for a clear signal to determin this.isSwiping', () => { assert.strictEqual(instance.isSwiping, null); fireBodyMouseEvent('touchstart', { touches: [{ pageX: 0, clientY: 0 }] }); diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js index f837f5c517a7f1..6e7d1ede3dd6b5 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.js +++ b/packages/material-ui/src/Tooltip/Tooltip.js @@ -97,8 +97,8 @@ function flipPlacement(placement) { } class Tooltip extends React.Component { - constructor(props, context) { - super(props, context); + constructor(props) { + super(props); this.isControlled = props.open != null; if (!this.isControlled) { diff --git a/packages/material-ui/src/internal/SwitchBase.js b/packages/material-ui/src/internal/SwitchBase.js index 57426ed0bcd771..0da8b7d209e3f7 100644 --- a/packages/material-ui/src/internal/SwitchBase.js +++ b/packages/material-ui/src/internal/SwitchBase.js @@ -32,8 +32,8 @@ export const styles = { }; class SwitchBase extends React.Component { - constructor(props, context) { - super(props, context); + constructor(props) { + super(props); this.isControlled = props.checked != null; if (!this.isControlled) { diff --git a/pages/api/app-bar.md b/pages/api/app-bar.md index d8be9950213f2e..0798d6c56266e7 100644 --- a/pages/api/app-bar.md +++ b/pages/api/app-bar.md @@ -12,8 +12,8 @@ filename: /packages/material-ui/src/AppBar/AppBar.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children * | node |   | The content of the component. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | color | enum: 'inherit' |
 'primary' |
 'secondary' |
 'default'
| 'primary' | The color of the component. It supports those theme colors that make sense for this component. | | position | enum: 'fixed' |
 'absolute' |
 'sticky' |
 'static'
| 'fixed' | The positioning type. The behavior of the different options is described [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning). Note: `sticky` is not universally supported and will fall back to `static` when unavailable. | diff --git a/pages/api/avatar.md b/pages/api/avatar.md index 80f419bc03e28a..95ab55f77263eb 100644 --- a/pages/api/avatar.md +++ b/pages/api/avatar.md @@ -12,14 +12,14 @@ filename: /packages/material-ui/src/Avatar/Avatar.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| alt | string | | Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. | -| children | node | | Used to render icon or text elements inside the Avatar. `src` and `alt` props will not be used and no `img` will be rendered by default.
This can be an element, or just a string. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| alt | string |   | Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. | +| children | node |   | Used to render icon or text elements inside the Avatar. `src` and `alt` props will not be used and no `img` will be rendered by default.
This can be an element, or just a string. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | component | union: string |
 func
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. | -| imgProps | object | | Properties applied to the `img` element when the component is used to display an image. | -| sizes | string | | The `sizes` attribute for the `img` element. | -| src | string | | The `src` attribute for the `img` element. | -| srcSet | string | | The `srcSet` attribute for the `img` element. | +| imgProps | object |   | Properties applied to the `img` element when the component is used to display an image. | +| sizes | string |   | The `sizes` attribute for the `img` element. | +| src | string |   | The `src` attribute for the `img` element. | +| srcSet | string |   | The `srcSet` attribute for the `img` element. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/backdrop.md b/pages/api/backdrop.md index 1fe562f66c4470..2b3b5415b3c68c 100644 --- a/pages/api/backdrop.md +++ b/pages/api/backdrop.md @@ -12,10 +12,10 @@ filename: /packages/material-ui/src/Backdrop/Backdrop.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | invisible | bool | false | If `true`, the backdrop is invisible. It can be used when rendering a popover or a custom select component. | -| open * | bool | | If `true`, the backdrop is open. | -| transitionDuration | union: number |
 {enter?: number, exit?: number}
| | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | +| open * | bool |   | If `true`, the backdrop is open. | +| transitionDuration | union: number |
 {enter?: number, exit?: number}
|   | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/badge.md b/pages/api/badge.md index 04174c3720c588..5c7ea44f1f4aaf 100644 --- a/pages/api/badge.md +++ b/pages/api/badge.md @@ -12,9 +12,9 @@ filename: /packages/material-ui/src/Badge/Badge.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| badgeContent * | node | | The content rendered within the badge. | -| children * | node | | The badge will be added relative to this node. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| badgeContent * | node |   | The content rendered within the badge. | +| children * | node |   | The badge will be added relative to this node. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | color | enum: 'default' |
 'primary' |
 'secondary' |
 'error'
| 'default' | The color of the component. It supports those theme colors that make sense for this component. | | component | union: string |
 func
| 'span' | The component used for the root node. Either a string to use a DOM element or a component. | diff --git a/pages/api/bottom-navigation-action.md b/pages/api/bottom-navigation-action.md index 8dc3f472de9bf6..268637c62d8ae2 100644 --- a/pages/api/bottom-navigation-action.md +++ b/pages/api/bottom-navigation-action.md @@ -12,11 +12,11 @@ filename: /packages/material-ui/src/BottomNavigationAction/BottomNavigationActio | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | -| icon | node | | The icon element. | -| label | node | | The label element. | -| showLabel | bool | | If `true`, the BottomNavigationAction will show its label. | -| value | any | | You can provide your own value. Otherwise, we fallback to the child position index. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| icon | node |   | The icon element. | +| label | node |   | The label element. | +| showLabel | bool |   | If `true`, the BottomNavigationAction will show its label. | +| value | any |   | You can provide your own value. Otherwise, we fallback to the child position index. | Any other properties supplied will be spread to the root element ([ButtonBase](/api/button-base)). diff --git a/pages/api/bottom-navigation.md b/pages/api/bottom-navigation.md index cde115f730739e..47f2662185212d 100644 --- a/pages/api/bottom-navigation.md +++ b/pages/api/bottom-navigation.md @@ -12,11 +12,11 @@ filename: /packages/material-ui/src/BottomNavigation/BottomNavigation.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | -| onChange | func | | Callback fired when the value changes.

**Signature:**
`function(event: object, value: any) => void`
*event:* The event source of the callback
*value:* We default to the index of the child | +| children * | node |   | The content of the component. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| onChange | func |   | Callback fired when the value changes.

**Signature:**
`function(event: object, value: any) => void`
*event:* The event source of the callback
*value:* We default to the index of the child | | showLabels | bool | false | If `true`, all `BottomNavigationAction`s will show their labels. By default, only the selected `BottomNavigationAction` will show its label. | -| value | any | | The value of the currently selected `BottomNavigationAction`. | +| value | any |   | The value of the currently selected `BottomNavigationAction`. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/button-base.md b/pages/api/button-base.md index cb630310b389b0..d072dc3b7a2b82 100644 --- a/pages/api/button-base.md +++ b/pages/api/button-base.md @@ -14,18 +14,18 @@ It contains a load of style reset and some focus/ripple logic. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| action | func | | Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It currently only supports `focusVisible()` action.

**Signature:**
`function(actions: object) => void`
*actions:* This object contains all possible actions that can be triggered programmatically. | -| buttonRef | union: func |
 object
| | Use that property to pass a ref callback to the native button component. | +| action | func |   | Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It currently only supports `focusVisible()` action.

**Signature:**
`function(actions: object) => void`
*actions:* This object contains all possible actions that can be triggered programmatically. | +| buttonRef | union: func |
 object
|   | Use that property to pass a ref callback to the native button component. | | centerRipple | bool | false | If `true`, the ripples will be centered. They won't start at the cursor interaction position. | -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children | node |   | The content of the component. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | component | union: string |
 func
| 'button' | The component used for the root node. Either a string to use a DOM element or a component. | -| disabled | bool | | If `true`, the base button will be disabled. | +| disabled | bool |   | If `true`, the base button will be disabled. | | disableRipple | bool | false | If `true`, the ripple effect will be disabled. | | focusRipple | bool | false | If `true`, the base button will have a keyboard focus ripple. `disableRipple` must also be `false`. | -| focusVisibleClassName | string | | This property can help a person know which element has the keyboard focus. The class name will be applied when the element gain the focus throught a keyboard interaction. It's a polyfill for the [CSS :focus-visible feature](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo). The rational for using this feature [is explain here](https://github.com/WICG/focus-visible/blob/master/explainer.md). | -| onFocusVisible | func | | Callback fired when the component is focused with a keyboard. We trigger a `onFocus` callback too. | -| TouchRippleProps | object | | Properties applied to the `TouchRipple` element. | +| focusVisibleClassName | string |   | This property can help a person know which element has the keyboard focus. The class name will be applied when the element gain the focus throught a keyboard interaction. It's a polyfill for the [CSS :focus-visible feature](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo). The rational for using this feature [is explain here](https://github.com/WICG/focus-visible/blob/master/explainer.md). | +| onFocusVisible | func |   | Callback fired when the component is focused with a keyboard. We trigger a `onFocus` callback too. | +| TouchRippleProps | object |   | Properties applied to the `TouchRipple` element. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/button.md b/pages/api/button.md index da480f3d856277..1dbca4acfddbfc 100644 --- a/pages/api/button.md +++ b/pages/api/button.md @@ -12,15 +12,15 @@ filename: /packages/material-ui/src/Button/Button.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | The content of the button. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children * | node |   | The content of the button. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | color | enum: 'default' |
 'inherit' |
 'primary' |
 'secondary'
| 'default' | The color of the component. It supports those theme colors that make sense for this component. | | component | union: string |
 func
| 'button' | The component used for the root node. Either a string to use a DOM element or a component. | | disabled | bool | false | If `true`, the button will be disabled. | | disableFocusRipple | bool | false | If `true`, the keyboard focus ripple will be disabled. `disableRipple` must also be true. | -| disableRipple | bool | | If `true`, the ripple effect will be disabled. | +| disableRipple | bool |   | If `true`, the ripple effect will be disabled. | | fullWidth | bool | false | If `true`, the button will take up the full width of its container. | -| href | string | | The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. | +| href | string |   | The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. | | mini | bool | false | If `true`, and `variant` is `'fab'`, will use mini floating action button styling. | | size | enum: 'small' |
 'medium' |
 'large'
| 'medium' | The size of the button. `small` is equivalent to the dense button styling. | | variant | enum: 'text', 'flat', 'outlined', 'contained', 'raised', 'fab'
| 'text' | The type of button. | diff --git a/pages/api/card-actions.md b/pages/api/card-actions.md index ea2ee6bb5af920..23b05042961983 100644 --- a/pages/api/card-actions.md +++ b/pages/api/card-actions.md @@ -12,8 +12,8 @@ filename: /packages/material-ui/src/CardActions/CardActions.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children | node |   | The content of the component. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | disableActionSpacing | bool | false | If `true`, the card actions do not have additional margin. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/card-content.md b/pages/api/card-content.md index ffe9c91c34df35..f00d05ba24e8b6 100644 --- a/pages/api/card-content.md +++ b/pages/api/card-content.md @@ -12,7 +12,7 @@ filename: /packages/material-ui/src/CardContent/CardContent.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | component | union: string |
 func
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/card-header.md b/pages/api/card-header.md index 5e9f72ae89227a..369042ff5ff123 100644 --- a/pages/api/card-header.md +++ b/pages/api/card-header.md @@ -12,12 +12,12 @@ filename: /packages/material-ui/src/CardHeader/CardHeader.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| action | node | | The action to display in the card header. | -| avatar | node | | The Avatar for the Card Header. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| action | node |   | The action to display in the card header. | +| avatar | node |   | The Avatar for the Card Header. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | component | union: string |
 func
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. | -| subheader | node | | The content of the component. | -| title | node | | The content of the Card Title. | +| subheader | node |   | The content of the component. | +| title | node |   | The content of the Card Title. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/card-media.md b/pages/api/card-media.md index 2b01027b4f2c56..8538ab10fdce24 100644 --- a/pages/api/card-media.md +++ b/pages/api/card-media.md @@ -12,10 +12,10 @@ filename: /packages/material-ui/src/CardMedia/CardMedia.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | component | union: string |
 func
| 'div' | Component for rendering image. Either a string to use a DOM element or a component. | -| image | string | | Image to be displayed as a background image. Either `image` or `src` prop must be specified. Note that caller must specify height otherwise the image will not be visible. | -| src | string | | An alias for `image` property. Available only with media components. Media components: `video`, `audio`, `picture`, `iframe`, `img`. | +| image | string |   | Image to be displayed as a background image. Either `image` or `src` prop must be specified. Note that caller must specify height otherwise the image will not be visible. | +| src | string |   | An alias for `image` property. Available only with media components. Media components: `video`, `audio`, `picture`, `iframe`, `img`. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/card.md b/pages/api/card.md index 693105563d0b7c..6f71ac708baba8 100644 --- a/pages/api/card.md +++ b/pages/api/card.md @@ -12,7 +12,7 @@ filename: /packages/material-ui/src/Card/Card.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | raised | bool | false | If `true`, the card will use raised styling. | Any other properties supplied will be spread to the root element ([Paper](/api/paper)). diff --git a/pages/api/checkbox.md b/pages/api/checkbox.md index f37974436e06c8..7aa1e145b8675d 100644 --- a/pages/api/checkbox.md +++ b/pages/api/checkbox.md @@ -12,21 +12,21 @@ filename: /packages/material-ui/src/Checkbox/Checkbox.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| checked | union: bool |
 string
| | If `true`, the component is checked. | +| checked | union: bool |
 string
|   | If `true`, the component is checked. | | checkedIcon | node | <CheckBoxIcon /> | The icon to display when the component is checked. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | color | enum: 'primary' |
 'secondary' |
 'default'
| 'secondary' | The color of the component. It supports those theme colors that make sense for this component. | -| disabled | bool | | If `true`, the switch will be disabled. | -| disableRipple | bool | | If `true`, the ripple effect will be disabled. | +| disabled | bool |   | If `true`, the switch will be disabled. | +| disableRipple | bool |   | If `true`, the ripple effect will be disabled. | | icon | node | <CheckBoxOutlineBlankIcon /> | The icon to display when the component is unchecked. | -| id | string | | The id of the `input` element. | +| id | string |   | The id of the `input` element. | | indeterminate | bool | false | If `true`, the component appears indeterminate. | | indeterminateIcon | node | <IndeterminateCheckBoxIcon /> | The icon to display when the component is indeterminate. | -| inputProps | object | | Properties applied to the `input` element. | -| inputRef | func | | Use that property to pass a ref callback to the native input component. | -| onChange | func | | Callback fired when the state is changed.

**Signature:**
`function(event: object, checked: boolean) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.checked`.
*checked:* The `checked` value of the switch | -| type | string | | The input component property `type`. | -| value | string | | The value of the component. | +| inputProps | object |   | Properties applied to the `input` element. | +| inputRef | func |   | Use that property to pass a ref callback to the native input component. | +| onChange | func |   | Callback fired when the state is changed.

**Signature:**
`function(event: object, checked: boolean) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.checked`.
*checked:* The `checked` value of the switch | +| type | string |   | The input component property `type`. | +| value | string |   | The value of the component. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/chip.md b/pages/api/chip.md index 42484aa54e6056..050707b88af455 100644 --- a/pages/api/chip.md +++ b/pages/api/chip.md @@ -12,13 +12,13 @@ Chips represent complex entities in small blocks, such as a contact. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| avatar | element | | Avatar element. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| avatar | element |   | Avatar element. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | clickable | bool | false | If true, the chip will appear clickable, and will raise when pressed, even if the onClick property is not defined. This can be used, for example, along with the component property to indicate an anchor Chip is clickable. | | component | union: string |
 func
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. | -| deleteIcon | element | | Override the default delete icon element. Shown only if `onDelete` is set. | -| label | node | | The content of the label. | -| onDelete | func | | Callback function fired when the delete icon is clicked. If set, the delete icon will be shown. | +| deleteIcon | element |   | Override the default delete icon element. Shown only if `onDelete` is set. | +| label | node |   | The content of the label. | +| onDelete | func |   | Callback function fired when the delete icon is clicked. If set, the delete icon will be shown. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/circular-progress.md b/pages/api/circular-progress.md index 7d0eb6fc7724d5..9464b424851264 100644 --- a/pages/api/circular-progress.md +++ b/pages/api/circular-progress.md @@ -16,7 +16,7 @@ attribute to `true` on that region until it has finished loading. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | color | enum: 'primary' |
 'secondary' |
 'inherit'
| 'primary' | The color of the component. It supports those theme colors that make sense for this component. | | size | union: number |
 string
| 40 | The size of the circle. | | thickness | number | 3.6 | The thickness of the circle. | diff --git a/pages/api/click-away-listener.md b/pages/api/click-away-listener.md index 6c285e022061e8..19a03bd799d3c9 100644 --- a/pages/api/click-away-listener.md +++ b/pages/api/click-away-listener.md @@ -12,9 +12,9 @@ Listen for click events that are triggered outside of the component children. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | | +| children * | node |   | | | mouseEvent | enum: 'onClick' |
 'onMouseDown' |
 'onMouseUp' |
 false
| 'onMouseUp' | | -| onClickAway * | func | | | +| onClickAway * | func |   | | | touchEvent | enum: 'onTouchStart' |
 'onTouchEnd' |
 false
| 'onTouchEnd' | | Any other properties supplied will be spread to the root element ([EventListener](https://github.com/oliviertassinari/react-event-listener)). diff --git a/pages/api/collapse.md b/pages/api/collapse.md index af420ca2be5297..335a728a973a3a 100644 --- a/pages/api/collapse.md +++ b/pages/api/collapse.md @@ -14,11 +14,11 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content node to be collapsed. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children | node |   | The content node to be collapsed. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | collapsedHeight | string | '0px' | The height of the container when collapsed. | | component | union: string |
 func
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. | -| in | bool | | If `true`, the component will transition in. | +| in | bool |   | If `true`, the component will transition in. | | timeout | union: number |
 {enter?: number, exit?: number} |
 enum: 'auto'

| duration.standard | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
Set to 'auto' to automatically calculate transition time based on height. | Any other properties supplied will be spread to the root element ([Transition](https://reactcommunity.org/react-transition-group/#Transition)). diff --git a/pages/api/dialog-actions.md b/pages/api/dialog-actions.md index 5d486c11967593..b69db041055d6f 100644 --- a/pages/api/dialog-actions.md +++ b/pages/api/dialog-actions.md @@ -12,8 +12,8 @@ filename: /packages/material-ui/src/DialogActions/DialogActions.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children | node |   | The content of the component. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | disableActionSpacing | bool | false | If `true`, the dialog actions do not have additional margin. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/dialog-content-text.md b/pages/api/dialog-content-text.md index 5ec3e2990c9134..02b79fd2df007b 100644 --- a/pages/api/dialog-content-text.md +++ b/pages/api/dialog-content-text.md @@ -12,8 +12,8 @@ filename: /packages/material-ui/src/DialogContentText/DialogContentText.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children | node |   | The content of the component. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | Any other properties supplied will be spread to the root element ([Typography](/api/typography)). diff --git a/pages/api/dialog-content.md b/pages/api/dialog-content.md index 240e2ce6819826..3f579bceff323d 100644 --- a/pages/api/dialog-content.md +++ b/pages/api/dialog-content.md @@ -12,8 +12,8 @@ filename: /packages/material-ui/src/DialogContent/DialogContent.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children | node |   | The content of the component. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/dialog-title.md b/pages/api/dialog-title.md index 7fe71559dfa8b2..d8beecedf2732b 100644 --- a/pages/api/dialog-title.md +++ b/pages/api/dialog-title.md @@ -12,8 +12,8 @@ filename: /packages/material-ui/src/DialogTitle/DialogTitle.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children * | node |   | The content of the component. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | disableTypography | bool | false | If `true`, the children won't be wrapped by a typography component. For instance, this can be useful to render an h4 instead of the default h2. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/dialog.md b/pages/api/dialog.md index 8917c7cb1ad9a9..639401cea571c2 100644 --- a/pages/api/dialog.md +++ b/pages/api/dialog.md @@ -12,27 +12,27 @@ Dialogs are overlaid modal paper based components with a backdrop. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | Dialog children, usually the included sub-components. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children * | node |   | Dialog children, usually the included sub-components. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | disableBackdropClick | bool | false | If `true`, clicking the backdrop will not fire the `onClose` callback. | | disableEscapeKeyDown | bool | false | If `true`, hitting escape will not fire the `onClose` callback. | | fullScreen | bool | false | If `true`, the dialog will be full-screen | | fullWidth | bool | false | If `true`, the dialog stretches to `maxWidth`. | | maxWidth | enum: 'xs' |
 'sm' |
 'md' |
 false
| 'sm' | Determine the max width of the dialog. The dialog width grows with the size of the screen, this property is useful on the desktop where you might need some coherent different width size across your application. Set to `false` to disable `maxWidth`. | -| onBackdropClick | func | | Callback fired when the backdrop is clicked. | -| onClose | func | | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback | -| onEnter | func | | Callback fired before the dialog enters. | -| onEntered | func | | Callback fired when the dialog has entered. | -| onEntering | func | | Callback fired when the dialog is entering. | -| onEscapeKeyDown | func | | Callback fired when the escape key is pressed, `disableKeyboard` is false and the modal is in focus. | -| onExit | func | | Callback fired before the dialog exits. | -| onExited | func | | Callback fired when the dialog has exited. | -| onExiting | func | | Callback fired when the dialog is exiting. | -| open * | bool | | If `true`, the Dialog is open. | -| PaperProps | object | | Properties applied to the `Paper` element. | +| onBackdropClick | func |   | Callback fired when the backdrop is clicked. | +| onClose | func |   | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback | +| onEnter | func |   | Callback fired before the dialog enters. | +| onEntered | func |   | Callback fired when the dialog has entered. | +| onEntering | func |   | Callback fired when the dialog is entering. | +| onEscapeKeyDown | func |   | Callback fired when the escape key is pressed, `disableKeyboard` is false and the modal is in focus. | +| onExit | func |   | Callback fired before the dialog exits. | +| onExited | func |   | Callback fired when the dialog has exited. | +| onExiting | func |   | Callback fired when the dialog is exiting. | +| open * | bool |   | If `true`, the Dialog is open. | +| PaperProps | object |   | Properties applied to the `Paper` element. | | TransitionComponent | union: string |
 func
| Fade | Transition component. | | transitionDuration | union: number |
 {enter?: number, exit?: number}
| { enter: duration.enteringScreen, exit: duration.leavingScreen } | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | -| TransitionProps | object | | Properties applied to the `Transition` element. | +| TransitionProps | object |   | Properties applied to the `Transition` element. | Any other properties supplied will be spread to the root element ([Modal](/api/modal)). diff --git a/pages/api/divider.md b/pages/api/divider.md index 0ac816d8fde4a8..e7a554b2d3a00f 100644 --- a/pages/api/divider.md +++ b/pages/api/divider.md @@ -13,7 +13,7 @@ filename: /packages/material-ui/src/Divider/Divider.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | absolute | bool | false | | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | component | union: string |
 func
| 'hr' | The component used for the root node. Either a string to use a DOM element or a component. | | inset | bool | false | If `true`, the divider will be indented. | | light | bool | false | If `true`, the divider will have a lighter color. | diff --git a/pages/api/drawer.md b/pages/api/drawer.md index 28a423d2d9c63b..455f5491a59712 100644 --- a/pages/api/drawer.md +++ b/pages/api/drawer.md @@ -14,14 +14,14 @@ when `variant="temporary"` is set. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | anchor | enum: 'left' |
 'top' |
 'right' |
 'bottom'
| 'left' | Side from which the drawer will appear. | -| children | node | | The contents of the drawer. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children | node |   | The contents of the drawer. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | elevation | number | 16 | The elevation of the drawer. | -| ModalProps | object | | Properties applied to the `Modal` element. | -| onClose | func | | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback | +| ModalProps | object |   | Properties applied to the `Modal` element. | +| onClose | func |   | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback | | open | bool | false | If `true`, the drawer is open. | -| PaperProps | object | | Properties applied to the `Paper` element. | -| SlideProps | object | | Properties applied to the `Slide` element. | +| PaperProps | object |   | Properties applied to the `Paper` element. | +| SlideProps | object |   | Properties applied to the `Slide` element. | | transitionDuration | union: number |
 {enter?: number, exit?: number}
| { enter: duration.enteringScreen, exit: duration.leavingScreen } | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | | variant | enum: 'permanent' |
 'persistent' |
 'temporary'
| 'temporary' | The variant of drawer. | diff --git a/pages/api/expansion-panel-actions.md b/pages/api/expansion-panel-actions.md index 2fe50917117d91..8362fdce85be46 100644 --- a/pages/api/expansion-panel-actions.md +++ b/pages/api/expansion-panel-actions.md @@ -12,8 +12,8 @@ filename: /packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children * | node |   | The content of the component. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/expansion-panel-details.md b/pages/api/expansion-panel-details.md index 67cb271ad91dbb..5e9fce90e8c678 100644 --- a/pages/api/expansion-panel-details.md +++ b/pages/api/expansion-panel-details.md @@ -12,8 +12,8 @@ filename: /packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | The content of the expansion panel details. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children * | node |   | The content of the expansion panel details. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/expansion-panel-summary.md b/pages/api/expansion-panel-summary.md index 729a4fab0014e2..62087744f197e4 100644 --- a/pages/api/expansion-panel-summary.md +++ b/pages/api/expansion-panel-summary.md @@ -12,9 +12,9 @@ filename: /packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the expansion panel summary. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | -| expandIcon | node | | The icon to display as the expand indicator. | +| children | node |   | The content of the expansion panel summary. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| expandIcon | node |   | The icon to display as the expand indicator. | Any other properties supplied will be spread to the root element ([ButtonBase](/api/button-base)). diff --git a/pages/api/expansion-panel.md b/pages/api/expansion-panel.md index 7755eaa41333fa..4acf03eaf2d203 100644 --- a/pages/api/expansion-panel.md +++ b/pages/api/expansion-panel.md @@ -12,13 +12,13 @@ filename: /packages/material-ui/src/ExpansionPanel/ExpansionPanel.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | The content of the expansion panel. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | -| CollapseProps | object | | Properties applied to the `Collapse` element. | +| children * | node |   | The content of the expansion panel. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| CollapseProps | object |   | Properties applied to the `Collapse` element. | | defaultExpanded | bool | false | If `true`, expands the panel by default. | | disabled | bool | false | If `true`, the panel will be displayed in a disabled state. | -| expanded | bool | | If `true`, expands the panel, otherwise collapse it. Setting this prop enables control over the panel. | -| onChange | func | | Callback fired when the expand/collapse state is changed.

**Signature:**
`function(event: object, expanded: boolean) => void`
*event:* The event source of the callback
*expanded:* The `expanded` state of the panel | +| expanded | bool |   | If `true`, expands the panel, otherwise collapse it. Setting this prop enables control over the panel. | +| onChange | func |   | Callback fired when the expand/collapse state is changed.

**Signature:**
`function(event: object, expanded: boolean) => void`
*event:* The event source of the callback
*expanded:* The `expanded` state of the panel | Any other properties supplied will be spread to the root element ([Paper](/api/paper)). diff --git a/pages/api/fade.md b/pages/api/fade.md index 32b34658878878..c9025a9e81753a 100644 --- a/pages/api/fade.md +++ b/pages/api/fade.md @@ -13,8 +13,8 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | union: element |
 func
| | A single child content element. | -| in | bool | | If `true`, the component will transition in. | +| children | union: element |
 func
|   | A single child content element. | +| in | bool |   | If `true`, the component will transition in. | | timeout | union: number |
 {enter?: number, exit?: number}
| { enter: duration.enteringScreen, exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | Any other properties supplied will be spread to the root element ([Transition](https://reactcommunity.org/react-transition-group/#Transition)). diff --git a/pages/api/form-control-label.md b/pages/api/form-control-label.md index 8eb99071d15911..91a4afdd3833f7 100644 --- a/pages/api/form-control-label.md +++ b/pages/api/form-control-label.md @@ -13,15 +13,15 @@ Use this component if you want to display an extra label. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| checked | union: bool |
 string
| | If `true`, the component appears selected. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | -| control | element | | A control element. For instance, it can be be a `Radio`, a `Switch` or a `Checkbox`. | -| disabled | bool | | If `true`, the control will be disabled. | -| inputRef | func | | Use that property to pass a ref callback to the native input component. | -| label | node | | The text to be used in an enclosing label element. | -| name | string | | | -| onChange | func | | Callback fired when the state is changed.

**Signature:**
`function(event: object, checked: boolean) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.checked`.
*checked:* The `checked` value of the switch | -| value | string | | The value of the component. | +| checked | union: bool |
 string
|   | If `true`, the component appears selected. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| control | element |   | A control element. For instance, it can be be a `Radio`, a `Switch` or a `Checkbox`. | +| disabled | bool |   | If `true`, the control will be disabled. | +| inputRef | func |   | Use that property to pass a ref callback to the native input component. | +| label | node |   | The text to be used in an enclosing label element. | +| name | string |   | | +| onChange | func |   | Callback fired when the state is changed.

**Signature:**
`function(event: object, checked: boolean) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.checked`.
*checked:* The `checked` value of the switch | +| value | string |   | The value of the component. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/form-control.md b/pages/api/form-control.md index cc99bec5b1bc0f..3c83244e36f3ee 100644 --- a/pages/api/form-control.md +++ b/pages/api/form-control.md @@ -19,8 +19,8 @@ This context is used by the following components: | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The contents of the form control. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children | node |   | The contents of the form control. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | component | union: string |
 func
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. | | disabled | bool | false | If `true`, the label, input and helper text should be displayed in a disabled state. | | error | bool | false | If `true`, the label should be displayed in an error state. | diff --git a/pages/api/form-group.md b/pages/api/form-group.md index c6a841e29ee957..2aede708463a49 100644 --- a/pages/api/form-group.md +++ b/pages/api/form-group.md @@ -14,8 +14,8 @@ For the `Radio`, you should be using the `RadioGroup` component instead of this | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children | node |   | The content of the component. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | row | bool | false | Display group of elements in a compact row. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/form-helper-text.md b/pages/api/form-helper-text.md index 90f5d90d4646c7..3bfcf257289ed0 100644 --- a/pages/api/form-helper-text.md +++ b/pages/api/form-helper-text.md @@ -12,12 +12,12 @@ filename: /packages/material-ui/src/FormHelperText/FormHelperText.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children | node |   | The content of the component. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | component | union: string |
 func
| 'p' | The component used for the root node. Either a string to use a DOM element or a component. | -| disabled | bool | | If `true`, the helper text should be displayed in a disabled state. | -| error | bool | | If `true`, helper text should be displayed in an error state. | -| margin | enum: 'dense'
| | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | +| disabled | bool |   | If `true`, the helper text should be displayed in a disabled state. | +| error | bool |   | If `true`, helper text should be displayed in an error state. | +| margin | enum: 'dense'
|   | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/form-label.md b/pages/api/form-label.md index 1618ea818747df..0db2c04214c4c7 100644 --- a/pages/api/form-label.md +++ b/pages/api/form-label.md @@ -12,13 +12,13 @@ filename: /packages/material-ui/src/FormLabel/FormLabel.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children | node |   | The content of the component. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | component | union: string |
 func
| 'label' | The component used for the root node. Either a string to use a DOM element or a component. | -| disabled | bool | | If `true`, the label should be displayed in a disabled state. | -| error | bool | | If `true`, the label should be displayed in an error state. | -| focused | bool | | If `true`, the input of this label is focused (used by `FormGroup` components). | -| required | bool | | If `true`, the label will indicate that the input is required. | +| disabled | bool |   | If `true`, the label should be displayed in a disabled state. | +| error | bool |   | If `true`, the label should be displayed in an error state. | +| focused | bool |   | If `true`, the input of this label is focused (used by `FormGroup` components). | +| required | bool |   | If `true`, the label will indicate that the input is required. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/grid-list-tile-bar.md b/pages/api/grid-list-tile-bar.md index 46921983eb8f98..575e57887189c6 100644 --- a/pages/api/grid-list-tile-bar.md +++ b/pages/api/grid-list-tile-bar.md @@ -12,11 +12,11 @@ filename: /packages/material-ui/src/GridListTileBar/GridListTileBar.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| actionIcon | node | | An IconButton element to be used as secondary action target (primary action target is the tile itself). | +| actionIcon | node |   | An IconButton element to be used as secondary action target (primary action target is the tile itself). | | actionPosition | enum: 'left' |
 'right'
| 'right' | Position of secondary action IconButton. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | -| subtitle | node | | String or element serving as subtitle (support text). | -| title | node | | Title to be displayed on tile. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| subtitle | node |   | String or element serving as subtitle (support text). | +| title | node |   | Title to be displayed on tile. | | titlePosition | enum: 'top' |
 'bottom'
| 'bottom' | Position of the title bar. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/grid-list-tile.md b/pages/api/grid-list-tile.md index d7433625a70255..da368c7561f048 100644 --- a/pages/api/grid-list-tile.md +++ b/pages/api/grid-list-tile.md @@ -12,8 +12,8 @@ filename: /packages/material-ui/src/GridListTile/GridListTile.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | Theoretically you can pass any node as children, but the main use case is to pass an img, in which case GridListTile takes care of making the image "cover" available space (similar to `background-size: cover` or to `object-fit: cover`). | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children | node |   | Theoretically you can pass any node as children, but the main use case is to pass an img, in which case GridListTile takes care of making the image "cover" available space (similar to `background-size: cover` or to `object-fit: cover`). | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | cols | number | 1 | Width of the tile in number of grid cells. | | component | union: string |
 func
| 'li' | The component used for the root node. Either a string to use a DOM element or a component. | | rows | number | 1 | Height of the tile in number of grid cells. | diff --git a/pages/api/grid-list.md b/pages/api/grid-list.md index 0e7d1a858ed094..d9ae45a97c2551 100644 --- a/pages/api/grid-list.md +++ b/pages/api/grid-list.md @@ -13,8 +13,8 @@ filename: /packages/material-ui/src/GridList/GridList.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | cellHeight | union: number |
 enum: 'auto'

| 180 | Number of px for one cell height. You can set `'auto'` if you want to let the children determine the height. | -| children * | node | | Grid Tiles that will be in Grid List. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children * | node |   | Grid Tiles that will be in Grid List. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | cols | number | 2 | Number of columns. | | component | union: string |
 func
| 'ul' | The component used for the root node. Either a string to use a DOM element or a component. | | spacing | number | 4 | Number of px for the spacing between tiles. | diff --git a/pages/api/grid.md b/pages/api/grid.md index a84bc44cf142d0..4c95f461156288 100644 --- a/pages/api/grid.md +++ b/pages/api/grid.md @@ -14,8 +14,8 @@ filename: /packages/material-ui/src/Grid/Grid.js |:-----|:-----|:--------|:------------| | alignContent | enum: 'stretch', 'center', 'flex-start', 'flex-end', 'space-between', 'space-around'
| 'stretch' | Defines the `align-content` style property. It's applied for all screen sizes. | | alignItems | enum: 'flex-start', 'center', 'flex-end', 'stretch', 'baseline'
| 'stretch' | Defines the `align-items` style property. It's applied for all screen sizes. | -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children | node |   | The content of the component. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | component | union: string |
 func
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. | | container | bool | false | If `true`, the component will have the flex *container* behavior. You should be wrapping *items* with a *container*. | | direction | enum: 'row' |
 'row-reverse' |
 'column' |
 'column-reverse'
| 'row' | Defines the `flex-direction` style property. It is applied for all screen sizes. | diff --git a/pages/api/grow.md b/pages/api/grow.md index 00532130d14946..d5e3d53903559c 100644 --- a/pages/api/grow.md +++ b/pages/api/grow.md @@ -13,8 +13,8 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | union: element |
 func
| | A single child content element. | -| in | bool | | If `true`, show the component; triggers the enter or exit animation. | +| children | union: element |
 func
|   | A single child content element. | +| in | bool |   | If `true`, show the component; triggers the enter or exit animation. | | timeout | union: number |
 {enter?: number, exit?: number} |
 enum: 'auto'

| 'auto' | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
Set to 'auto' to automatically calculate transition time based on height. | Any other properties supplied will be spread to the root element ([Transition](https://reactcommunity.org/react-transition-group/#Transition)). diff --git a/pages/api/hidden.md b/pages/api/hidden.md index 3be1c193b8b096..b5653534540af3 100644 --- a/pages/api/hidden.md +++ b/pages/api/hidden.md @@ -12,14 +12,14 @@ Responsively hides children based on the selected implementation. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | +| children | node |   | The content of the component. | | implementation | enum: 'js' |
 'css'
| 'js' | Specify which implementation to use. 'js' is the default, 'css' works better for server side rendering. | -| initialWidth | enum: 'xs', 'sm', 'md', 'lg', 'xl'
| | You can use this property when choosing the `js` implementation with server side rendering.
As `window.innerWidth` is unavailable on the server, we default to rendering an empty componenent during the first mount. In some situation you might want to use an heristic to approximate the screen width of the client browser screen width.
For instance, you could be using the user-agent or the client-hints. http://caniuse.com/#search=client%20hint | +| initialWidth | enum: 'xs', 'sm', 'md', 'lg', 'xl'
|   | You can use this property when choosing the `js` implementation with server side rendering.
As `window.innerWidth` is unavailable on the server, we default to rendering an empty componenent during the first mount. In some situation you might want to use an heristic to approximate the screen width of the client browser screen width.
For instance, you could be using the user-agent or the client-hints. http://caniuse.com/#search=client%20hint | | lgDown | bool | false | If true, screens this size and down will be hidden. | | lgUp | bool | false | If true, screens this size and up will be hidden. | | mdDown | bool | false | If true, screens this size and down will be hidden. | | mdUp | bool | false | If true, screens this size and up will be hidden. | -| only | union: enum: 'xs', 'sm', 'md', 'lg', 'xl'
 |
 arrayOf
| | Hide the given breakpoint(s). | +| only | union: enum: 'xs', 'sm', 'md', 'lg', 'xl'
 |
 arrayOf
|   | Hide the given breakpoint(s). | | smDown | bool | false | If true, screens this size and down will be hidden. | | smUp | bool | false | If true, screens this size and up will be hidden. | | xlDown | bool | false | If true, screens this size and down will be hidden. | diff --git a/pages/api/icon-button.md b/pages/api/icon-button.md index 9b0aa82d9d319a..e136c27b0cf739 100644 --- a/pages/api/icon-button.md +++ b/pages/api/icon-button.md @@ -13,11 +13,11 @@ regarding the available icon options. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The icon element. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children | node |   | The icon element. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | color | enum: 'default' |
 'inherit' |
 'primary' |
 'secondary'
| 'default' | The color of the component. It supports those theme colors that make sense for this component. | | disabled | bool | false | If `true`, the button will be disabled. | -| disableRipple | bool | | If `true`, the ripple will be disabled. | +| disableRipple | bool |   | If `true`, the ripple will be disabled. | Any other properties supplied will be spread to the root element ([ButtonBase](/api/button-base)). diff --git a/pages/api/icon.md b/pages/api/icon.md index f81a8f696b14e2..a29edb35acfaa1 100644 --- a/pages/api/icon.md +++ b/pages/api/icon.md @@ -12,8 +12,8 @@ filename: /packages/material-ui/src/Icon/Icon.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The name of the icon font ligature. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children | node |   | The name of the icon font ligature. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | color | enum: 'inherit', 'primary', 'secondary', 'action', 'error', 'disabled'
| 'inherit' | The color of the component. It supports those theme colors that make sense for this component. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/input-adornment.md b/pages/api/input-adornment.md index a301a7bee33d15..b787f3be350543 100644 --- a/pages/api/input-adornment.md +++ b/pages/api/input-adornment.md @@ -12,11 +12,11 @@ filename: /packages/material-ui/src/InputAdornment/InputAdornment.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | The content of the component, normally an `IconButton` or string. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children * | node |   | The content of the component, normally an `IconButton` or string. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | component | union: string |
 func
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. | | disableTypography | bool | false | If children is a string then disable wrapping in a Typography component. | -| position | enum: 'start' |
 'end'
| | The position this adornment should appear relative to the `Input`. | +| position | enum: 'start' |
 'end'
|   | The position this adornment should appear relative to the `Input`. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/input-label.md b/pages/api/input-label.md index 144ce0d2243333..c8a00bc6343167 100644 --- a/pages/api/input-label.md +++ b/pages/api/input-label.md @@ -12,16 +12,16 @@ filename: /packages/material-ui/src/InputLabel/InputLabel.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The contents of the `InputLabel`. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children | node |   | The contents of the `InputLabel`. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | disableAnimation | bool | false | If `true`, the transition animation is disabled. | -| disabled | bool | | If `true`, apply disabled class. | -| error | bool | | If `true`, the label will be displayed in an error state. | -| focused | bool | | If `true`, the input of this label is focused. | -| FormLabelClasses | object | | `classes` property applied to the `FormLabel` element. | -| margin | enum: 'dense'
| | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | -| required | bool | | if `true`, the label will indicate that the input is required. | -| shrink | bool | | If `true`, the label is shrunk. | +| disabled | bool |   | If `true`, apply disabled class. | +| error | bool |   | If `true`, the label will be displayed in an error state. | +| focused | bool |   | If `true`, the input of this label is focused. | +| FormLabelClasses | object |   | `classes` property applied to the `FormLabel` element. | +| margin | enum: 'dense'
|   | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | +| required | bool |   | if `true`, the label will indicate that the input is required. | +| shrink | bool |   | If `true`, the label is shrunk. | Any other properties supplied will be spread to the root element ([FormLabel](/api/form-label)). diff --git a/pages/api/input.md b/pages/api/input.md index 08f00df4e2fb0f..96931ddd5f9dc2 100644 --- a/pages/api/input.md +++ b/pages/api/input.md @@ -12,30 +12,30 @@ filename: /packages/material-ui/src/Input/Input.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| autoComplete | string | | This property helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it here: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill | -| autoFocus | bool | | If `true`, the input will be focused during the first mount. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | -| className | string | | The CSS class name of the wrapper element. | -| defaultValue | union: string |
 number
| | The default input value, useful when not controlling the component. | -| disabled | bool | | If `true`, the input will be disabled. | +| autoComplete | string |   | This property helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it here: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill | +| autoFocus | bool |   | If `true`, the input will be focused during the first mount. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| className | string |   | The CSS class name of the wrapper element. | +| defaultValue | union: string |
 number
|   | The default input value, useful when not controlling the component. | +| disabled | bool |   | If `true`, the input will be disabled. | | disableUnderline | bool | false | If `true`, the input will not have an underline. | -| endAdornment | node | | End `InputAdornment` for this component. | -| error | bool | | If `true`, the input will indicate an error. This is normally obtained via context from FormControl. | +| endAdornment | node |   | End `InputAdornment` for this component. | +| error | bool |   | If `true`, the input will indicate an error. This is normally obtained via context from FormControl. | | fullWidth | bool | false | If `true`, the input will take up the full width of its container. | -| id | string | | The id of the `input` element. | -| inputComponent | union: string |
 func
| | The component used for the native input. Either a string to use a DOM element or a component. | -| inputProps | object | | Properties applied to the `input` element. | -| inputRef | func | | Use that property to pass a ref callback to the native input component. | -| margin | enum: 'dense' |
 'none'
| | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | +| id | string |   | The id of the `input` element. | +| inputComponent | union: string |
 func
|   | The component used for the native input. Either a string to use a DOM element or a component. | +| inputProps | object |   | Properties applied to the `input` element. | +| inputRef | func |   | Use that property to pass a ref callback to the native input component. | +| margin | enum: 'dense' |
 'none'
|   | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | | multiline | bool | false | If `true`, a textarea element will be rendered. | -| name | string | | Name attribute of the `input` element. | -| onChange | func | | Callback fired when the value is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value`. | -| placeholder | string | | The short hint displayed in the input before the user enters a value. | -| rows | union: string |
 number
| | Number of rows to display when multiline option is set to true. | -| rowsMax | union: string |
 number
| | Maximum number of rows to display when multiline option is set to true. | -| startAdornment | node | | Start `InputAdornment` for this component. | +| name | string |   | Name attribute of the `input` element. | +| onChange | func |   | Callback fired when the value is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value`. | +| placeholder | string |   | The short hint displayed in the input before the user enters a value. | +| rows | union: string |
 number
|   | Number of rows to display when multiline option is set to true. | +| rowsMax | union: string |
 number
|   | Maximum number of rows to display when multiline option is set to true. | +| startAdornment | node |   | Start `InputAdornment` for this component. | | type | string | 'text' | Type of the input element. It should be a valid HTML5 input type. | -| value | union: string |
 number |
 arrayOf
| | The input value, required for a controlled component. | +| value | union: string |
 number |
 arrayOf
|   | The input value, required for a controlled component. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/linear-progress.md b/pages/api/linear-progress.md index 4abfbbc5cf29ed..a4d444dc9c6183 100644 --- a/pages/api/linear-progress.md +++ b/pages/api/linear-progress.md @@ -16,10 +16,10 @@ attribute to `true` on that region until it has finished loading. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | color | enum: 'primary' |
 'secondary'
| 'primary' | The color of the component. It supports those theme colors that make sense for this component. | -| value | number | | The value of the progress indicator for the determinate and buffer variants. Value between 0 and 100. | -| valueBuffer | number | | The value for the buffer variant. Value between 0 and 100. | +| value | number |   | The value of the progress indicator for the determinate and buffer variants. Value between 0 and 100. | +| valueBuffer | number |   | The value for the buffer variant. Value between 0 and 100. | | variant | enum: 'determinate' |
 'indeterminate' |
 'buffer' |
 'query'
| 'indeterminate' | The variant of progress indicator. Use indeterminate or query when there is no progress value. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/list-item-avatar.md b/pages/api/list-item-avatar.md index 39bb4de9885117..ebdfbd85cec519 100644 --- a/pages/api/list-item-avatar.md +++ b/pages/api/list-item-avatar.md @@ -12,8 +12,8 @@ It's a simple wrapper to apply the `dense` mode styles to `Avatar`. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | element | | The content of the component, normally `Avatar`. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children * | element |   | The content of the component, normally `Avatar`. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/list-item-icon.md b/pages/api/list-item-icon.md index afa8dc6207617e..fff29703722bcf 100644 --- a/pages/api/list-item-icon.md +++ b/pages/api/list-item-icon.md @@ -12,8 +12,8 @@ A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | element | | The content of the component, normally `Icon`, `SvgIcon`, or a `@material-ui/icons` SVG icon element. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children * | element |   | The content of the component, normally `Icon`, `SvgIcon`, or a `@material-ui/icons` SVG icon element. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/list-item-secondary-action.md b/pages/api/list-item-secondary-action.md index 5b731f2657b9b9..3cd2a0fa20b7f4 100644 --- a/pages/api/list-item-secondary-action.md +++ b/pages/api/list-item-secondary-action.md @@ -12,8 +12,8 @@ filename: /packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAct | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component, normally an `IconButton` or selection control. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children | node |   | The content of the component, normally an `IconButton` or selection control. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/list-item-text.md b/pages/api/list-item-text.md index 18a5d99310a890..23d8c99e0d25da 100644 --- a/pages/api/list-item-text.md +++ b/pages/api/list-item-text.md @@ -12,12 +12,12 @@ filename: /packages/material-ui/src/ListItemText/ListItemText.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | Alias for the `primary` property. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children | node |   | Alias for the `primary` property. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | disableTypography | bool | false | If `true`, the children won't be wrapped by a Typography component. This can be useful to render an alternative Typography variant by wrapping the `children` (or `primary`) text, and optional `secondary` text with the Typography component. | | inset | bool | false | If `true`, the children will be indented. This should be used if there is no left avatar or left icon. | -| primary | node | | The main content element. | -| secondary | node | | The secondary content element. | +| primary | node |   | The main content element. | +| secondary | node |   | The secondary content element. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/list-item.md b/pages/api/list-item.md index 18b78cbf35efa4..43dcc69bf6334b 100644 --- a/pages/api/list-item.md +++ b/pages/api/list-item.md @@ -13,11 +13,11 @@ filename: /packages/material-ui/src/ListItem/ListItem.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | button | bool | false | If `true`, the list item will be a button (using `ButtonBase`). | -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | -| component | union: string |
 func
| | The component used for the root node. Either a string to use a DOM element or a component. By default, it's a `li` when `button` is `false` and a `div` when `button` is `true`. | +| children | node |   | The content of the component. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| component | union: string |
 func
|   | The component used for the root node. Either a string to use a DOM element or a component. By default, it's a `li` when `button` is `false` and a `div` when `button` is `true`. | | ContainerComponent | union: string |
 func
| 'li' | The container component used when a `ListItemSecondaryAction` is rendered. | -| ContainerProps | object | | Properties applied to the container element when the component is used to display a `ListItemSecondaryAction`. | +| ContainerProps | object |   | Properties applied to the container element when the component is used to display a `ListItemSecondaryAction`. | | dense | bool | false | If `true`, compact vertical padding designed for keyboard and mouse input will be used. | | disableGutters | bool | false | If `true`, the left and right padding is removed. | | divider | bool | false | If `true`, a 1px light border is added to the bottom of the list item. | diff --git a/pages/api/list-subheader.md b/pages/api/list-subheader.md index 68b1ef7522f551..4953b7f751f073 100644 --- a/pages/api/list-subheader.md +++ b/pages/api/list-subheader.md @@ -12,8 +12,8 @@ filename: /packages/material-ui/src/ListSubheader/ListSubheader.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children | node |   | The content of the component. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | color | enum: 'default' |
 'primary' |
 'inherit'
| 'default' | The color of the component. It supports those theme colors that make sense for this component. | | component | union: string |
 func
| 'li' | The component used for the root node. Either a string to use a DOM element or a component. | | disableSticky | bool | false | If `true`, the List Subheader will not stick to the top during scroll. | diff --git a/pages/api/list.md b/pages/api/list.md index 3b4679f7ed4ba5..c8c4d0940a38a6 100644 --- a/pages/api/list.md +++ b/pages/api/list.md @@ -12,12 +12,12 @@ filename: /packages/material-ui/src/List/List.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the component. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children | node |   | The content of the component. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | component | union: string |
 func
| 'ul' | The component used for the root node. Either a string to use a DOM element or a component. | | dense | bool | false | If `true`, compact vertical padding designed for keyboard and mouse input will be used for the list and list items. The property is available to descendant components as the `dense` context. | | disablePadding | bool | false | If `true`, vertical padding will be removed from the list. | -| subheader | node | | The content of the subheader, normally `ListSubheader`. | +| subheader | node |   | The content of the subheader, normally `ListSubheader`. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/menu-item.md b/pages/api/menu-item.md index 87a15368289b9c..5eb089cbcdec3f 100644 --- a/pages/api/menu-item.md +++ b/pages/api/menu-item.md @@ -12,8 +12,8 @@ filename: /packages/material-ui/src/MenuItem/MenuItem.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | Menu item contents. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| children | node |   | Menu item contents. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | component | union: string |
 func
| 'li' | The component used for the root node. Either a string to use a DOM element or a component. | | selected | bool | false | Use to apply selected styling. | diff --git a/pages/api/menu-list.md b/pages/api/menu-list.md index 5addf2434bb7e6..5a404edafe3b91 100644 --- a/pages/api/menu-list.md +++ b/pages/api/menu-list.md @@ -12,7 +12,7 @@ filename: /packages/material-ui/src/MenuList/MenuList.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | MenuList contents, normally `MenuItem`s. | +| children | node |   | MenuList contents, normally `MenuItem`s. | Any other properties supplied will be spread to the root element ([List](/api/list)). diff --git a/pages/api/menu.md b/pages/api/menu.md index 07dcd018a07e77..010dc95ecb9ccf 100644 --- a/pages/api/menu.md +++ b/pages/api/menu.md @@ -12,19 +12,19 @@ filename: /packages/material-ui/src/Menu/Menu.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| anchorEl | object | | The DOM element used to set the position of the menu. | -| children | node | | Menu contents, normally `MenuItem`s. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | -| MenuListProps | object | | Properties applied to the `MenuList` element. | -| onClose | func | | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback | -| onEnter | func | | Callback fired before the Menu enters. | -| onEntered | func | | Callback fired when the Menu has entered. | -| onEntering | func | | Callback fired when the Menu is entering. | -| onExit | func | | Callback fired before the Menu exits. | -| onExited | func | | Callback fired when the Menu has exited. | -| onExiting | func | | Callback fired when the Menu is exiting. | -| open * | bool | | If `true`, the menu is visible. | -| PopoverClasses | object | | `classes` property applied to the `Popover` element. | +| anchorEl | object |   | The DOM element used to set the position of the menu. | +| children | node |   | Menu contents, normally `MenuItem`s. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| MenuListProps | object |   | Properties applied to the `MenuList` element. | +| onClose | func |   | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback | +| onEnter | func |   | Callback fired before the Menu enters. | +| onEntered | func |   | Callback fired when the Menu has entered. | +| onEntering | func |   | Callback fired when the Menu is entering. | +| onExit | func |   | Callback fired before the Menu exits. | +| onExited | func |   | Callback fired when the Menu has exited. | +| onExiting | func |   | Callback fired when the Menu is exiting. | +| open * | bool |   | If `true`, the menu is visible. | +| PopoverClasses | object |   | `classes` property applied to the `Popover` element. | | transitionDuration | union: number |
 {enter?: number, exit?: number} |
 enum: 'auto'

| 'auto' | The length of the transition in `ms`, or 'auto' | Any other properties supplied will be spread to the root element ([Popover](/api/popover)). diff --git a/pages/api/mobile-stepper.md b/pages/api/mobile-stepper.md index 6d343c7e6eecb1..c7a6717c6f641b 100644 --- a/pages/api/mobile-stepper.md +++ b/pages/api/mobile-stepper.md @@ -13,11 +13,11 @@ filename: /packages/material-ui/src/MobileStepper/MobileStepper.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | activeStep | number | 0 | Set the active step (zero based index). Defines which dot is highlighted when the variant is 'dots'. | -| backButton | node | | A back button element. For instance, it can be be a `Button` or a `IconButton`. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | -| nextButton | node | | A next button element. For instance, it can be be a `Button` or a `IconButton`. | +| backButton | node |   | A back button element. For instance, it can be be a `Button` or a `IconButton`. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| nextButton | node |   | A next button element. For instance, it can be be a `Button` or a `IconButton`. | | position | enum: 'bottom' |
 'top' |
 'static'
| 'bottom' | Set the positioning type. | -| steps * | number | | The total steps. | +| steps * | number |   | The total steps. | | variant | enum: 'text' |
 'dots' |
 'progress'
| 'dots' | The type of mobile stepper to use. | Any other properties supplied will be spread to the root element ([Paper](/api/paper)). diff --git a/pages/api/modal.md b/pages/api/modal.md index 236efe5bb3664b..6cc0abaed71485 100644 --- a/pages/api/modal.md +++ b/pages/api/modal.md @@ -13,10 +13,10 @@ filename: /packages/material-ui/src/Modal/Modal.js | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | BackdropComponent | union: string |
 func
| Backdrop | A backdrop component. This property enables custom backdrop rendering. | -| BackdropProps | object | | Properties applied to the `Backdrop` element. | -| children | element | | A single child content element. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | -| container | union: object |
 func
| | A node, component instance, or function that returns either. The `container` will have the portal children appended to it. | +| BackdropProps | object |   | Properties applied to the `Backdrop` element. | +| children | element |   | A single child content element. | +| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| container | union: object |
 func
|   | A node, component instance, or function that returns either. The `container` will have the portal children appended to it. | | disableAutoFocus | bool | false | If `true`, the modal will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any modal children that have the `disableAutoFocus` prop.
Generally this should never be set to `true` as it makes the modal less accessible to assistive technologies, like screen readers. | | disableBackdropClick | bool | false | If `true`, clicking the backdrop will not fire any callback. | | disableEnforceFocus | bool | false | If `true`, the modal will not prevent focus from leaving the modal while open.
Generally this should never be set to `true` as it makes the modal less accessible to assistive technologies, like screen readers. | @@ -25,11 +25,11 @@ filename: /packages/material-ui/src/Modal/Modal.js | hideBackdrop | bool | false | If `true`, the backdrop is not rendered. | | keepMounted | bool | false | Always keep the children in the DOM. This property can be useful in SEO situation or when you want to maximize the responsiveness of the Modal. | | manager | object | new ModalManager() | A modal manager used to track and manage the state of open Modals. This enables customizing how modals interact within a container. | -| onBackdropClick | func | | Callback fired when the backdrop is clicked. | -| onClose | func | | Callback fired when the component requests to be closed. The `reason` parameter can optionally be used to control the response to `onClose`.

**Signature:**
`function(event: object, reason: string) => void`
*event:* The event source of the callback
*reason:* Can be:`"escapeKeyDown"`, `"backdropClick"` | -| onEscapeKeyDown | func | | Callback fired when the escape key is pressed, `disableEscapeKeyDown` is false and the modal is in focus. | -| onRendered | func | | Callback fired once the children has been mounted into the `container`. It signals that the `open={true}` property took effect. | -| open * | bool | | If `true`, the modal is open. | +| onBackdropClick | func |   | Callback fired when the backdrop is clicked. | +| onClose | func |   | Callback fired when the component requests to be closed. The `reason` parameter can optionally be used to control the response to `onClose`.

**Signature:**
`function(event: object, reason: string) => void`
*event:* The event source of the callback
*reason:* Can be:`"escapeKeyDown"`, `"backdropClick"` | +| onEscapeKeyDown | func |   | Callback fired when the escape key is pressed, `disableEscapeKeyDown` is false and the modal is in focus. | +| onRendered | func |   | Callback fired once the children has been mounted into the `container`. It signals that the `open={true}` property took effect. | +| open * | bool |   | If `true`, the modal is open. | Any other properties supplied will be spread to the root element ([Portal](/api/portal)). diff --git a/pages/api/mui-theme-provider.md b/pages/api/mui-theme-provider.md index 29d5b88f202188..e595a06981a855 100644 --- a/pages/api/mui-theme-provider.md +++ b/pages/api/mui-theme-provider.md @@ -14,10 +14,10 @@ This component should preferably be used at **the root of your component tree**. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | You can wrap a node. | -| disableStylesGeneration | bool | | You can disable the generation of the styles with this option. It can be useful when traversing the React tree outside of the HTML rendering step on the server. Let's say you are using react-apollo to extract all the queries made by the interface server side. You can significantly speed up the traversal with this property. | -| sheetsManager | object | | The sheetsManager is used to deduplicate style sheet injection in the page. It's deduplicating using the (theme, styles) couple. On the server, you should provide a new instance for each request. | -| theme * | union: object |
 func
| | A theme object. | +| children * | node |   | You can wrap a node. | +| disableStylesGeneration | bool |   | You can disable the generation of the styles with this option. It can be useful when traversing the React tree outside of the HTML rendering step on the server. Let's say you are using react-apollo to extract all the queries made by the interface server side. You can significantly speed up the traversal with this property. | +| sheetsManager | object |   | The sheetsManager is used to deduplicate style sheet injection in the page. It's deduplicating using the (theme, styles) couple. On the server, you should provide a new instance for each request. | +| theme * | union: object |
 func
|   | A theme object. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/native-select.md b/pages/api/native-select.md index 2da99568fb692e..fba6d9f7c5db29 100644 --- a/pages/api/native-select.md +++ b/pages/api/native-select.md @@ -12,13 +12,13 @@ An alternative to `