[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

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');
   });
 });

src/Dialog/DialogContent.spec.js

@@ -20,13 +20,17 @@ describe('<DialogContent />', () => {
   });
 
   it('should spread custom props on the root node', () => {
-    const wrapper = shallow(<DialogContent data-my-prop="woof" />);
-    assert.strictEqual(wrapper.prop('data-my-prop'), 'woof', 'custom prop should be woof');
+    const wrapper = shallow(<DialogContent data-my-prop="woofDialogContent" />);
+    assert.strictEqual(
+      wrapper.prop('data-my-prop'),
+      'woofDialogContent',
+      'custom prop should be woofDialogContent',
+    );
   });
 
   it('should render with the user and root classes', () => {
-    const wrapper = shallow(<DialogContent className="woof" />);
-    assert.strictEqual(wrapper.hasClass('woof'), true);
+    const wrapper = shallow(<DialogContent className="woofDialogContent" />);
+    assert.strictEqual(wrapper.hasClass('woofDialogContent'), true);
     assert.strictEqual(wrapper.hasClass(classes.root), true);
   });
 

src/Dialog/DialogContentText.spec.js

@@ -16,8 +16,8 @@ describe('<DialogContentText />', () => {
 
   describe('prop: className', () => {
     it('should render with the user and root classes', () => {
-      const wrapper = shallow(<DialogContentText className="woof" />);
-      assert.strictEqual(wrapper.hasClass('woof'), true);
+      const wrapper = shallow(<DialogContentText className="woofDialogContentText" />);
+      assert.strictEqual(wrapper.hasClass('woofDialogContentText'), true);
       assert.strictEqual(wrapper.hasClass(classes.root), true);
     });
   });

src/Dialog/DialogTitle.spec.js

@@ -20,13 +20,17 @@ describe('<DialogTitle />', () => {
   });
 
   it('should spread custom props on the root node', () => {
-    const wrapper = shallow(<DialogTitle data-my-prop="woof" />);
-    assert.strictEqual(wrapper.prop('data-my-prop'), 'woof', 'custom prop should be woof');
+    const wrapper = shallow(<DialogTitle data-my-prop="woofDialogTitle" />);
+    assert.strictEqual(
+      wrapper.prop('data-my-prop'),
+      'woofDialogTitle',
+      'custom prop should be woofDialogTitle',
+    );
   });
 
   it('should render with the user and root classes', () => {
-    const wrapper = shallow(<DialogTitle className="woof" />);
-    assert.strictEqual(wrapper.hasClass('woof'), true);
+    const wrapper = shallow(<DialogTitle className="woofDialogTitle" />);
+    assert.strictEqual(wrapper.hasClass('woofDialogTitle'), true);
     assert.strictEqual(wrapper.hasClass(classes.root), true);
   });
 

src/Drawer/Drawer.spec.js

@@ -88,13 +88,13 @@ describe('<Drawer />', () => {
 
   it('should set the Paper className', () => {
     const wrapper = shallow(
-      <Drawer classes={{ paper: 'woof' }}>
+      <Drawer classes={{ paper: 'woofDrawer' }}>
         <h1>Hello</h1>
       </Drawer>,
     );
     const paper = wrapper.find(Paper);
     assert.strictEqual(paper.hasClass(classes.paper), true, 'should have the paper class');
-    assert.strictEqual(paper.hasClass('woof'), true, 'should have the woof class');
+    assert.strictEqual(paper.hasClass('woofDrawer'), true, 'should have the woofDrawer class');
   });
 
   it('should be closed by default', () => {

src/Form/FormControl.spec.js

@@ -18,19 +18,19 @@ describe('<FormControl />', () => {
 
   describe('initial state', () => {
     it('should render a div with the root and user classes', () => {
-      const wrapper = shallow(<FormControl className="woof" />);
+      const wrapper = shallow(<FormControl className="woofFormControl" />);
 
       assert.strictEqual(wrapper.name(), 'div');
       assert.strictEqual(wrapper.hasClass(classes.root), true);
-      assert.strictEqual(wrapper.hasClass('woof'), true);
+      assert.strictEqual(wrapper.hasClass('woofFormControl'), true);
     });
 
     it('should have the focused class', () => {
-      const wrapper = shallow(<FormControl className="woof" />);
+      const wrapper = shallow(<FormControl className="woofFormControl" />);
 
       assert.strictEqual(wrapper.name(), 'div');
       assert.strictEqual(wrapper.hasClass(classes.root), true);
-      assert.strictEqual(wrapper.hasClass('woof'), true);
+      assert.strictEqual(wrapper.hasClass('woofFormControl'), true);
     });
 
     it('should have no margin', () => {