fix(accordions): enable dynamic height for panel (#1600)

Author: Francois-Esquire

packages/accordions/.size-snapshot.json

@@ -1,21 +1,21 @@
 {
   "index.esm.js": {
-    "bundled": 34407,
-    "minified": 25374,
-    "gzipped": 5671,
+    "bundled": 33588,
+    "minified": 24988,
+    "gzipped": 5509,
     "treeshaked": {
       "rollup": {
-        "code": 19686,
-        "import_statements": 683
+        "code": 19325,
+        "import_statements": 585
       },
       "webpack": {
-        "code": 21849
+        "code": 21424
       }
     }
   },
   "index.cjs.js": {
-    "bundled": 37238,
-    "minified": 27956,
-    "gzipped": 5905
+    "bundled": 36245,
+    "minified": 27444,
+    "gzipped": 5724
   }
 }

packages/accordions/package.json

@@ -23,10 +23,8 @@
   "dependencies": {
     "@zendeskgarden/container-accordion": "^2.0.0",
     "@zendeskgarden/container-utilities": "^1.0.0",
-    "lodash.debounce": "^4.0.8",
     "polished": "^4.0.0",
-    "prop-types": "^15.5.7",
-    "react-merge-refs": "^1.1.0"
+    "prop-types": "^15.5.7"
   },
   "peerDependencies": {
     "@zendeskgarden/react-theming": "^8.67.0",
@@ -35,7 +33,6 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@types/lodash.debounce": "4.0.7",
     "@zendeskgarden/react-theming": "^8.69.6",
     "@zendeskgarden/svg-icons": "6.33.0"
   },

packages/accordions/src/elements/accordion/components/Panel.tsx

@@ -5,59 +5,23 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { useEffect, useRef, useContext, forwardRef, HTMLAttributes } from 'react';
-import debounce from 'lodash.debounce';
-import mergeRefs from 'react-merge-refs';
-import { ThemeContext } from 'styled-components';
-import { useDocument } from '@zendeskgarden/react-theming';
+import React, { forwardRef, HTMLAttributes } from 'react';
 
 import { useAccordionContext, useSectionContext, IAccordionContext } from '../../../utils';
 import { StyledPanel, StyledInnerPanel } from '../../../styled';
 
 type PanelProps = IAccordionContext | { isExpanded?: boolean };
 
 const PanelComponent = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>((props, ref) => {
-  const { isCompact, isBare, isAnimated, getPanelProps, expandedSections } = useAccordionContext();
-  const panelRef = useRef<HTMLElement>();
+  const { isCompact, isBare, isAnimated, expandedSections, getPanelProps } = useAccordionContext();
   const index = useSectionContext();
   const isExpanded = expandedSections.includes(index);
 
-  const theme = useContext(ThemeContext);
-  const environment = useDocument(theme);
-
-  useEffect(() => {
-    if (!isAnimated) {
-      return undefined;
-    }
-
-    if (environment) {
-      const updateMaxHeight = debounce(() => {
-        if (panelRef.current) {
-          const child = panelRef.current.children[0] as any;
-
-          child.style.maxHeight = `${child.scrollHeight}px`;
-        }
-      }, 100);
-
-      const win = environment.defaultView! || window;
-
-      win.addEventListener('resize', updateMaxHeight);
-      updateMaxHeight();
-
-      return () => {
-        updateMaxHeight.cancel();
-        win.removeEventListener('resize', updateMaxHeight);
-      };
-    }
-
-    return undefined;
-  }, [isAnimated, panelRef, environment, props.children]);
-
   return (
     <StyledPanel
       {...getPanelProps<PanelProps>({
         role: null,
-        ref: mergeRefs([panelRef, ref]),
+        ref,
         index,
         isBare,
         isCompact,
@@ -66,9 +30,7 @@ const PanelComponent = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>((pro
         ...props
       })}
     >
-      <StyledInnerPanel isExpanded={isExpanded} isAnimated={isAnimated}>
-        {props.children}
-      </StyledInnerPanel>
+      <StyledInnerPanel>{props.children}</StyledInnerPanel>
     </StyledPanel>
   );
 });

packages/accordions/src/styled/accordion/StyledInnerPanel.spec.tsx

@@ -6,37 +6,21 @@
  */
 
 import styled from 'styled-components';
-import {
-  retrieveComponentStyles,
-  DEFAULT_THEME,
-  getLineHeight
-} from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.step_inner_panel';
 
-interface IStyledInnerPanel {
-  isExpanded?: boolean;
-  isAnimated?: boolean;
-}
-
-/**
- * 1. Override the inline max-height style used for animation.
- */
-export const StyledInnerPanel = styled.div.attrs<IStyledInnerPanel>({
+export const StyledInnerPanel = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
-})<IStyledInnerPanel>`
-  transition: ${props => props.isAnimated && 'max-height 0.25s ease-in-out'};
-  /* stylelint-disable-next-line declaration-no-important */
-  max-height: ${props => !props.isExpanded && '0 !important'}; /* [1] */
+})`
   overflow: hidden;
-  line-height: ${props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md)};
-  font-size: ${props => props.theme.fontSizes.md};
+  line-height: inherit;
+  font-size: inherit;
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
 
 StyledInnerPanel.defaultProps = {
-  isAnimated: true,
   theme: DEFAULT_THEME
 };

packages/accordions/src/styled/accordion/StyledInnerPanel.ts

@@ -14,12 +14,20 @@ describe('StyledPanel', () => {
   it('renders default styling correctly', () => {
     const { container } = render(<StyledPanel />);
 
+    expect(container.firstChild).toHaveStyleRule('grid-template-rows', '0fr');
     expect(container.firstChild).toHaveStyleRule('padding', '8px 20px 32px');
     expect(container.firstChild).toHaveStyleRule(
-      'border-bottom',
-      `${DEFAULT_THEME.borders.sm} ${getColor('neutralHue', 300, DEFAULT_THEME)}`
+      'border-bottom-width',
+      `${DEFAULT_THEME.borderWidths.sm}`
+    );
+    expect(container.firstChild).toHaveStyleRule(
+      'border-bottom-color',
+      `${getColor('neutralHue', 300, DEFAULT_THEME)}`
+    );
+    expect(container.firstChild).toHaveStyleRule(
+      'transition',
+      'padding 0.25s ease-in-out,grid-template-rows 0.25s ease-in-out'
     );
-    expect(container.firstChild).toHaveStyleRule('transition', 'padding 0.25s ease-in-out');
   });
 
   it('renders isCompact styling correctly', () => {
@@ -32,21 +40,24 @@ describe('StyledPanel', () => {
     const { container } = render(<StyledPanel isExpanded />);
 
     expect(container.firstChild).toHaveStyleRule('padding', '8px 20px 32px');
+    expect(container.firstChild).toHaveStyleRule('grid-template-rows', '1fr');
   });
 
   it('renders isCompact & isExpanded styling correctly', () => {
     const { container } = render(<StyledPanel isCompact isExpanded />);
 
     expect(container.firstChild).toHaveStyleRule('padding', '8px 12px 16px');
+    expect(container.firstChild).toHaveStyleRule('grid-template-rows', '1fr');
   });
 
   it('renders isBare styling correctly', () => {
     const { container } = render(<StyledPanel isBare />);
 
     expect(container.firstChild).toHaveStyleRule(
-      'border-bottom',
-      `${DEFAULT_THEME.borders.sm} transparent`
+      'border-bottom-width',
+      `${DEFAULT_THEME.borderWidths.sm}`
     );
+    expect(container.firstChild).toHaveStyleRule('border-bottom-color', 'transparent');
   });
 
   it('renders transition styling correctly', () => {

packages/accordions/src/styled/accordion/StyledPanel.spec.tsx

@@ -6,7 +6,12 @@
  */
 
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
-import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import {
+  getColor,
+  getLineHeight,
+  retrieveComponentStyles,
+  DEFAULT_THEME
+} from '@zendeskgarden/react-theming';
 
 interface IStyledPanel {
   isBare?: boolean;
@@ -17,38 +22,53 @@ interface IStyledPanel {
 
 const COMPONENT_ID = 'accordions.panel';
 
-const paddingStyles = (props: IStyledPanel & ThemeProps<DefaultTheme>) => {
-  const { base } = props.theme.space;
+const colorStyles = (props: IStyledPanel & ThemeProps<DefaultTheme>) => {
+  const { theme, isBare } = props;
+
+  return css`
+    border-bottom-color: ${isBare ? 'transparent' : getColor('neutralHue', 300, theme)};
+  `;
+};
+
+const sizeStyles = (props: IStyledPanel & ThemeProps<DefaultTheme>) => {
+  const { theme, isCompact, isExpanded } = props;
+  const { base } = theme.space;
   let paddingTop = base * 2;
   let paddingHorizontal = base * 5;
   let paddingBottom = base * 8;
 
-  if (props.isCompact) {
+  if (isCompact) {
     paddingTop = base * 2;
     paddingHorizontal = base * 3;
     paddingBottom = base * 4;
   }
 
-  if (props.isExpanded === false) {
+  if (isExpanded === false) {
     paddingTop = 0;
     paddingBottom = 0;
   }
 
   return css`
-    transition: ${props.isAnimated && 'padding 0.25s ease-in-out'};
+    grid-template-rows: ${isExpanded ? 1 : 0}fr;
+    border-bottom-width: ${theme.borderWidths.sm};
+    border-bottom-style: solid;
     padding: ${paddingTop}px ${paddingHorizontal}px ${paddingBottom}px;
+    line-height: ${getLineHeight(base * 5, theme.fontSizes.md)};
+    font-size: ${theme.fontSizes.md};
   `;
 };
 
 export const StyledPanel = styled.section.attrs<IStyledPanel>({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })<IStyledPanel>`
-  ${paddingStyles};
-  border-bottom: ${props =>
-    `${props.theme.borders.sm} ${
-      props.isBare ? 'transparent' : getColor('neutralHue', 300, props.theme)
-    }`};
+  display: grid;
+  transition: ${props =>
+    props.isAnimated && 'padding 0.25s ease-in-out, grid-template-rows 0.25s ease-in-out'};
+  overflow: hidden;
+
+  ${sizeStyles}
+  ${colorStyles}
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;

packages/accordions/src/styled/accordion/StyledPanel.ts

@@ -21,18 +21,6 @@
   resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.18.0.tgz#4f3cebe093dd436eeaff633809bf0f68f4f9d2ee"
   integrity sha512-KdVMdpTgDyK8FzdKO9SCpiibuy/kbv3pwgfXshTI6tEcQT1OOwj7BAksnzGC0rPz0UholwC+AgkqEl3EJX3M1A==
 
-"@types/lodash.debounce@4.0.7":
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.7.tgz#0285879defb7cdb156ae633cecd62d5680eded9f"
-  integrity sha512-X1T4wMZ+gT000M2/91SYj0d/7JfeNZ9PeeOldSNoE/lunLeQXKvkmIumI29IaKMotU/ln/McOIvgzZcQ/3TrSA==
-  dependencies:
-    "@types/lodash" "*"
-
-"@types/lodash@*":
-  version "4.14.176"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.176.tgz#641150fc1cda36fbfa329de603bbb175d7ee20c0"
-  integrity sha512-xZmuPTa3rlZoIbtDUyJKZQimJV3bxCmzMIO2c9Pz9afyDro6kr7R79GwcB6mRhuoPmV2p1Vb66WOJH7F886WKQ==
-
 "@zendeskgarden/container-accordion@^2.0.0":
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/@zendeskgarden/container-accordion/-/container-accordion-2.0.8.tgz#eb7192dfcc2a5473bc63a3751e0d529285535d3f"
@@ -78,11 +66,6 @@
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
-lodash.debounce@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
-  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
-
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -121,11 +104,6 @@ react-is@^16.13.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-merge-refs@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz#73d88b892c6c68cbb7a66e0800faa374f4c38b06"
-  integrity sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==
-
 react-uid@^2.2.0:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/react-uid/-/react-uid-2.3.3.tgz#6a485ccc868555997f3506c6db97a3e735d97adf"