Tabs and ToggleGroupControl: round indicator size (WordPress#66426)

Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: stokesman <presstoke@git.wordpress.org> Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org>
karthick-murugan · Nov 13, 2024 · caa1d96 · caa1d96
1 parent 89fe687
commit caa1d96
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 3 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 -   `ColorPalette`: prevent overflow of custom color button background ([#66152](https://github.com/WordPress/gutenberg/pull/66152)).
 -   `RadioGroup`: Fix arrow key navigation in RTL ([#66202](https://github.com/WordPress/gutenberg/pull/66202)).
+-   `Tabs` and `ToggleGroupControl`: round indicator size ([#66426](https://github.com/WordPress/gutenberg/pull/66426)).
 
 ### Enhancements
 
@@ -40,8 +41,8 @@
 
 -   `Modal`: Modal dialog small improvement for elementShouldBeHidden ([#65941](https://github.com/WordPress/gutenberg/pull/65941)).
 -   `Tabs`: revamped vertical orientation styles ([#65387](https://github.com/WordPress/gutenberg/pull/65387)).
--   `ComboboxControl`: display `No items found` when there are no matches found ([#66142](https://github.com/WordPress/gutenberg/pull/66142)) 
--   `FormTokenField`: display `No items found` when there are no matches found. This occurs when the `__experimentalExpandOnFocus` prop is enabled ([#66142](https://github.com/WordPress/gutenberg/pull/66142)) 
+-   `ComboboxControl`: display `No items found` when there are no matches found ([#66142](https://github.com/WordPress/gutenberg/pull/66142))
+-   `FormTokenField`: display `No items found` when there are no matches found. This occurs when the `__experimentalExpandOnFocus` prop is enabled ([#66142](https://github.com/WordPress/gutenberg/pull/66142))
 
 ## 28.9.0 (2024-10-03)
 

diff --git a/packages/components/src/tabs/tablist.tsx b/packages/components/src/tabs/tablist.tsx
@@ -93,6 +93,7 @@ export const TabList = forwardRef<
 		prefix: 'selected',
 		dataAttribute: 'indicator-animated',
 		transitionEndFilter: ( event ) => event.pseudoElement === '::before',
+		roundRect: true,
 	} );
 
 	// Make sure selected tab is scrolled into view.

diff --git a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
@@ -58,6 +58,7 @@ function UnconnectedToggleGroupControl(
 		prefix: 'selected',
 		dataAttribute: 'indicator-animated',
 		transitionEndFilter: ( event ) => event.pseudoElement === '::before',
+		roundRect: true,
 	} );
 
 	const cx = useCx();

diff --git a/packages/components/src/utils/hooks/use-animated-offset-rect.ts b/packages/components/src/utils/hooks/use-animated-offset-rect.ts
@@ -46,6 +46,7 @@ export function useAnimatedOffsetRect(
 		prefix = 'subelement',
 		dataAttribute = `${ prefix }-animated`,
 		transitionEndFilter = () => true,
+		roundRect = false,
 	}: {
 		/**
 		 * The prefix used for the CSS variables, e.g. if `prefix` is `selected`, the
@@ -72,6 +73,13 @@ export function useAnimatedOffsetRect(
 		 * @default () => true
 		 */
 		transitionEndFilter?: ( event: TransitionEvent ) => boolean;
+		/**
+		 * Whether the `rect` measurements should be rounded down when applied
+		 * to the CSS variables. This can be useful to avoid blurry animations or
+		 * to avoid subpixel rendering issues.
+		 * @default false
+		 */
+		roundRect?: boolean;
 	} = {}
 ) {
 	const setProperties = useEvent( () => {
@@ -80,7 +88,11 @@ export function useAnimatedOffsetRect(
 				property !== 'element' &&
 				container?.style.setProperty(
 					`--${ prefix }-${ property }`,
-					String( rect[ property ] )
+					String(
+						roundRect
+							? Math.floor( rect[ property ] )
+							: rect[ property ]
+					)
 				)
 		);
 	} );