WordPress · fullofcaffeine · Apr 18, 2024 · Apr 18, 2024 · Apr 18, 2024 · Apr 18, 2024
@@ -1,16 +1,12 @@
 # AlignmentMatrixControl
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
 AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
 
 ## Usage
 
 ```jsx
 import { useState } from 'react';
-import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
+import { AlignmentMatrixControl } from '@wordpress/components';
 
 const Example = () => {
 	const [ alignment, setAlignment ] = useState( 'center center' );

@@ -25,7 +25,7 @@ import type { AlignmentMatrixControlProps } from './types';
  * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
  *
  * ```jsx
- * import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
+ * import { AlignmentMatrixControl } from '@wordpress/components';
  * import { useState } from '@wordpress/element';
  *
  * const Example = () => {

@@ -17,7 +17,7 @@ import { HStack } from '../../h-stack';
 import type { AlignmentMatrixControlProps } from '../types';
 
 const meta: Meta< typeof AlignmentMatrixControl > = {
-	title: 'Components (Experimental)/AlignmentMatrixControl',
+	title: 'Components/AlignmentMatrixControl',
 	component: AlignmentMatrixControl,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170

@@ -1,10 +1,5 @@
 # BorderBoxControl
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-<br />
-
 This component provides users with the ability to configure a single "flat"
 border or separate borders per side.
 
@@ -28,7 +23,7 @@ show "Mixed" placeholder text.
 
 ```jsx
 import { useState } from 'react';
-import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
+import { BorderBoxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 const colors = [

@@ -162,7 +162,7 @@ const UnconnectedBorderBoxControl = (
  * view's width input would show "Mixed" placeholder text.
  *
  * ```jsx
- * import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
+ * import { BorderBoxControl } from '@wordpress/components';
  * import { __ } from '@wordpress/i18n';
  *
  * const colors = [

@@ -16,7 +16,7 @@ import Button from '../../button';
 import { BorderBoxControl } from '../';
 
 const meta: Meta< typeof BorderBoxControl > = {
-	title: 'Components (Experimental)/BorderBoxControl',
+	title: 'Components/BorderBoxControl',
 	component: BorderBoxControl,
 	argTypes: {
 		onChange: { action: 'onChange' },

@@ -1,9 +1,5 @@
 #  BorderControl
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-<br />
 This component provides control over a border's color, style, and width.
 
 ## Development guidelines
@@ -21,7 +17,7 @@ a "shape" abstraction.
 
 ```jsx
 import { useState } from 'react';
-import { __experimentalBorderControl as BorderControl } from '@wordpress/components';
+import { BorderControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 const colors = [

@@ -134,7 +134,7 @@ const UnconnectedBorderControl = (
  * a "shape" abstraction.
  *
  * ```jsx
- * import { __experimentalBorderControl as BorderControl } from '@wordpress/components';
+ * import { BorderControl } from '@wordpress/components';
  * import { __ } from '@wordpress/i18n';
  *
  * const colors = [

@@ -16,7 +16,7 @@ import { BorderControl } from '..';
 import type { Border } from '../types';
 
 const meta: Meta< typeof BorderControl > = {
-	title: 'Components (Experimental)/BorderControl',
+	title: 'Components/BorderControl',
 	component: BorderControl,
 	argTypes: {
 		onChange: {

@@ -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( {

@@ -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 = () => {

@@ -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 } },

@@ -12,8 +12,8 @@ import {
 	CardHeader,
 	CardBody,
 	CardFooter,
-	__experimentalText as Text,
-	__experimentalHeading as Heading,
+	Text,
+	Heading,
 } from '@wordpress/components';
 
 function Example() {

@@ -85,8 +85,8 @@ function UnconnectedCard(
  *   CardHeader,
  *   CardBody,
  *   CardFooter,
- *   __experimentalText as Text,
- *   __experimentalHeading as Heading,
+ *   Text,
+ *   Heading,
  * } from `@wordpress/components`;
  *
  * function Example() {

@@ -1,9 +1,5 @@
 # `ConfirmDialog`
 
-<div class="callout callout-alert">
-This feature is still experimental. "Experimental" means this is an early implementation subject to drastic and breaking changes.
-</div>
-
 `ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md) and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.
 
 The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key. It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay).
@@ -23,7 +19,7 @@ Allows the component to be used standalone, just by declaring it as part of anot
 Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like:
 
 ```jsx
-import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+import { ConfirmDialog } from '@wordpress/components';
 
 function Example() {
 	return (
@@ -44,7 +40,7 @@ Let the parent component control when the dialog is open/closed. It's activated
 
 ```jsx
 import { useState } from 'react';
-import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+import { ConfirmDialog } from '@wordpress/components';
 
 function Example() {
 	const [ isOpen, setIsOpen ] = useState( true );

@@ -138,7 +138,7 @@ const UnconnectedConfirmDialog = (
  * Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like:
  *
  * ```jsx
- * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+ * import { ConfirmDialog } from '@wordpress/components';
  *
  * function Example() {
  * 	return (
@@ -158,7 +158,7 @@ const UnconnectedConfirmDialog = (
  * -   You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks.
  *
  *```jsx
- * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+ * import { ConfirmDialog } from '@wordpress/components';
  * import { useState } from '@wordpress/element';
  *
  * function Example() {

@@ -16,7 +16,7 @@ import { ConfirmDialog } from '../component';
 
 const meta: Meta< typeof ConfirmDialog > = {
 	component: ConfirmDialog,
-	title: 'Components (Experimental)/ConfirmDialog',
+	title: 'Components/ConfirmDialog',
 	argTypes: {
 		isOpen: {
 			control: { type: null },

@@ -15,7 +15,7 @@ import CustomSelectControl from '../legacy-component';
 import * as V1Story from '../../custom-select-control/stories/index.story';
 
 const meta: Meta< typeof CustomSelectControl > = {
-	title: 'Components (Experimental)/CustomSelectControl v2/Legacy',
+	title: 'Components/CustomSelectControl v2/Legacy',
 	component: CustomSelectControl,
 	argTypes: {
 		onChange: { control: { type: null } },

@@ -1,16 +1,12 @@
 # DimensionControl
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
 `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.
 
 ## Usage
 
 ```jsx
 import { useState } from 'react';
-import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
+import { DimensionControl } from '@wordpress/components';
 
 export default function MyCustomDimensionControl() {
 	const [ paddingSize, setPaddingSize ] = useState( '' );

@@ -23,7 +23,7 @@ import type { SelectControlSingleSelectionProps } from '../select-control/types'
  * This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
  *
  * ```jsx
- * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
+ * import { DimensionControl } from '@wordpress/components';
  * import { useState } from '@wordpress/element';
  *
  * export default function MyCustomDimensionControl() {

@@ -15,7 +15,7 @@ import { desktop, tablet, mobile } from '@wordpress/icons';
 
 export default {
 	component: DimensionControl,
-	title: 'Components (Experimental)/DimensionControl',
+	title: 'Components/DimensionControl',
 	argTypes: {
 		onChange: { action: 'onChange' },
 		value: { control: { type: null } },

@@ -1,18 +1,14 @@
 # Divider
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
 `Divider` is a layout component that separates groups of related content.
 
 ## Usage
 
 ```jsx
 import {
-	__experimentalDivider as Divider,
-	__experimentalText as Text,
-	__experimentalVStack as VStack,
+	Divider,
+	Text,
+	VStack,
 } from `@wordpress/components`;
 
 function Example() {

@@ -33,9 +33,9 @@ function UnconnectedDivider(
  *
  * ```js
  * import {
- * 		__experimentalDivider as Divider,
- * 		__experimentalText as Text,
- * 		__experimentalVStack as VStack,
+ * 		Divider,
+ * 		Text,
+ * 		VStack,
  * } from `@wordpress/components`;
  *
  * function Example() {

@@ -12,7 +12,7 @@ import { Flex } from '../../flex';
 
 const meta: Meta< typeof Divider > = {
 	component: Divider,
-	title: 'Components (Experimental)/Divider',
+	title: 'Components/Divider',
 	argTypes: {
 		margin: {
 			control: { type: 'text' },

@@ -32,7 +32,7 @@ import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
 import { ContextSystemProvider } from '../../context';
 
 const meta: Meta< typeof DropdownMenu > = {
-	title: 'Components (Experimental)/DropdownMenu V2',
+	title: 'Components/DropdownMenu V2',
 	component: DropdownMenu,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170

@@ -1,9 +1,5 @@
 # Elevation
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
 `Elevation` is a core component that renders shadow, using the component system's shadow system.
 
 ## Usage
@@ -12,9 +8,9 @@ The shadow effect is generated using the `value` prop.
 
 ```jsx
 import {
-	__experimentalElevation as Elevation,
-	__experimentalSurface as Surface,
-	__experimentalText as Text,
+	Elevation,
+	Surface,
+	Text,
 } from '@wordpress/components';
 
 function Example() {
@@ -75,7 +71,7 @@ Size of the shadow, based on the Style system's elevation system. The `value` de
 In the example below, `isInteractive` is activated to give a better sense of depth.
 
 ```jsx
-import { __experimentalElevation as Elevation } from '@wordpress/components';
+import { Elevation } from '@wordpress/components';
 
 function Example() {
 	return (

@@ -29,9 +29,9 @@ function UnconnectedElevation(
  *
  * ```jsx
  * import {
- *	__experimentalElevation as Elevation,
- *	__experimentalSurface as Surface,
- *	__experimentalText as Text,
+ *	Elevation,
+ *	Surface,
+ *	Text,
  * } from '@wordpress/components';
  *
  * function Example() {

@@ -10,7 +10,7 @@ import { Elevation } from '..';
 
 const meta: Meta< typeof Elevation > = {
 	component: Elevation,
-	title: 'Components (Experimental)/Elevation',
+	title: 'Components/Elevation',
 	argTypes: {
 		as: { control: { type: 'text' } },
 		borderRadius: { control: { type: 'text' } },

@@ -1,17 +1,13 @@
 # Grid
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
 `Grid` is a primitive layout component that can arrange content in a grid configuration.
 
 ## Usage
 
 ```jsx
 import {
-	__experimentalGrid as Grid,
-	__experimentalText as Text,
+	Grid,
+	Text,
 } from '@wordpress/components';
 
 function Example() {