fix: rework accordion component animation (carbon-design-system#9818)

cesardlinx · Oct 4, 2023 · 33095fd · 33095fd
1 parent b4641ef
commit 33095fd
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 59 deletions.
diff --git a/packages/react/src/components/Accordion/AccordionItem.tsx b/packages/react/src/components/Accordion/AccordionItem.tsx
@@ -8,7 +8,6 @@ import { ChevronRight } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, {
-  AnimationEventHandler,
   AriaAttributes,
   KeyboardEvent,
   MouseEventHandler,
@@ -82,12 +81,6 @@ interface AccordionItemProps {
    * The accordion title.
    */
   title?: ReactNode;
-
-  /**
-   * The callback function to run on the `onAnimationEnd`
-   * event for the list item.
-   */
-  handleAnimationEnd?: AnimationEventHandler<HTMLLIElement>;
 }
 
 interface AccordionToggleProps {
@@ -113,11 +106,9 @@ function AccordionItem({
   renderToggle,
   title = 'title',
   disabled: controlledDisabled,
-  handleAnimationEnd,
   ...rest
 }: PropsWithChildren<AccordionItemProps>) {
   const [isOpen, setIsOpen] = useState(open);
-  const [animation, setAnimation] = useState('');
   const accordionState = useContext(AccordionContext);
 
   const disabledIsControlled = typeof controlledDisabled === 'boolean';
@@ -130,7 +121,6 @@ function AccordionItem({
   const className = cx({
     [`${prefix}--accordion__item`]: true,
     [`${prefix}--accordion__item--active`]: isOpen,
-    [`${prefix}--accordion__item--${animation}`]: animation,
     [`${prefix}--accordion__item--disabled`]: disabled,
     [customClassName]: !!customClassName,
   });
@@ -141,7 +131,6 @@ function AccordionItem({
   // panel
   function onClick(event) {
     const nextValue = !isOpen;
-    setAnimation(isOpen ? '' : 'expanding');
     setIsOpen(nextValue);
     if (onHeadingClick) {
       // TODO: normalize signature, potentially:
@@ -157,14 +146,8 @@ function AccordionItem({
     }
   }
 
-  function onAnimationEnd(event) {
-    if (handleAnimationEnd) {
-      handleAnimationEnd(event);
-    }
-  }
-
   return (
-    <li className={className} {...rest} onAnimationEnd={onAnimationEnd}>
+    <li className={className} {...rest}>
       <Toggle
         disabled={disabled}
         aria-controls={id}
@@ -178,8 +161,10 @@ function AccordionItem({
           {title}
         </Text>
       </Toggle>
-      <div id={id} className={`${prefix}--accordion__content`}>
-        {children}
+      <div className={`${prefix}--accordion__wrapper`}>
+        <div id={id} className={`${prefix}--accordion__content`}>
+          {children}
+        </div>
       </div>
     </li>
   );

diff --git a/packages/styles/scss/components/accordion/_accordion.scss b/packages/styles/scss/components/accordion/_accordion.scss
@@ -59,7 +59,6 @@ $content-padding: 0 0 0 $spacing-05 !default;
     display: list-item;
     overflow: visible;
     border-block-start: 1px solid $border-subtle;
-    transition: all $duration-fast-02 motion(standard, productive);
 
     &:last-child {
       border-block-end: 1px solid $border-subtle;
@@ -154,11 +153,18 @@ $content-padding: 0 0 0 $spacing-05 !default;
     text-align: start;
   }
 
+  .#{$prefix}--accordion__wrapper {
+    display: grid;
+    // Properties for when the accordion closes
+    padding: 0;
+    grid-template-rows: 0fr;
+    opacity: 0;
+    transition: all $duration-moderate-02 ease-in-out;
+  }
+
   .#{$prefix}--accordion__content {
-    display: none;
+    overflow: hidden;
     padding-inline: layout.density('padding-inline');
-    // Transition property for when the accordion closes
-    transition: padding motion(standard, productive) $duration-fast-02;
 
     // Custom breakpoints based on issue #4993
     @include breakpoint-up(480px) {
@@ -199,44 +205,13 @@ $content-padding: 0 0 0 $spacing-05 !default;
     display: block;
   }
 
-  @keyframes collapse-accordion {
-    0% {
-      @include -content-visible;
-    }
-
-    100% {
-      @include -content-hidden;
-    }
-  }
-
-  @keyframes expand-accordion {
-    0% {
-      @include -content-hidden;
-    }
-
-    100% {
-      @include -content-visible;
-    }
-  }
-
-  .#{$prefix}--accordion__item--collapsing .#{$prefix}--accordion__content {
-    animation: $duration-fast-02 motion(standard, productive) collapse-accordion;
-  }
-
-  .#{$prefix}--accordion__item--expanding .#{$prefix}--accordion__content {
-    animation: $duration-fast-02 motion(standard, productive) expand-accordion;
-  }
-
   .#{$prefix}--accordion__item--active {
-    overflow: visible;
-
-    .#{$prefix}--accordion__content {
-      display: block;
+    .#{$prefix}--accordion__wrapper {
+      // Properties for when the accordion opens
+      grid-template-rows: 1fr;
+      opacity: 1;
       padding-block: $spacing-03;
       padding-block-end: $spacing-06;
-      // Transition property for when the accordion opens
-      transition: padding-top motion(entrance, productive) $duration-fast-02,
-        padding-bottom motion(entrance, productive) $duration-fast-02;
     }
 
     .#{$prefix}--accordion__arrow {