@elementor/editor-variables 0.11.0 → 0.13.0

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { useId, useRef } from 'react';
+import { PopoverHeader } from '@elementor/editor-ui';
 import { ColorFilterIcon, DetachIcon, PlusIcon } from '@elementor/icons';
 import {
 	bindPopover,
 	bindTrigger,
 	Box,
-	CloseButton,
 	IconButton,
 	Popover,
 	Stack,
@@ -16,8 +16,10 @@ import {
 import { __ } from '@wordpress/i18n';
 
 import { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';
+import { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';
 import { type Variable } from '../types';
 import { ColorVariableCreation } from './color-variable-creation';
+import { FontVariableCreation } from './font-variable-creation';
 
 type Props = {
 	selectedVariable: Variable;
@@ -26,6 +28,8 @@ type Props = {
 	startTagAdornment?: React.ReactNode;
 };
 
+const SIZE = 'tiny';
+
 export const VariablesSelectionPopover = ( {
 	selectedVariable,
 	unlinkVariable,
@@ -47,6 +51,7 @@ export const VariablesSelectionPopover = ( {
 	const { label } = selectedVariable;
 
 	const colorCreationEnabled = colorVariablePropTypeUtil.key === selectedVariable.type;
+	const fontCreationEnabled = fontVariablePropTypeUtil.key === selectedVariable.type;
 
 	return (
 		<Box ref={ anchorRef }>
@@ -68,8 +73,8 @@ export const VariablesSelectionPopover = ( {
 					</Box>
 				}
 				actions={
-					<IconButton size="tiny" onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>
-						<DetachIcon fontSize="tiny" />
+					<IconButton size={ SIZE } onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>
+						<DetachIcon fontSize={ SIZE } />
 					</IconButton>
 				}
 			/>
@@ -80,26 +85,35 @@ export const VariablesSelectionPopover = ( {
 				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
 				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
 			>
-				<Stack direction="row" alignItems="center" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>
-					<ColorFilterIcon fontSize="tiny" sx={ { mr: 0.5 } } />
-					<Typography variant="subtitle2">{ __( 'Variables', 'elementor' ) }</Typography>
-					<Stack direction="row" sx={ { ml: 'auto' } }>
-						{ colorCreationEnabled && (
-							<IconButton
-								{ ...bindTrigger( creationPopupState ) }
-								size="tiny"
-								onClick={ handleCreateButtonClick }
-							>
-								<PlusIcon fontSize="tiny" />
-							</IconButton>
-						) }
-						<CloseButton slotProps={ { icon: { fontSize: 'tiny' } } } onClick={ closePopover } />
-					</Stack>
-				</Stack>
+				<PopoverHeader
+					title={ __( 'Variables', 'elementor' ) }
+					onClose={ closePopover }
+					icon={ <ColorFilterIcon fontSize={ SIZE } /> }
+					actions={ [
+						<IconButton
+							key="createVariable"
+							{ ...bindTrigger( creationPopupState ) }
+							size={ SIZE }
+							onClick={ handleCreateButtonClick }
+						>
+							<PlusIcon fontSize={ SIZE } />
+						</IconButton>,
+					] }
+				/>
 				{ children?.( { closePopover } ) }
 			</Popover>
 
-			{ colorCreationEnabled && <ColorVariableCreation popupState={ creationPopupState } /> }
+			<Box ref={ anchorRef }>
+				<Popover
+					{ ...bindPopover( creationPopupState ) }
+					anchorEl={ anchorRef.current }
+					anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
+					transformOrigin={ { vertical: 'top', horizontal: 'right' } }
+				>
+					{ colorCreationEnabled && <ColorVariableCreation onClose={ creationPopupState.close } /> }
+					{ fontCreationEnabled && <FontVariableCreation onClose={ creationPopupState.close } /> }
+				</Popover>
+			</Box>
 		</Box>
 	);
 };