[Collapse] Add orientation and horizontal support (#20619)

mui · Jul 3, 2020 · 64cbf68 · 64cbf68
1 parent 101ea59
commit 64cbf68
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 39 deletions.
diff --git a/docs/pages/api-docs/collapse.md b/docs/pages/api-docs/collapse.md
@@ -32,10 +32,11 @@ The `MuiCollapse` name can be used for providing [default props](/customization/
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content node to be collapsed. |
 | <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">collapsedHeight</span> | <span class="prop-type">number<br>&#124;&nbsp;string</span> | <span class="prop-default">'0px'</span> | The height of the container when collapsed. |
+| <span class="prop-name">collapsedSize</span> | <span class="prop-type">number<br>&#124;&nbsp;string</span> | <span class="prop-default">'0px'</span> | The width (horizontal) or height (vertical) of the container when collapsed. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a HTML element or a component. |
 | <span class="prop-name">disableStrictModeCompat</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Enable this prop if you encounter 'Function components cannot be given refs', use `unstable_createStrictModeTheme`, and can't forward the ref in the passed `Component`. |
 | <span class="prop-name">in</span> | <span class="prop-type">bool</span> |  | If `true`, the component will transition in. |
+| <span class="prop-name">orientation</span> | <span class="prop-type">'horizontal'<br>&#124;&nbsp;'vertical'</span> | <span class="prop-default">'vertical'</span> | The collapse transition orientation. |
 | <span class="prop-name">timeout</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;number<br>&#124;&nbsp;{ appear?: number, enter?: number, exit?: number }</span> | <span class="prop-default">duration.standard</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.<br>Set to 'auto' to automatically calculate transition time based on height. |
 
 The `ref` is forwarded to the root element.
@@ -47,8 +48,9 @@ Any other props supplied will be provided to the root element ([Transition](http
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">container</span> | <span class="prop-name">.MuiCollapse-container</span> | Styles applied to the container element.
+| <span class="prop-name">horizontal</span> | <span class="prop-name">.MuiCollapse-horizontal</span> | Pseudo-class applied to the root element if `orientation="horizontal"`.
 | <span class="prop-name">entered</span> | <span class="prop-name">.MuiCollapse-entered</span> | Styles applied to the container element when the transition has entered.
-| <span class="prop-name">hidden</span> | <span class="prop-name">.MuiCollapse-hidden</span> | Styles applied to the container element when the transition has exited and `collapsedHeight` != 0px.
+| <span class="prop-name">hidden</span> | <span class="prop-name">.MuiCollapse-hidden</span> | Styles applied to the container element when the transition has exited and `collapsedSize` != 0px.
 | <span class="prop-name">wrapper</span> | <span class="prop-name">.MuiCollapse-wrapper</span> | Styles applied to the outer wrapper element.
 | <span class="prop-name">wrapperInner</span> | <span class="prop-name">.MuiCollapse-wrapperInner</span> | Styles applied to the inner wrapper element.
 

diff --git a/docs/src/pages/components/transitions/SimpleCollapse.js b/docs/src/pages/components/transitions/SimpleCollapse.js
@@ -7,10 +7,16 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 
 const useStyles = makeStyles((theme) => ({
   root: {
-    height: 180,
+    height: 300,
   },
   container: {
     display: 'flex',
+    justifyContent: 'space-around',
+    height: 120,
+    width: 250,
+  },
+  halfWidth: {
+    width: '50%',
   },
   paper: {
     margin: theme.spacing(1),
@@ -51,7 +57,7 @@ export default function SimpleCollapse() {
             </svg>
           </Paper>
         </Collapse>
-        <Collapse in={checked} collapsedHeight={40}>
+        <Collapse in={checked} collapsedSize={40}>
           <Paper elevation={4} className={classes.paper}>
             <svg className={classes.svg}>
               <polygon
@@ -62,6 +68,32 @@ export default function SimpleCollapse() {
           </Paper>
         </Collapse>
       </div>
+      <div className={classes.container}>
+        <div className={classes.halfWidth}>
+          <Collapse orientation="horizontal" in={checked}>
+            <Paper elevation={4} className={classes.paper}>
+              <svg className={classes.svg}>
+                <polygon
+                  points="0,100 50,00, 100,100"
+                  className={classes.polygon}
+                />
+              </svg>
+            </Paper>
+          </Collapse>
+        </div>
+        <div className={classes.halfWidth}>
+          <Collapse orientation="horizontal" in={checked} collapsedSize={40}>
+            <Paper elevation={4} className={classes.paper}>
+              <svg className={classes.svg}>
+                <polygon
+                  points="0,100 50,00, 100,100"
+                  className={classes.polygon}
+                />
+              </svg>
+            </Paper>
+          </Collapse>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/docs/src/pages/components/transitions/SimpleCollapse.tsx b/docs/src/pages/components/transitions/SimpleCollapse.tsx
@@ -8,10 +8,16 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
-      height: 180,
+      height: 300,
     },
     container: {
       display: 'flex',
+      justifyContent: 'space-around',
+      height: 120,
+      width: 250,
+    },
+    halfWidth: {
+      width: '50%',
     },
     paper: {
       margin: theme.spacing(1),
@@ -53,7 +59,7 @@ export default function SimpleCollapse() {
             </svg>
           </Paper>
         </Collapse>
-        <Collapse in={checked} collapsedHeight={40}>
+        <Collapse in={checked} collapsedSize={40}>
           <Paper elevation={4} className={classes.paper}>
             <svg className={classes.svg}>
               <polygon
@@ -64,6 +70,32 @@ export default function SimpleCollapse() {
           </Paper>
         </Collapse>
       </div>
+      <div className={classes.container}>
+        <div className={classes.halfWidth}>
+          <Collapse orientation="horizontal" in={checked}>
+            <Paper elevation={4} className={classes.paper}>
+              <svg className={classes.svg}>
+                <polygon
+                  points="0,100 50,00, 100,100"
+                  className={classes.polygon}
+                />
+              </svg>
+            </Paper>
+          </Collapse>
+        </div>
+        <div className={classes.halfWidth}>
+          <Collapse orientation="horizontal" in={checked} collapsedSize={40}>
+            <Paper elevation={4} className={classes.paper}>
+              <svg className={classes.svg}>
+                <polygon
+                  points="0,100 50,00, 100,100"
+                  className={classes.polygon}
+                />
+              </svg>
+            </Paper>
+          </Collapse>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/docs/src/pages/components/transitions/transitions.md b/docs/src/pages/components/transitions/transitions.md
@@ -37,8 +37,9 @@ export default Main() {
 
 ## Collapse
 
-Expand vertically from the top of the child element.
-The `collapsedHeight` property can be used to set the minimum height when not expanded.
+Expand from the start edge of the child element.
+Use the `orientation` prop if you need a horizontal collapse.
+The `collapsedSize` prop can be used to set the minimum width/height when not expanded.
 
 {{"demo": "pages/components/transitions/SimpleCollapse.js", "bg": true}}
 

diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -64,6 +64,15 @@ yarn add @material-ui/core@next
   +<Button />
   ```
 
+### Collapse
+
+- The `collapsedHeight` prop was renamed `collapsedSize` to support the horizontal direction.
+
+  ```diff
+  -<Collapse collapsedHeight={40}>
+  +<Collapse collapsedSize={40}>
+  ```
+
 ### Divider
 
 - Use border instead of background color. It prevents inconsistent height on scaled screens. For people customizing the color of the border, the change requires changing the override CSS property:

diff --git a/packages/material-ui/src/Collapse/Collapse.d.ts b/packages/material-ui/src/Collapse/Collapse.d.ts
@@ -9,9 +9,9 @@ export interface CollapseProps extends StandardProps<TransitionProps, CollapseCl
    */
   children?: React.ReactNode;
   /**
-   * The height of the container when collapsed.
+   * The width (horizontal) or height (vertical) of the container when collapsed.
    */
-  collapsedHeight?: string | number;
+  collapsedSize?: string | number;
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
@@ -27,6 +27,10 @@ export interface CollapseProps extends StandardProps<TransitionProps, CollapseCl
    * If `true`, the component will transition in.
    */
   in?: boolean;
+  /**
+   * The collapse transition orientation.
+   */
+  orientation?: 'horizontal' | 'vertical';
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.