Have the degree symbol on the right for both RTL/LTR

WordPress · Mar 13, 2023 · de51103 · de51103
1 parent f20d615
commit de51103
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 16 deletions.
diff --git a/packages/components/src/angle-picker-control/index.tsx b/packages/components/src/angle-picker-control/index.tsx
@@ -9,18 +9,14 @@ import classnames from 'classnames';
  */
 import deprecated from '@wordpress/deprecated';
 import { forwardRef, useRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { isRTL, __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import NumberControl from '../number-control';
 import AngleCircle from './angle-circle';
-import { Root } from './styles/angle-picker-control-styles';
-import { space } from '../ui/utils/space';
-import { Text } from '../text';
-import { Spacer } from '../spacer';
-import { COLORS } from '../utils/colors-values';
+import { Root, UnitText } from './styles/angle-picker-control-styles';
 
 import type { WordPressComponentProps } from '../ui/context';
 import type { AnglePickerControlProps } from './types';
@@ -65,6 +61,11 @@ function UnforwardedAnglePickerControl(
 
 	const refNumberInput = useRef();
 
+	const unitText = <UnitText>°</UnitText>;
+	const [ prefixedUnitText, suffixedUnitText ] = isRTL()
+		? [ unitText, null ]
+		: [ null, unitText ];
+
 	return (
 		<Root
 			{ ...restProps }
@@ -83,18 +84,10 @@ function UnforwardedAnglePickerControl(
 				step="1"
 				value={ value }
 				spinControls="none"
+				prefix={ prefixedUnitText }
 				suffix={
 					<>
-						<Spacer
-							as={ Text }
-							marginBottom={ 0 }
-							marginRight={ space( 2 ) }
-							style={ {
-								color: COLORS.ui.theme,
-							} }
-						>
-							°
-						</Spacer>
+						{ suffixedUnitText }
 						<AngleCircle
 							refNumberInput={ refNumberInput }
 							aria-hidden="true"

diff --git a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx
@@ -4,12 +4,18 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
+/**
+ * WordPress dependencies
+ */
+import { isRTL } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
 import { Flex } from '../../flex';
 import { COLORS } from '../../utils';
 import { space } from '../../ui/utils/space';
+import { Text } from '../../text';
 import CONFIG from '../../utils/config-values';
 
 import type { AnglePickerControlProps } from '../types';
@@ -75,3 +81,8 @@ export const CircleIndicator = styled.div`
 	width: ${ LINE_WEIGHT }px;
 	height: calc( 50% + ${ LINE_WEIGHT / 2 }px );
 `;
+
+export const UnitText = styled( Text )`
+	color: ${ COLORS.ui.theme };
+	margin-right: ${ isRTL() ? space( 3 ) : space( 2 ) };
+`;