fix stepper jump

mui · Sep 13, 2020 · ec5f8e6 · ec5f8e6
1 parent 9bd9c55
commit ec5f8e6
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/docs/src/pages/components/steppers/steppers.md b/docs/src/pages/components/steppers/steppers.md
@@ -47,7 +47,7 @@ determine when all steps are completed (or even if they need to be completed).
 
 {{"demo": "pages/components/steppers/HorizontalNonLinearStepper.js"}}
 
-### Alternative Label
+### Alternative label
 
 Labels can be placed below the step icon by setting the `alternativeLabel` prop on the `Stepper` component.
 

diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -524,7 +524,7 @@ const theme = createMuitheme({
   />
   ```
 
-  ### Stepper
+### Stepper
 
 - The root component (Paper) was replaced with a div. Stepper no longer has elevation, nor inherits Paper's props. This change is meant to encourage composition.
 
@@ -543,6 +543,21 @@ const theme = createMuitheme({
 +<Paper>
 ```
 
+- Remove the built-in 24px padding.
+
+```diff
+-<Stepper>
+-  <Step>
+-    <StepLabel>Hello world</StepLabel>
+-  </Step>
+-</Stepper>
++ <Stepper style={{ padding: 24 }}>
++   <Step>
++     <StepLabel>Hello world</StepLabel>
++   </Step>
++ </Stepper>
+```
+
 ### TablePagination
 
 - The customization of the table pagination's actions labels must be done with the `getItemAriaLabel` prop. This increases consistency with the `Pagination` component.

diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js
@@ -116,7 +116,7 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
     wrapperRef.current ? wrapperRef.current[isHorizontal ? 'clientWidth' : 'clientHeight'] : 0;
 
   const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
-    if (wrapperRef.current) {
+    if (wrapperRef.current && isHorizontal) {
       // Set absolute position to get the size of collapsed content
       wrapperRef.current.style.position = 'absolute';
     }
@@ -130,7 +130,7 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
   const handleEntering = normalizedTransitionCallback((node, isAppearing) => {
     const wrapperSize = getWrapperSize();
 
-    if (wrapperRef.current) {
+    if (wrapperRef.current && isHorizontal) {
       // After the size is read reset the position back to default
       wrapperRef.current.style.position = '';
     }