diff --git a/docs/scripts/buildApi.js b/docs/scripts/buildApi.js index a2499c3fce5069..b4bd47f3be2c4d 100644 --- a/docs/scripts/buildApi.js +++ b/docs/scripts/buildApi.js @@ -104,15 +104,15 @@ function buildDocs(options) { throw err; } - // if (reactAPI.name !== 'Select') { - // return; - // } - reactAPI.name = path.parse(componentObject.filename).name; reactAPI.styles = styles; reactAPI.pagesMarkdown = pagesMarkdown; reactAPI.src = src; + // if (reactAPI.name !== 'Snackbar') { + // return; + // } + // Relative location in the file system. reactAPI.filename = componentObject.filename.replace(rootDirectory, ''); reactAPI.inheritance = getInheritance(src); diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index 4e64c0a08d237e..f9657442c0002e 100644 --- a/docs/src/modules/components/Demo.js +++ b/docs/src/modules/components/Demo.js @@ -241,9 +241,11 @@ class Demo extends React.Component { onClose={this.handleCloseMore} getContentAnchorEl={null} anchorOrigin={{ + vertical: 'top', horizontal: 'right', }} transformOrigin={{ + vertical: 'top', horizontal: 'right', }} > diff --git a/docs/src/modules/utils/generateMarkdown.js b/docs/src/modules/utils/generateMarkdown.js index 100a453733cb2e..d5dc7e9437f4d9 100644 --- a/docs/src/modules/utils/generateMarkdown.js +++ b/docs/src/modules/utils/generateMarkdown.js @@ -130,11 +130,12 @@ function generatePropType(type) { } case 'shape': - return `{${Object.keys(type.value) + return `{ ${Object.keys(type.value) .map(subValue => { - return `${subValue}?: ${generatePropType(type.value[subValue])}`; + const subType = type.value[subValue]; + return `${subValue}${subType.required ? '' : '?'}: ${generatePropType(subType)}`; }) - .join(', ')}}`; + .join(', ')} }`; case 'union': case 'enum': { diff --git a/docs/src/pages/demos/snackbars/PositionedSnackbar.js b/docs/src/pages/demos/snackbars/PositionedSnackbar.js index f3880cdef209be..c6efa65f9300fb 100644 --- a/docs/src/pages/demos/snackbars/PositionedSnackbar.js +++ b/docs/src/pages/demos/snackbars/PositionedSnackbar.js @@ -5,8 +5,8 @@ import Snackbar from '@material-ui/core/Snackbar'; class PositionedSnackbar extends React.Component { state = { open: false, - vertical: null, - horizontal: null, + vertical: 'top', + horizontal: 'center', }; handleClick = state => () => { diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js index dc13e8b456c071..ae4a629b2fe13a 100644 --- a/packages/material-ui/src/Popover/Popover.js +++ b/packages/material-ui/src/Popover/Popover.js @@ -368,8 +368,9 @@ Popover.propTypes = { horizontal: PropTypes.oneOfType([ PropTypes.number, PropTypes.oneOf(['left', 'center', 'right']), - ]), - vertical: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['top', 'center', 'bottom'])]), + ]).isRequired, + vertical: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['top', 'center', 'bottom'])]) + .isRequired, }), /** * This is the position that may be used @@ -378,8 +379,8 @@ Popover.propTypes = { * the application's client area. */ anchorPosition: PropTypes.shape({ - left: PropTypes.number, - top: PropTypes.number, + left: PropTypes.number.isRequired, + top: PropTypes.number.isRequired, }), /* * This determines which anchor prop to refer to to set @@ -473,8 +474,9 @@ Popover.propTypes = { horizontal: PropTypes.oneOfType([ PropTypes.number, PropTypes.oneOf(['left', 'center', 'right']), - ]), - vertical: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['top', 'center', 'bottom'])]), + ]).isRequired, + vertical: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['top', 'center', 'bottom'])]) + .isRequired, }), /** * Transition component. diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js index 9ca1c6b7469bdb..f76c6bca719f3f 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.js +++ b/packages/material-ui/src/Snackbar/Snackbar.js @@ -278,8 +278,9 @@ Snackbar.propTypes = { horizontal: PropTypes.oneOfType([ PropTypes.number, PropTypes.oneOf(['left', 'center', 'right']), - ]), - vertical: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['top', 'center', 'bottom'])]), + ]).isRequired, + vertical: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['top', 'center', 'bottom'])]) + .isRequired, }), /** * The number of milliseconds to wait before automatically calling the diff --git a/pages/api/backdrop.md b/pages/api/backdrop.md index ffdd3cd0a3d8d3..37f1b4e588978d 100644 --- a/pages/api/backdrop.md +++ b/pages/api/backdrop.md @@ -18,7 +18,7 @@ title: Backdrop API | 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. | +| 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/collapse.md b/pages/api/collapse.md index d196e65cf97e37..287c3bc7d74bf3 100644 --- a/pages/api/collapse.md +++ b/pages/api/collapse.md @@ -22,7 +22,7 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro | collapsedHeight | string | '0px' | The height of the container when collapsed. | | component | union: string |
 func |
 object
| '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. | -| 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. | +| 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.md b/pages/api/dialog.md index 49e822819304c3..fac198e9dc1536 100644 --- a/pages/api/dialog.md +++ b/pages/api/dialog.md @@ -35,7 +35,7 @@ Dialogs are overlaid modal paper based components with a backdrop. | PaperProps | object |   | Properties applied to the [`Paper`](/api/paper) element. | | scroll | enum: 'body' |
 'paper'
| 'paper' | Determine the container for scrolling the dialog. | | TransitionComponent | union: string |
 func |
 object
| 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. | +| 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. | Any other properties supplied will be spread to the root element ([Modal](/api/modal)). diff --git a/pages/api/drawer.md b/pages/api/drawer.md index 1cc53aa7740d22..e1e440717cc38e 100644 --- a/pages/api/drawer.md +++ b/pages/api/drawer.md @@ -25,7 +25,7 @@ when `variant="temporary"` is set. | open | bool | false | If `true`, the drawer is open. | | PaperProps | object |   | Properties applied to the [`Paper`](/api/paper) element. | | SlideProps | object |   | Properties applied to the [`Slide`](/api/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. | +| 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. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/fade.md b/pages/api/fade.md index f0a0df5ba3ae38..660ceaf4eb80aa 100644 --- a/pages/api/fade.md +++ b/pages/api/fade.md @@ -18,7 +18,7 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro |:-----|:-----|:--------|:------------| | 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. | +| 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/grow.md b/pages/api/grow.md index 773f7115457cf0..3ce31130a56e27 100644 --- a/pages/api/grow.md +++ b/pages/api/grow.md @@ -18,7 +18,7 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro |:-----|:-----|:--------|:------------| | 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. | +| 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/menu.md b/pages/api/menu.md index f1c7a6987d8e79..3e6f357be34528 100644 --- a/pages/api/menu.md +++ b/pages/api/menu.md @@ -29,7 +29,7 @@ title: Menu API | 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' | +| 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/popover.md b/pages/api/popover.md index 4288d3decac71e..af0815d1b61bba 100644 --- a/pages/api/popover.md +++ b/pages/api/popover.md @@ -17,8 +17,8 @@ title: Popover API |:-----|:-----|:--------|:------------| | action | func |   | This is callback property. It's called by the component on mount. This is useful when you want to trigger an action programmatically. It currently only supports updatePosition() action.

**Signature:**
`function(actions: object) => void`
*actions:* This object contains all posible actions that can be triggered programmatically. | | anchorEl | union: object |
 func
|   | This is the DOM element, or a function that returns the DOM element, that may be used to set the position of the popover. | -| anchorOrigin | {horizontal?: union: number |
 enum: 'left' |
 'center' |
 'right'

, vertical?: union: number |
 enum: 'top' |
 'center' |
 'bottom'

} | { vertical: 'top', horizontal: 'left',} | This is the point on the anchor where the popover's `anchorEl` will attach to. This is not used when the anchorReference is 'anchorPosition'.
Options: vertical: [top, center, bottom]; horizontal: [left, center, right]. | -| anchorPosition | {left?: number, top?: number} |   | This is the position that may be used to set the position of the popover. The coordinates are relative to the application's client area. | +| anchorOrigin | { horizontal: union: number |
 enum: 'left' |
 'center' |
 'right'

, vertical: union: number |
 enum: 'top' |
 'center' |
 'bottom'

} | { vertical: 'top', horizontal: 'left',} | This is the point on the anchor where the popover's `anchorEl` will attach to. This is not used when the anchorReference is 'anchorPosition'.
Options: vertical: [top, center, bottom]; horizontal: [left, center, right]. | +| anchorPosition | { left: number, top: number } |   | This is the position that may be used to set the position of the popover. The coordinates are relative to the application's client area. | | anchorReference | enum: 'anchorEl' |
 'anchorPosition' |
 'none'
| 'anchorEl' | | | 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. | @@ -35,9 +35,9 @@ title: Popover API | onExiting | func |   | Callback fired when the component is exiting. | | open * | bool |   | If `true`, the popover is visible. | | PaperProps | object |   | Properties applied to the [`Paper`](/api/paper) element. | -| transformOrigin | {horizontal?: union: number |
 enum: 'left' |
 'center' |
 'right'

, vertical?: union: number |
 enum: 'top' |
 'center' |
 'bottom'

} | { vertical: 'top', horizontal: 'left',} | This is the point on the popover which will attach to the anchor's origin.
Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)]. | +| transformOrigin | { horizontal: union: number |
 enum: 'left' |
 'center' |
 'right'

, vertical: union: number |
 enum: 'top' |
 'center' |
 'bottom'

} | { vertical: 'top', horizontal: 'left',} | This is the point on the popover which will attach to the anchor's origin.
Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)]. | | TransitionComponent | union: string |
 func |
 object
| Grow | Transition component. | -| transitionDuration | union: number |
 {enter?: number, exit?: number} |
 enum: 'auto'

| 'auto' | Set to 'auto' to automatically calculate transition time based on height. | +| transitionDuration | union: number |
 { enter?: number, exit?: number } |
 enum: 'auto'

| 'auto' | Set to 'auto' to automatically calculate transition time based on height. | | 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/slide.md b/pages/api/slide.md index f66cb6bd386fa0..e9cecb4aa7021f 100644 --- a/pages/api/slide.md +++ b/pages/api/slide.md @@ -19,7 +19,7 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro | children | union: element |
 func
|   | A single child content element. | | direction | enum: 'left' |
 'right' |
 'up' |
 'down'
| 'down' | Direction the child node will enter from. | | in | bool |   | If `true`, show the component; triggers the enter or exit animation. | -| 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. | +| 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/snackbar.md b/pages/api/snackbar.md index 63bc4af59469dd..da7e8718e95ce2 100644 --- a/pages/api/snackbar.md +++ b/pages/api/snackbar.md @@ -16,7 +16,7 @@ title: Snackbar API | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | action | node |   | The action to display. | -| anchorOrigin | {horizontal?: union: number |
 enum: 'left' |
 'center' |
 'right'

, vertical?: union: number |
 enum: 'top' |
 'center' |
 'bottom'

} | { vertical: 'bottom', horizontal: 'center',} | The anchor of the `Snackbar`. | +| anchorOrigin | { horizontal: union: number |
 enum: 'left' |
 'center' |
 'right'

, vertical: union: number |
 enum: 'top' |
 'center' |
 'bottom'

} | { vertical: 'bottom', horizontal: 'center',} | The anchor of the `Snackbar`. | | autoHideDuration | number |   | The number of milliseconds to wait before automatically calling the `onClose` function. `onClose` should then set the state of the `open` prop to hide the Snackbar. This behavior is disabled by default with the `null` value. | | children | element |   | If you wish the take control over the children of the component you can use this property. When used, you replace the `SnackbarContent` component with the children. | | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | @@ -34,7 +34,7 @@ title: Snackbar API | open | bool |   | If true, `Snackbar` is open. | | resumeHideDuration | number |   | The number of milliseconds to wait before dismissing after user interaction. If `autoHideDuration` property isn't specified, it does nothing. If `autoHideDuration` property is specified but `resumeHideDuration` isn't, we default to `autoHideDuration / 2` ms. | | TransitionComponent | union: string |
 func |
 object
| Slide | 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. | +| 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. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/step-content.md b/pages/api/step-content.md index f27a298b5379ef..231d8eb4a6aad4 100644 --- a/pages/api/step-content.md +++ b/pages/api/step-content.md @@ -18,7 +18,7 @@ title: StepContent API | children | node |   | Step content. | | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | TransitionComponent | func | Collapse | Collapse component. | -| transitionDuration | union: number |
 {enter?: number, exit?: number} |
 enum: 'auto'

| 'auto' | Adjust the duration of the content expand transition. Passed as a property to the transition component.
Set to 'auto' to automatically calculate transition time based on height. | +| transitionDuration | union: number |
 { enter?: number, exit?: number } |
 enum: 'auto'

| 'auto' | Adjust the duration of the content expand transition. Passed as a property to the transition component.
Set to 'auto' to automatically calculate transition time based on height. | | TransitionProps | object |   | Properties applied to the `Transition` element. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/api/swipeable-drawer.md b/pages/api/swipeable-drawer.md index 6487138f804ed0..02f4e919db1eb7 100644 --- a/pages/api/swipeable-drawer.md +++ b/pages/api/swipeable-drawer.md @@ -22,7 +22,7 @@ title: SwipeableDrawer API | onOpen * | func |   | Callback fired when the component requests to be opened.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback | | open * | bool |   | If `true`, the drawer is open. | | swipeAreaWidth | number | 20 | The width of the left most (or right most) area in pixels where the drawer can be swiped open from. | -| 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. | +| 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. | Any other properties supplied will be spread to the root element ([Drawer](/api/drawer)). diff --git a/pages/api/zoom.md b/pages/api/zoom.md index ea0a1d7eec2a19..fed5c131fa583d 100644 --- a/pages/api/zoom.md +++ b/pages/api/zoom.md @@ -19,7 +19,7 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro |:-----|:-----|:--------|:------------| | 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. | +| 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/lab/api/speed-dial.md b/pages/lab/api/speed-dial.md index 22a391d84346dd..14f2da121b82c9 100644 --- a/pages/lab/api/speed-dial.md +++ b/pages/lab/api/speed-dial.md @@ -25,7 +25,7 @@ title: SpeedDial API | open * | bool |   | If `true`, the SpeedDial is open. | | openIcon | node |   | The icon to display in the SpeedDial Floating Action Button when the SpeedDial is open. | | TransitionComponent | union: string |
 func
| Zoom | 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. | +| 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. | Any other properties supplied will be spread to the root element (native element).