[WALL-2135][BpkAccordion] Fix accordion transition animation (#3553)

* move border form content to item * move padding inside animated container * revert animation slowdown * update snapshots --------- Co-authored-by: Tom Brown <[email protected]> Co-authored-by: Arnau González <[email protected]>
Skyscanner · Jul 24, 2024 · 42a3449 · 42a3449
1 parent a9d4498
commit 42a3449
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 39 deletions.
diff --git a/packages/bpk-component-accordion/src/BpkAccordionItem.js b/packages/bpk-component-accordion/src/BpkAccordionItem.js
@@ -48,6 +48,7 @@ type Props = {
 
 const BpkAccordionItem = (props: Props) => {
   const { divider, onDark } = useContext(BpkAccordionContext);
+  const itemClassNames = [getClassName('bpk-accordion__item')];
   const iconClassNames = [getClassName('bpk-accordion__item-expand-icon')];
   const titleTextClassNames = [getClassName('bpk-accordion__title-text')];
   const titleClassNames = [getClassName('bpk-accordion__title')];
@@ -70,6 +71,10 @@ const BpkAccordionItem = (props: Props) => {
   // $FlowFixMe[prop-missing] - see above
   delete rest.initiallyExpanded;
 
+  if (onDark) {
+    itemClassNames.push(getClassName('bpk-accordion__item--on-dark'));
+  }
+
   if (expanded && !onDark) {
     iconClassNames.push(
       getClassName('bpk-accordion__item-expand-icon--flipped'),
@@ -125,7 +130,7 @@ const BpkAccordionItem = (props: Props) => {
 
   return (
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-    <div id={id} {...rest}>
+    <div id={id} className={getClassName('bpk-accordion__item')} {...rest}>
       <div className={titleClassNames.join(' ')}>
         <button
           type="button"
@@ -136,23 +141,26 @@ const BpkAccordionItem = (props: Props) => {
         >
           <div className={`${getClassName('bpk-accordion__flex-container')}`}>
             <div className={titleTextClassNames.join(' ')}>
-              <BpkText
-                textStyle={textStyle}
-                tagName={tagName}
-              >
+              <BpkText textStyle={textStyle} tagName={tagName}>
                 {clonedIcon}
                 {title}
               </BpkText>
             </div>
-            <span className={`${getClassName('bpk-accordion__icon-wrapper')} ${iconClassNames.join(' ')}`}>
-              <ExpandIcon/>
+            <span
+              className={`${getClassName('bpk-accordion__icon-wrapper')} ${iconClassNames.join(' ')}`}
+            >
+              <ExpandIcon />
             </span>
           </div>
         </button>
       </div>
       <div id={contentId} className={contentClassNames.join(' ')}>
         <AnimateHeight duration={200} height={expanded ? 'auto' : 0}>
-          {children}
+          <div
+            className={getClassName('bpk-accordion__content-inner-container')}
+          >
+            {children}
+          </div>
         </AnimateHeight>
       </div>
     </div>

diff --git a/packages/bpk-component-accordion/src/BpkAccordionItem.module.scss b/packages/bpk-component-accordion/src/BpkAccordionItem.module.scss
@@ -22,18 +22,18 @@
 @use '../../unstable__bpk-mixins/utils';
 
 .bpk-accordion {
-  &__title {
-    height: auto;
-
-    &--collapsed {
-      @include borders.bpk-border-bottom-sm(tokens.$bpk-line-day);
+  &__item {
+    @include borders.bpk-border-bottom-sm(tokens.$bpk-line-day);
 
-      &-on-dark {
-        @include borders.bpk-border-bottom-sm(tokens.$bpk-line-on-dark-day);
-      }
+    &-on-dark {
+      @include borders.bpk-border-bottom-sm(tokens.$bpk-line-on-dark-day);
     }
   }
 
+  &__title {
+    height: auto;
+  }
+
   &__toggle-button {
     width: 100%;
     padding: 0;
@@ -86,17 +86,9 @@
 
   &__content-container {
     margin: 0;
+  }
 
-    &--expanded {
-      padding-bottom: tokens.bpk-spacing-base();
-
-      @include borders.bpk-border-bottom-sm(tokens.$bpk-line-day);
-
-      &-on-dark {
-        padding-bottom: tokens.bpk-spacing-base();
-
-        @include borders.bpk-border-bottom-sm(tokens.$bpk-line-on-dark-day);
-      }
-    }
+  &__content-inner-container {
+    padding-bottom: tokens.bpk-spacing-base();
   }
 }
diff --git a/packages/bpk-component-accordion/src/__snapshots__/BpkAccordionItem-test.js.snap b/packages/bpk-component-accordion/src/__snapshots__/BpkAccordionItem-test.js.snap
@@ -3,6 +3,7 @@
 exports[`BpkAccordionItem should not render an "initiallyExpanded" attribute on the html node 1`] = `
 <DocumentFragment>
   <div
+    class="bpk-accordion__item"
     id="my-accordion"
   >
     <div
@@ -58,7 +59,11 @@ exports[`BpkAccordionItem should not render an "initiallyExpanded" attribute on
         <div
           style="display: none;"
         >
-          My accordion content
+          <div
+            class="bpk-accordion__content-inner-container"
+          >
+            My accordion content
+          </div>
         </div>
       </div>
     </div>
@@ -69,6 +74,7 @@ exports[`BpkAccordionItem should not render an "initiallyExpanded" attribute on
 exports[`BpkAccordionItem should render correctly 1`] = `
 <DocumentFragment>
   <div
+    class="bpk-accordion__item"
     id="my-accordion"
   >
     <div
@@ -124,7 +130,11 @@ exports[`BpkAccordionItem should render correctly 1`] = `
         <div
           style="display: none;"
         >
-          My accordion content
+          <div
+            class="bpk-accordion__content-inner-container"
+          >
+            My accordion content
+          </div>
         </div>
       </div>
     </div>
@@ -191,7 +201,11 @@ exports[`BpkAccordionItem should render correctly with "className" prop 1`] = `
         <div
           style="display: none;"
         >
-          My accordion content
+          <div
+            class="bpk-accordion__content-inner-container"
+          >
+            My accordion content
+          </div>
         </div>
       </div>
     </div>
@@ -202,6 +216,7 @@ exports[`BpkAccordionItem should render correctly with "className" prop 1`] = `
 exports[`BpkAccordionItem should render correctly with "expanded" prop 1`] = `
 <DocumentFragment>
   <div
+    class="bpk-accordion__item"
     id="my-accordion"
   >
     <div
@@ -255,7 +270,11 @@ exports[`BpkAccordionItem should render correctly with "expanded" prop 1`] = `
         style="height: auto; overflow: visible; transition: height 200ms ease;"
       >
         <div>
-          My accordion content
+          <div
+            class="bpk-accordion__content-inner-container"
+          >
+            My accordion content
+          </div>
         </div>
       </div>
     </div>
@@ -266,6 +285,7 @@ exports[`BpkAccordionItem should render correctly with "expanded" prop 1`] = `
 exports[`BpkAccordionItem should render correctly with "tagName" prop set 1`] = `
 <DocumentFragment>
   <div
+    class="bpk-accordion__item"
     id="my-accordion"
   >
     <div
@@ -321,7 +341,11 @@ exports[`BpkAccordionItem should render correctly with "tagName" prop set 1`] =
         <div
           style="display: none;"
         >
-          My accordion content
+          <div
+            class="bpk-accordion__content-inner-container"
+          >
+            My accordion content
+          </div>
         </div>
       </div>
     </div>
@@ -332,6 +356,7 @@ exports[`BpkAccordionItem should render correctly with "tagName" prop set 1`] =
 exports[`BpkAccordionItem should render correctly with "textStyle" prop set 1`] = `
 <DocumentFragment>
   <div
+    class="bpk-accordion__item"
     id="my-accordion"
   >
     <div
@@ -387,7 +412,11 @@ exports[`BpkAccordionItem should render correctly with "textStyle" prop set 1`]
         <div
           style="display: none;"
         >
-          My accordion content
+          <div
+            class="bpk-accordion__content-inner-container"
+          >
+            My accordion content
+          </div>
         </div>
       </div>
     </div>
@@ -398,6 +427,7 @@ exports[`BpkAccordionItem should render correctly with "textStyle" prop set 1`]
 exports[`BpkAccordionItem should render correctly with an icon set 1`] = `
 <DocumentFragment>
   <div
+    class="bpk-accordion__item"
     id="my-accordion"
   >
     <div
@@ -465,7 +495,11 @@ exports[`BpkAccordionItem should render correctly with an icon set 1`] = `
         <div
           style="display: none;"
         >
-          My accordion content
+          <div
+            class="bpk-accordion__content-inner-container"
+          >
+            My accordion content
+          </div>
         </div>
       </div>
     </div>
@@ -476,6 +510,7 @@ exports[`BpkAccordionItem should render correctly with an icon set 1`] = `
 exports[`BpkAccordionItem should render correctly with no divider 1`] = `
 <DocumentFragment>
   <div
+    class="bpk-accordion__item"
     id="my-accordion"
   >
     <div
@@ -531,7 +566,11 @@ exports[`BpkAccordionItem should render correctly with no divider 1`] = `
         <div
           style="display: none;"
         >
-          My accordion content
+          <div
+            class="bpk-accordion__content-inner-container"
+          >
+            My accordion content
+          </div>
         </div>
       </div>
     </div>
@@ -543,6 +582,7 @@ exports[`BpkAccordionItem should render correctly with no divider 1`] = `
 exports[`BpkAccordionItem should render correctly with onDark set 1`] = `
 <DocumentFragment>
   <div
+    class="bpk-accordion__item"
     id="my-accordion"
   >
     <div
@@ -598,7 +638,11 @@ exports[`BpkAccordionItem should render correctly with onDark set 1`] = `
         <div
           style="display: none;"
         >
-          My accordion content
+          <div
+            class="bpk-accordion__content-inner-container"
+          >
+            My accordion content
+          </div>
         </div>
       </div>
     </div>

diff --git a/packages/bpk-component-accordion/src/__snapshots__/withAccordionItemState-test.js.snap b/packages/bpk-component-accordion/src/__snapshots__/withAccordionItemState-test.js.snap
@@ -3,6 +3,7 @@
 exports[`withAccordionItemState(BpkAccordionItem) should render correctly 1`] = `
 <DocumentFragment>
   <div
+    class="bpk-accordion__item"
     id="my-accordion"
   >
     <div
@@ -58,7 +59,11 @@ exports[`withAccordionItemState(BpkAccordionItem) should render correctly 1`] =
         <div
           style="display: none;"
         >
-          My accordion content
+          <div
+            class="bpk-accordion__content-inner-container"
+          >
+            My accordion content
+          </div>
         </div>
       </div>
     </div>
@@ -69,6 +74,7 @@ exports[`withAccordionItemState(BpkAccordionItem) should render correctly 1`] =
 exports[`withAccordionItemState(BpkAccordionItem) should render correctly with "expanded" prop 1`] = `
 <DocumentFragment>
   <div
+    class="bpk-accordion__item"
     id="my-accordion"
   >
     <div
@@ -124,7 +130,11 @@ exports[`withAccordionItemState(BpkAccordionItem) should render correctly with "
         <div
           style="display: none;"
         >
-          My accordion content
+          <div
+            class="bpk-accordion__content-inner-container"
+          >
+            My accordion content
+          </div>
         </div>
       </div>
     </div>
@@ -135,6 +145,7 @@ exports[`withAccordionItemState(BpkAccordionItem) should render correctly with "
 exports[`withAccordionItemState(BpkAccordionItem) should render correctly with "initiallyExpanded" prop 1`] = `
 <DocumentFragment>
   <div
+    class="bpk-accordion__item"
     id="my-accordion"
   >
     <div
@@ -188,7 +199,11 @@ exports[`withAccordionItemState(BpkAccordionItem) should render correctly with "
         style="height: auto; overflow: visible; transition: height 200ms ease;"
       >
         <div>
-          My accordion content
+          <div
+            class="bpk-accordion__content-inner-container"
+          >
+            My accordion content
+          </div>
         </div>
       </div>
     </div>