@elementor/editor-editing-panel 1.24.0 → 1.28.0

package/src/styles-inheritance/styles-inheritance-indicator.tsx

@@ -1,32 +1,12 @@
 import * as React from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
-import { ELEMENTS_STYLES_PROVIDER_KEY } from '@elementor/editor-styles-repository';
-import { styled } from '@elementor/ui';
+import { ELEMENTS_BASE_STYLES_PROVIDER_KEY, isElementsStylesProvider } from '@elementor/editor-styles-repository';
 import { __ } from '@wordpress/i18n';
 
+import { StyleIndicator } from '../components/style-indicator';
 import { useStyle } from '../contexts/style-context';
 import { useStylesInheritanceField } from '../contexts/styles-inheritance-context';
 
-const Circle = styled( 'div', {
-	shouldForwardProp: ( prop ) => prop !== 'variant',
-} )< { variant?: 'overridden' | 'local-affects' | 'global-affects' } >`
-	width: 5px;
-	height: 5px;
-	border-radius: 50%;
-	background-color: ${ ( { theme, variant } ) => {
-		switch ( variant ) {
-			case 'overridden':
-				return theme.palette.warning.light;
-			case 'global-affects':
-				return theme.palette.global.dark;
-			case 'local-affects':
-				return theme.palette.primary.main;
-			default:
-				return theme.palette.text.disabled;
-		}
-	} };
-`;
-
 export const StylesInheritanceIndicator = () => {
 	const { value, path } = useBoundProp();
 	const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
@@ -39,33 +19,35 @@ export const StylesInheritanceIndicator = () => {
 		return null;
 	}
 
-	const [ { styleId, styleVariant } ] = inheritanceChain;
+	const [ { style, variant, provider } ] = inheritanceChain;
+
+	if ( provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY ) {
+		return null;
+	}
 
-	const { breakpoint, state } = styleVariant.meta;
+	const { breakpoint, state } = variant.meta;
 
 	if (
-		styleId === currentStyleId &&
+		style.id === currentStyleId &&
 		breakpoint === currentStyleMeta.breakpoint &&
 		state === currentStyleMeta.state
 	) {
 		return (
-			<Circle
+			<StyleIndicator
 				aria-label={ __( 'This is the final value', 'elementor' ) }
-				variant={
-					currentStyleProvider?.key === ELEMENTS_STYLES_PROVIDER_KEY ? 'local-affects' : 'global-affects'
-				}
+				variant={ isElementsStylesProvider( currentStyleProvider?.getKey() ) ? 'local' : 'global' }
 			/>
 		);
 	}
 
 	if ( value !== null && value !== undefined ) {
 		return (
-			<Circle
+			<StyleIndicator
 				aria-label={ __( 'This value is overridden by another style', 'elementor' ) }
 				variant="overridden"
 			/>
 		);
 	}
 
-	return <Circle aria-label={ __( 'This has value from another style', 'elementor' ) } />;
+	return <StyleIndicator aria-label={ __( 'This has value from another style', 'elementor' ) } />;
 };

package/src/styles-inheritance/types.ts

@@ -1,17 +1,18 @@
 import { type PropValue } from '@elementor/editor-props';
 import { type BreakpointId } from '@elementor/editor-responsive';
-import { type StyleDefinitionState, type StyleDefinitionVariant } from '@elementor/editor-styles';
+import { type StyleDefinition, type StyleDefinitionState, type StyleDefinitionVariant } from '@elementor/editor-styles';
 
 export type StyleDefinitionStateWithNormal = NonNullable< StyleDefinitionState > | 'normal';
 
 type StatesMapping< T > = Partial< Record< StyleDefinitionStateWithNormal, T > >;
 
-export type StyleVariantWithId = {
-	styleId: string;
-	styleVariant: StyleDefinitionVariant;
+export type StyleVariantDetails = {
+	style: StyleDefinition;
+	provider: string | null;
+	variant: StyleDefinitionVariant;
 };
 
-export type SnapshotPropValue = StyleVariantWithId & {
+export type SnapshotPropValue = StyleVariantDetails & {
 	value: PropValue;
 };
 
@@ -26,7 +27,7 @@ export type BreakpointStatesSlotsMapping = StatesMapping< StylesInheritanceSnaps
 
 export type BreakpointsStatesSnapshotsMapping = Partial< Record< BreakpointId, BreakpointStatesSlotsMapping > >;
 
-type BreakpointStatesStyles = StatesMapping< StyleVariantWithId[] >;
+type BreakpointStatesStyles = StatesMapping< StyleVariantDetails[] >;
 
 export type BreakpointsStatesStyles = Partial< Record< BreakpointId, Partial< BreakpointStatesStyles > > >;