fix(accordions): hide collapsed panel content (#1662)

Author: jzempel

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

@@ -19,6 +19,7 @@ const PanelComponent = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(
 
     return (
       <StyledPanel
+        inert={isExpanded ? undefined : ''}
         isAnimated={isAnimated}
         isBare={isBare}
         isCompact={isCompact}
@@ -30,7 +31,7 @@ const PanelComponent = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(
           ...props
         }) as HTMLAttributes<HTMLElement>)}
       >
-        <StyledInnerPanel>{children}</StyledInnerPanel>
+        <StyledInnerPanel isAnimated={isAnimated}>{children}</StyledInnerPanel>
       </StyledPanel>
     );
   }

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

@@ -7,17 +7,31 @@
 
 import styled from 'styled-components';
 import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledPanel } from './StyledPanel';
 
 const COMPONENT_ID = 'accordions.step_inner_panel';
 
+interface IStyledInnerPanel {
+  isAnimated?: boolean;
+}
+
 export const StyledInnerPanel = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
-})`
+})<IStyledInnerPanel>`
   overflow: hidden;
   line-height: inherit;
   font-size: inherit;
 
+  ${StyledPanel}[aria-hidden='true'] > & {
+    transition: ${props => props.isAnimated && 'visibility 0s 0.25s'};
+    visibility: hidden;
+  }
+
+  ${StyledPanel}[aria-hidden='false'] > & {
+    visibility: visible;
+  }
+
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
 

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

@@ -16,10 +16,7 @@ describe('StyledPanel', () => {
 
     expect(container.firstChild).toHaveStyleRule('grid-template-rows', '0fr');
     expect(container.firstChild).toHaveStyleRule('padding', '8px 20px 32px');
-    expect(container.firstChild).toHaveStyleRule(
-      'border-bottom-width',
-      `${DEFAULT_THEME.borderWidths.sm}`
-    );
+    expect(container.firstChild).toHaveStyleRule('border-bottom', `${DEFAULT_THEME.borders.sm}`);
     expect(container.firstChild).toHaveStyleRule(
       'border-bottom-color',
       `${getColor('neutralHue', 300, DEFAULT_THEME)}`
@@ -53,10 +50,7 @@ describe('StyledPanel', () => {
   it('renders isBare styling correctly', () => {
     const { container } = render(<StyledPanel isBare />);
 
-    expect(container.firstChild).toHaveStyleRule(
-      'border-bottom-width',
-      `${DEFAULT_THEME.borderWidths.sm}`
-    );
+    expect(container.firstChild).toHaveStyleRule('border-bottom', `${DEFAULT_THEME.borders.sm}`);
     expect(container.firstChild).toHaveStyleRule('border-bottom-color', 'transparent');
   });
 

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

@@ -14,6 +14,7 @@ import {
 } from '@zendeskgarden/react-theming';
 
 interface IStyledPanel {
+  inert?: string;
   isBare?: boolean;
   isCompact?: boolean;
   isExpanded?: boolean;
@@ -50,8 +51,7 @@ const sizeStyles = (props: IStyledPanel & ThemeProps<DefaultTheme>) => {
 
   return css`
     grid-template-rows: ${isExpanded ? 1 : 0}fr;
-    border-bottom-width: ${theme.borderWidths.sm};
-    border-bottom-style: solid;
+    border-bottom: ${theme.borders.sm};
     padding: ${paddingTop}px ${paddingHorizontal}px ${paddingBottom}px;
     line-height: ${getLineHeight(base * 5, theme.fontSizes.md)};
     font-size: ${theme.fontSizes.md};