[Slide] Remove gutter (#16533)

* remove gutter from Slide component * fix tests
mui · Jul 10, 2019 · d24760f · d24760f
1 parent 25fbd5c
commit d24760f
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/packages/material-ui/src/Slide/Slide.js b/packages/material-ui/src/Slide/Slide.js
@@ -9,8 +9,6 @@ import useTheme from '../styles/useTheme';
 import { duration } from '../styles/transitions';
 import { reflow, getTransitionProps } from '../transitions/utils';
 
-const GUTTER = 24;
-
 // Translate the node so he can't be seen on the screen.
 // Later, we gonna translate back the node to his original location
 // with `none`.`
@@ -45,15 +43,15 @@ function getTranslateValue(direction, node) {
   }
 
   if (direction === 'right') {
-    return `translateX(-${rect.left + rect.width + GUTTER - offsetX}px)`;
+    return `translateX(-${rect.left + rect.width - offsetX}px)`;
   }
 
   if (direction === 'up') {
     return `translateY(${window.innerHeight}px) translateY(-${rect.top - offsetY}px)`;
   }
 
   // direction === 'down'
-  return `translateY(-${rect.top + rect.height + GUTTER - offsetY}px)`;
+  return `translateY(-${rect.top + rect.height - offsetY}px)`;
 }
 
 export function setTranslateValue(direction, node) {

diff --git a/packages/material-ui/src/Slide/Slide.test.js b/packages/material-ui/src/Slide/Slide.test.js
@@ -260,7 +260,7 @@ describe('<Slide />', () => {
       it('should set element transform and transition in the `right` direction', () => {
         wrapper.setProps({ direction: 'right' });
         wrapper.setProps({ in: true });
-        assert.strictEqual(nodeEnterTransformStyle, 'translateX(-824px)');
+        assert.strictEqual(nodeEnterTransformStyle, 'translateX(-800px)');
       });
 
       it('should set element transform and transition in the `up` direction', () => {
@@ -275,14 +275,14 @@ describe('<Slide />', () => {
       it('should set element transform and transition in the `down` direction', () => {
         wrapper.setProps({ direction: 'down' });
         wrapper.setProps({ in: true });
-        assert.strictEqual(nodeEnterTransformStyle, 'translateY(-524px)');
+        assert.strictEqual(nodeEnterTransformStyle, 'translateY(-500px)');
       });
 
       it('should reset the previous transition if needed', () => {
-        child.style.transform = 'translateX(-824px)';
+        child.style.transform = 'translateX(-800px)';
         wrapper.setProps({ direction: 'right' });
         wrapper.setProps({ in: true });
-        assert.strictEqual(nodeEnterTransformStyle, 'translateX(-824px)');
+        assert.strictEqual(nodeEnterTransformStyle, 'translateX(-800px)');
       });
     });
 
@@ -311,7 +311,7 @@ describe('<Slide />', () => {
       it('should set element transform and transition in the `right` direction', () => {
         wrapper.setProps({ direction: 'right' });
         wrapper.setProps({ in: false });
-        assert.strictEqual(nodeExitingTransformStyle, 'translateX(-824px)');
+        assert.strictEqual(nodeExitingTransformStyle, 'translateX(-800px)');
       });
 
       it('should set element transform and transition in the `up` direction', () => {
@@ -326,7 +326,7 @@ describe('<Slide />', () => {
       it('should set element transform and transition in the `down` direction', () => {
         wrapper.setProps({ direction: 'down' });
         wrapper.setProps({ in: false });
-        assert.strictEqual(nodeExitingTransformStyle, 'translateY(-524px)');
+        assert.strictEqual(nodeExitingTransformStyle, 'translateY(-500px)');
       });
     });
   });