@elementor/editor-editing-panel 1.11.1 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.11.1",
+  "version": "1.13.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,14 +40,14 @@
   },
   "dependencies": {
     "@elementor/editor": "0.18.0",
-    "@elementor/editor-controls": "0.10.0",
-    "@elementor/editor-elements": "0.5.3",
-    "@elementor/editor-panels": "0.11.0",
-    "@elementor/editor-props": "0.9.1",
+    "@elementor/editor-controls": "0.12.0",
+    "@elementor/editor-elements": "0.5.4",
+    "@elementor/editor-panels": "0.11.1",
+    "@elementor/editor-props": "0.9.2",
     "@elementor/editor-responsive": "0.13.0",
-    "@elementor/editor-styles": "0.5.6",
-    "@elementor/editor-styles-repository": "0.7.1",
-    "@elementor/editor-ui": "0.3.0",
+    "@elementor/editor-styles": "0.5.7",
+    "@elementor/editor-styles-repository": "0.7.2",
+    "@elementor/editor-ui": "0.4.0",
     "@elementor/editor-v1-adapters": "0.10.0",
     "@elementor/icons": "1.31.0",
     "@elementor/locations": "0.7.6",

package/src/components/add-or-remove-content.tsx

@@ -4,6 +4,8 @@ import { ControlLabel } from '@elementor/editor-controls';
 import { MinusIcon, PlusIcon } from '@elementor/icons';
 import { Collapse, IconButton, Stack } from '@elementor/ui';
 
+import { SectionContent } from './section-content';
+
 const SIZE = 'tiny';
 
 type Props = {
@@ -15,7 +17,7 @@ type Props = {
 
 export const AddOrRemoveContent = ( { isAdded, label, onAdd, onRemove, children }: PropsWithChildren< Props > ) => {
 	return (
-		<Stack gap={ 1.5 }>
+		<SectionContent>
 			<Stack
 				direction="row"
 				sx={ {
@@ -35,8 +37,8 @@ export const AddOrRemoveContent = ( { isAdded, label, onAdd, onRemove, children
 				) }
 			</Stack>
 			<Collapse in={ isAdded } unmountOnExit>
-				<Stack gap={ 1.5 }>{ children }</Stack>
+				<SectionContent>{ children }</SectionContent>
 			</Collapse>
-		</Stack>
+		</SectionContent>
 	);
 };

package/src/components/collapsible-content.tsx

@@ -17,7 +17,7 @@ export const CollapsibleContent = ( { children, defaultOpen = false }: Collapsib
 	};
 
 	return (
-		<Stack sx={ { py: 0.5 } }>
+		<Stack>
 			<Button
 				fullWidth
 				size="small"
@@ -25,6 +25,7 @@ export const CollapsibleContent = ( { children, defaultOpen = false }: Collapsib
 				variant="outlined"
 				onClick={ handleToggle }
 				endIcon={ <CollapseIcon open={ open } /> }
+				sx={ { my: 0.5 } }
 			>
 				{ open ? __( 'Show less', 'elementor' ) : __( 'Show more', 'elementor' ) }
 			</Button>

package/src/components/css-classes/css-class-item.tsx

@@ -127,4 +127,6 @@ const validateLabel = ( newLabel: string ) => {
 	if ( stylesRepository.isLabelExist( newLabel ) ) {
 		return __( 'Existing name', 'elementor' );
 	}
+
+	return null;
 };

package/src/components/css-classes/css-class-selector.tsx

@@ -169,13 +169,8 @@ function useCreateActions( {
 				pushAppliedId( createdId );
 				setActiveId( createdId );
 			},
-			condition: ( options, inputValue ) => {
-				const isUniqueLabel = ! options.some(
-					( option ) => option.label.toLowerCase() === inputValue.toLowerCase()
-				);
-
-				return !! inputValue && isUniqueLabel;
-			},
+			condition: ( _, inputValue ) =>
+				stylesRepository.isLabelValid( inputValue ) && ! stylesRepository.isLabelExist( inputValue ),
 			// translators: %s is the singular label of css class provider (e.g "Global CSS Class").
 			group: __( 'Create New %s', 'elementor' ).replace( '%s', provider.labels?.singular ?? '' ),
 		};

package/src/components/panel-divider.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { Divider } from '@elementor/ui';
+
+export const PanelDivider = () => <Divider sx={ { my: 0.5 } } />;

package/src/components/popover-content.tsx

@@ -0,0 +1,15 @@
+import { type FC, type PropsWithChildren } from 'react';
+import * as React from 'react';
+import { Stack } from '@elementor/ui';
+
+type PopoverContentProps = PropsWithChildren< {
+	alignItems?: 'center';
+	gap?: number;
+	p?: 1.5 | 2 | 2.5;
+} >;
+
+export const PopoverContent: FC< PopoverContentProps > = ( { alignItems, gap = 1.5, p, children } ) => (
+	<Stack alignItems={ alignItems } gap={ gap } p={ p }>
+		{ children }
+	</Stack>
+);

package/src/components/section-content.tsx

@@ -0,0 +1,16 @@
+import { type FC, type PropsWithChildren } from 'react';
+import * as React from 'react';
+import { Stack } from '@elementor/ui';
+
+type SectionContentProps = PropsWithChildren< {
+	gap?: number;
+	sx?: {
+		pt?: number;
+	};
+} >;
+
+export const SectionContent: FC< SectionContentProps > = ( { gap = 2, sx, children } ) => (
+	<Stack gap={ gap } sx={ { ...sx } }>
+		{ children }
+	</Stack>
+);

package/src/components/style-sections/border-section/border-color-field.tsx

@@ -10,7 +10,7 @@ export const BorderColorField = () => {
 		<StylesField bind={ 'border-color' }>
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Border Color', 'elementor' ) }</ControlLabel>
+					<ControlLabel>{ __( 'Border color', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
 					<ColorControl />

package/src/components/style-sections/border-section/border-radius-field.tsx

@@ -21,14 +21,13 @@ const EndStartIcon = withDirection( RadiusBottomLeftIcon );
 const EndEndIcon = withDirection( RadiusBottomRightIcon );
 
 const getStartStartLabel = ( isSiteRtl: boolean ) =>
-	isSiteRtl ? __( 'Top Right', 'elementor' ) : __( 'Top Left', 'elementor' );
+	isSiteRtl ? __( 'Top right', 'elementor' ) : __( 'Top left', 'elementor' );
 const getStartEndLabel = ( isSiteRtl: boolean ) =>
-	isSiteRtl ? __( 'Top Left', 'elementor' ) : __( 'Top Right', 'elementor' );
+	isSiteRtl ? __( 'Top left', 'elementor' ) : __( 'Top right', 'elementor' );
 const getEndStartLabel = ( isSiteRtl: boolean ) =>
-	isSiteRtl ? __( 'Bottom Right', 'elementor' ) : __( 'Bottom Left', 'elementor' );
+	isSiteRtl ? __( 'Bottom right', 'elementor' ) : __( 'Bottom left', 'elementor' );
 const getEndEndLabel = ( isSiteRtl: boolean ) =>
-	isSiteRtl ? __( 'Bottom Left', 'elementor' ) : __( 'Bottom Right', 'elementor' );
-
+	isSiteRtl ? __( 'Bottom left', 'elementor' ) : __( 'Bottom right', 'elementor' );
 const getCorners = ( isSiteRtl: boolean ): EqualUnequalItems => [
 	{
 		label: getStartStartLabel( isSiteRtl ),
@@ -59,7 +58,7 @@ export const BorderRadiusField = () => {
 		<StylesField bind={ 'border-radius' }>
 			<EqualUnequalSizesControl
 				items={ getCorners( isSiteRtl ) }
-				label={ __( 'Border Radius', 'elementor' ) }
+				label={ __( 'Border radius', 'elementor' ) }
 				icon={ <BorderCornersIcon fontSize={ 'tiny' } /> }
 				multiSizePropTypeUtil={ borderRadiusPropTypeUtil }
 			/>

package/src/components/style-sections/border-section/border-section.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
-import { Divider, Stack } from '@elementor/ui';
 
+import { PanelDivider } from '../../panel-divider';
+import { SectionContent } from '../../section-content';
 import { BorderField } from './border-field';
 import { BorderRadiusField } from './border-radius-field';
 
 export const BorderSection = () => (
-	<Stack gap={ 1.5 }>
+	<SectionContent>
 		<BorderRadiusField />
-		<Divider />
+		<PanelDivider />
 		<BorderField />
-	</Stack>
+	</SectionContent>
 );

package/src/components/style-sections/border-section/border-style-field.tsx

@@ -21,9 +21,9 @@ export const BorderStyleField = () => {
 		<StylesField bind={ 'border-style' }>
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Border Type', 'elementor' ) }</ControlLabel>
+					<ControlLabel>{ __( 'Border type', 'elementor' ) }</ControlLabel>
 				</Grid>
-				<Grid item xs={ 6 }>
+				<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
 					<SelectControl options={ borderStyles } />
 				</Grid>
 			</Grid>

package/src/components/style-sections/border-section/border-width-field.tsx

@@ -34,7 +34,7 @@ export const BorderWidthField = () => {
 		<StylesField bind={ 'border-width' }>
 			<EqualUnequalSizesControl
 				items={ edges }
-				label={ __( 'Border Width', 'elementor' ) }
+				label={ __( 'Border width', 'elementor' ) }
 				icon={ <SideAllIcon fontSize={ 'tiny' } /> }
 				multiSizePropTypeUtil={ borderWidthPropTypeUtil }
 			/>

package/src/components/style-sections/effects-section/effects-section.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { BoxShadowRepeaterControl } from '@elementor/editor-controls';
-import { Stack } from '@elementor/ui';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { SectionContent } from '../../section-content';
 
 export const EffectsSection = () => {
 	return (
-		<Stack gap={ 1.5 }>
+		<SectionContent>
 			<StylesField bind="box-shadow">
 				<BoxShadowRepeaterControl />
 			</StylesField>
-		</Stack>
+		</SectionContent>
 	);
 };

package/src/components/style-sections/layout-section/flex-order-field.tsx

@@ -8,12 +8,13 @@ import {
 } from '@elementor/editor-controls';
 import { type NumberPropValue } from '@elementor/editor-props';
 import { ArrowDownSmallIcon, ArrowUpSmallIcon, PencilIcon } from '@elementor/icons';
-import { DirectionProvider, Grid, Stack, ThemeProvider } from '@elementor/ui';
+import { DirectionProvider, Grid, ThemeProvider } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
 import { useStylesField } from '../../../hooks/use-styles-field';
+import { SectionContent } from '../../section-content';
 
 type GroupControlItemOption = 'first' | 'last' | 'custom';
 
@@ -70,7 +71,7 @@ export const FlexOrderField = () => {
 	return (
 		<DirectionProvider rtl={ isSiteRtl }>
 			<ThemeProvider>
-				<Stack gap={ 2 }>
+				<SectionContent>
 					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 						<Grid item xs={ 6 }>
 							<ControlLabel>{ __( 'Order', 'elementor' ) }</ControlLabel>
@@ -101,7 +102,7 @@ export const FlexOrderField = () => {
 							</Grid>
 						</StylesField>
 					) }
-				</Stack>
+				</SectionContent>
 			</ThemeProvider>
 		</DirectionProvider>
 	);

package/src/components/style-sections/layout-section/flex-size-field.tsx

@@ -9,12 +9,13 @@ import {
 } from '@elementor/editor-controls';
 import type { NumberPropValue, SizePropValue } from '@elementor/editor-props';
 import { ExpandIcon, PencilIcon, ShrinkIcon } from '@elementor/icons';
-import { DirectionProvider, Grid, Stack, ThemeProvider } from '@elementor/ui';
+import { DirectionProvider, Grid, ThemeProvider } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
 import { useStylesField } from '../../../hooks/use-styles-field';
+import { SectionContent } from '../../section-content';
 
 type GroupItem = 'flex-grow' | 'flex-shrink' | 'custom';
 
@@ -79,7 +80,7 @@ export const FlexSizeField = () => {
 	return (
 		<DirectionProvider rtl={ isSiteRtl }>
 			<ThemeProvider>
-				<Stack gap={ 2 }>
+				<SectionContent>
 					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 						<Grid item xs={ 6 }>
 							<ControlLabel>{ __( 'Size', 'elementor' ) }</ControlLabel>
@@ -95,7 +96,7 @@ export const FlexSizeField = () => {
 					</Grid>
 
 					{ 'custom' === activeGroup && <FlexCustomField /> }
-				</Stack>
+				</SectionContent>
 			</ThemeProvider>
 		</DirectionProvider>
 	);

package/src/components/style-sections/layout-section/layout-section.tsx

@@ -2,12 +2,13 @@ import * as React from 'react';
 import { ControlLabel } from '@elementor/editor-controls';
 import { useParentElement } from '@elementor/editor-elements';
 import { type StringPropValue } from '@elementor/editor-props';
-import { Divider, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useElement } from '../../../contexts/element-context';
 import { useComputedStyle } from '../../../hooks/use-computed-style';
 import { useStylesField } from '../../../hooks/use-styles-field';
+import { PanelDivider } from '../../panel-divider';
+import { SectionContent } from '../../section-content';
 import { AlignItemsField } from './align-items-field';
 import { AlignSelfChild } from './align-self-child-field';
 import { DisplayField } from './display-field';
@@ -25,11 +26,11 @@ export const LayoutSection = () => {
 	const parentStyle = useComputedStyle( parent?.id || null );
 
 	return (
-		<Stack gap={ 2 }>
+		<SectionContent>
 			<DisplayField />
 			{ 'flex' === display?.value && <FlexFields /> }
 			{ 'flex' === parentStyle?.display && <FlexChildFields /> }
-		</Stack>
+		</SectionContent>
 	);
 };
 
@@ -38,7 +39,7 @@ const FlexFields = () => (
 		<FlexDirectionField />
 		<JustifyContentField />
 		<AlignItemsField />
-		<Divider />
+		<PanelDivider />
 		<GapControlField />
 		<WrapField />
 	</>
@@ -46,7 +47,7 @@ const FlexFields = () => (
 
 const FlexChildFields = () => (
 	<>
-		<Divider />
+		<PanelDivider />
 		<ControlLabel>{ __( 'Flex child', 'elementor' ) }</ControlLabel>
 		<AlignSelfChild />
 		<FlexOrderField />

package/src/components/style-sections/position-section/position-field.tsx

@@ -24,7 +24,7 @@ export const PositionField = ( { onChange }: Props ) => {
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Position', 'elementor' ) }</ControlLabel>
 				</Grid>
-				<Grid item xs={ 6 }>
+				<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
 					<SelectControl options={ positionOptions } onChange={ onChange } />
 				</Grid>
 			</Grid>

package/src/components/style-sections/position-section/position-section.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { type StringPropValue } from '@elementor/editor-props';
 import { useSessionStorage } from '@elementor/session';
-import { Stack } from '@elementor/ui';
 
 import { useStyle } from '../../../contexts/style-context';
 import { useStylesField } from '../../../hooks/use-styles-field';
 import { useStylesFields } from '../../../hooks/use-styles-fields';
+import { SectionContent } from '../../section-content';
 import { DimensionsField } from './dimensions-field';
 import { PositionField } from './position-field';
 import { ZIndexField } from './z-index-field';
@@ -58,7 +58,7 @@ export const PositionSection = () => {
 	const isNotStatic = positionValue && positionValue?.value !== 'static';
 
 	return (
-		<Stack gap={ 1.5 }>
+		<SectionContent>
 			<PositionField onChange={ onPositionChange } />
 			{ isNotStatic ? (
 				<>
@@ -66,7 +66,7 @@ export const PositionSection = () => {
 					<ZIndexField />
 				</>
 			) : null }
-		</Stack>
+		</SectionContent>
 	);
 };
 

package/src/components/style-sections/size-section/overflow-field.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
-import { ExpandBottomIcon, EyeIcon, EyeOffIcon } from '@elementor/icons';
+import { EyeIcon, EyeOffIcon, LetterAIcon } from '@elementor/icons';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -24,7 +24,7 @@ const options: ToggleButtonGroupItem< Overflows >[] = [
 	{
 		value: 'auto',
 		label: __( 'Auto', 'elementor' ),
-		renderContent: ( { size } ) => <ExpandBottomIcon fontSize={ size } />,
+		renderContent: ( { size } ) => <LetterAIcon fontSize={ size } />,
 		showTooltip: true,
 	},
 ];

package/src/components/style-sections/size-section/size-section.tsx

@@ -1,14 +1,16 @@
 import * as React from 'react';
 import { ControlLabel, SizeControl } from '@elementor/editor-controls';
-import { Divider, Grid, Stack } from '@elementor/ui';
+import { Grid, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField, type StylesFieldProps } from '../../../controls-registry/styles-field';
+import { PanelDivider } from '../../panel-divider';
+import { SectionContent } from '../../section-content';
 import { OverflowField } from './overflow-field';
 
 export const SizeSection = () => {
 	return (
-		<Stack gap={ 1.5 }>
+		<SectionContent>
 			<Grid container gap={ 2 } flexWrap="nowrap">
 				<Grid item xs={ 6 }>
 					<SizeField bind="width" label={ __( 'Width', 'elementor' ) } />
@@ -19,25 +21,25 @@ export const SizeSection = () => {
 			</Grid>
 			<Grid container gap={ 2 } flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<SizeField bind="min-width" label={ __( 'Min. Width', 'elementor' ) } />
+					<SizeField bind="min-width" label={ __( 'Min. width', 'elementor' ) } />
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeField bind="min-height" label={ __( 'Min. Height', 'elementor' ) } />
+					<SizeField bind="min-height" label={ __( 'Min. height', 'elementor' ) } />
 				</Grid>
 			</Grid>
 			<Grid container gap={ 2 } flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<SizeField bind="max-width" label={ __( 'Max. Width', 'elementor' ) } />
+					<SizeField bind="max-width" label={ __( 'Max. width', 'elementor' ) } />
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeField bind="max-height" label={ __( 'Max. Height', 'elementor' ) } />
+					<SizeField bind="max-height" label={ __( 'Max. height', 'elementor' ) } />
 				</Grid>
 			</Grid>
-			<Divider />
+			<PanelDivider />
 			<Stack>
 				<OverflowField />
 			</Stack>
-		</Stack>
+		</SectionContent>
 	);
 };
 

package/src/components/style-sections/spacing-section/spacing-section.tsx

@@ -1,20 +1,21 @@
 import * as React from 'react';
 import { LinkedDimensionsControl } from '@elementor/editor-controls';
-import { Divider, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { PanelDivider } from '../../panel-divider';
+import { SectionContent } from '../../section-content';
 
 export const SpacingSection = () => {
 	return (
-		<Stack gap={ 1.5 }>
+		<SectionContent>
 			<StylesField bind={ 'padding' }>
 				<LinkedDimensionsControl label={ __( 'Padding', 'elementor' ) } />
 			</StylesField>
-			<Divider />
+			<PanelDivider />
 			<StylesField bind={ 'margin' }>
 				<LinkedDimensionsControl label={ __( 'Margin', 'elementor' ) } />
 			</StylesField>
-		</Stack>
+		</SectionContent>
 	);
 };

package/src/components/style-sections/typography-section/font-family-field.tsx

@@ -17,9 +17,9 @@ export const FontFamilyField = () => {
 		<StylesField bind="font-family">
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Font Family', 'elementor' ) }</ControlLabel>
+					<ControlLabel>{ __( 'Font family', 'elementor' ) }</ControlLabel>
 				</Grid>
-				<Grid item xs={ 6 }>
+				<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
 					<FontFamilyControl fontFamilies={ fontFamilies } />
 				</Grid>
 			</Grid>

package/src/components/style-sections/typography-section/font-size-field.tsx

@@ -10,7 +10,7 @@ export const FontSizeField = () => {
 		<StylesField bind="font-size">
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Font Size', 'elementor' ) }</ControlLabel>
+					<ControlLabel>{ __( 'Font size', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
 					<SizeControl />

package/src/components/style-sections/typography-section/font-style-field.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { ItalicIcon, MinusIcon } from '@elementor/icons';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+
+type FontStyle = 'normal' | 'italic';
+const options: ToggleButtonGroupItem< FontStyle >[] = [
+	{
+		value: 'normal',
+		label: __( 'Normal', 'elementor' ),
+		renderContent: ( { size } ) => <MinusIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'italic',
+		label: __( 'Italic', 'elementor' ),
+		renderContent: ( { size } ) => <ItalicIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+];
+
+export const FontStyleField = () => (
+	<StylesField bind="font-style">
+		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid item xs={ 6 }>
+				<ControlLabel>{ __( 'Font Style', 'elementor' ) }</ControlLabel>
+			</Grid>
+			<Grid item xs={ 6 } display="flex" justifyContent="end">
+				<ToggleControl options={ options } />
+			</Grid>
+		</Grid>
+	</StylesField>
+);

package/src/components/style-sections/typography-section/font-weight-field.tsx

@@ -22,9 +22,9 @@ export const FontWeightField = () => {
 		<StylesField bind="font-weight">
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Font Weight', 'elementor' ) }</ControlLabel>
+					<ControlLabel>{ __( 'Font weight', 'elementor' ) }</ControlLabel>
 				</Grid>
-				<Grid item xs={ 6 }>
+				<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
 					<SelectControl options={ fontWeightOptions } />
 				</Grid>
 			</Grid>

package/src/components/style-sections/typography-section/letter-spacing-field.tsx

@@ -10,7 +10,7 @@ export const LetterSpacingField = () => {
 		<StylesField bind="letter-spacing">
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Letter Spacing', 'elementor' ) }</ControlLabel>
+					<ControlLabel>{ __( 'Letter spacing', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
 					<SizeControl />

package/src/components/style-sections/typography-section/line-height-field.tsx

@@ -10,7 +10,7 @@ export const LineHeightField = () => {
 		<StylesField bind="line-height">
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Line Height', 'elementor' ) }</ControlLabel>
+					<ControlLabel>{ __( 'Line height', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
 					<SizeControl />

package/src/components/style-sections/typography-section/text-color-field.tsx

@@ -10,7 +10,7 @@ export const TextColorField = () => {
 		<StylesField bind="color">
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Text Color', 'elementor' ) }</ControlLabel>
+					<ControlLabel>{ __( 'Text color', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
 					<ColorControl />