ToggleGroupControl: improve animation

packages/components/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   `ToggleGroupControl`: indicator doesn't jump around when the layout around it changes ([#65175](https://github.com/WordPress/gutenberg/pull/65175)).
+
+### Enhancements
+
+-   `ToggleGroupControl`: indicator animation is now more lightweight and performant ([#65175](https://github.com/WordPress/gutenberg/pull/65175)).
+
 ## 28.8.0 (2024-09-19)
 
 ### Bug Fixes

packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -60,6 +60,29 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   outline-offset: -2px;
 }
 
+@media not ( prefers-reduced-motion ) {
+  .emotion-8.is-animation-enabled::before {
+    transition-property: left,width;
+    transition-duration: 0.2s;
+    transition-timing-function: ease-out;
+  }
+}
+
+.emotion-8::before {
+  content: '';
+  position: absolute;
+  pointer-events: none;
+  background: #1e1e1e;
+  border-radius: 1px;
+  outline: 2px solid transparent;
+  outline-offset: -3px;
+  left: calc(
+  			var( --indicator-left ) * 1px - 1px
+  		);
+  width: calc( var( --indicator-width ) * 1px );
+  height: calc( var( --indicator-height ) * 1px );
+}
+
 .emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -150,17 +173,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   line-height: 1;
 }
 
-.emotion-15 {
-  background: #1e1e1e;
-  border-radius: 1px;
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  outline: 2px solid transparent;
-  outline-offset: -3px;
-}
-
-.emotion-18 {
+.emotion-17 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -204,22 +217,22 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 }
 
 @media not ( prefers-reduced-motion ) {
-  .emotion-18 {
+  .emotion-17 {
     -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
     transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   }
 }
 
-.emotion-18::-moz-focus-inner {
+.emotion-17::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-18[disabled] {
+.emotion-17[disabled] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-18:active {
+.emotion-17:active {
   background: #fff;
 }
 
@@ -246,6 +259,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
         data-wp-component="ToggleGroupControl"
         id="toggle-group-control-as-radio-group-11"
         role="radiogroup"
+        style="--indicator-left: 0; --indicator-width: 0; --indicator-height: 0;"
       >
         <div
           class="emotion-10 emotion-11"
@@ -280,20 +294,14 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
               </svg>
             </div>
           </button>
-          <div>
-            <div
-              class="emotion-15"
-              role="presentation"
-            />
-          </div>
         </div>
         <div
           class="emotion-10 emotion-11"
         >
           <button
             aria-checked="false"
             aria-label="Lowercase"
-            class="emotion-18 components-toggle-group-control-option-base"
+            class="emotion-17 components-toggle-group-control-option-base"
             data-value="lowercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -392,6 +400,29 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   outline-offset: -2px;
 }
 
+@media not ( prefers-reduced-motion ) {
+  .emotion-8.is-animation-enabled::before {
+    transition-property: left,width;
+    transition-duration: 0.2s;
+    transition-timing-function: ease-out;
+  }
+}
+
+.emotion-8::before {
+  content: '';
+  position: absolute;
+  pointer-events: none;
+  background: #1e1e1e;
+  border-radius: 1px;
+  outline: 2px solid transparent;
+  outline-offset: -3px;
+  left: calc(
+  			var( --indicator-left ) * 1px - 1px
+  		);
+  width: calc( var( --indicator-width ) * 1px );
+  height: calc( var( --indicator-height ) * 1px );
+}
+
 .emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -495,6 +526,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
         data-wp-component="ToggleGroupControl"
         id="toggle-group-control-as-radio-group-10"
         role="radiogroup"
+        style="--indicator-left: 0; --indicator-width: 0; --indicator-height: 0;"
       >
         <div
           class="emotion-10 emotion-11"
@@ -612,6 +644,29 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   outline-offset: -2px;
 }
 
+@media not ( prefers-reduced-motion ) {
+  .emotion-8.is-animation-enabled::before {
+    transition-property: left,width;
+    transition-duration: 0.2s;
+    transition-timing-function: ease-out;
+  }
+}
+
+.emotion-8::before {
+  content: '';
+  position: absolute;
+  pointer-events: none;
+  background: #1e1e1e;
+  border-radius: 1px;
+  outline: 2px solid transparent;
+  outline-offset: -3px;
+  left: calc(
+  			var( --indicator-left ) * 1px - 1px
+  		);
+  width: calc( var( --indicator-width ) * 1px );
+  height: calc( var( --indicator-height ) * 1px );
+}
+
 .emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -702,17 +757,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   line-height: 1;
 }
 
-.emotion-15 {
-  background: #1e1e1e;
-  border-radius: 1px;
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  outline: 2px solid transparent;
-  outline-offset: -3px;
-}
-
-.emotion-18 {
+.emotion-17 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -756,22 +801,22 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 }
 
 @media not ( prefers-reduced-motion ) {
-  .emotion-18 {
+  .emotion-17 {
     -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
     transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   }
 }
 
-.emotion-18::-moz-focus-inner {
+.emotion-17::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-18[disabled] {
+.emotion-17[disabled] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-18:active {
+.emotion-17:active {
   background: #fff;
 }
 
@@ -798,6 +843,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
         data-wp-component="ToggleGroupControl"
         id="toggle-group-control-as-radio-group-1"
         role="radiogroup"
+        style="--indicator-left: 0; --indicator-width: 0; --indicator-height: 0;"
       >
         <div
           class="emotion-10 emotion-11"
@@ -832,20 +878,14 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
               </svg>
             </div>
           </button>
-          <div>
-            <div
-              class="emotion-15"
-              role="presentation"
-            />
-          </div>
         </div>
         <div
           class="emotion-10 emotion-11"
         >
           <button
             aria-checked="false"
             aria-label="Lowercase"
-            class="emotion-18 components-toggle-group-control-option-base"
+            class="emotion-17 components-toggle-group-control-option-base"
             data-value="lowercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
@@ -938,6 +978,29 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   outline-offset: -2px;
 }
 
+@media not ( prefers-reduced-motion ) {
+  .emotion-8.is-animation-enabled::before {
+    transition-property: left,width;
+    transition-duration: 0.2s;
+    transition-timing-function: ease-out;
+  }
+}
+
+.emotion-8::before {
+  content: '';
+  position: absolute;
+  pointer-events: none;
+  background: #1e1e1e;
+  border-radius: 1px;
+  outline: 2px solid transparent;
+  outline-offset: -3px;
+  left: calc(
+  			var( --indicator-left ) * 1px - 1px
+  		);
+  width: calc( var( --indicator-width ) * 1px );
+  height: calc( var( --indicator-height ) * 1px );
+}
+
 .emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1041,6 +1104,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
         data-wp-component="ToggleGroupControl"
         id="toggle-group-control-as-radio-group-0"
         role="radiogroup"
+        style="--indicator-left: 0; --indicator-width: 0; --indicator-height: 0;"
       >
         <div
           class="emotion-10 emotion-11"

packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx

@@ -3,13 +3,12 @@
  */
 import type { ForwardedRef } from 'react';
 import * as Ariakit from '@ariakit/react';
-import { motion } from 'framer-motion';
 
 /**
  * WordPress dependencies
  */
-import { useReducedMotion, useInstanceId } from '@wordpress/compose';
-import { useMemo } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { useLayoutEffect, useMemo, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -27,12 +26,6 @@ import Tooltip from '../../tooltip';
 
 const { ButtonContentView, LabelView } = styles;
 
-const REDUCED_MOTION_TRANSITION_CONFIG = {
-	duration: 0,
-};
-
-const LAYOUT_ID = 'toggle-group-backdrop-shared-layout-id';
-
 const WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {
 	if ( showTooltip && text ) {
 		return (
@@ -58,7 +51,6 @@ function ToggleGroupControlOptionBase(
 	>,
 	forwardedRef: ForwardedRef< any >
 ) {
-	const shouldReduceMotion = useReducedMotion();
 	const toggleGroupControlContext = useToggleGroupControlContext();
 
 	const id = useInstanceId(
@@ -107,7 +99,6 @@ function ToggleGroupControlOptionBase(
 			),
 		[ cx, isDeselectable, isIcon, isPressed, size, className ]
 	);
-	const backdropClasses = useMemo( () => cx( styles.backdropView ), [ cx ] );
 
 	const buttonOnClick = () => {
 		if ( isDeselectable && isPressed ) {
@@ -124,8 +115,15 @@ function ToggleGroupControlOptionBase(
 		ref: forwardedRef,
 	};
 
+	const labelRef = useRef< HTMLDivElement | null >( null );
+	useLayoutEffect( () => {
+		if ( isPressed && labelRef.current ) {
+			toggleGroupControlContext.setSelectedElement( labelRef.current );
+		}
+	}, [ isPressed, toggleGroupControlContext ] );
+
 	return (
-		<LabelView className={ labelViewClasses }>
+		<LabelView ref={ labelRef } className={ labelViewClasses }>
 			<WithToolTip
 				showTooltip={ showTooltip }
 				text={ otherButtonProps[ 'aria-label' ] }
@@ -163,21 +161,6 @@ function ToggleGroupControlOptionBase(
 					</Ariakit.Radio>
 				) }
 			</WithToolTip>
-			{ /* Animated backdrop using framer motion's shared layout animation */ }
-			{ isPressed ? (
-				<motion.div layout layoutRoot>
-					<motion.div
-						className={ backdropClasses }
-						transition={
-							shouldReduceMotion
-								? REDUCED_MOTION_TRANSITION_CONFIG
-								: undefined
-						}
-						role="presentation"
-						layoutId={ LAYOUT_ID }
-					/>
-				</motion.div>
-			) : null }
 		</LabelView>
 	);
 }