[Popover] Refactor popover transition - separation of concerns

.flowconfig

@@ -29,4 +29,5 @@ module.system.node.resolve_dirname=node_modules
 module.system.node.resolve_dirname=.
 
 suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe
+suppress_comment= \\(.\\|\n\\)*\\$FlowExpectedError
 suppress_type=$FlowToDo

docs/src/pages/component-api/Card/CardHeader.md

@@ -21,6 +21,8 @@ This property accepts the following keys:
 - `root`
 - `avatar`
 - `content`
+- `title`
+- `subheader`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.

docs/src/pages/component-api/Card/CardMedia.md

@@ -8,6 +8,7 @@
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | classes | Object |  | Useful to extend the style applied to components. |
+| <span style="color: #31a148">image *</span> | string |  | Image to be displayed as a background image. Note that caller must specify height otherwise the image will not be visible. |
 
 Any other properties supplied will be spread to the root element.
 

docs/src/pages/component-api/transitions/Collapse.md

@@ -7,15 +7,15 @@
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | The content node to be collapsed. |
-| classes | object |  | Useful to extend the style applied to components. |
-| in | bool | false | If `true`, the component will transition in. |
-| onEnter | function |  | Callback fired before the component is entering. |
-| onEntered | function |  | Callback fired when the component has entered. |
-| onEntering | function |  | Callback fired when the component is entering. |
-| onExit | function |  | Callback fired before the component is exiting. |
-| onExited | function |  | Callback fired when the component has exited. |
-| onExiting | function |  | Callback fired when the component is exiting. |
+| children | Element |  | The content node to be collapsed. |
+| classes | Object | {} | Useful to extend the style applied to components. |
+| in | boolean | false | If `true`, the component will transition in. |
+| onEnter | TransitionCallback |  | Callback fired before the component is entering. |
+| onEntered | TransitionCallback |  | Callback fired when the component has entered. |
+| onEntering | TransitionCallback |  | Callback fired when the component is entering. |
+| onExit | TransitionCallback |  | Callback fired before the component is exiting. |
+| onExited | TransitionCallback |  | Callback fired when the component has exited. |
+| onExiting | TransitionCallback |  | Callback fired when the component is exiting. |
 | transitionDuration | union:&nbsp;number<br>&nbsp;string<br> | 300 | Set to 'auto' to automatically calculate transition time based on height. |
 
 Any other properties supplied will be spread to the root element.

docs/src/pages/component-api/transitions/Grow.md

@@ -0,0 +1,21 @@
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# Grow
+
+Grow transition used by popovers such as Menu.
+
+## Props
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| children | Element |  | The content of the component. |
+| onEnter | TransitionCallback |  | Callback fired before the component is entering |
+| onEntered | TransitionCallback |  | Callback fired when the component has entered |
+| onEntering | TransitionCallback |  | Callback fired when the component is entering |
+| onExit | TransitionCallback |  | Callback fired before the component is exiting |
+| onExited | TransitionCallback |  | Callback fired when the component has exited |
+| onExiting | TransitionCallback |  | Callback fired when the component is exiting |
+| rootRef | Function |  | Use that property to pass a ref callback to the root component. |
+| transitionDuration | union:&nbsp;number<br>&nbsp;'auto'<br> | 'auto' | Set to 'auto' to automatically calculate transition time based on height |
+
+Any other properties supplied will be spread to the root element.
+

docs/src/pages/component-api/transitions/Slide.md

@@ -7,17 +7,17 @@
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| direction | enum:&nbsp;'left'<br>&nbsp;'right'<br>&nbsp;'up'<br>&nbsp;'down'<br> | 'down' | Direction the child element will enter from. |
+| direction | union:&nbsp;'left'<br>&nbsp;'right'<br>&nbsp;'up'<br>&nbsp;'down'<br> | 'down' | Direction the child element will enter from. |
 | enterTransitionDuration | number | duration.enteringScreen | Duration of the animation when the element is entering. |
-| in | bool |  | If `true`, show the component; triggers the enter or exit animation. |
+| in | boolean |  | If `true`, show the component; triggers the enter or exit animation. |
 | leaveTransitionDuration | number | duration.leavingScreen | Duration of the animation when the element is exiting. |
 | offset | string |  | Slide in by a fixed number of pixels or %. |
-| onEnter | function |  | Callback fired before the component enters. |
-| onEntered | function |  | Callback fired when the component has entered. |
-| onEntering | function |  | Callback fired when the component is entering. |
-| onExit | function |  | Callback fired before the component exits. |
-| onExited | function |  | Callback fired when the component has exited. |
-| onExiting | function |  | Callback fired when the component is exiting. |
+| onEnter | TransitionCallback |  | Callback fired before the component enters. |
+| onEntered | TransitionCallback |  | Callback fired when the component has entered. |
+| onEntering | TransitionCallback |  | Callback fired when the component is entering. |
+| onExit | TransitionCallback |  | Callback fired before the component exits. |
+| onExited | TransitionCallback |  | Callback fired when the component has exited. |
+| onExiting | TransitionCallback |  | Callback fired when the component is exiting. |
 
 Any other properties supplied will be spread to the root element.
 

src/Avatar/Avatar.spec.js

@@ -18,14 +18,19 @@ describe('<Avatar />', () => {
   describe('image avatar', () => {
     it('should render a div containing an img', () => {
       const wrapper = shallow(
-        <Avatar className="my-avatar" src="something.jpg" alt="Hello World!" data-my-prop="woof" />,
+        <Avatar
+          className="my-avatar"
+          src="something.jpg"
+          alt="Hello World!"
+          data-my-prop="woofAvatar"
+        />,
       );
 
       assert.strictEqual(wrapper.name(), 'div');
       assert.strictEqual(wrapper.childAt(0).is('img'), true, 'should be an img');
       assert.strictEqual(wrapper.hasClass(classes.root), true);
       assert.strictEqual(wrapper.hasClass('my-avatar'), true);
-      assert.strictEqual(wrapper.prop('data-my-prop'), 'woof');
+      assert.strictEqual(wrapper.prop('data-my-prop'), 'woofAvatar');
       assert.strictEqual(
         wrapper.hasClass(classes.colorDefault),
         false,
@@ -64,7 +69,7 @@ describe('<Avatar />', () => {
 
     before(() => {
       wrapper = shallow(
-        <Avatar className="my-avatar" data-my-prop="woof" childrenClassName="my-children">
+        <Avatar className="my-avatar" data-my-prop="woofAvatar" childrenClassName="my-children">
           <span className="my-icon-font">icon</span>
         </Avatar>,
       );
@@ -81,7 +86,7 @@ describe('<Avatar />', () => {
     it('should merge user classes & spread custom props to the root node', () => {
       assert.strictEqual(wrapper.hasClass(classes.root), true);
       assert.strictEqual(wrapper.hasClass('my-avatar'), true);
-      assert.strictEqual(wrapper.prop('data-my-prop'), 'woof');
+      assert.strictEqual(wrapper.prop('data-my-prop'), 'woofAvatar');
     });
 
     it('should apply the colorDefault class', () => {
@@ -98,7 +103,7 @@ describe('<Avatar />', () => {
 
     before(() => {
       wrapper = shallow(
-        <Avatar className="my-avatar" data-my-prop="woof" childrenClassName="my-children">
+        <Avatar className="my-avatar" data-my-prop="woofAvatar" childrenClassName="my-children">
           <CancelIcon />
         </Avatar>,
       );
@@ -112,7 +117,7 @@ describe('<Avatar />', () => {
     it('should merge user classes & spread custom props to the root node', () => {
       assert.strictEqual(wrapper.hasClass(classes.root), true);
       assert.strictEqual(wrapper.hasClass('my-avatar'), true);
-      assert.strictEqual(wrapper.prop('data-my-prop'), 'woof');
+      assert.strictEqual(wrapper.prop('data-my-prop'), 'woofAvatar');
     });
 
     it('should apply the colorDefault class', () => {
@@ -129,7 +134,7 @@ describe('<Avatar />', () => {
 
     before(() => {
       wrapper = shallow(
-        <Avatar className="my-avatar" data-my-prop="woof">
+        <Avatar className="my-avatar" data-my-prop="woofAvatar">
           OT
         </Avatar>,
       );
@@ -143,7 +148,7 @@ describe('<Avatar />', () => {
     it('should merge user classes & spread custom props to the root node', () => {
       assert.strictEqual(wrapper.hasClass(classes.root), true);
       assert.strictEqual(wrapper.hasClass('my-avatar'), true);
-      assert.strictEqual(wrapper.prop('data-my-prop'), 'woof');
+      assert.strictEqual(wrapper.prop('data-my-prop'), 'woofAvatar');
     });
 
     it('should apply the colorDefault class', () => {

src/BottomNavigation/BottomNavigation.spec.js

@@ -36,11 +36,11 @@ describe('<BottomNavigation />', () => {
 
   it('should render with the user and root classes', () => {
     const wrapper = shallow(
-      <BottomNavigation showLabels className="woof">
+      <BottomNavigation showLabels className="woofBottomNavigation">
         <BottomNavigationButton icon={icon} />
       </BottomNavigation>,
     );
-    assert.strictEqual(wrapper.hasClass('woof'), true);
+    assert.strictEqual(wrapper.hasClass('woofBottomNavigation'), true);
     assert.strictEqual(wrapper.hasClass(classes.root), true);
   });
 

src/BottomNavigation/BottomNavigationButton.spec.js

@@ -28,8 +28,10 @@ describe('<BottomNavigationButton />', () => {
   });
 
   it('should render with the user and root classes', () => {
-    const wrapper = shallow(<BottomNavigationButton className="woof" icon={icon} />);
-    assert.strictEqual(wrapper.hasClass('woof'), true);
+    const wrapper = shallow(
+      <BottomNavigationButton className="woofBottomNavigationButton" icon={icon} />,
+    );
+    assert.strictEqual(wrapper.hasClass('woofBottomNavigationButton'), true);
     assert.strictEqual(wrapper.hasClass(classes.root), true);
   });
 

src/Card/Card.spec.js

@@ -24,7 +24,7 @@ describe('<Card />', () => {
   });
 
   it('should spread custom props on the root node', () => {
-    const wrapper = shallow(<Card data-my-prop="woof" />);
-    assert.strictEqual(wrapper.prop('data-my-prop'), 'woof', 'custom prop should be woof');
+    const wrapper = shallow(<Card data-my-prop="woofCard" />);
+    assert.strictEqual(wrapper.prop('data-my-prop'), 'woofCard', 'custom prop should be woofCard');
   });
 });

src/Card/CardMedia.spec.js

@@ -15,9 +15,9 @@ describe('<CardMedia />', () => {
   });
 
   it('should have the root and custom class', () => {
-    const wrapper = shallow(<CardMedia className="woof" image="/foo.jpg" />);
+    const wrapper = shallow(<CardMedia className="woofCardMedia" image="/foo.jpg" />);
     assert.strictEqual(wrapper.hasClass(classes.root), true);
-    assert.strictEqual(wrapper.hasClass('woof'), true);
+    assert.strictEqual(wrapper.hasClass('woofCardMedia'), true);
   });
 
   it('should have the backgroundImage specified', () => {
@@ -26,7 +26,11 @@ describe('<CardMedia />', () => {
   });
 
   it('should spread custom props on the root node', () => {
-    const wrapper = shallow(<CardMedia image="/foo.jpg" data-my-prop="woof" />);
-    assert.strictEqual(wrapper.prop('data-my-prop'), 'woof', 'custom prop should be woof');
+    const wrapper = shallow(<CardMedia image="/foo.jpg" data-my-prop="woofCardMedia" />);
+    assert.strictEqual(
+      wrapper.prop('data-my-prop'),
+      'woofCardMedia',
+      'custom prop should be woofCardMedia',
+    );
   });
 });

src/Chip/Chip.spec.js

@@ -22,7 +22,7 @@ describe('<Chip />', () => {
 
     before(() => {
       wrapper = shallow(
-        <Chip className="my-Chip" data-my-prop="woof">
+        <Chip className="my-Chip" data-my-prop="woofChip">
           Text Chip
         </Chip>,
       );
@@ -36,7 +36,7 @@ describe('<Chip />', () => {
     it('should merge user classes & spread custom props to the root node', () => {
       assert.strictEqual(wrapper.hasClass(classes.root), true);
       assert.strictEqual(wrapper.hasClass('my-Chip'), true);
-      assert.strictEqual(wrapper.prop('data-my-prop'), 'woof');
+      assert.strictEqual(wrapper.prop('data-my-prop'), 'woofChip');
     });
 
     it('should have a tabIndex prop with value -1', () => {
@@ -51,7 +51,7 @@ describe('<Chip />', () => {
     before(() => {
       handleClick = () => {};
       wrapper = shallow(
-        <Chip className="my-Chip" data-my-prop="woof" onClick={handleClick}>
+        <Chip className="my-Chip" data-my-prop="woofChip" onClick={handleClick}>
           Text Chip
         </Chip>,
       );
@@ -65,7 +65,7 @@ describe('<Chip />', () => {
     it('should merge user classes & spread custom props to the root node', () => {
       assert.strictEqual(wrapper.hasClass(classes.root), true);
       assert.strictEqual(wrapper.hasClass('my-Chip'), true);
-      assert.strictEqual(wrapper.prop('data-my-prop'), 'woof');
+      assert.strictEqual(wrapper.prop('data-my-prop'), 'woofChip');
       assert.strictEqual(wrapper.props().onClick, handleClick);
     });
 
@@ -93,14 +93,14 @@ describe('<Chip />', () => {
       wrapper = shallow(
         <Chip
           avatar={
-            <Avatar className="my-Avatar" data-my-prop="woof">
+            <Avatar className="my-Avatar" data-my-prop="woofChip">
               MB
             </Avatar>
           }
           label="Text Avatar Chip"
           onRequestDelete={() => {}}
           className="my-Chip"
-          data-my-prop="woof"
+          data-my-prop="woofChip"
         />,
       );
     });
@@ -115,13 +115,13 @@ describe('<Chip />', () => {
     it('should merge user classes & spread custom props to the root node', () => {
       assert.strictEqual(wrapper.hasClass(classes.root), true);
       assert.strictEqual(wrapper.hasClass('my-Chip'), true);
-      assert.strictEqual(wrapper.prop('data-my-prop'), 'woof');
+      assert.strictEqual(wrapper.prop('data-my-prop'), 'woofChip');
     });
 
     it('should merge user classes & spread custom props to the Avatar node', () => {
       assert.strictEqual(wrapper.childAt(0).hasClass(classes.avatar), true);
       assert.strictEqual(wrapper.childAt(0).hasClass('my-Avatar'), true);
-      assert.strictEqual(wrapper.childAt(0).prop('data-my-prop'), 'woof');
+      assert.strictEqual(wrapper.childAt(0).prop('data-my-prop'), 'woofChip');
     });
 
     it('should have a tabIndex prop', () => {
@@ -160,7 +160,7 @@ describe('<Chip />', () => {
 
     before(() => {
       wrapper = shallow(
-        <Chip className="my-Chip" data-my-prop="woof">
+        <Chip className="my-Chip" data-my-prop="woofChip">
           Text Chip
         </Chip>,
       );

src/Dialog/Dialog.spec.js

@@ -56,13 +56,17 @@ describe('<Dialog />', () => {
   });
 
   it('should spread custom props on the paper (dialog "root") node', () => {
-    const wrapper = shallow(<Dialog data-my-prop="woof" />);
-    assert.strictEqual(wrapper.prop('data-my-prop'), 'woof', 'custom prop should be woof');
+    const wrapper = shallow(<Dialog data-my-prop="woofDialog" />);
+    assert.strictEqual(
+      wrapper.prop('data-my-prop'),
+      'woofDialog',
+      'custom prop should be woofDialog',
+    );
   });
 
   it('should render with the user classes on the root node', () => {
-    const wrapper = shallow(<Dialog className="woof" />);
-    assert.strictEqual(wrapper.hasClass('woof'), true);
+    const wrapper = shallow(<Dialog className="woofDialog" />);
+    assert.strictEqual(wrapper.hasClass('woofDialog'), true);
   });
 
   it('should render Fade > Paper > children inside the Modal', () => {

src/Dialog/DialogActions.spec.js

@@ -20,36 +20,40 @@ describe('<DialogActions />', () => {
   });
 
   it('should spread custom props on the root node', () => {
-    const wrapper = shallow(<DialogActions data-my-prop="woof" />);
-    assert.strictEqual(wrapper.prop('data-my-prop'), 'woof', 'custom prop should be woof');
+    const wrapper = shallow(<DialogActions data-my-prop="woofDialogActions" />);
+    assert.strictEqual(
+      wrapper.prop('data-my-prop'),
+      'woofDialogActions',
+      'custom prop should be woofDialogActions',
+    );
   });
 
   it('should render with the user and root classes', () => {
-    const wrapper = shallow(<DialogActions className="woof" />);
-    assert.strictEqual(wrapper.hasClass('woof'), true);
+    const wrapper = shallow(<DialogActions className="woofDialogActions" />);
+    assert.strictEqual(wrapper.hasClass('woofDialogActions'), true);
     assert.strictEqual(wrapper.hasClass(classes.root), true);
   });
 
   it('should render children with the button class wrapped in a div with the action class', () => {
     const wrapper = shallow(
       <DialogActions>
-        <button className="woof">Hello</button>
+        <button className="woofDialogActions">Hello</button>
       </DialogActions>,
     );
     const container = wrapper.childAt(0);
     assert.strictEqual(container.hasClass(classes.action), true, 'should have the action wrapper');
     assert.strictEqual(container.is('div'), true, 'should be a div');
     const button = container.childAt(0);
     assert.strictEqual(button.is('button'), true, 'should be a button');
-    assert.strictEqual(button.hasClass('woof'), true, 'should have the user class');
+    assert.strictEqual(button.hasClass('woofDialogActions'), true, 'should have the user class');
     assert.strictEqual(button.hasClass(classes.button), true, 'should have the button class');
   });
 
   it('should render children with the conditional buttons', () => {
     const showButton = true;
     const wrapper = shallow(
       <DialogActions>
-        {showButton ? <button className="woof">Hello</button> : null}
+        {showButton ? <button className="woofDialogActions">Hello</button> : null}
         {!showButton ? <button>false button</button> : null}
       </DialogActions>,
     );
@@ -59,7 +63,7 @@ describe('<DialogActions />', () => {
     assert.strictEqual(container.is('div'), true, 'should be a div');
     const button = container.childAt(0);
     assert.strictEqual(button.is('button'), true, 'should be a button');
-    assert.strictEqual(button.hasClass('woof'), true, 'should have the user class');
+    assert.strictEqual(button.hasClass('woofDialogActions'), true, 'should have the user class');
     assert.strictEqual(button.hasClass(classes.button), true, 'should have the button class');
   });
 });