@wordpress/components 27.4.0 → 27.5.0

package/src/focal-point-picker/tooltip/index.native.js

@@ -54,7 +54,7 @@ function Tooltip( { children, onPress, style, visible } ) {
 	);
 }
 
-function Label( { align, text, xOffset, yOffset } ) {
+function Label( { align = 'center', text, xOffset = 0, yOffset = 0 } ) {
 	const animationValue = useRef( new Animated.Value( 0 ) ).current;
 	const [ dimensions, setDimensions ] = useState( null );
 	const visible = useContext( TooltipContext );
@@ -139,12 +139,6 @@ function Label( { align, text, xOffset, yOffset } ) {
 	);
 }
 
-Label.defaultProps = {
-	align: 'center',
-	xOffset: 0,
-	yOffset: 0,
-};
-
 Tooltip.Label = Label;
 
 export default Tooltip;

package/src/focal-point-picker/utils.ts

@@ -34,7 +34,9 @@ export function getExtension( filename = '' ): string {
  * @return Whether the file is a video.
  */
 export function isVideoType( filename: string = '' ): boolean {
-	if ( ! filename ) return false;
+	if ( ! filename ) {
+		return false;
+	}
 	return (
 		filename.startsWith( 'data:video/' ) ||
 		VIDEO_EXTENSIONS.includes( getExtension( filename ) )

package/src/font-size-picker/README.md

@@ -92,6 +92,7 @@ Size of the control.
 Available units for custom font size selection.
 
 -   Required: No
+-   Default: `[ 'px', 'em', 'rem' ]`
 
 ### `value`: `number | string`
 

package/src/font-size-picker/index.tsx

@@ -36,6 +36,8 @@ import FontSizePickerSelect from './font-size-picker-select';
 import FontSizePickerToggleGroup from './font-size-picker-toggle-group';
 import { T_SHIRT_NAMES } from './constants';
 
+const DEFAULT_UNITS = [ 'px', 'em', 'rem' ];
+
 const UnforwardedFontSizePicker = (
 	props: FontSizePickerProps,
 	ref: ForwardedRef< any >
@@ -47,14 +49,14 @@ const UnforwardedFontSizePicker = (
 		disableCustomFontSizes = false,
 		onChange,
 		size = 'default',
-		units: unitsProp,
+		units: unitsProp = DEFAULT_UNITS,
 		value,
 		withSlider = false,
 		withReset = true,
 	} = props;
 
 	const units = useCustomUnits( {
-		availableUnits: unitsProp || [ 'px', 'em', 'rem' ],
+		availableUnits: unitsProp,
 	} );
 
 	const shouldUseSelectControl = fontSizes.length > 5;

package/src/font-size-picker/stories/index.story.tsx

@@ -84,7 +84,6 @@ Default.args = {
 			size: 26,
 		},
 	],
-	units: [ 'px', 'em', 'rem' ],
 	value: 16,
 	withSlider: false,
 };

package/src/font-size-picker/types.ts

@@ -28,6 +28,8 @@ export type FontSizePickerProps = {
 	) => void;
 	/**
 	 * Available units for custom font size selection.
+	 *
+	 * @default `[ 'px', 'em', 'rem' ]`
 	 */
 	units?: string[];
 	/**

package/src/higher-order/navigate-regions/style.scss

@@ -29,9 +29,9 @@
 
 	// Header top bar when Distraction free mode is on.
 	&.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
-	.interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel,
-	.interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel,
-	.interface-interface-skeleton__actions .edit-post-layout__toggle-entities-saved-states-panel,
+	.interface-interface-skeleton__sidebar .editor-layout__toggle-sidebar-panel,
+	.interface-interface-skeleton__actions .editor-layout__toggle-publish-panel,
+	.interface-interface-skeleton__actions .editor-layout__toggle-entities-saved-states-panel,
 	.editor-post-publish-panel {
 		outline: 4px solid $components-color-accent;
 		outline-offset: -4px;

package/src/input-control/input-field.tsx

@@ -155,7 +155,9 @@ function InputField(
 				target,
 			};
 
-			if ( ! distance ) return;
+			if ( ! distance ) {
+				return;
+			}
 			event.stopPropagation();
 
 			/**

package/src/input-control/label.tsx

@@ -15,7 +15,9 @@ export default function Label( {
 	htmlFor,
 	...props
 }: WordPressComponentProps< InputControlLabelProps, 'label', false > ) {
-	if ( ! children ) return null;
+	if ( ! children ) {
+		return null;
+	}
 
 	if ( hideLabelFromVision ) {
 		return (

package/src/input-control/stories/index.story.tsx

@@ -2,13 +2,18 @@
  * External dependencies
  */
 import type { Meta, StoryFn } from '@storybook/react';
-
+/**
+ * WordPress dependencies
+ */
+import { seen, unseen } from '@wordpress/icons';
+import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import InputControl from '..';
 import { InputControlPrefixWrapper } from '../input-prefix-wrapper';
 import { InputControlSuffixWrapper } from '../input-suffix-wrapper';
+import Button from '../../button';
 
 const meta: Meta< typeof InputControl > = {
 	title: 'Components (Experimental)/InputControl',
@@ -82,3 +87,28 @@ WithEdgeLabel.args = {
 	__unstableInputWidth: '20em',
 	labelPosition: 'edge',
 };
+
+export const ShowPassword: StoryFn< typeof InputControl > = ( args ) => {
+	const [ visible, setVisible ] = useState( false );
+	return (
+		<InputControl
+			type={ visible ? 'text' : 'password' }
+			label="Password"
+			suffix={
+				<InputControlSuffixWrapper>
+					<div style={ { display: 'flex' } }>
+						<Button
+							size="small"
+							icon={ visible ? unseen : seen }
+							onClick={ () => setVisible( ( value ) => ! value ) }
+							label={
+								visible ? 'Hide password' : 'Show password'
+							}
+						/>
+					</div>
+				</InputControlSuffixWrapper>
+			}
+			{ ...args }
+		/>
+	);
+};

package/src/input-control/styles/input-control-styles.tsx

@@ -107,9 +107,13 @@ const containerWidthStyles = ( {
 	__unstableInputWidth,
 	labelPosition,
 }: ContainerProps ) => {
-	if ( ! __unstableInputWidth ) return css( { width: '100%' } );
+	if ( ! __unstableInputWidth ) {
+		return css( { width: '100%' } );
+	}
 
-	if ( labelPosition === 'side' ) return '';
+	if ( labelPosition === 'side' ) {
+		return '';
+	}
 
 	if ( labelPosition === 'edge' ) {
 		return css( {
@@ -143,7 +147,9 @@ type InputProps = {
 };
 
 const disabledStyles = ( { disabled }: InputProps ) => {
-	if ( ! disabled ) return '';
+	if ( ! disabled ) {
+		return '';
+	}
 
 	return css( {
 		color: COLORS.ui.textDisabled,
@@ -161,7 +167,9 @@ export const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 	const fontSize = sizes[ size as Size ] || sizes.default;
 	const fontSizeMobile = '16px';
 
-	if ( ! fontSize ) return '';
+	if ( ! fontSize ) {
+		return '';
+	}
 
 	return css`
 		font-size: ${ fontSizeMobile };

package/src/input-control/test/index.js

@@ -112,10 +112,13 @@ describe( 'InputControl', () => {
 				const onKeyDown = ( { key } ) => {
 					heldKeySet.add( key );
 					if ( key === 'Escape' ) {
-						if ( heldKeySet.has( 'Meta' ) ) setState( 'qux' );
-						else if ( heldKeySet.has( 'Alt' ) )
+						if ( heldKeySet.has( 'Meta' ) ) {
+							setState( 'qux' );
+						} else if ( heldKeySet.has( 'Alt' ) ) {
 							setState( undefined );
-						else setState( '' );
+						} else {
+							setState( '' );
+						}
 					}
 				};
 				const onKeyUp = ( { key } ) => heldKeySet.delete( key );
@@ -204,8 +207,9 @@ describe( 'InputControl', () => {
 						if (
 							action.type === 'COMMIT' &&
 							action.payload.event.type === 'blur'
-						)
+						) {
 							value = value.replace( /\bnow\b/, 'meow' );
+						}
 
 						return { ...state, value };
 					} }

package/src/input-control/utils.ts

@@ -86,10 +86,11 @@ export function useDraft( props: {
 	useLayoutEffect( () => {
 		const { current: previousValue } = refPreviousValue;
 		refPreviousValue.current = props.value;
-		if ( draft.value !== undefined && ! draft.isStale )
+		if ( draft.value !== undefined && ! draft.isStale ) {
 			setDraft( { ...draft, isStale: true } );
-		else if ( draft.isStale && props.value !== previousValue )
+		} else if ( draft.isStale && props.value !== previousValue ) {
 			setDraft( {} );
+		}
 	}, [ props.value, draft ] );
 
 	const onChange: InputChangeCallback = ( nextValue, extra ) => {

package/src/item-group/item/hook.ts

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import type { ElementType } from 'react';
-
 /**
  * WordPress dependencies
  */
@@ -32,11 +27,7 @@ export function useItem( props: WordPressComponentProps< ItemProps, 'div' > ) {
 
 	const size = sizeProp || contextSize;
 
-	const as =
-		asProp ||
-		( ( typeof onClick !== 'undefined'
-			? 'button'
-			: 'div' ) as ElementType );
+	const as = asProp || ( typeof onClick !== 'undefined' ? 'button' : 'div' );
 
 	const cx = useCx();
 

package/src/item-group/test/__snapshots__/index.js.snap

@@ -11,8 +11,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1n28wmo-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-gg7ygh-View-large-item-spacedAround e19lxcc00"
+-         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
++         class="components-item css-1h3jinl-PolymorphicDiv-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -24,8 +24,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1n28wmo-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-gg7ygh-View-large-item-spacedAround e19lxcc00"
+-         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
++         class="components-item css-1h3jinl-PolymorphicDiv-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -44,8 +44,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-1lf4kzd-View-medium-item e19lxcc00"
-+       class="components-item css-1vv4aem-View-large-item e19lxcc00"
+-       class="components-item css-tpom78-PolymorphicDiv-medium-item e19lxcc00"
++       class="components-item css-vss65r-PolymorphicDiv-large-item e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -114,8 +114,8 @@ Snapshot Diff:
 @@ -1,18 +1,18 @@
   <div>
     <div
--     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+     class="components-item-group css-18qvw1m-View-separated-rounded e19lxcc00"
+-     class="components-item-group css-1iattls-PolymorphicDiv-rounded e19lxcc00"
++     class="components-item-group css-zgfros-PolymorphicDiv-separated-rounded e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"
@@ -125,8 +125,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1n28wmo-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-1lf4kzd-View-medium-item e19lxcc00"
+-         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
++         class="components-item css-tpom78-PolymorphicDiv-medium-item e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -142,8 +142,8 @@ Snapshot Diff:
 @@ -1,18 +1,18 @@
   <div>
     <div
--     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+     class="components-item-group css-acyoj6-View-bordered-rounded e19lxcc00"
+-     class="components-item-group css-1iattls-PolymorphicDiv-rounded e19lxcc00"
++     class="components-item-group css-1ibn92o-PolymorphicDiv-bordered-rounded e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"
@@ -153,8 +153,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1n28wmo-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-1lf4kzd-View-medium-item e19lxcc00"
+-         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
++         class="components-item css-tpom78-PolymorphicDiv-medium-item e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -170,8 +170,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+     class="components-item-group css-1mm2cvy-View e19lxcc00"
+-     class="components-item-group css-1iattls-PolymorphicDiv-rounded e19lxcc00"
++     class="components-item-group css-161q9d5-PolymorphicDiv e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"

package/src/mobile/gradient/index.native.js

@@ -51,7 +51,9 @@ export function getGradientAngle( gradientValue ) {
 		}
 	} else if ( angleType === 'angle' ) {
 		return parseFloat( angle );
-	} else return 4 * angleBase;
+	} else {
+		return 4 * angleBase;
+	}
 }
 
 export function getGradientColorGroup( gradientValue ) {

package/src/mobile/keyboard-aware-flat-list/index.android.js

@@ -18,8 +18,10 @@ import {
  */
 import useScroll from './use-scroll';
 import KeyboardAvoidingView from '../keyboard-avoiding-view';
+import { OPTIMIZATION_ITEMS_THRESHOLD, OPTIMIZATION_PROPS } from './shared';
 
 const AnimatedFlatList = Animated.createAnimatedComponent( FlatList );
+const EMPTY_OBJECT = {};
 
 export const KeyboardAwareFlatList = ( { onScroll, ...props }, ref ) => {
 	const { extraScrollHeight, scrollEnabled, shouldPreventAutomaticScroll } =
@@ -41,8 +43,6 @@ export const KeyboardAwareFlatList = ( { onScroll, ...props }, ref ) => {
 
 	const getFlatListRef = useCallback(
 		( flatListRef ) => {
-			// On Android, we get the ref of the associated scroll
-			// view to the FlatList.
 			scrollViewRef.current = flatListRef?.getNativeScrollRef();
 		},
 		[ scrollViewRef ]
@@ -57,12 +57,21 @@ export const KeyboardAwareFlatList = ( { onScroll, ...props }, ref ) => {
 		};
 	} );
 
+	const optimizationProps =
+		props.data?.length > OPTIMIZATION_ITEMS_THRESHOLD
+			? OPTIMIZATION_PROPS
+			: EMPTY_OBJECT;
+
 	return (
 		<KeyboardAvoidingView style={ { flex: 1 } }>
 			<AnimatedFlatList
 				ref={ getFlatListRef }
 				onScroll={ scrollHandler }
 				onContentSizeChange={ onContentSizeChange }
+				// Disable clipping to fix focus losing.
+				// See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
+				removeClippedSubviews={ false }
+				{ ...optimizationProps }
 				{ ...props }
 			/>
 		</KeyboardAvoidingView>

package/src/mobile/keyboard-aware-flat-list/index.ios.js

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-
-import { ScrollView, FlatList } from 'react-native';
+import { FlatList, View } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 /**
@@ -22,9 +21,12 @@ import { useThrottle } from '@wordpress/compose';
 import useScroll from './use-scroll';
 import useTextInputOffset from './use-text-input-offset';
 import useTextInputCaretPosition from './use-text-input-caret-position';
+import { OPTIMIZATION_ITEMS_THRESHOLD, OPTIMIZATION_PROPS } from './shared';
+import styles from './styles.scss';
 
 const DEFAULT_FONT_SIZE = 16;
-const AnimatedScrollView = Animated.createAnimatedComponent( ScrollView );
+const AnimatedFlatList = Animated.createAnimatedComponent( FlatList );
+const EMPTY_OBJECT = {};
 
 /** @typedef {import('@wordpress/element').RefObject} RefObject */
 /**
@@ -35,7 +37,6 @@ const AnimatedScrollView = Animated.createAnimatedComponent( ScrollView );
  * @param {number}    props.extraScrollHeight            Extra scroll height for the content.
  * @param {Function}  props.onScroll                     Function to be called when the list is scrolled.
  * @param {boolean}   props.scrollEnabled                Whether the list can be scrolled.
- * @param {Object}    props.scrollViewStyle              Additional style for the ScrollView component.
  * @param {boolean}   props.shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.
  * @param {Object}    props...                           Other props to pass to the FlatList component.
  * @param {RefObject} ref
@@ -46,7 +47,6 @@ export const KeyboardAwareFlatList = (
 		extraScrollHeight,
 		onScroll,
 		scrollEnabled,
-		scrollViewStyle,
 		shouldPreventAutomaticScroll,
 		...props
 	},
@@ -105,7 +105,12 @@ export const KeyboardAwareFlatList = (
 	// extra padding at the bottom.
 	const contentInset = { bottom: keyboardOffset };
 
-	const style = [ { flex: 1 }, scrollViewStyle ];
+	const getFlatListRef = useCallback(
+		( flatListRef ) => {
+			scrollViewRef.current = flatListRef?.getNativeScrollRef();
+		},
+		[ scrollViewRef ]
+	);
 
 	useImperativeHandle( ref, () => {
 		return {
@@ -116,20 +121,26 @@ export const KeyboardAwareFlatList = (
 		};
 	} );
 
+	const optimizationProps =
+		props.data?.length > OPTIMIZATION_ITEMS_THRESHOLD
+			? OPTIMIZATION_PROPS
+			: EMPTY_OBJECT;
+
 	return (
-		<AnimatedScrollView
-			automaticallyAdjustContentInsets={ false }
-			contentInset={ contentInset }
-			keyboardShouldPersistTaps="handled"
-			onContentSizeChange={ onContentSizeChange }
-			onScroll={ scrollHandler }
-			ref={ scrollViewRef }
-			scrollEnabled={ scrollEnabled }
-			scrollEventThrottle={ 16 }
-			style={ style }
-		>
-			<FlatList { ...props } scrollEnabled={ false } />
-		</AnimatedScrollView>
+		<View style={ styles.list__container }>
+			<AnimatedFlatList
+				ref={ getFlatListRef }
+				automaticallyAdjustContentInsets={ false }
+				contentInset={ contentInset }
+				keyboardShouldPersistTaps="handled"
+				onContentSizeChange={ onContentSizeChange }
+				onScroll={ scrollHandler }
+				scrollEventThrottle={ 16 }
+				style={ styles.list__content }
+				{ ...optimizationProps }
+				{ ...props }
+			/>
+		</View>
 	);
 };
 

package/src/mobile/keyboard-aware-flat-list/shared.native.js

@@ -0,0 +1,26 @@
+/**
+ * Optimization properties for FlatList.
+ * @typedef {Object} OptimizationProps
+ * @property {number} maxToRenderPerBatch - Controls the amount of items rendered per batch during scrolling.
+ *                                        Increasing this number reduces visual blank areas but may affect responsiveness.
+ *                                        Default: 10
+ * @property {number} windowSize          - Measurement unit representing viewport height.
+ *                                        Default: 21 (10 viewports above, 10 below, and 1 in between).
+ *                                        Larger values reduce chances of seeing blank spaces while scrolling but increase memory consumption.
+ *                                        Smaller values save memory but increase chances of seeing blank areas.
+ */
+
+/**
+ * Threshold for applying optimization settings.
+ * @type {number}
+ */
+export const OPTIMIZATION_ITEMS_THRESHOLD = 30;
+
+/**
+ * Optimization properties for FlatList.
+ * @type {OptimizationProps}
+ */
+export const OPTIMIZATION_PROPS = {
+	maxToRenderPerBatch: 15,
+	windowSize: 17,
+};

package/src/mobile/keyboard-aware-flat-list/styles.native.scss

@@ -0,0 +1,8 @@
+.list__container {
+	flex-grow: 1;
+	align-items: stretch;
+}
+
+.list__content {
+	margin-bottom: $mobile-block-toolbar-height;
+}

package/src/modal/aria-helper.ts

@@ -25,7 +25,9 @@ export function modalize( modalElement?: HTMLDivElement ) {
 	const hiddenElements: Element[] = [];
 	hiddenElementsByDepth.push( hiddenElements );
 	for ( const element of elements ) {
-		if ( element === modalElement ) continue;
+		if ( element === modalElement ) {
+			continue;
+		}
 
 		if ( elementShouldBeHidden( element ) ) {
 			element.setAttribute( 'aria-hidden', 'true' );
@@ -56,8 +58,11 @@ export function elementShouldBeHidden( element: Element ) {
  */
 export function unmodalize() {
 	const hiddenElements = hiddenElementsByDepth.pop();
-	if ( ! hiddenElements ) return;
+	if ( ! hiddenElements ) {
+		return;
+	}
 
-	for ( const element of hiddenElements )
+	for ( const element of hiddenElements ) {
 		element.removeAttribute( 'aria-hidden' );
+	}
 }

package/src/modal/index.tsx

@@ -154,7 +154,9 @@ function UnforwardedModal(
 	useEffect( () => {
 		dismissers.push( refOnRequestClose );
 		const [ first, second ] = dismissers;
-		if ( second ) first?.current?.();
+		if ( second ) {
+			first?.current?.();
+		}
 
 		const nested = nestedDismissers.current;
 		return () => {
@@ -243,7 +245,9 @@ function UnforwardedModal(
 		onPointerUp: ( { target, button } ) => {
 			const isSameTarget = target === pressTarget;
 			pressTarget = null;
-			if ( button === 0 && isSameTarget ) onRequestClose();
+			if ( button === 0 && isSameTarget ) {
+				onRequestClose();
+			}
 		},
 	};
 

package/src/modal/test/index.tsx

@@ -178,7 +178,9 @@ describe( 'Modal', () => {
 					{ isShown && (
 						<Modal
 							onKeyDown={ ( { key } ) => {
-								if ( key === 'o' ) setIsShown( false );
+								if ( key === 'o' ) {
+									setIsShown( false );
+								}
 							} }
 							onRequestClose={ noop }
 						>
@@ -402,12 +404,17 @@ describe( 'Modal', () => {
 					metaKey,
 				} ) => {
 					if ( key === 'a' ) {
-						if ( metaKey ) return setIsA1Shown( ( v ) => ! v );
+						if ( metaKey ) {
+							return setIsA1Shown( ( v ) => ! v );
+						}
 						return setIsAShown( ( v ) => ! v );
 					}
-					if ( key === 'b' ) return setIsBShown( ( v ) => ! v );
-					if ( key === 'c' )
+					if ( key === 'b' ) {
+						return setIsBShown( ( v ) => ! v );
+					}
+					if ( key === 'c' ) {
 						return setIsClassOverriden( ( v ) => ! v );
+					}
 				};
 				document.addEventListener( 'keydown', toggles );
 				return () =>

package/src/navigation/styles/navigation-styles.tsx

@@ -15,7 +15,7 @@ import { COLORS } from '../../utils/colors-values';
 import Button from '../../button';
 import { Text } from '../../text';
 import { Heading } from '../../heading';
-import { reduceMotion, rtl } from '../../utils';
+import { rtl } from '../../utils';
 import { space } from '../../utils/space';
 
 export const NavigationUI = styled.div`
@@ -173,7 +173,6 @@ export const ItemBadgeUI = styled.span`
 	display: inline-flex;
 	padding: ${ space( 1 ) } ${ space( 3 ) };
 	border-radius: 2px;
-	animation: fade-in 250ms ease-out;
 
 	@keyframes fade-in {
 		from {
@@ -184,7 +183,9 @@ export const ItemBadgeUI = styled.span`
 		}
 	}
 
-	${ reduceMotion( 'animation' ) };
+	@media not ( prefers-reduced-motion ) {
+		animation: fade-in 250ms ease-out;
+	}
 `;
 
 export const ItemTitleUI = styled( Text )`