fix: accordion: fixes scroll bar animation flicker (#680)

src/components/Accordion/Accordion.test.tsx

@@ -4,7 +4,7 @@ import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { Accordion, AccordionProps, AccordionShape, AccordionSize } from './';
 import { IconName } from '../Icon';
-import { render } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -73,6 +73,39 @@ describe('Accordion', () => {
     expect(container).toMatchSnapshot();
   });
 
+  test('Accordion toggle', async () => {
+    const { container } = render(
+      <Accordion {...accordionProps} size={AccordionSize.Large} />
+    );
+    const summary = container.querySelector('.accordion-summary');
+    fireEvent.click(summary);
+    await waitFor(() =>
+      expect(
+        container.getElementsByClassName('accordion-summary-expanded')
+      ).toHaveLength(1)
+    );
+    expect(container.querySelector('.show')).toBeTruthy();
+    fireEvent.click(summary);
+    await waitFor(() =>
+      expect(
+        container.getElementsByClassName('accordion-summary-expanded')
+      ).toHaveLength(0)
+    );
+    expect(container.querySelector('.show')).toBeFalsy();
+  });
+
+  test('Accordion is not bordered', () => {
+    const { container } = render(
+      <Accordion
+        {...accordionProps}
+        size={AccordionSize.Large}
+        bordered={false}
+      />
+    );
+    expect(container.querySelector('.accordion-border')).toBeFalsy();
+    expect(container).toMatchSnapshot();
+  });
+
   test('Accordion is large', () => {
     const { container } = render(
       <Accordion {...accordionProps} size={AccordionSize.Large} />

src/components/Accordion/Accordion.tsx

@@ -89,6 +89,7 @@ export const AccordionBody: FC<AccordionBodyProps> = ({
   const accordionBodyStyles: string = mergeClasses(
     styles.accordionBody,
     {
+      [styles.show]: expanded,
       [styles.borderTop]: bordered,
       [styles.medium]: size === AccordionSize.Medium,
       [styles.large]: size === AccordionSize.Large,

src/components/Accordion/__snapshots__/Accordion.test.tsx.snap

@@ -162,6 +162,87 @@ exports[`Accordion Accordion is medium 1`] = `
 </div>
 `;
 
+exports[`Accordion Accordion is not bordered 1`] = `
+<div>
+  <div
+    class="accordion-container pill"
+    data-testid="test-accordion"
+  >
+    <div
+      aria-controls="myAccordionId-content"
+      aria-expanded="false"
+      class="accordion-summary large"
+      id="myAccordionId-header"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="accordion-header-container"
+      >
+        <span
+          aria-hidden="false"
+          class="icon-wrapper"
+          role="presentation"
+        >
+          <svg
+            role="presentation"
+            style="width: 20px; height: 20px;"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
+              style="fill: green;"
+            />
+          </svg>
+        </span>
+        <span
+          class="accordion-header"
+        >
+          Accordion Header
+        </span>
+        <span
+          class="badge"
+        >
+          2
+        </span>
+      </div>
+      <span
+        aria-hidden="false"
+        class="accordion-icon icon-wrapper"
+        role="presentation"
+      >
+        <svg
+          role="presentation"
+          style="width: 20px; height: 20px;"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
+            style="fill: currentColor;"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      aria-labelledby="myAccordionId-header"
+      class="accordion-body-container"
+      id="myAccordionId-content"
+      role="region"
+    >
+      <div
+        class="accordion-body large"
+      >
+        <div
+          style="height: auto;"
+        >
+          Icons are optional for accordions. The body area in the expanded view is like a modal or a slide-in panel. You can put any smaller components inside to build a layout.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Accordion Accordion is pill shaped 1`] = `
 <div>
   <div

src/components/Accordion/accordion.module.scss

@@ -14,15 +14,26 @@
     border-radius: var(--accordion-rectangle-shape-border-radius);
   }
 
+  // Animation ensures the scroll bars don't flicker during transition.
+  // https://css-tricks.com/hide-scrollbars-during-an-animation/
   .accordion-body-container {
     box-sizing: border-box;
     max-height: 0;
-    overflow-y: auto;
-    transition: all $motion-duration-fast $motion-easing-easeout;
+    overflow-y: hidden;
+    transition: max-height $motion-duration-fast $motion-easing-easeout;
 
     &.show {
-      transition: all $motion-duration-fast $motion-easing-easein;
+      @keyframes hideYScroll {
+        from,
+        to {
+          overflow-y: hidden;
+        }
+      }
+
+      animation: hideYScroll $motion-duration-fast backwards;
       max-height: 100vh;
+      overflow-y: auto;
+      transition: max-height $motion-duration-fast $motion-easing-easein;
     }
   }