fix(accordions): allow dynamic height for stepper content (#1570)

Author: Francois-Esquire

packages/accordions/.size-snapshot.json

@@ -1,21 +1,21 @@
 {
   "index.esm.js": {
-    "bundled": 35205,
-    "minified": 25722,
-    "gzipped": 5726,
+    "bundled": 34406,
+    "minified": 25373,
+    "gzipped": 5671,
     "treeshaked": {
       "rollup": {
-        "code": 19976,
+        "code": 19685,
         "import_statements": 683
       },
       "webpack": {
-        "code": 22211
+        "code": 21848
       }
     }
   },
   "index.cjs.js": {
-    "bundled": 38108,
-    "minified": 28376,
-    "gzipped": 5959
+    "bundled": 37237,
+    "minified": 27955,
+    "gzipped": 5905
   }
 }

packages/accordions/src/elements/stepper/components/Content.tsx

@@ -5,54 +5,20 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { forwardRef, useRef, useEffect, useContext, HTMLAttributes } from 'react';
-import mergeRefs from 'react-merge-refs';
-import debounce from 'lodash.debounce';
-import { ThemeContext } from 'styled-components';
-import { useDocument } from '@zendeskgarden/react-theming';
+import React, { forwardRef, HTMLAttributes } from 'react';
 
 import { StyledContent, StyledInnerContent } from '../../../styled';
 import { useStepContext, useStepperContext } from '../../../utils';
 
 const ContentComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   (props, ref) => {
-    const contentRef = useRef<HTMLDivElement>();
     const { activeIndex, isHorizontal } = useStepperContext();
     const { currentStepIndex } = useStepContext();
     const isActive = currentStepIndex === activeIndex;
 
-    const theme = useContext(ThemeContext);
-    const environment = useDocument(theme);
-
-    useEffect(() => {
-      if (environment && isActive && isHorizontal === false) {
-        const win = environment.defaultView! || window;
-
-        const updateMaxHeight = debounce(() => {
-          if (contentRef.current) {
-            const child = contentRef.current.children[0] as any;
-
-            child.style.maxHeight = `${child.scrollHeight}px`;
-          }
-        }, 100);
-
-        win.addEventListener('resize', updateMaxHeight);
-        updateMaxHeight();
-
-        return () => {
-          updateMaxHeight.cancel();
-          win.removeEventListener('resize', updateMaxHeight);
-        };
-      }
-
-      return undefined;
-    }, [isActive, isHorizontal, contentRef, environment]);
-
     return isHorizontal === false ? (
-      <StyledContent ref={mergeRefs([contentRef, ref])} isActive={isActive} {...props}>
-        <StyledInnerContent isActive={isActive} aria-hidden={!isActive}>
-          {props.children}
-        </StyledInnerContent>
+      <StyledContent ref={ref} isActive={isActive} {...props}>
+        <StyledInnerContent aria-hidden={!isActive}>{props.children}</StyledInnerContent>
       </StyledContent>
     ) : null;
   }

packages/accordions/src/styled/stepper/StyledContent.ts

@@ -26,17 +26,22 @@ const sizeStyles = (props: IStyledContent & ThemeProps<DefaultTheme>) => {
   return css`
     margin: ${marginVertical}px ${marginRight}px ${marginVertical}px ${marginLeft}px;
     padding: 0 ${paddingRight}px ${paddingBottom}px ${paddingLeft}px;
+    min-width: ${space.base * 30}px;
+    height: auto;
   `;
 };
 
 export const StyledContent = styled.div.attrs<IStyledContent>({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })<IStyledContent>`
-  ${sizeStyles}
-  min-width: ${props => props.theme.space.base * 30}px;
+  display: grid;
+  grid-template-rows: ${props => (props.isActive ? 1 : 0)}fr;
+  transition: grid-template-rows 0.25s ease-in-out;
   word-break: break-word;
 
+  ${sizeStyles}
+
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
 

packages/accordions/src/styled/stepper/StyledInnerContent.ts

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import styled from 'styled-components';
+import styled, { ThemeProps, DefaultTheme } from 'styled-components';
 import {
   getLineHeight,
   retrieveComponentStyles,
@@ -14,17 +14,11 @@ import {
 
 const COMPONENT_ID = 'accordions.step_inner_content';
 
-interface IStyledInnerContent {
-  isActive?: boolean;
-}
-
-export const StyledInnerContent = styled.div.attrs<IStyledInnerContent>({
+export const StyledInnerContent = styled.div.attrs<ThemeProps<DefaultTheme>>({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
-})<IStyledInnerContent>`
-  transition: max-height 0.25s ease-in-out;
+})`
   overflow: hidden;
-  max-height: ${props => !props.isActive && '0 !important'}; /* stylelint-disable-line */
   line-height: ${props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md)};
   color: ${props => props.theme.colors.foreground};
   font-size: ${props => props.theme.fontSizes.md};