Skip to content

Commit

Permalink
review
Browse files Browse the repository at this point in the history
  • Loading branch information
mbrookes authored and oliviertassinari committed Jan 12, 2020
1 parent 75d5de9 commit 25f948c
Show file tree
Hide file tree
Showing 19 changed files with 24 additions and 22 deletions.
2 changes: 1 addition & 1 deletion docs/pages/api/dialog.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ Dialogs are overlaid modal paper based components with a backdrop.
| <span class="prop-name">PaperComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Paper</span> | The component used to render the body of the dialog. |
| <span class="prop-name">PaperProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Props applied to the [`Paper`](/api/paper/) element. |
| <span class="prop-name">scroll</span> | <span class="prop-type">'body'<br>&#124;&nbsp;'paper'</span> | <span class="prop-default">'paper'</span> | Determine the container for scrolling the dialog. |
| <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Fade</span> | The component used for the transition. [Follow our guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |
| <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Fade</span> | The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |
| <span class="prop-name">transitionDuration</span> | <span class="prop-type">number<br>&#124;&nbsp;{ enter?: number, exit?: number }</span> | <span class="prop-default">{ enter: duration.enteringScreen, exit: duration.leavingScreen }</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
| <span class="prop-name">TransitionProps</span> | <span class="prop-type">object</span> | | Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. |

Expand Down
2 changes: 1 addition & 1 deletion docs/pages/api/expansion-panel.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the panel will be displayed in a disabled state. |
| <span class="prop-name">expanded</span> | <span class="prop-type">bool</span> | | If `true`, expands the panel, otherwise collapse it. Setting this prop enables control over the panel. |
| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> | | Callback fired when the expand/collapse state is changed.<br><br>**Signature:**<br>`function(event: object, expanded: boolean) => void`<br>*event:* The event source of the callback.<br>*expanded:* The `expanded` state of the panel. |
| <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Collapse</span> | The component used for the collapse effect. [Follow our guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |
| <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Collapse</span> | The component used for the collapse effect. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |
| <span class="prop-name">TransitionProps</span> | <span class="prop-type">object</span> | | Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. |

The `ref` is forwarded to the root element.
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/api/popover.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| <span class="prop-name required">open&nbsp;*</span> | <span class="prop-type">bool</span> | | If `true`, the popover is visible. |
| <span class="prop-name">PaperProps</span> | <span class="prop-type">{ component?: element type }</span> | <span class="prop-default">{}</span> | Props applied to the [`Paper`](/api/paper/) element. |
| <span class="prop-name">transformOrigin</span> | <span class="prop-type">{ horizontal: number<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'center'<br>&#124;&nbsp;'right', vertical: number<br>&#124;&nbsp;'top'<br>&#124;&nbsp;'center'<br>&#124;&nbsp;'bottom' }</span> | <span class="prop-default">{ vertical: 'top', horizontal: 'left',}</span> | This is the point on the popover which will attach to the anchor's origin.<br>Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)]. |
| <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Grow</span> | The component used for the transition. [Follow our guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |
| <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Grow</span> | The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |
| <span class="prop-name">transitionDuration</span> | <span class="prop-type">number<br>&#124;&nbsp;{ enter?: number, exit?: number }<br>&#124;&nbsp;'auto'</span> | <span class="prop-default">'auto'</span> | Set to 'auto' to automatically calculate transition time based on height. |
| <span class="prop-name">TransitionProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. |

Expand Down
2 changes: 1 addition & 1 deletion docs/pages/api/snackbar.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| <span class="prop-name">onExiting</span> | <span class="prop-type">func</span> | | Callback fired when the transition is exiting. |
| <span class="prop-name">open</span> | <span class="prop-type">bool</span> | | If `true`, `Snackbar` is open. |
| <span class="prop-name">resumeHideDuration</span> | <span class="prop-type">number</span> | | The number of milliseconds to wait before dismissing after user interaction. If `autoHideDuration` prop isn't specified, it does nothing. If `autoHideDuration` prop is specified but `resumeHideDuration` isn't, we default to `autoHideDuration / 2` ms. |
| <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Grow</span> | The component used for the transition. [Follow our guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |
| <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Grow</span> | The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |
| <span class="prop-name">transitionDuration</span> | <span class="prop-type">number<br>&#124;&nbsp;{ enter?: number, exit?: number }</span> | <span class="prop-default">{ enter: duration.enteringScreen, exit: duration.leavingScreen,}</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
| <span class="prop-name">TransitionProps</span> | <span class="prop-type">object</span> | | Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. |

Expand Down
2 changes: 1 addition & 1 deletion docs/pages/api/speed-dial.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| <span class="prop-name">onOpen</span> | <span class="prop-type">func</span> | | Callback fired when the component requests to be open.<br><br>**Signature:**<br>`function(event: object, reason: string) => void`<br>*event:* The event source of the callback.<br>*reason:* Can be: `"toggle"`, `"focus"`, `"mouseEnter"`. |
| <span class="prop-name required">open&nbsp;*</span> | <span class="prop-type">bool</span> | | If `true`, the SpeedDial is open. |
| <span class="prop-name">openIcon</span> | <span class="prop-type">node</span> | | The icon to display in the SpeedDial Fab when the SpeedDial is open. |
| <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Zoom</span> | The component used for the transition. [Follow our guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |
| <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Zoom</span> | The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |
| <span class="prop-name">transitionDuration</span> | <span class="prop-type">number<br>&#124;&nbsp;{ appear?: number, enter?: number, exit?: number }</span> | <span class="prop-default">{ enter: duration.enteringScreen, exit: duration.leavingScreen,}</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
| <span class="prop-name">TransitionProps</span> | <span class="prop-type">object</span> | | Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. |

Expand Down
2 changes: 1 addition & 1 deletion docs/pages/api/step-content.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
|:-----|:-----|:--------|:------------|
| <span class="prop-name">children</span> | <span class="prop-type">node</span> | | Step content. |
| <span class="prop-name">classes</span> | <span class="prop-type">object</span> | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Collapse</span> | The component used for the transition. [Follow our guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |
| <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Collapse</span> | The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |
| <span class="prop-name">transitionDuration</span> | <span class="prop-type">number<br>&#124;&nbsp;{ enter?: number, exit?: number }<br>&#124;&nbsp;'auto'</span> | <span class="prop-default">'auto'</span> | Adjust the duration of the content expand transition. Passed as a prop to the transition component.<br>Set to 'auto' to automatically calculate transition time based on height. |
| <span class="prop-name">TransitionProps</span> | <span class="prop-type">object</span> | | Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. |

Expand Down
2 changes: 1 addition & 1 deletion docs/pages/api/tooltip.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| <span class="prop-name">placement</span> | <span class="prop-type">'bottom-end'<br>&#124;&nbsp;'bottom-start'<br>&#124;&nbsp;'bottom'<br>&#124;&nbsp;'left-end'<br>&#124;&nbsp;'left-start'<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'right-end'<br>&#124;&nbsp;'right-start'<br>&#124;&nbsp;'right'<br>&#124;&nbsp;'top-end'<br>&#124;&nbsp;'top-start'<br>&#124;&nbsp;'top'</span> | <span class="prop-default">'bottom'</span> | Tooltip placement. |
| <span class="prop-name">PopperProps</span> | <span class="prop-type">object</span> | | Props applied to the [`Popper`](/api/popper/) element. |
| <span class="prop-name required">title&nbsp;*</span> | <span class="prop-type">node</span> | | Tooltip title. Zero-length titles string are never displayed. |
| <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Grow</span> | The component used for the transition. [Follow our guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |
| <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Grow</span> | The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |
| <span class="prop-name">TransitionProps</span> | <span class="prop-type">object</span> | | Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. |

The `ref` is forwarded to the root element.
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/api/tree-item.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| <span class="prop-name">icon</span> | <span class="prop-type">node</span> | | The icon to display next to the tree node's label. |
| <span class="prop-name">label</span> | <span class="prop-type">node</span> | | The tree node label. |
| <span class="prop-name required">nodeId&nbsp;*</span> | <span class="prop-type">string</span> | | The id of the node. |
| <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Collapse</span> | The component used for the transition. [Follow our guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |
| <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Collapse</span> | The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |

The `ref` is forwarded to the root element.

Expand Down
10 changes: 6 additions & 4 deletions docs/src/pages/components/transitions/transitions.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,11 @@ This example also demonstrates how to delay the enter transition.

## TransitionComponent prop

A few of the Material-UI components accept a `TransitionComponent` prop to customize the transition. You can use any of the above components or a home-made one.
The components accept a `TransitionComponent` prop to customize the default transitions.
You can use any of the above components or your own.
It should respect the following conditions:
Accepts an `in` prop. This corresponds to the open / close state.
Call the `onEnter` callback prop when the enter transition starts.
Call the `onExited` callback prop when the exit transition is completed.

- Accepts an `in` prop. This corresponds to the open/close state.
- Call the `onEnter` callback prop when the enter transition starts.
- Call the `onExited` callback prop when the exit transition is completed.
These two callbacks allow to unmount the children when in a closed state and fully transitioned.
2 changes: 1 addition & 1 deletion packages/material-ui-lab/src/SpeedDial/SpeedDial.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export interface SpeedDialProps
openIcon?: React.ReactNode;
/**
* The component used for the transition.
* [Follow our guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
*/
TransitionComponent?: React.ComponentType<TransitionProps>;
/**
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui-lab/src/SpeedDial/SpeedDial.js
Original file line number Diff line number Diff line change
Expand Up @@ -438,7 +438,7 @@ SpeedDial.propTypes = {
openIcon: PropTypes.node,
/**
* The component used for the transition.
* [Follow our guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
*/
TransitionComponent: PropTypes.elementType,
/**
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui-lab/src/TreeItem/TreeItem.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export interface TreeItemProps
nodeId: string;
/**
* The component used for the transition.
* [Follow our guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
*/
TransitionComponent?: React.ComponentType<TransitionProps>;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui-lab/src/TreeItem/TreeItem.js
Original file line number Diff line number Diff line change
Expand Up @@ -362,7 +362,7 @@ TreeItem.propTypes = {
onKeyDown: PropTypes.func,
/**
* The component used for the transition.
* [Follow our guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
*/
TransitionComponent: PropTypes.elementType,
};
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/Dialog/Dialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -371,7 +371,7 @@ Dialog.propTypes = {
scroll: PropTypes.oneOf(['body', 'paper']),
/**
* The component used for the transition.
* [Follow our guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
*/
TransitionComponent: PropTypes.elementType,
/**
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ ExpansionPanel.propTypes = {
square: PropTypes.bool,
/**
* The component used for the collapse effect.
* [Follow our guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
*/
TransitionComponent: PropTypes.elementType,
/**
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/Popover/Popover.js
Original file line number Diff line number Diff line change
Expand Up @@ -593,7 +593,7 @@ Popover.propTypes = {
}),
/**
* The component used for the transition.
* [Follow our guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
*/
TransitionComponent: PropTypes.elementType,
/**
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/Snackbar/Snackbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -362,7 +362,7 @@ Snackbar.propTypes = {
resumeHideDuration: PropTypes.number,
/**
* The component used for the transition.
* [Follow our guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
*/
TransitionComponent: PropTypes.elementType,
/**
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/StepContent/StepContent.js
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ StepContent.propTypes = {
orientation: PropTypes.oneOf(['horizontal', 'vertical']),
/**
* The component used for the transition.
* [Follow our guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
*/
TransitionComponent: PropTypes.elementType,
/**
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/Tooltip/Tooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -629,7 +629,7 @@ Tooltip.propTypes = {
title: PropTypes.node.isRequired,
/**
* The component used for the transition.
* [Follow our guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
*/
TransitionComponent: PropTypes.elementType,
/**
Expand Down

0 comments on commit 25f948c

Please sign in to comment.