Simplify degree suffix

Author: mirka

packages/components/src/angle-picker-control/index.tsx

@@ -16,9 +16,9 @@ import { isRTL, __ } from '@wordpress/i18n';
 import { Flex, FlexBlock } from '../flex';
 import { Spacer } from '../spacer';
 import NumberControl from '../number-control';
-import { Text } from '../text';
+import InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';
+import InputControlSuffixWrapper from '../input-control/input-suffix-wrapper';
 import AngleCircle from './angle-circle';
-import styles from './style.module.scss';
 
 import type { WordPressComponentProps } from '../context';
 import type { AnglePickerControlProps } from './types';
@@ -49,10 +49,9 @@ function UnforwardedAnglePickerControl(
 
 	const classes = clsx( 'components-angle-picker-control', className );
 
-	const unitText = <Text className={ styles[ 'unit-text' ] }>°</Text>;
-	const [ prefixedUnitText, suffixedUnitText ] = isRTL()
-		? [ unitText, null ]
-		: [ null, unitText ];
+	const prefixOrSuffixProp = isRTL()
+		? { prefix: <InputControlPrefixWrapper>°</InputControlPrefixWrapper> }
+		: { suffix: <InputControlSuffixWrapper>°</InputControlSuffixWrapper> };
 
 	return (
 		<Flex { ...restProps } ref={ ref } className={ classes } gap={ 2 }>
@@ -67,8 +66,7 @@ function UnforwardedAnglePickerControl(
 					step="1"
 					value={ value }
 					spinControls="none"
-					prefix={ prefixedUnitText }
-					suffix={ suffixedUnitText }
+					{ ...prefixOrSuffixProp }
 				/>
 			</FlexBlock>
 			<Spacer marginBottom="1" marginTop="auto">

packages/components/src/angle-picker-control/style.module.scss

@@ -38,9 +38,3 @@
 	width: 6px;
 	height: 6px;
 }
-
-.unit-text {
-	color: $components-color-accent;
-	margin-right: $grid-unit-15;
-}
-