diff --git a/ROADMAP.md b/ROADMAP.md index 9a19deeb56e1dd..c10ef6ab73b865 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -115,8 +115,6 @@ that **are needed for the stable version**: +import Button from '@material-ui/core/Button'; ``` -- [ ] Look into the Render Props API over the Component Injection API. This one is an area of investigation. For instance, there is potential for simplifying the customization of the transitions. - These breaking changes will be spread into different releases over the next few months to make the upgrade path as smooth as possible. Not only does the Material-UI project have to be upgraded for each breaking change, but we also have to upgrade our own projects. diff --git a/docs/src/pages/demos/dialogs/AlertDialogSlide.js b/docs/src/pages/demos/dialogs/AlertDialogSlide.js index e29f8da5549f8e..383329bf627ff1 100644 --- a/docs/src/pages/demos/dialogs/AlertDialogSlide.js +++ b/docs/src/pages/demos/dialogs/AlertDialogSlide.js @@ -31,7 +31,7 @@ class AlertDialogSlide extends React.Component { diff --git a/docs/src/pages/demos/menus/FadeMenu.js b/docs/src/pages/demos/menus/FadeMenu.js index f2ef9908ff825c..0efb7bbc388c73 100644 --- a/docs/src/pages/demos/menus/FadeMenu.js +++ b/docs/src/pages/demos/menus/FadeMenu.js @@ -33,7 +33,7 @@ class FadeMenu extends React.Component { anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={this.handleClose} - transition={Fade} + TransitionComponent={Fade} > Profile My account diff --git a/docs/src/pages/demos/snackbars/DirectionSnackbar.js b/docs/src/pages/demos/snackbars/DirectionSnackbar.js index 54f4fccec5be95..6ec7077cc19f34 100644 --- a/docs/src/pages/demos/snackbars/DirectionSnackbar.js +++ b/docs/src/pages/demos/snackbars/DirectionSnackbar.js @@ -22,11 +22,11 @@ function TransitionDown(props) { class DirectionSnackbar extends React.Component { state = { open: false, - transition: null, + Transition: null, }; - handleClick = transition => () => { - this.setState({ open: true, transition }); + handleClick = Transition => () => { + this.setState({ open: true, Transition }); }; handleClose = () => { @@ -43,7 +43,7 @@ class DirectionSnackbar extends React.Component { diff --git a/docs/src/pages/guides/api/api.md b/docs/src/pages/guides/api/api.md index bd8705195980b7..b2d061ae0fded8 100644 --- a/docs/src/pages/guides/api/api.md +++ b/docs/src/pages/guides/api/api.md @@ -70,13 +70,14 @@ const styles = { }; ``` -### Internal components - -Internal components have: -- their own flattened properties when these are key to the abstraction. -- their own `xxxProps` property when users might need to tweak the internal render method's sub-components, -for instance, exposing the `inputProps` and `InputProps` properties on components that use `Input` internally. - For instance, exposing a `value` property. +### Nested components + +Nested components inside a component have: +- their own flattened properties when these are key to the top level component abstraction. + For instance and `id` property for the `Input` component. +- their own `xxxProps` property when users might need to tweak the internal render method's sub-components. + For instance, exposing the `inputProps` and `InputProps` properties on components that use `Input` internally. +- their own `xxxComponent` property for performing component injection. - their own `xxxRef` property when user might need to perform imperative actions. For instance, exposing a `inputRef` property to access the native `input` on the `Input` component. It help answering the following question. [How can I access the DOM element?](/getting-started/faq#how-can-i-access-the-dom-element-) diff --git a/packages/material-ui-lab/src/SpeedDial/SpeedDial.js b/packages/material-ui-lab/src/SpeedDial/SpeedDial.js index fe62e8cd3b8c4f..b47eee41def068 100644 --- a/packages/material-ui-lab/src/SpeedDial/SpeedDial.js +++ b/packages/material-ui-lab/src/SpeedDial/SpeedDial.js @@ -98,7 +98,7 @@ class SpeedDial extends React.Component { onKeyDown, open, openIcon, - transition: Transition, + TransitionComponent, transitionDuration, TransitionProps, ...other @@ -137,7 +137,12 @@ class SpeedDial extends React.Component { return (
- + - +
; - transition?: React.ReactType; + TransitionComponent?: React.ReactType; transitionDuration?: TransitionProps['timeout']; TransitionProps?: TransitionProps; } diff --git a/packages/material-ui/src/Dialog/Dialog.js b/packages/material-ui/src/Dialog/Dialog.js index 7e13b073aa4a26..b5c508fb9bfe1b 100644 --- a/packages/material-ui/src/Dialog/Dialog.js +++ b/packages/material-ui/src/Dialog/Dialog.js @@ -73,7 +73,7 @@ function Dialog(props) { onExiting, open, PaperProps, - transition: TransitionProp, + TransitionComponent, transitionDuration, TransitionProps, ...other @@ -95,7 +95,7 @@ function Dialog(props) { role="dialog" {...other} > - {children} - + ); } @@ -214,7 +214,7 @@ Dialog.propTypes = { /** * Transition component. */ - transition: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), + TransitionComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), /** * The duration for the transition, in milliseconds. * You may specify a single timeout for all transitions, or individually with an object. @@ -235,7 +235,7 @@ Dialog.defaultProps = { fullScreen: false, fullWidth: false, maxWidth: 'sm', - transition: Fade, + TransitionComponent: Fade, transitionDuration: { enter: duration.enteringScreen, exit: duration.leavingScreen }, }; diff --git a/packages/material-ui/src/Dialog/Dialog.test.js b/packages/material-ui/src/Dialog/Dialog.test.js index a12b45ce86369c..283e00be167ed7 100644 --- a/packages/material-ui/src/Dialog/Dialog.test.js +++ b/packages/material-ui/src/Dialog/Dialog.test.js @@ -25,17 +25,17 @@ describe('', () => { assert.strictEqual(wrapper.type(), Modal); }); - it('should render a Modal with transition', () => { + it('should render a Modal with TransitionComponent', () => { const Transition = props =>
; const wrapper = shallow( - + foo , ); assert.strictEqual( wrapper.find(Transition).length, 1, - 'should include element given in transition', + 'should include element given in TransitionComponent', ); }); diff --git a/packages/material-ui/src/Popover/Popover.d.ts b/packages/material-ui/src/Popover/Popover.d.ts index 8f2d688a42252b..813e4599214fd5 100644 --- a/packages/material-ui/src/Popover/Popover.d.ts +++ b/packages/material-ui/src/Popover/Popover.d.ts @@ -31,7 +31,7 @@ export interface PopoverProps PaperProps?: Partial; role?: string; transformOrigin?: PopoverOrigin; - transition?: React.ReactType; + TransitionComponent?: React.ReactType; transitionDuration?: TransitionProps['timeout'] | 'auto'; TransitionProps?: TransitionProps; } diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js index 5ba0203c0443d2..d08d2cf45d9e4e 100644 --- a/packages/material-ui/src/Popover/Popover.js +++ b/packages/material-ui/src/Popover/Popover.js @@ -290,7 +290,7 @@ class Popover extends React.Component { PaperProps, role, transformOrigin, - transition: TransitionProp, + TransitionComponent, transitionDuration, TransitionProps, ...other @@ -304,7 +304,7 @@ class Popover extends React.Component { return ( - {children} - + ); } @@ -472,7 +472,7 @@ Popover.propTypes = { /** * Transition component. */ - transition: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), + TransitionComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), /** * Set to 'auto' to automatically calculate transition time based on height. */ @@ -499,7 +499,7 @@ Popover.defaultProps = { vertical: 'top', horizontal: 'left', }, - transition: Grow, + TransitionComponent: Grow, transitionDuration: 'auto', }; diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js index d8de0042c51372..4cc4b11410171d 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.js +++ b/packages/material-ui/src/Snackbar/Snackbar.js @@ -208,7 +208,7 @@ class Snackbar extends React.Component { onMouseLeave, open, resumeHideDuration, - transition: TransitionProp, + TransitionComponent, transitionDuration, TransitionProps, ...other @@ -236,7 +236,7 @@ class Snackbar extends React.Component { onFocus={disableWindowBlurListener ? undefined : this.handleResume} onBlur={disableWindowBlurListener ? undefined : this.handlePause} /> - {children || } - +
); @@ -368,7 +368,7 @@ Snackbar.propTypes = { /** * Transition component. */ - transition: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), + TransitionComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), /** * The duration for the transition, in milliseconds. * You may specify a single timeout for all transitions, or individually with an object. @@ -389,7 +389,7 @@ Snackbar.defaultProps = { horizontal: 'center', }, disableWindowBlurListener: false, - transition: Slide, + TransitionComponent: Slide, transitionDuration: { enter: duration.enteringScreen, exit: duration.leavingScreen, diff --git a/packages/material-ui/src/Snackbar/Snackbar.test.js b/packages/material-ui/src/Snackbar/Snackbar.test.js index 356792677baf7d..43ab11b1e6ae59 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.test.js +++ b/packages/material-ui/src/Snackbar/Snackbar.test.js @@ -362,14 +362,14 @@ describe('', () => { }); }); - describe('prop: transition', () => { - it('should render a Snackbar with transition', () => { + describe('prop: TransitionComponent', () => { + it('should render a Snackbar with TransitionComponent', () => { const Transition = props =>
; - const wrapper = shallow(); + const wrapper = shallow(); assert.strictEqual( wrapper.find(Transition).length, 1, - 'should include element given in transition', + 'should include element given in TransitionComponent', ); }); }); diff --git a/packages/material-ui/src/Stepper/StepContent.d.ts b/packages/material-ui/src/Stepper/StepContent.d.ts index 94d0edf14b0465..fbdc6526a0a786 100644 --- a/packages/material-ui/src/Stepper/StepContent.d.ts +++ b/packages/material-ui/src/Stepper/StepContent.d.ts @@ -12,7 +12,7 @@ export interface StepContentProps last?: boolean; optional?: boolean; orientation?: Orientation; - transition?: React.ComponentType; + TransitionComponent?: React.ComponentType; transitionDuration?: TransitionProps['timeout'] | 'auto'; TransitionProps?: TransitionProps; } diff --git a/packages/material-ui/src/Stepper/StepContent.js b/packages/material-ui/src/Stepper/StepContent.js index 0b79053682f582..b37ac481841167 100644 --- a/packages/material-ui/src/Stepper/StepContent.js +++ b/packages/material-ui/src/Stepper/StepContent.js @@ -32,7 +32,7 @@ function StepContent(props) { last, optional, orientation, - transition: Transition, + TransitionComponent, transitionDuration, TransitionProps, ...other @@ -45,7 +45,7 @@ function StepContent(props) { return (
- {children} - +
); } @@ -101,7 +101,7 @@ StepContent.propTypes = { /** * Collapse component. */ - transition: PropTypes.func, + TransitionComponent: PropTypes.func, /** * Adjust the duration of the content expand transition. * Passed as a property to the transition component. @@ -120,7 +120,7 @@ StepContent.propTypes = { }; StepContent.defaultProps = { - transition: Collapse, + TransitionComponent: Collapse, transitionDuration: 'auto', }; diff --git a/packages/material-ui/src/Table/TablePagination.d.ts b/packages/material-ui/src/Table/TablePagination.d.ts index 8e136b32f348e7..c86e315a3d8cc8 100644 --- a/packages/material-ui/src/Table/TablePagination.d.ts +++ b/packages/material-ui/src/Table/TablePagination.d.ts @@ -13,7 +13,7 @@ export interface LabelDisplayedRowsArgs { export interface TablePaginationProps extends StandardProps { - Actions?: React.ReactType; + ActionsComponent?: React.ReactType; backIconButtonProps?: Partial; component?: React.ReactType; count: number; diff --git a/packages/material-ui/src/Table/TablePagination.js b/packages/material-ui/src/Table/TablePagination.js index 1d01315a05f334..435719017fada2 100644 --- a/packages/material-ui/src/Table/TablePagination.js +++ b/packages/material-ui/src/Table/TablePagination.js @@ -70,7 +70,7 @@ class TablePagination extends React.Component { render() { const { - Actions, + ActionsComponent, backIconButtonProps, classes, colSpan: colSpanProp, @@ -134,7 +134,7 @@ class TablePagination extends React.Component { page, })} - `${from}-${to} of ${count}`, labelRowsPerPage: 'Rows per page:', diff --git a/packages/material-ui/src/Tabs/Tabs.d.ts b/packages/material-ui/src/Tabs/Tabs.d.ts index b9879cb08e706b..378078d0a7270f 100644 --- a/packages/material-ui/src/Tabs/Tabs.d.ts +++ b/packages/material-ui/src/Tabs/Tabs.d.ts @@ -10,8 +10,8 @@ export interface TabsProps extends StandardProps, value: any) => void; scrollable?: boolean; + ScrollButtonComponent?: React.ReactType; scrollButtons?: 'auto' | 'on' | 'off'; - TabScrollButton?: React.ReactType; textColor?: 'secondary' | 'primary' | 'inherit' | string; value: any; width?: string; diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js index c776bbbecc3402..4492e93a49849b 100644 --- a/packages/material-ui/src/Tabs/Tabs.js +++ b/packages/material-ui/src/Tabs/Tabs.js @@ -87,13 +87,7 @@ class Tabs extends React.Component { } getConditionalElements = () => { - const { - classes, - scrollable, - scrollButtons, - TabScrollButton: TabScrollButtonProp, - theme, - } = this.props; + const { classes, scrollable, ScrollButtonComponent, scrollButtons, theme } = this.props; const conditionalElements = {}; conditionalElements.scrollbarSizeListener = scrollable ? ( 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. | -| transition | union: string |
 func
| Fade | Transition component. | +| 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. | diff --git a/pages/api/popover.md b/pages/api/popover.md index f020675dc9cba5..8fe0fcba315fdb 100644 --- a/pages/api/popover.md +++ b/pages/api/popover.md @@ -33,7 +33,7 @@ filename: /packages/material-ui/src/Popover/Popover.js | open * | bool | | If `true`, the popover is visible. | | PaperProps | object | | Properties applied to the `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)]. | -| transition | union: string |
 func
| Grow | Transition component. | +| TransitionComponent | union: string |
 func
| Grow | Transition component. | | 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. | diff --git a/pages/api/snackbar.md b/pages/api/snackbar.md index 2ea148eb404451..6d363e01d8935d 100644 --- a/pages/api/snackbar.md +++ b/pages/api/snackbar.md @@ -30,7 +30,7 @@ filename: /packages/material-ui/src/Snackbar/Snackbar.js | onExiting | func | | Callback fired when the transition is exiting. | | 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. | -| transition | union: string |
 func
| Slide | Transition component. | +| TransitionComponent | union: string |
 func
| 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. | | TransitionProps | object | | Properties applied to the `Transition` element. | diff --git a/pages/api/step-content.md b/pages/api/step-content.md index 751c44e4842376..419cdff1a9bfc5 100644 --- a/pages/api/step-content.md +++ b/pages/api/step-content.md @@ -14,7 +14,7 @@ filename: /packages/material-ui/src/Stepper/StepContent.js |:-----|:-----|:--------|:------------| | children | node | | Step content. | | classes | object | | Useful to extend the style applied to components. | -| transition | func | Collapse | Collapse component. | +| 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. | | TransitionProps | object | | Properties applied to the `Transition` element. | diff --git a/pages/api/table-pagination.md b/pages/api/table-pagination.md index 79582b2be9a7f4..eb39a2b5a71017 100644 --- a/pages/api/table-pagination.md +++ b/pages/api/table-pagination.md @@ -12,7 +12,7 @@ A `TableCell` based component for placing inside `TableFooter` for pagination. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| Actions | union: string |
 func
| TablePaginationActions | The component used for displaying the actions. Either a string to use a DOM element or a component. | +| ActionsComponent | union: string |
 func
| TablePaginationActions | The component used for displaying the actions. Either a string to use a DOM element or a component. | | backIconButtonProps | object | | Properties applied to the back arrow `IconButton` component. | | classes | object | | Useful to extend the style applied to components. | | component | union: string |
 func
| TableCell | The component used for the root node. Either a string to use a DOM element or a component. | diff --git a/pages/api/tabs.md b/pages/api/tabs.md index 6e9acbf4928ecf..f8332772ab5b93 100644 --- a/pages/api/tabs.md +++ b/pages/api/tabs.md @@ -20,8 +20,8 @@ filename: /packages/material-ui/src/Tabs/Tabs.js | indicatorColor | enum: 'secondary' |
 'primary'
| 'secondary' | Determines the color of the indicator. | | onChange | func | | Callback fired when the value changes.

**Signature:**
`function(event: object, value: number) => void`
*event:* The event source of the callback
*value:* We default to the index of the child | | scrollable | bool | false | True invokes scrolling properties and allow for horizontally scrolling (or swiping) the tab bar. | +| ScrollButtonComponent | union: string |
 func
| TabScrollButton | The component used to render the scroll buttons. | | scrollButtons | enum: 'auto' |
 'on' |
 'off'
| 'auto' | Determine behavior of scroll buttons when tabs are set to scroll `auto` will only present them on medium and larger viewports `on` will always present them `off` will never present them | -| TabScrollButton | union: string |
 func
| TabScrollButton | The component used to render the scroll buttons. | | textColor | enum: 'secondary' |
 'primary' |
 'inherit'
| 'inherit' | Determines the color of the `Tab`. | | value | any | | The value of the currently selected `Tab`. If you don't want any selected `Tab`, you can set this property to `false`. | diff --git a/pages/lab/api/speed-dial.md b/pages/lab/api/speed-dial.md index 02ea505da424bd..f09ea6c7f2d133 100644 --- a/pages/lab/api/speed-dial.md +++ b/pages/lab/api/speed-dial.md @@ -21,7 +21,7 @@ filename: /packages/material-ui-lab/src/SpeedDial/SpeedDial.js | onClose | func | | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object, key: string) => void`
*event:* The event source of the callback
*key:* The key pressed | | 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. | -| transition | union: string |
 func
| Zoom | Transition component. | +| 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. | | TransitionProps | object | | Properties applied to the `Transition` element. |