@elementor/editor-variables 0.14.0 → 0.15.0

package/src/components/color-variable-creation.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useRef, useState } from 'react';
-import { useBoundProp } from '@elementor/editor-controls';
+import { PopoverContent, useBoundProp } from '@elementor/editor-controls';
+import { PopoverScrollableContent } from '@elementor/editor-editing-panel';
 import { PopoverHeader } from '@elementor/editor-ui';
 import { ArrowLeftIcon, BrushIcon } from '@elementor/icons';
 import {
@@ -10,7 +11,6 @@ import {
 	FormLabel,
 	Grid,
 	IconButton,
-	Stack,
 	TextField,
 	UnstableColorField,
 } from '@elementor/ui';
@@ -18,6 +18,7 @@ import { __ } from '@wordpress/i18n';
 
 import { createVariable } from '../hooks/use-prop-variables';
 import { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';
+import { usePopoverContentRef } from './variable-selection-popover.context';
 
 const SIZE = 'tiny';
 
@@ -32,7 +33,8 @@ export const ColorVariableCreation = ( { onGoBack, onClose }: Props ) => {
 	const [ color, setColor ] = useState( '' );
 	const [ label, setLabel ] = useState( '' );
 
-	const anchorRef = useRef< HTMLDivElement >( null );
+	const defaultRef = useRef< HTMLDivElement >( null );
+	const anchorRef = usePopoverContentRef() ?? defaultRef;
 
 	const resetFields = () => {
 		setColor( '' );
@@ -60,7 +62,7 @@ export const ColorVariableCreation = ( { onGoBack, onClose }: Props ) => {
 	};
 
 	return (
-		<>
+		<PopoverScrollableContent height="auto">
 			<PopoverHeader
 				icon={
 					<>
@@ -78,10 +80,10 @@ export const ColorVariableCreation = ( { onGoBack, onClose }: Props ) => {
 
 			<Divider />
 
-			<Stack p={ 1.5 } gap={ 1.5 }>
+			<PopoverContent p={ 2 }>
 				<Grid container gap={ 0.75 } alignItems="center">
 					<Grid item xs={ 12 }>
-						<FormLabel size="small">{ __( 'Name', 'elementor' ) }</FormLabel>
+						<FormLabel size="tiny">{ __( 'Name', 'elementor' ) }</FormLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
 						<TextField
@@ -95,7 +97,7 @@ export const ColorVariableCreation = ( { onGoBack, onClose }: Props ) => {
 
 				<Grid container gap={ 0.75 } alignItems="center">
 					<Grid item xs={ 12 }>
-						<FormLabel size="small">{ __( 'Value', 'elementor' ) }</FormLabel>
+						<FormLabel size="tiny">{ __( 'Value', 'elementor' ) }</FormLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
 						<UnstableColorField
@@ -113,13 +115,13 @@ export const ColorVariableCreation = ( { onGoBack, onClose }: Props ) => {
 						/>
 					</Grid>
 				</Grid>
-			</Stack>
+			</PopoverContent>
 
-			<CardActions>
+			<CardActions sx={ { pt: 0.5, pb: 1 } }>
 				<Button size="small" variant="contained" disabled={ isFormInvalid() } onClick={ handleCreate }>
 					{ __( 'Create', 'elementor' ) }
 				</Button>
 			</CardActions>
-		</>
+		</PopoverScrollableContent>
 	);
 };

package/src/components/color-variable-edit.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { useRef, useState } from 'react';
-import { PopoverHeader } from '@elementor/editor-ui';
-import { ArrowLeftIcon, BrushIcon } from '@elementor/icons';
+import { PopoverContent } from '@elementor/editor-controls';
+import { PopoverHeader, PopoverScrollableContent } from '@elementor/editor-ui';
+import { ArrowLeftIcon, BrushIcon, TrashIcon } from '@elementor/icons';
 import {
 	Button,
 	CardActions,
@@ -9,13 +10,13 @@ import {
 	FormLabel,
 	Grid,
 	IconButton,
-	Stack,
 	TextField,
 	UnstableColorField,
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { updateVariable, useVariable } from '../hooks/use-prop-variables';
+import { deleteVariable, updateVariable, useVariable } from '../hooks/use-prop-variables';
+import { usePopoverContentRef } from './variable-selection-popover.context';
 
 const SIZE = 'tiny';
 
@@ -28,12 +29,12 @@ type Props = {
 
 export const ColorVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props ) => {
 	const variable = useVariable( editId );
-
 	if ( ! variable ) {
 		throw new Error( `Global color variable not found` );
 	}
 
-	const anchorRef = useRef< HTMLDivElement >( null );
+	const defaultRef = useRef< HTMLDivElement >( null );
+	const anchorRef = usePopoverContentRef() ?? defaultRef;
 
 	const [ color, setColor ] = useState( variable.value );
 	const [ label, setLabel ] = useState( variable.label );
@@ -47,12 +48,26 @@ export const ColorVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Prop
 		} );
 	};
 
+	const handleDelete = () => {
+		deleteVariable( editId ).then( () => {
+			onSubmit?.();
+		} );
+	};
+
 	const noValueChanged = () => color === variable.value && label === variable.label;
 	const hasEmptyValue = () => '' === color.trim() || '' === label.trim();
 	const isSaveDisabled = () => noValueChanged() || hasEmptyValue();
 
+	const actions = [];
+
+	actions.push(
+		<IconButton key="delete" size={ SIZE } aria-label={ __( 'Delete', 'elementor' ) } onClick={ handleDelete }>
+			<TrashIcon fontSize={ SIZE } />
+		</IconButton>
+	);
+
 	return (
-		<>
+		<PopoverScrollableContent height="auto">
 			<PopoverHeader
 				title={ __( 'Edit variable', 'elementor' ) }
 				onClose={ onClose }
@@ -66,14 +81,15 @@ export const ColorVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Prop
 						<BrushIcon fontSize={ SIZE } />
 					</>
 				}
+				actions={ actions }
 			/>
 
 			<Divider />
 
-			<Stack p={ 1.5 } gap={ 1.5 }>
+			<PopoverContent p={ 2 }>
 				<Grid container gap={ 0.75 } alignItems="center">
 					<Grid item xs={ 12 }>
-						<FormLabel size="small">{ __( 'Name', 'elementor' ) }</FormLabel>
+						<FormLabel size="tiny">{ __( 'Name', 'elementor' ) }</FormLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
 						<TextField
@@ -87,7 +103,7 @@ export const ColorVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Prop
 
 				<Grid container gap={ 0.75 } alignItems="center">
 					<Grid item xs={ 12 }>
-						<FormLabel size="small">{ __( 'Value', 'elementor' ) }</FormLabel>
+						<FormLabel size="tiny">{ __( 'Value', 'elementor' ) }</FormLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
 						<UnstableColorField
@@ -105,13 +121,13 @@ export const ColorVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Prop
 						/>
 					</Grid>
 				</Grid>
-			</Stack>
+			</PopoverContent>
 
-			<CardActions>
+			<CardActions sx={ { pt: 0.5, pb: 1 } }>
 				<Button size="small" variant="contained" disabled={ isSaveDisabled() } onClick={ handleUpdate }>
 					{ __( 'Save', 'elementor' ) }
 				</Button>
 			</CardActions>
-		</>
+		</PopoverScrollableContent>
 	);
 };

package/src/components/color-variables-selection.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
+import { PopoverScrollableContent } from '@elementor/editor-editing-panel';
 import { PopoverHeader, PopoverMenuList, PopoverSearch, type VirtualizedItem } from '@elementor/editor-ui';
-import { ColorFilterIcon, PlusIcon, SettingsIcon } from '@elementor/icons';
+import { BrushIcon, ColorFilterIcon, PlusIcon, SettingsIcon } from '@elementor/icons';
 import { Divider, IconButton } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -93,25 +94,37 @@ export const ColorVariablesSelection = ( { closePopover, onAdd, onEdit, onSettin
 
 			<Divider />
 
-			{ hasVariables && hasSearchResults && (
-				<PopoverMenuList< 'item', string >
-					items={ items }
-					onSelect={ handleSetColorVariable }
-					onClose={ () => {} }
-					selectedValue={ variable }
-					data-testid="color-variables-list"
-					menuListTemplate={ VariablesStyledMenuList }
-					menuItemContentTemplate={ ( item: VirtualizedItem< 'item', string > ) => (
-						<MenuItemContent item={ item } />
-					) }
-				/>
-			) }
-
-			{ ! hasSearchResults && hasVariables && (
-				<NoSearchResults searchValue={ searchValue } onClear={ handleClearSearch } />
-			) }
-
-			{ ! hasVariables && <NoVariables icon={ <ColorFilterIcon fontSize="large" /> } onAdd={ onAdd } /> }
+			<PopoverScrollableContent>
+				{ hasVariables && hasSearchResults && (
+					<PopoverMenuList
+						items={ items }
+						onSelect={ handleSetColorVariable }
+						onClose={ () => {} }
+						selectedValue={ variable }
+						data-testid="color-variables-list"
+						menuListTemplate={ VariablesStyledMenuList }
+						menuItemContentTemplate={ ( item: VirtualizedItem< 'item', string > ) => (
+							<MenuItemContent item={ item } />
+						) }
+					/>
+				) }
+
+				{ ! hasSearchResults && hasVariables && (
+					<NoSearchResults
+						searchValue={ searchValue }
+						onClear={ handleClearSearch }
+						icon={ <BrushIcon fontSize="large" /> }
+					/>
+				) }
+
+				{ ! hasVariables && (
+					<NoVariables
+						title={ __( 'Create your first color variable', 'elementor' ) }
+						icon={ <BrushIcon fontSize="large" /> }
+						onAdd={ onAdd }
+					/>
+				) }
+			</PopoverScrollableContent>
 		</>
 	);
 };

package/src/components/font-variable-creation.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRef, useState } from 'react';
-import { FontFamilySelector, useBoundProp } from '@elementor/editor-controls';
-import { useFontFamilies } from '@elementor/editor-editing-panel';
+import { FontFamilySelector, PopoverContent, useBoundProp } from '@elementor/editor-controls';
+import { PopoverScrollableContent, useFontFamilies, useSectionWidth } from '@elementor/editor-editing-panel';
 import { PopoverHeader } from '@elementor/editor-ui';
 import { ArrowLeftIcon, ChevronDownIcon, TextIcon } from '@elementor/icons';
 import {
@@ -14,7 +14,6 @@ import {
 	Grid,
 	IconButton,
 	Popover,
-	Stack,
 	TextField,
 	UnstableTag,
 	usePopupState,
@@ -66,8 +65,10 @@ export const FontVariableCreation = ( { onClose, onGoBack }: Props ) => {
 		return ! fontFamily?.trim() || ! label?.trim();
 	};
 
+	const sectionWidth = useSectionWidth();
+
 	return (
-		<>
+		<PopoverScrollableContent height="auto">
 			<PopoverHeader
 				icon={
 					<>
@@ -85,10 +86,10 @@ export const FontVariableCreation = ( { onClose, onGoBack }: Props ) => {
 
 			<Divider />
 
-			<Stack p={ 1.5 } gap={ 1.5 }>
+			<PopoverContent p={ 2 }>
 				<Grid container gap={ 0.75 } alignItems="center">
 					<Grid item xs={ 12 }>
-						<FormLabel size="small">{ __( 'Name', 'elementor' ) }</FormLabel>
+						<FormLabel size="tiny">{ __( 'Name', 'elementor' ) }</FormLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
 						<TextField
@@ -102,7 +103,7 @@ export const FontVariableCreation = ( { onClose, onGoBack }: Props ) => {
 
 				<Grid container gap={ 0.75 } alignItems="center">
 					<Grid item xs={ 12 }>
-						<FormLabel size="small">{ __( 'Value', 'elementor' ) }</FormLabel>
+						<FormLabel size="tiny">{ __( 'Value', 'elementor' ) }</FormLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
 						<>
@@ -126,18 +127,19 @@ export const FontVariableCreation = ( { onClose, onGoBack }: Props ) => {
 									fontFamily={ fontFamily }
 									onFontFamilyChange={ setFontFamily }
 									onClose={ fontPopoverState.close }
+									sectionWidth={ sectionWidth }
 								/>
 							</Popover>
 						</>
 					</Grid>
 				</Grid>
-			</Stack>
+			</PopoverContent>
 
-			<CardActions>
+			<CardActions sx={ { pt: 0.5, pb: 1 } }>
 				<Button size="small" variant="contained" disabled={ isFormInvalid() } onClick={ handleCreate }>
 					{ __( 'Create', 'elementor' ) }
 				</Button>
 			</CardActions>
-		</>
+		</PopoverScrollableContent>
 	);
 };

package/src/components/font-variable-edit.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useId, useRef, useState } from 'react';
-import { FontFamilySelector } from '@elementor/editor-controls';
-import { useFontFamilies } from '@elementor/editor-editing-panel';
-import { PopoverHeader } from '@elementor/editor-ui';
-import { ArrowLeftIcon, ChevronDownIcon, TextIcon } from '@elementor/icons';
+import { FontFamilySelector, PopoverContent } from '@elementor/editor-controls';
+import { useFontFamilies, useSectionWidth } from '@elementor/editor-editing-panel';
+import { PopoverHeader, PopoverScrollableContent } from '@elementor/editor-ui';
+import { ArrowLeftIcon, ChevronDownIcon, TextIcon, TrashIcon } from '@elementor/icons';
 import {
 	bindPopover,
 	bindTrigger,
@@ -14,14 +14,13 @@ import {
 	Grid,
 	IconButton,
 	Popover,
-	Stack,
 	TextField,
 	UnstableTag,
 	usePopupState,
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { updateVariable, useVariable } from '../hooks/use-prop-variables';
+import { deleteVariable, updateVariable, useVariable } from '../hooks/use-prop-variables';
 
 const SIZE = 'tiny';
 
@@ -59,12 +58,28 @@ export const FontVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props
 		} );
 	};
 
+	const handleDelete = () => {
+		deleteVariable( editId ).then( () => {
+			onSubmit?.();
+		} );
+	};
+
 	const noValueChanged = () => fontFamily === variable.value && label === variable.label;
 	const hasEmptyValue = () => '' === fontFamily.trim() || '' === label.trim();
 	const isSaveDisabled = () => noValueChanged() || hasEmptyValue();
 
+	const sectionWidth = useSectionWidth();
+
+	const actions = [];
+
+	actions.push(
+		<IconButton key="delete" size={ SIZE } aria-label={ __( 'Delete', 'elementor' ) } onClick={ handleDelete }>
+			<TrashIcon fontSize={ SIZE } />
+		</IconButton>
+	);
+
 	return (
-		<>
+		<PopoverScrollableContent height="auto">
 			<PopoverHeader
 				icon={
 					<>
@@ -78,14 +93,15 @@ export const FontVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props
 				}
 				title={ __( 'Edit variable', 'elementor' ) }
 				onClose={ onClose }
+				actions={ actions }
 			/>
 
 			<Divider />
 
-			<Stack p={ 1.5 } gap={ 1.5 }>
+			<PopoverContent p={ 2 }>
 				<Grid container gap={ 0.75 } alignItems="center">
 					<Grid item xs={ 12 }>
-						<FormLabel htmlFor={ variableNameId } size="small">
+						<FormLabel htmlFor={ variableNameId } size="tiny">
 							{ __( 'Name', 'elementor' ) }
 						</FormLabel>
 					</Grid>
@@ -102,7 +118,7 @@ export const FontVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props
 
 				<Grid container gap={ 0.75 } alignItems="center">
 					<Grid item xs={ 12 }>
-						<FormLabel htmlFor={ variableValueId } size="small">
+						<FormLabel htmlFor={ variableValueId } size="tiny">
 							{ __( 'Value', 'elementor' ) }
 						</FormLabel>
 					</Grid>
@@ -129,18 +145,19 @@ export const FontVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props
 									fontFamily={ fontFamily }
 									onFontFamilyChange={ setFontFamily }
 									onClose={ fontPopoverState.close }
+									sectionWidth={ sectionWidth }
 								/>
 							</Popover>
 						</>
 					</Grid>
 				</Grid>
-			</Stack>
+			</PopoverContent>
 
-			<CardActions>
+			<CardActions sx={ { pt: 0.5, pb: 1 } }>
 				<Button size="small" variant="contained" disabled={ isSaveDisabled() } onClick={ handleUpdate }>
 					{ __( 'Save', 'elementor' ) }
 				</Button>
 			</CardActions>
-		</>
+		</PopoverScrollableContent>
 	);
 };

package/src/components/font-variables-selection.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
+import { PopoverScrollableContent } from '@elementor/editor-editing-panel';
 import { PopoverHeader, PopoverMenuList, PopoverSearch, type VirtualizedItem } from '@elementor/editor-ui';
 import { ColorFilterIcon, PlusIcon, SettingsIcon, TextIcon } from '@elementor/icons';
 import { Divider, IconButton } from '@elementor/ui';
@@ -60,7 +61,7 @@ export const FontVariablesSelection = ( { closePopover, onAdd, onEdit, onSetting
 		type: 'item' as const,
 		value: key,
 		label,
-		icon: <TextIcon />,
+		icon: <TextIcon fontSize={ SIZE } />,
 		secondaryText: value,
 		onEdit: () => onEdit?.( key ),
 	} ) );
@@ -92,25 +93,37 @@ export const FontVariablesSelection = ( { closePopover, onAdd, onEdit, onSetting
 
 			<Divider />
 
-			{ hasVariables && hasSearchResults && (
-				<PopoverMenuList
-					items={ items }
-					onSelect={ handleSetVariable }
-					onClose={ () => {} }
-					selectedValue={ variable }
-					data-testid="font-variables-list"
-					menuListTemplate={ VariablesStyledMenuList }
-					menuItemContentTemplate={ ( item: VirtualizedItem< 'item', string > ) => (
-						<MenuItemContent item={ item } />
-					) }
-				/>
-			) }
-
-			{ ! hasSearchResults && hasVariables && (
-				<NoSearchResults searchValue={ searchValue } onClear={ handleClearSearch } />
-			) }
-
-			{ ! hasVariables && <NoVariables icon={ <TextIcon fontSize="large" /> } onAdd={ onAdd } /> }
+			<PopoverScrollableContent>
+				{ hasVariables && hasSearchResults && (
+					<PopoverMenuList
+						items={ items }
+						onSelect={ handleSetVariable }
+						onClose={ () => {} }
+						selectedValue={ variable }
+						data-testid="font-variables-list"
+						menuListTemplate={ VariablesStyledMenuList }
+						menuItemContentTemplate={ ( item: VirtualizedItem< 'item', string > ) => (
+							<MenuItemContent item={ item } />
+						) }
+					/>
+				) }
+
+				{ ! hasSearchResults && hasVariables && (
+					<NoSearchResults
+						searchValue={ searchValue }
+						onClear={ handleClearSearch }
+						icon={ <TextIcon fontSize="large" /> }
+					/>
+				) }
+
+				{ ! hasVariables && (
+					<NoVariables
+						title={ __( 'Create your first font variable', 'elementor' ) }
+						icon={ <TextIcon fontSize="large" /> }
+						onAdd={ onAdd }
+					/>
+				) }
+			</PopoverScrollableContent>
 		</>
 	);
 };

package/src/components/ui/color-indicator.tsx

@@ -2,4 +2,5 @@ import { styled, UnstableColorIndicator } from '@elementor/ui';
 
 export const ColorIndicator = styled( UnstableColorIndicator )( ( { theme } ) => ( {
 	borderRadius: `${ theme.shape.borderRadius / 2 }px`,
+	marginRight: theme.spacing( 0.25 ),
 } ) );

package/src/components/ui/menu-item-content.tsx

@@ -1,39 +1,48 @@
 import * as React from 'react';
-import type { VirtualizedItem } from '@elementor/editor-ui';
+import { EllipsisWithTooltip, type VirtualizedItem } from '@elementor/editor-ui';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { EditIcon } from '@elementor/icons';
-import { IconButton, ListItemIcon, ListItemText } from '@elementor/ui';
+import { Box, IconButton, ListItemIcon, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 const SIZE = 'tiny';
 
+const isVersion330Active = isExperimentActive( 'e_v_3_30' );
+
 export const MenuItemContent = < T, V extends string >( { item }: { item: VirtualizedItem< T, V > } ) => {
 	const onEdit = item.onEdit as ( ( value: V ) => void ) | undefined;
 
 	return (
 		<>
 			<ListItemIcon>{ item.icon }</ListItemIcon>
-			<ListItemText
-				primary={ item.label || item.value }
-				secondary={ item.secondaryText }
-				primaryTypographyProps={ {
-					variant: 'body2',
-					color: 'text.secondary',
-					style: {
-						lineHeight: 2,
-						display: 'inline-block',
-						overflow: 'hidden',
-						textOverflow: 'ellipsis',
-						whiteSpace: 'nowrap',
-						maxWidth: '81px',
-					},
-				} }
-				secondaryTypographyProps={ {
-					variant: 'caption',
-					color: 'text.tertiary',
-					style: { marginTop: '1px', lineHeight: '1' },
+			<Box
+				sx={ {
+					flex: 1,
+					minWidth: 0,
+					display: 'flex',
+					alignItems: 'center',
+					gap: 1,
 				} }
-				sx={ { display: 'flex', alignItems: 'center', gap: 1 } }
-			/>
+			>
+				<EllipsisWithTooltip
+					title={ item.label || item.value }
+					as={ Typography }
+					variant={ isVersion330Active ? 'caption' : 'body2' }
+					color={ isVersion330Active ? 'text.primary' : 'text.secondary' }
+					sx={ { marginTop: '1px', lineHeight: '2' } }
+					maxWidth="50%"
+				/>
+				{ item.secondaryText && (
+					<EllipsisWithTooltip
+						title={ item.secondaryText }
+						as={ Typography }
+						variant="caption"
+						color="text.tertiary"
+						sx={ { marginTop: '1px', lineHeight: '1' } }
+						maxWidth="50%"
+					/>
+				) }
+			</Box>
 			{ !! onEdit && (
 				<IconButton
 					sx={ { mx: 1, opacity: '0' } }

package/src/components/ui/no-search-results.tsx

@@ -1,34 +1,32 @@
 import * as React from 'react';
-import { ColorFilterIcon } from '@elementor/icons';
 import { Link, Stack, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 type Props = {
 	searchValue: string;
 	onClear?: () => void;
+	icon?: React.ReactNode;
 };
 
-export const NoSearchResults = ( { searchValue, onClear }: Props ) => {
+export const NoSearchResults = ( { searchValue, onClear, icon }: Props ) => {
 	return (
 		<Stack
 			gap={ 1 }
 			alignItems="center"
 			justifyContent="center"
 			height="100%"
+			p={ 2.5 }
 			color="text.secondary"
-			sx={ { p: 2.5, pb: 5.5 } }
+			sx={ { pb: 3.5 } }
 		>
-			<ColorFilterIcon fontSize="large" />
-
+			{ icon }
 			<Typography align="center" variant="subtitle2">
 				{ __( 'Sorry, nothing matched', 'elementor' ) }
 				<br />
 				&ldquo;{ searchValue }&rdquo;.
 			</Typography>
-
-			<Typography align="center" variant="caption">
+			<Typography align="center" variant="caption" sx={ { display: 'flex', flexDirection: 'column' } }>
 				{ __( 'Try something else.', 'elementor' ) }
-				<br />
 				<Link color="text.secondary" variant="caption" component="button" onClick={ onClear }>
 					{ __( 'Clear & try again', 'elementor' ) }
 				</Link>

package/src/components/ui/no-variables.tsx

@@ -4,10 +4,11 @@ import { __ } from '@wordpress/i18n';
 
 type Props = {
 	icon?: React.ReactNode;
+	title?: string;
 	onAdd?: () => void;
 };
 
-export const NoVariables = ( { icon, onAdd }: Props ) => (
+export const NoVariables = ( { icon, title, onAdd }: Props ) => (
 	<Stack
 		gap={ 1 }
 		alignItems="center"
@@ -19,7 +20,7 @@ export const NoVariables = ( { icon, onAdd }: Props ) => (
 		{ icon }
 
 		<Typography align="center" variant="subtitle2">
-			{ __( 'Create your first variable', 'elementor' ) }
+			{ title }
 		</Typography>
 
 		<Typography align="center" variant="caption" maxWidth="180px">