AnglePickerColor: migrate Emotion to style.module

Author: jsnajdr

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -7,11 +12,7 @@ import { __experimentalUseDragging as useDragging } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import {
-	CircleRoot,
-	CircleIndicatorWrapper,
-	CircleIndicator,
-} from './styles/angle-picker-control-styles';
+import styles from './style.module.scss';
 
 import type { WordPressComponentProps } from '../context';
 import type { AngleCircleProps } from './types';
@@ -25,6 +26,7 @@ type UseDraggingCallbackEvent =
 function AngleCircle( {
 	value,
 	onChange,
+	className,
 	...props
 }: WordPressComponentProps< AngleCircleProps, 'div' > ) {
 	const angleCircleRef = useRef< HTMLDivElement | null >( null );
@@ -89,22 +91,23 @@ function AngleCircle( {
 	}, [ isDragging ] );
 
 	return (
-		<CircleRoot
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div
 			ref={ angleCircleRef }
 			onMouseDown={ startDrag }
-			className="components-angle-picker-control__angle-circle"
+			className={ clsx( styles[ 'circle-root' ], className ) }
 			{ ...props }
 		>
-			<CircleIndicatorWrapper
+			<div
 				style={
 					value ? { transform: `rotate(${ value }deg)` } : undefined
 				}
-				className="components-angle-picker-control__angle-circle-indicator-wrapper"
+				className={ styles[ 'circle-indicator-wrapper' ] }
 				tabIndex={ -1 }
 			>
-				<CircleIndicator className="components-angle-picker-control__angle-circle-indicator" />
-			</CircleIndicatorWrapper>
-		</CircleRoot>
+				<div className={ styles[ 'circle-indicator' ] } />
+			</div>
+		</div>
 	);
 }
 

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

@@ -16,8 +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 AngleCircle from './angle-circle';
-import { UnitText } from './styles/angle-picker-control-styles';
+import styles from './style.module.scss';
 
 import type { WordPressComponentProps } from '../context';
 import type { AnglePickerControlProps } from './types';
@@ -48,7 +49,7 @@ function UnforwardedAnglePickerControl(
 
 	const classes = clsx( 'components-angle-picker-control', className );
 
-	const unitText = <UnitText>°</UnitText>;
+	const unitText = <Text className={ styles[ 'unit-text' ] }>°</Text>;
 	const [ prefixedUnitText, suffixedUnitText ] = isRTL()
 		? [ unitText, null ]
 		: [ null, unitText ];

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

@@ -0,0 +1,46 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "../utils/theme-variables" as *;
+
+.circle-root {
+	border-radius: $radius-round;
+	border: $border-width solid $components-color-border;
+	box-sizing: border-box;
+	cursor: grab;
+	height: 32px;
+	overflow: hidden;
+	width: 32px;
+
+	&:active {
+		cursor: grabbing;
+	}
+}
+
+.circle-indicator-wrapper {
+	box-sizing: border-box;
+	position: relative;
+	width: 100%;
+	height: 100%;
+
+	&:focus-visible {
+		outline: none;
+	}
+}
+
+.circle-indicator {
+	background: $components-color-accent;
+	border-radius: $radius-round;
+	box-sizing: border-box;
+	display: block;
+	left: 50%;
+	top: 4px;
+	transform: translateX(-50%);
+	position: absolute;
+	width: 6px;
+	height: 6px;
+}
+
+.unit-text {
+	color: $components-color-accent;
+	margin-right: 12px;
+}
+