Components: Fix unwanted ToggleGroupControl backdrop vertical animati…

…on (#59642) * Components: Fix unwanted ToggleGroupControl backdrop vertical animation * CHANGELOG * Update test snapshots Unlinked contributors: acicovic. Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: andrewhayward <andrewhayward@git.wordpress.org>
WordPress · Mar 6, 2024 · 0f37efd · 0f37efd
1 parent 65666d3
commit 0f37efd
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 20 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -10,6 +10,7 @@
 -   `HStack`, `VStack`: Stop passing invalid props to underlying element ([#59416](https://github.com/WordPress/gutenberg/pull/59416)).
 -   `Button`: Fix focus outline in disabled primary variant ([#59391](https://github.com/WordPress/gutenberg/pull/59391)).
 -   `Button`: Place `children` before the icon when `iconPosition` is `right`  ([#59489](https://github.com/WordPress/gutenberg/pull/59489)).
+-   `ToggleGroupControl`: Fix unwanted backdrop vertical animation ([#59642](https://github.com/WordPress/gutenberg/pull/59642)).
 
 ### Internal
 

diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
@@ -276,11 +276,13 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
               </svg>
             </div>
           </button>
-          <div
-            class="emotion-15"
-            role="presentation"
-            style="opacity: 1;"
-          />
+          <div>
+            <div
+              class="emotion-15"
+              role="presentation"
+              style="opacity: 1;"
+            />
+          </div>
         </div>
         <div
           class="emotion-10 emotion-11"
@@ -823,11 +825,13 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
               </svg>
             </div>
           </button>
-          <div
-            class="emotion-15"
-            role="presentation"
-            style="opacity: 1;"
-          />
+          <div>
+            <div
+              class="emotion-15"
+              role="presentation"
+              style="opacity: 1;"
+            />
+          </div>
         </div>
         <div
           class="emotion-10 emotion-11"

diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
@@ -160,16 +160,18 @@ function ToggleGroupControlOptionBase(
 			</WithToolTip>
 			{ /* Animated backdrop using framer motion's shared layout animation */ }
 			{ isPressed ? (
-				<motion.div
-					className={ backdropClasses }
-					transition={
-						shouldReduceMotion
-							? REDUCED_MOTION_TRANSITION_CONFIG
-							: undefined
-					}
-					role="presentation"
-					layoutId={ LAYOUT_ID }
-				/>
+				<motion.div layout layoutRoot>
+					<motion.div
+						className={ backdropClasses }
+						transition={
+							shouldReduceMotion
+								? REDUCED_MOTION_TRANSITION_CONFIG
+								: undefined
+						}
+						role="presentation"
+						layoutId={ LAYOUT_ID }
+					/>
+				</motion.div>
 			) : null }
 		</LabelView>
 	);