Stabilize and document the angle picker component.

docs/manifest-devhub.json

@@ -587,6 +587,12 @@
 		"markdown_source": "../packages/components/README.md",
 		"parent": null
 	},
+	{
+		"title": "AnglePickerControl",
+		"slug": "angle-picker-control",
+		"markdown_source": "../packages/components/src/angle-picker-control/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "Animate",
 		"slug": "animate",

docs/manifest.json

@@ -587,6 +587,12 @@
 		"markdown_source": "../packages/components/README.md",
 		"parent": null
 	},
+	{
+		"title": "AnglePickerControl",
+		"slug": "angle-picker-control",
+		"markdown_source": "../packages/components/src/angle-picker-control/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "Animate",
 		"slug": "animate",

packages/components/src/angle-picker-control/README.md

@@ -0,0 +1,40 @@
+# AnglePickerControl
+
+AnglePickerControl is a React component to render a UI that allows users to pick an angle.
+Users can choose an angle in a visual UI with the mouse by dragging an angle indicator inside a circle or by directly inserting the desired angle in a text field.
+
+## Usage
+
+
+```jsx
+import { useState } from '@wordpress/element';
+import { AnglePickerControl } from '@wordpress/components';
+
+const MyAnglePicker = () => {
+	const [ angle, setAngle ] = useState();
+	return <AnglePickerControl value={ angle } onChange={ setAngle } />;
+};
+```
+
+## Props
+
+The component accepts the following props.
+
+### label
+
+Label to use for the angle picker. If not set the a translated label "Angle" is used.
+
+- Type: `String`
+- Required: No
+
+### value
+The current value of the input. The value represents an angle in degrees and should be a value between 0 and 360.
+
+- Type: `Number`
+- Required: Yes
+
+### onChange
+A function that receives the new value of the input.
+
+- Type: `function`
+- Required: Yes

packages/components/src/angle-picker/index.js → packages/components/src/angle-picker-control/index.js

@@ -55,43 +55,43 @@ const AngleCircle = ( { value, onChange, ...props } ) => {
 		<div
 			ref={ angleCircleRef }
 			onMouseDown={ startDrag }
-			className="components-angle-picker__angle-circle"
+			className="components-angle-picker-control__angle-circle"
 			style={ isDragging ? { cursor: 'grabbing' } : undefined }
 			{ ...props }
 		>
 			<div
 				style={
 					value ? { transform: `rotate(${ value }deg)` } : undefined
 				}
-				className="components-angle-picker__angle-circle-indicator-wrapper"
+				className="components-angle-picker-control__angle-circle-indicator-wrapper"
 			>
-				<span className="components-angle-picker__angle-circle-indicator" />
+				<span className="components-angle-picker-control__angle-circle-indicator" />
 			</div>
 		</div>
 		/* eslint-enable jsx-a11y/no-static-element-interactions */
 	);
 };
 
-export default function AnglePicker( {
+export default function AnglePickerControl( {
 	value,
 	onChange,
 	label = __( 'Angle' ),
 } ) {
-	const instanceId = useInstanceId( AnglePicker );
-	const inputId = `components-angle-picker__input-${ instanceId }`;
+	const instanceId = useInstanceId( AnglePickerControl );
+	const inputId = `components-angle-picker-control__input-${ instanceId }`;
 	return (
 		<BaseControl
 			label={ label }
 			id={ inputId }
-			className="components-angle-picker"
+			className="components-angle-picker-control"
 		>
 			<AngleCircle
 				value={ value }
 				onChange={ onChange }
 				aria-hidden="true"
 			/>
 			<input
-				className="components-angle-picker__input-field"
+				className="components-angle-picker-control__input-field"
 				type="number"
 				id={ inputId }
 				onChange={ ( event ) => {

packages/components/src/angle-picker/stories/index.js → packages/components/src/angle-picker-control/stories/index.js

@@ -6,13 +6,16 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import AnglePicker from '../';
+import AnglePickerControl from '../';
 
-export default { title: 'Components|AnglePicker', component: AnglePicker };
+export default {
+	title: 'Components|AnglePickerControl',
+	component: AnglePickerControl,
+};
 
 const AnglePickerWithState = () => {
 	const [ angle, setAngle ] = useState();
-	return <AnglePicker value={ angle } onChange={ setAngle } />;
+	return <AnglePickerControl value={ angle } onChange={ setAngle } />;
 };
 
 export const _default = () => {

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

@@ -1,16 +1,16 @@
-.components-angle-picker {
+.components-angle-picker-control {
 	width: 50%;
 	&.components-base-control .components-base-control__label {
 		display: block;
 	}
 }
 
-.components-angle-picker__input-field {
+.components-angle-picker-control__input-field {
 	width: calc(100% - #{$icon-button-size});
 	max-width: 100px;
 }
 
-.components-angle-picker__angle-circle {
+.components-angle-picker-control__angle-circle {
 	width: $icon-button-size - ( 2 * $grid-size-small );
 	height: $icon-button-size - ( 2 * $grid-size-small );
 	border: 2px solid $dark-gray-500;
@@ -20,13 +20,13 @@
 	cursor: grab;
 }
 
-.components-angle-picker__angle-circle-indicator-wrapper {
+.components-angle-picker-control__angle-circle-indicator-wrapper {
 	position: relative;
 	width: 100%;
 	height: 100%;
 }
 
-.components-angle-picker__angle-circle-indicator {
+.components-angle-picker-control__angle-circle-indicator {
 	width: 1px;
 	height: 1px;
 	border-radius: 50%;

packages/components/src/custom-gradient-picker/index.js

@@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import AnglePicker from '../angle-picker';
+import AnglePickerControl from '../angle-picker-control';
 import { LinearGradientIcon, RadialGradientIcon } from './icons';
 import CustomGradientBar from './custom-gradient-bar';
 import BaseControl from '../base-control';
@@ -41,7 +41,7 @@ const GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {
 		);
 	};
 	return (
-		<AnglePicker
+		<AnglePickerControl
 			value={ hasGradient ? angle : '' }
 			onChange={ onAngleChange }
 		/>

packages/components/src/index.js

@@ -12,7 +12,7 @@ export {
 
 // Components
 export { default as Animate } from './animate';
-export { default as __experimentalAnglePicker } from './angle-picker';
+export { default as AnglePickerControl } from './angle-picker-control';
 export { default as Autocomplete } from './autocomplete';
 export { default as BaseControl } from './base-control';
 export { default as Button } from './button';

packages/components/src/style.scss

@@ -1,5 +1,5 @@
 @import "./animate/style.scss";
-@import "./angle-picker/style.scss";
+@import "./angle-picker-control/style.scss";
 @import "./autocomplete/style.scss";
 @import "./base-control/style.scss";
 @import "./button-group/style.scss";

storybook/test/__snapshots__/index.js.snap

@@ -5627,35 +5627,35 @@ Array [
 ]
 `;
 
-exports[`Storyshots Components|AnglePicker Default 1`] = `
+exports[`Storyshots Components|AnglePickerControl Default 1`] = `
 <div
-  className="components-base-control components-angle-picker"
+  className="components-base-control components-angle-picker-control"
 >
   <div
     className="components-base-control__field"
   >
     <label
       className="components-base-control__label"
-      htmlFor="components-angle-picker__input-0"
+      htmlFor="components-angle-picker-control__input-0"
     >
       Angle
     </label>
     <div
       aria-hidden="true"
-      className="components-angle-picker__angle-circle"
+      className="components-angle-picker-control__angle-circle"
       onMouseDown={[Function]}
     >
       <div
-        className="components-angle-picker__angle-circle-indicator-wrapper"
+        className="components-angle-picker-control__angle-circle-indicator-wrapper"
       >
         <span
-          className="components-angle-picker__angle-circle-indicator"
+          className="components-angle-picker-control__angle-circle-indicator"
         />
       </div>
     </div>
     <input
-      className="components-angle-picker__input-field"
-      id="components-angle-picker__input-0"
+      className="components-angle-picker-control__input-field"
+      id="components-angle-picker-control__input-0"
       max={360}
       min={0}
       onChange={[Function]}