Components: Assess stabilization of BoxControl

packages/components/CHANGELOG.md

@@ -2,11 +2,16 @@
 
 ## Unreleased
 
+### Deprecation
+
+-   `BoxControl`: Remove "experimental" designation ([#60921](https://github.com/WordPress/gutenberg/pull/60921)).
+
 ## 27.4.0 (2024-04-19)
 
 ### Deprecation
 
 -   `Navigation`: Soft deprecate component ([#59182](https://github.com/WordPress/gutenberg/pull/59182)).
+-   `BoxControl`: Remove "experimental" designation ([#60921](https://github.com/WordPress/gutenberg/pull/60921)).
 
 ### Enhancements
 

packages/components/src/box-control/README.md

@@ -1,16 +1,12 @@
 # BoxControl
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
 BoxControl components let users set values for Top, Right, Bottom, and Left. This can be used as an input control for values like `padding` or `margin`.
 
 ## Usage
 
 ```jsx
 import { useState } from 'react';
-import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
+import { BoxControl } from '@wordpress/components';
 
 const Example = () => {
 	const [ values, setValues ] = useState( {

packages/components/src/box-control/index.tsx

@@ -51,7 +51,7 @@ function useUniqueId( idProp?: string ) {
  * This can be used as an input control for values like `padding` or `margin`.
  *
  * ```jsx
- * import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
+ * import { BoxControl } from '@wordpress/components';
  * import { useState } from '@wordpress/element';
  *
  * const Example = () => {

packages/components/src/box-control/stories/index.story.tsx

@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import BoxControl from '../';
 
 const meta: Meta< typeof BoxControl > = {
-	title: 'Components (Experimental)/BoxControl',
+	title: 'Components/BoxControl',
 	component: BoxControl,
 	argTypes: {
 		values: { control: { type: null } },

packages/components/src/index.ts

@@ -36,8 +36,12 @@ export {
 } from './border-box-control';
 export { BorderControl as __experimentalBorderControl } from './border-control';
 export {
+	/**
+	 * @deprecated Import `BoxControl` instead.
+	 */
 	default as __experimentalBoxControl,
 	applyValueToSides as __experimentalApplyValueToSides,
+	default as BoxControl,
 } from './box-control';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './button-group';

packages/components/src/tools-panel/tools-panel/README.md

@@ -60,7 +60,7 @@ import styled from '@emotion/styled';
  * WordPress dependencies
  */
 import {
-	__experimentalBoxControl as BoxControl,
+	BoxControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUnitControl as UnitControl,

storybook/manager-head.html

@@ -1,6 +1,9 @@
 <script>
 	( function redirectIfStoryMoved() {
-		const PREVIOUSLY_EXPERIMENTAL_COMPONENTS = [ 'navigation' ];
+		const PREVIOUSLY_EXPERIMENTAL_COMPONENTS = [
+			'navigation',
+			'boxcontrol',
+		];
 		const REDIRECTS = [
 			{
 				from: /\/components-deprecated-/,