add support for unitless number

mui · Nov 20, 2019 · fa6a6af · fa6a6af
1 parent 91576a4
commit fa6a6af
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 26 deletions.
diff --git a/docs/pages/api/collapse.md b/docs/pages/api/collapse.md
@@ -28,7 +28,7 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro
 |:-----|:-----|:--------|:------------|
 | <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">string</span> | <span class="prop-default">'0px'</span> | The height of the container when collapsed. |
+| <span class="prop-name">collapsedHeight</span> | <span class="prop-type">string<br>&#124;&nbsp;number</span> | <span class="prop-default">'0px'</span> | The height 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 DOM element or a component. |
 | <span class="prop-name">in</span> | <span class="prop-type">bool</span> |  | If `true`, the component will transition in. |
 | <span class="prop-name">timeout</span> | <span class="prop-type">number<br>&#124;&nbsp;{ enter?: number, exit?: number }<br>&#124;&nbsp;'auto'</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. |

diff --git a/docs/src/pages/components/transitions/SimpleCollapse.js b/docs/src/pages/components/transitions/SimpleCollapse.js
@@ -48,7 +48,7 @@ export default function SimpleCollapse() {
             </svg>
           </Paper>
         </Collapse>
-        <Collapse in={checked} collapsedHeight="40px">
+        <Collapse in={checked} collapsedHeight={40}>
           <Paper elevation={4} className={classes.paper}>
             <svg className={classes.svg}>
               <polygon points="0,100 50,00, 100,100" className={classes.polygon} />

diff --git a/docs/src/pages/components/transitions/SimpleCollapse.tsx b/docs/src/pages/components/transitions/SimpleCollapse.tsx
@@ -50,7 +50,7 @@ export default function SimpleCollapse() {
             </svg>
           </Paper>
         </Collapse>
-        <Collapse in={checked} collapsedHeight="40px">
+        <Collapse in={checked} collapsedHeight={40}>
           <Paper elevation={4} className={classes.paper}>
             <svg className={classes.svg}>
               <polygon points="0,100 50,00, 100,100" className={classes.polygon} />

diff --git a/packages/material-ui/src/Collapse/Collapse.d.ts b/packages/material-ui/src/Collapse/Collapse.d.ts
@@ -5,7 +5,7 @@ import { TransitionProps } from '../transitions/transition';
 
 export interface CollapseProps extends StandardProps<TransitionProps, CollapseClassKey, 'timeout'> {
   children?: React.ReactNode;
-  collapsedHeight?: string;
+  collapsedHeight?: string | number;
   component?: React.ElementType<TransitionProps>;
   theme?: Theme;
   timeout?: TransitionProps['timeout'] | 'auto';

diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js
@@ -44,7 +44,7 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
     children,
     classes,
     className,
-    collapsedHeight = '0px',
+    collapsedHeight: collapsedHeightProp = '0px',
     component: Component = 'div',
     in: inProp,
     onEnter,
@@ -60,6 +60,8 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
   const timer = React.useRef();
   const wrapperRef = React.useRef(null);
   const autoTransitionDuration = React.useRef();
+  const collapsedHeight =
+    typeof collapsedHeightProp === 'number' ? `${collapsedHeightProp}px` : collapsedHeightProp;
 
   React.useEffect(() => {
     return () => {
@@ -69,16 +71,6 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
 
   const handleEnter = (node, isAppearing) => {
     node.style.height = collapsedHeight;
-    if (process.env.NODE_ENV !== 'production') {
-      if (node.style.height !== collapsedHeight) {
-        console.error(
-          [
-            'Material-UI: the `collapsedHeight` prop is invalid.',
-            `You have provided ${collapsedHeight} but it requires units, e.g. '0px'.`,
-          ].join('\n'),
-        );
-      }
-    }
 
     if (onEnter) {
       onEnter(node, isAppearing);
@@ -148,16 +140,6 @@ const Collapse = React.forwardRef(function Collapse(props, ref) {
     }
 
     node.style.height = collapsedHeight;
-    if (process.env.NODE_ENV !== 'production') {
-      if (node.style.height !== collapsedHeight) {
-        console.error(
-          [
-            'Material-UI: the `collapsedHeight` prop is invalid.',
-            `You have provided ${collapsedHeight} but it requires units, e.g. '0px'.`,
-          ].join('\n'),
-        );
-      }
-    }
 
     if (onExiting) {
       onExiting(node);
@@ -225,7 +207,7 @@ Collapse.propTypes = {
   /**
    * The height of the container when collapsed.
    */
-  collapsedHeight: PropTypes.string,
+  collapsedHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**
    * The component used for the root node.
    * Either a string to use a DOM element or a component.