diff --git a/packages/components/src/alignment-matrix-control/README.md b/packages/components/src/alignment-matrix-control/README.md index d087a177d8d41..68ecab6b7adb4 100644 --- a/packages/components/src/alignment-matrix-control/README.md +++ b/packages/components/src/alignment-matrix-control/README.md @@ -1,16 +1,12 @@ # AlignmentMatrixControl -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- 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' ); diff --git a/packages/components/src/alignment-matrix-control/index.tsx b/packages/components/src/alignment-matrix-control/index.tsx index 3de0e401187d5..d5417ddfbc421 100644 --- a/packages/components/src/alignment-matrix-control/index.tsx +++ b/packages/components/src/alignment-matrix-control/index.tsx @@ -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 = () => { diff --git a/packages/components/src/alignment-matrix-control/stories/index.story.tsx b/packages/components/src/alignment-matrix-control/stories/index.story.tsx index 03bec9d92a8b7..9d276def5b001 100644 --- a/packages/components/src/alignment-matrix-control/stories/index.story.tsx +++ b/packages/components/src/alignment-matrix-control/stories/index.story.tsx @@ -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 diff --git a/packages/components/src/border-box-control/border-box-control/README.md b/packages/components/src/border-box-control/border-box-control/README.md index 20352e03c8243..7671292d835cd 100644 --- a/packages/components/src/border-box-control/border-box-control/README.md +++ b/packages/components/src/border-box-control/border-box-control/README.md @@ -1,10 +1,5 @@ # BorderBoxControl -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
-
- 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 = [ diff --git a/packages/components/src/border-box-control/border-box-control/component.tsx b/packages/components/src/border-box-control/border-box-control/component.tsx index 26967ad7f63dd..f1a55f88c03b7 100644 --- a/packages/components/src/border-box-control/border-box-control/component.tsx +++ b/packages/components/src/border-box-control/border-box-control/component.tsx @@ -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 = [ diff --git a/packages/components/src/border-box-control/stories/index.story.tsx b/packages/components/src/border-box-control/stories/index.story.tsx index 5b5d7f311208c..7ac8cbbea8c15 100644 --- a/packages/components/src/border-box-control/stories/index.story.tsx +++ b/packages/components/src/border-box-control/stories/index.story.tsx @@ -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' }, diff --git a/packages/components/src/border-control/border-control/README.md b/packages/components/src/border-control/border-control/README.md index 51fb7172b7c55..1ce3e3eacbf19 100644 --- a/packages/components/src/border-control/border-control/README.md +++ b/packages/components/src/border-control/border-control/README.md @@ -1,9 +1,5 @@ # BorderControl -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
-
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 = [ diff --git a/packages/components/src/border-control/border-control/component.tsx b/packages/components/src/border-control/border-control/component.tsx index 5fe2abce1b411..6dc3e8a6891ad 100644 --- a/packages/components/src/border-control/border-control/component.tsx +++ b/packages/components/src/border-control/border-control/component.tsx @@ -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 = [ diff --git a/packages/components/src/border-control/stories/index.story.tsx b/packages/components/src/border-control/stories/index.story.tsx index 9a5349d302c27..19938db5d0e51 100644 --- a/packages/components/src/border-control/stories/index.story.tsx +++ b/packages/components/src/border-control/stories/index.story.tsx @@ -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: { diff --git a/packages/components/src/box-control/README.md b/packages/components/src/box-control/README.md index 2fd214b79157f..364509b0189bc 100644 --- a/packages/components/src/box-control/README.md +++ b/packages/components/src/box-control/README.md @@ -1,16 +1,12 @@ # BoxControl -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- 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( { diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx index 9c3452d4ccb80..3f9791c2ba4d7 100644 --- a/packages/components/src/box-control/index.tsx +++ b/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 = () => { diff --git a/packages/components/src/box-control/stories/index.story.tsx b/packages/components/src/box-control/stories/index.story.tsx index 1b6604048f6d5..783f9d047b1bb 100644 --- a/packages/components/src/box-control/stories/index.story.tsx +++ b/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 } }, diff --git a/packages/components/src/card/card/README.md b/packages/components/src/card/card/README.md index 5a97913c88407..1fee3beb7553c 100644 --- a/packages/components/src/card/card/README.md +++ b/packages/components/src/card/card/README.md @@ -12,8 +12,8 @@ import { CardHeader, CardBody, CardFooter, - __experimentalText as Text, - __experimentalHeading as Heading, + Text, + Heading, } from '@wordpress/components'; function Example() { diff --git a/packages/components/src/card/card/component.tsx b/packages/components/src/card/card/component.tsx index 8fefc33bd4802..c696a65db9f51 100644 --- a/packages/components/src/card/card/component.tsx +++ b/packages/components/src/card/card/component.tsx @@ -85,8 +85,8 @@ function UnconnectedCard( * CardHeader, * CardBody, * CardFooter, - * __experimentalText as Text, - * __experimentalHeading as Heading, + * Text, + * Heading, * } from `@wordpress/components`; * * function Example() { diff --git a/packages/components/src/confirm-dialog/README.md b/packages/components/src/confirm-dialog/README.md index 3ad42d9d68160..f96e9bce7a62e 100644 --- a/packages/components/src/confirm-dialog/README.md +++ b/packages/components/src/confirm-dialog/README.md @@ -1,9 +1,5 @@ # `ConfirmDialog` -
-This feature is still experimental. "Experimental" means this is an early implementation subject to drastic and breaking changes. -
- `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 ); diff --git a/packages/components/src/confirm-dialog/component.tsx b/packages/components/src/confirm-dialog/component.tsx index 7e787439d91df..d4c72c9b1570d 100644 --- a/packages/components/src/confirm-dialog/component.tsx +++ b/packages/components/src/confirm-dialog/component.tsx @@ -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() { diff --git a/packages/components/src/confirm-dialog/stories/index.story.tsx b/packages/components/src/confirm-dialog/stories/index.story.tsx index 85636c0ddc81e..d242e765c7cbe 100644 --- a/packages/components/src/confirm-dialog/stories/index.story.tsx +++ b/packages/components/src/confirm-dialog/stories/index.story.tsx @@ -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 }, diff --git a/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx b/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx index 120686ea84af6..dc1d4ca490d5d 100644 --- a/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx +++ b/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx @@ -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 } }, diff --git a/packages/components/src/dimension-control/README.md b/packages/components/src/dimension-control/README.md index 498322931b7ab..46daac1d1e6a8 100644 --- a/packages/components/src/dimension-control/README.md +++ b/packages/components/src/dimension-control/README.md @@ -1,16 +1,12 @@ # DimensionControl -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- `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( '' ); diff --git a/packages/components/src/dimension-control/index.tsx b/packages/components/src/dimension-control/index.tsx index 38ad5b2f85ccc..3f0eabe08de19 100644 --- a/packages/components/src/dimension-control/index.tsx +++ b/packages/components/src/dimension-control/index.tsx @@ -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() { diff --git a/packages/components/src/dimension-control/stories/index.story.tsx b/packages/components/src/dimension-control/stories/index.story.tsx index 1220be3d4eea1..f8c1bb30e2f07 100644 --- a/packages/components/src/dimension-control/stories/index.story.tsx +++ b/packages/components/src/dimension-control/stories/index.story.tsx @@ -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 } }, diff --git a/packages/components/src/divider/README.md b/packages/components/src/divider/README.md index c81026b7b5587..3112cabf7c93f 100644 --- a/packages/components/src/divider/README.md +++ b/packages/components/src/divider/README.md @@ -1,18 +1,14 @@ # Divider -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- `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() { diff --git a/packages/components/src/divider/component.tsx b/packages/components/src/divider/component.tsx index 3870c2f12c4fc..4e99caa6b1ef1 100644 --- a/packages/components/src/divider/component.tsx +++ b/packages/components/src/divider/component.tsx @@ -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() { diff --git a/packages/components/src/divider/stories/index.story.tsx b/packages/components/src/divider/stories/index.story.tsx index 4910c1b591c52..abe02ea97c427 100644 --- a/packages/components/src/divider/stories/index.story.tsx +++ b/packages/components/src/divider/stories/index.story.tsx @@ -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' }, diff --git a/packages/components/src/dropdown-menu-v2/stories/index.story.tsx b/packages/components/src/dropdown-menu-v2/stories/index.story.tsx index 11f3c8fb1a6b1..39b10f6c07ded 100644 --- a/packages/components/src/dropdown-menu-v2/stories/index.story.tsx +++ b/packages/components/src/dropdown-menu-v2/stories/index.story.tsx @@ -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 diff --git a/packages/components/src/elevation/README.md b/packages/components/src/elevation/README.md index 3cdb379b82ab4..9a961085bc30d 100644 --- a/packages/components/src/elevation/README.md +++ b/packages/components/src/elevation/README.md @@ -1,9 +1,5 @@ # Elevation -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- `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 ( diff --git a/packages/components/src/elevation/component.tsx b/packages/components/src/elevation/component.tsx index d116859d9a303..90e1f271a0e56 100644 --- a/packages/components/src/elevation/component.tsx +++ b/packages/components/src/elevation/component.tsx @@ -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() { diff --git a/packages/components/src/elevation/stories/index.story.tsx b/packages/components/src/elevation/stories/index.story.tsx index 912268f534114..326f13eaec78d 100644 --- a/packages/components/src/elevation/stories/index.story.tsx +++ b/packages/components/src/elevation/stories/index.story.tsx @@ -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' } }, diff --git a/packages/components/src/grid/README.md b/packages/components/src/grid/README.md index 15cd959e135be..ff259594b368f 100644 --- a/packages/components/src/grid/README.md +++ b/packages/components/src/grid/README.md @@ -1,17 +1,13 @@ # Grid -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- `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() { diff --git a/packages/components/src/grid/component.tsx b/packages/components/src/grid/component.tsx index f18909c8e1c9a..6fee1474644eb 100644 --- a/packages/components/src/grid/component.tsx +++ b/packages/components/src/grid/component.tsx @@ -26,8 +26,8 @@ function UnconnectedGrid( * * ```jsx * import { - * __experimentalGrid as Grid, - * __experimentalText as Text + * Grid, + * Text * } from `@wordpress/components`; * * function Example() { diff --git a/packages/components/src/grid/stories/index.story.tsx b/packages/components/src/grid/stories/index.story.tsx index 171b324e033c0..f4355657a5d81 100644 --- a/packages/components/src/grid/stories/index.story.tsx +++ b/packages/components/src/grid/stories/index.story.tsx @@ -11,7 +11,7 @@ import { Grid } from '..'; const meta: Meta< typeof Grid > = { component: Grid, - title: 'Components (Experimental)/Grid', + title: 'Components/Grid', argTypes: { as: { control: { type: 'text' } }, align: { control: { type: 'text' } }, diff --git a/packages/components/src/h-stack/README.md b/packages/components/src/h-stack/README.md index 77e3c77b940f2..b427f0abc150e 100644 --- a/packages/components/src/h-stack/README.md +++ b/packages/components/src/h-stack/README.md @@ -1,9 +1,5 @@ # HStack -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- `HStack` (Horizontal Stack) arranges child elements in a horizontal line. ## Usage @@ -12,8 +8,8 @@ This feature is still experimental. “Experimental” means this is an early im ```jsx import { - __experimentalHStack as HStack, - __experimentalText as Text, + HStack, + Text, } from '@wordpress/components'; function Example() { @@ -85,9 +81,9 @@ When a `Spacer` is used within an `HStack`, the `Spacer` adaptively expands to t ```jsx import { - __experimentalHStack as HStack, - __experimentalSpacer as Spacer, - __experimentalText as Text, + HStack, + Spacer, + Text, } from '@wordpress/components'; function Example() { @@ -107,9 +103,9 @@ function Example() { ```jsx import { - __experimentalHStack as HStack, - __experimentalSpacer as Spacer, - __experimentalText as Text, + HStack, + Spacer, + Text, } from '@wordpress/components'; function Example() { diff --git a/packages/components/src/h-stack/component.tsx b/packages/components/src/h-stack/component.tsx index 1d1efebe8a091..74b2a28a66bce 100644 --- a/packages/components/src/h-stack/component.tsx +++ b/packages/components/src/h-stack/component.tsx @@ -23,8 +23,8 @@ function UnconnectedHStack( * * ```jsx * import { - * __experimentalHStack as HStack, - * __experimentalText as Text, + * HStack, + * Text, * } from `@wordpress/components`; * * function Example() { diff --git a/packages/components/src/h-stack/stories/index.story.tsx b/packages/components/src/h-stack/stories/index.story.tsx index 88aebb7682e47..10755905ddc77 100644 --- a/packages/components/src/h-stack/stories/index.story.tsx +++ b/packages/components/src/h-stack/stories/index.story.tsx @@ -42,7 +42,7 @@ const JUSTIFICATIONS = { const meta: Meta< typeof HStack > = { component: HStack, - title: 'Components (Experimental)/HStack', + title: 'Components/HStack', argTypes: { as: { control: { type: null }, diff --git a/packages/components/src/heading/README.md b/packages/components/src/heading/README.md index a56e6e6ccd932..303e0ac634415 100644 --- a/packages/components/src/heading/README.md +++ b/packages/components/src/heading/README.md @@ -1,15 +1,11 @@ # Heading -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- `Heading` renders headings and titles using the library's typography system. ## Usage ```jsx -import { __experimentalHeading as Heading } from '@wordpress/components'; +import { Heading } from '@wordpress/components'; function Example() { return Code is Poetry; diff --git a/packages/components/src/heading/component.tsx b/packages/components/src/heading/component.tsx index a42af8b05f471..7d29ac232fd2a 100644 --- a/packages/components/src/heading/component.tsx +++ b/packages/components/src/heading/component.tsx @@ -25,7 +25,7 @@ function UnconnectedHeading( * `Heading` renders headings and titles using the library's typography system. * * ```jsx - * import { __experimentalHeading as Heading } from "@wordpress/components"; + * import { Heading } from "@wordpress/components"; * * function Example() { * return Code is Poetry; diff --git a/packages/components/src/heading/stories/index.story.tsx b/packages/components/src/heading/stories/index.story.tsx index d82a59f08c825..b02fc59c59e44 100644 --- a/packages/components/src/heading/stories/index.story.tsx +++ b/packages/components/src/heading/stories/index.story.tsx @@ -10,7 +10,7 @@ import { Heading } from '..'; const meta: Meta< typeof Heading > = { component: Heading, - title: 'Components (Experimental)/Heading', + title: 'Components/Heading', argTypes: { as: { control: { type: 'text' } }, color: { control: { type: 'color' } }, diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index a824162cb2412..00976b7624cc8 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -12,7 +12,13 @@ export { } from '@wordpress/primitives'; // Components. -export { default as __experimentalAlignmentMatrixControl } from './alignment-matrix-control'; +export { + /** + * @deprecated Import `AlignmentMatrixControl` instead. + */ + default as __experimentalAlignmentMatrixControl, + AlignmentMatrixControl, +} from './alignment-matrix-control'; export { default as Animate, getAnimateClassName as __unstableGetAnimateClassName, @@ -29,15 +35,29 @@ export { } from './autocomplete'; export { default as BaseControl, useBaseControlProps } from './base-control'; export { + /** + * @deprecated Import `BorderBoxControl` instead. + */ BorderBoxControl as __experimentalBorderBoxControl, hasSplitBorders as __experimentalHasSplitBorders, isDefinedBorder as __experimentalIsDefinedBorder, isEmptyBorder as __experimentalIsEmptyBorder, + BorderBoxControl, } from './border-box-control'; -export { BorderControl as __experimentalBorderControl } from './border-control'; export { + /** + * @deprecated Import `BorderControl` instead. + */ + BorderControl as __experimentalBorderControl, + BorderControl, +} 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'; @@ -62,14 +82,32 @@ export { CompositeItem as __unstableCompositeItem, useCompositeState as __unstableUseCompositeState, } from './composite'; -export { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog'; +export { + /** + * @deprecated Import `ConfirmDialog` instead. + */ + ConfirmDialog as __experimentalConfirmDialog, + ConfirmDialog, +} from './confirm-dialog'; export { StableCustomSelectControl as CustomSelectControl } from './custom-select-control'; export { default as Dashicon } from './dashicon'; export { default as DateTimePicker, DatePicker, TimePicker } from './date-time'; -export { default as __experimentalDimensionControl } from './dimension-control'; +export { + /** + * @deprecated Import `DimensionControl` instead. + */ + default as __experimentalDimensionControl, + DimensionControl, +} from './dimension-control'; export { default as Disabled } from './disabled'; export { DisclosureContent as __unstableDisclosureContent } from './disclosure'; -export { Divider as __experimentalDivider } from './divider'; +export { + /** + * @deprecated Import `Divider` instead. + */ + Divider as __experimentalDivider, + Divider, +} from './divider'; export { default as Draggable } from './draggable'; export { default as DropZone } from './drop-zone'; export { default as DropZoneProvider } from './drop-zone/provider'; @@ -77,7 +115,13 @@ export { default as Dropdown } from './dropdown'; export { default as __experimentalDropdownContentWrapper } from './dropdown/dropdown-content-wrapper'; export { default as DropdownMenu } from './dropdown-menu'; export { DuotoneSwatch, DuotonePicker } from './duotone-picker'; -export { Elevation as __experimentalElevation } from './elevation'; +export { + /** + * @deprecated Import `Elevation` instead. + */ + Elevation as __experimentalElevation, + Elevation, +} from './elevation'; export { default as ExternalLink } from './external-link'; export { Flex, FlexBlock, FlexItem } from './flex'; export { default as FocalPointPicker } from './focal-point-picker'; @@ -88,19 +132,47 @@ export { default as FormToggle } from './form-toggle'; export { default as FormTokenField } from './form-token-field'; export { default as GradientPicker } from './gradient-picker'; export { default as CustomGradientPicker } from './custom-gradient-picker'; -export { Grid as __experimentalGrid } from './grid'; +export { + /** + * @deprecated Import `Grid` instead. + */ + Grid as __experimentalGrid, + Grid, +} from './grid'; export { default as Guide } from './guide'; export { default as GuidePage } from './guide/page'; -export { Heading as __experimentalHeading } from './heading'; -export { HStack as __experimentalHStack } from './h-stack'; +export { + /** + * @deprecated Import `Heading` instead. + */ + Heading as __experimentalHeading, + Heading, +} from './heading'; +export { + /** + * @deprecated Import `HStack` instead. + */ + HStack as __experimentalHStack, + HStack, +} from './h-stack'; export { default as Icon } from './icon'; export type { IconType } from './icon'; export { default as IconButton } from './button/deprecated'; export { + /** + * @deprecated Import `ItemGroup` instead. + */ ItemGroup as __experimentalItemGroup, Item as __experimentalItem, + ItemGroup, } from './item-group'; -export { default as __experimentalInputControl } from './input-control'; +export { + /** + * @deprecated Import `InputControl` instead. + */ + default as __experimentalInputControl, + InputControl, +} from './input-control'; export { default as __experimentalInputControlPrefixWrapper } from './input-control/input-prefix-wrapper'; export { default as __experimentalInputControlSuffixWrapper } from './input-control/input-suffix-wrapper'; export { default as KeyboardShortcuts } from './keyboard-shortcuts'; @@ -116,15 +188,45 @@ export { default as __experimentalNavigationGroup } from './navigation/group'; export { default as __experimentalNavigationItem } from './navigation/item'; export { default as __experimentalNavigationMenu } from './navigation/menu'; export { + /** + * @deprecated Import `NavigatorProvider` instead. + */ NavigatorProvider as __experimentalNavigatorProvider, + /** + * @deprecated Import `NavigatorScreen` instead. + */ NavigatorScreen as __experimentalNavigatorScreen, + /** + * @deprecated Import `NavigatorButton` instead. + */ NavigatorButton as __experimentalNavigatorButton, + /** + * @deprecated Import `NavigatorBackButton` instead. + */ NavigatorBackButton as __experimentalNavigatorBackButton, + /** + * @deprecated Import `NavigatorToParentButton` instead. + */ NavigatorToParentButton as __experimentalNavigatorToParentButton, + /** + * @deprecated Import `useNavigator` instead. + */ useNavigator as __experimentalUseNavigator, + NavigatorProvider, + NavigatorScreen, + NavigatorButton, + NavigatorBackButton, + NavigatorToParentButton, + useNavigator, } from './navigator'; export { default as Notice } from './notice'; -export { default as __experimentalNumberControl } from './number-control'; +export { + /** + * @deprecated Import `NumberControl` instead. + */ + default as __experimentalNumberControl, + NumberControl, +} from './number-control'; export { default as NoticeList } from './notice/list'; export { default as Panel } from './panel'; export { default as PanelBody } from './panel/body'; @@ -144,21 +246,57 @@ export { default as SearchControl } from './search-control'; export { default as SelectControl } from './select-control'; export { default as Snackbar } from './snackbar'; export { default as SnackbarList } from './snackbar/list'; -export { Spacer as __experimentalSpacer } from './spacer'; -export { Scrollable as __experimentalScrollable } from './scrollable'; +export { + /** + * @deprecated Import `Spacer` instead. + */ + Spacer as __experimentalSpacer, + Spacer, +} from './spacer'; +export { + /** + * @deprecated Import `Scrollable` instead. + */ + Scrollable as __experimentalScrollable, + Scrollable, +} from './scrollable'; export { default as Spinner } from './spinner'; -export { Surface as __experimentalSurface } from './surface'; +export { + /** + * @deprecated Import `Surface` instead. + */ + Surface as __experimentalSurface, + Surface, +} from './surface'; export { default as TabPanel } from './tab-panel'; -export { Text as __experimentalText } from './text'; +export { + /** + * @deprecated Import `Text` instead. + */ + Text as __experimentalText, + Text, +} from './text'; export { default as TextControl } from './text-control'; export { default as TextareaControl } from './textarea-control'; export { default as TextHighlight } from './text-highlight'; export { default as Tip } from './tip'; export { default as ToggleControl } from './toggle-control'; export { + /** + * @deprecated Import `ToggleGroupControl` instead. + */ ToggleGroupControl as __experimentalToggleGroupControl, + /** + * @deprecated Import `ToggleGroupControlOption` instead. + */ ToggleGroupControlOption as __experimentalToggleGroupControlOption, + /** + * @deprecated Import `ToggleGroupControlOptionIcon` instead. + */ ToggleGroupControlOptionIcon as __experimentalToggleGroupControlOptionIcon, + ToggleGroupControl, + ToggleGroupControlOption, + ToggleGroupControlOptionIcon, } from './toggle-group-control'; export { Toolbar, @@ -169,27 +307,77 @@ export { ToolbarItem, } from './toolbar'; export { + /** + * @deprecated Import `ToolsPanel` instead. + */ ToolsPanel as __experimentalToolsPanel, + /** + * @deprecated Import `ToolsPanelItem` instead. + */ ToolsPanelItem as __experimentalToolsPanelItem, + /** + * @deprecated Import `ToolsPanelContext` instead. + */ ToolsPanelContext as __experimentalToolsPanelContext, + ToolsPanel, + ToolsPanelItem, + ToolsPanelContext, } from './tools-panel'; export { default as Tooltip } from './tooltip'; export { + /** + * @deprecated Import `TreeGrid` instead. + */ default as __experimentalTreeGrid, + /** + * @deprecated Import `TreeGridRow` instead. + */ TreeGridRow as __experimentalTreeGridRow, + /** + * @deprecated Import `TreeGridCell` instead. + */ TreeGridCell as __experimentalTreeGridCell, + /** + * @deprecated Import `TreeGridItem` instead. + */ TreeGridItem as __experimentalTreeGridItem, + default as TreeGrid, + TreeGridRow, + TreeGridCell, + TreeGridItem, } from './tree-grid'; export { default as TreeSelect } from './tree-select'; -export { Truncate as __experimentalTruncate } from './truncate'; export { + /** + * @deprecated Import `Truncate` instead. + */ + Truncate as __experimentalTruncate, + Truncate, +} from './truncate'; +export { + /** + * @deprecated Import `UnitControl` instead. + */ default as __experimentalUnitControl, useCustomUnits as __experimentalUseCustomUnits, parseQuantityAndUnitFromRawValue as __experimentalParseQuantityAndUnitFromRawValue, + UnitControl, } from './unit-control'; -export { View as __experimentalView } from './view'; +export { + /** + * @deprecated Import `View` instead. + */ + View as __experimentalView, + View, +} from './view'; export { VisuallyHidden } from './visually-hidden'; -export { VStack as __experimentalVStack } from './v-stack'; +export { + /** + * @deprecated Import `VStack` instead. + */ + VStack as __experimentalVStack, + VStack, +} from './v-stack'; export { default as IsolatedEventContainer } from './isolated-event-container'; export { createSlotFill, @@ -200,7 +388,13 @@ export { useSlotFills as __experimentalUseSlotFills, } from './slot-fill'; export { default as __experimentalStyleProvider } from './style-provider'; -export { ZStack as __experimentalZStack } from './z-stack'; +export { + /** + * @deprecated Import `ZStack` instead. + */ + ZStack as __experimentalZStack, + ZStack, +} from './z-stack'; // Higher-Order Components. export { diff --git a/packages/components/src/input-control/README.md b/packages/components/src/input-control/README.md index 7af244f823516..733d37b378917 100644 --- a/packages/components/src/input-control/README.md +++ b/packages/components/src/input-control/README.md @@ -1,15 +1,11 @@ # InputControl -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- InputControl components let users enter and edit text. This is an experimental component intended to (in time) merge with or replace [TextControl](../text-control). ## Usage ```js -import { __experimentalInputControl as InputControl } from '@wordpress/components'; +import { InputControl } from '@wordpress/components'; import { useState } from 'react'; const Example = () => { diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx index 1cf9000a467dd..89d72abf5da68 100644 --- a/packages/components/src/input-control/index.tsx +++ b/packages/components/src/input-control/index.tsx @@ -120,7 +120,7 @@ export function UnforwardedInputControl( * intended to (in time) merge with or replace `TextControl`. * * ```jsx - * import { __experimentalInputControl as InputControl } from '@wordpress/components'; + * import { InputControl } from '@wordpress/components'; * import { useState } from 'react'; * * const Example = () => { diff --git a/packages/components/src/input-control/input-prefix-wrapper.tsx b/packages/components/src/input-control/input-prefix-wrapper.tsx index 23d9e823da932..0c2c39cafe7ea 100644 --- a/packages/components/src/input-control/input-prefix-wrapper.tsx +++ b/packages/components/src/input-control/input-prefix-wrapper.tsx @@ -28,7 +28,7 @@ function UnconnectedInputControlPrefixWrapper( * * ```jsx * import { - * __experimentalInputControl as InputControl, + * InputControl, * __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper, * } from '@wordpress/components'; * diff --git a/packages/components/src/input-control/input-suffix-wrapper.tsx b/packages/components/src/input-control/input-suffix-wrapper.tsx index 1be352f562e36..fa607258f2477 100644 --- a/packages/components/src/input-control/input-suffix-wrapper.tsx +++ b/packages/components/src/input-control/input-suffix-wrapper.tsx @@ -28,7 +28,7 @@ function UnconnectedInputControlSuffixWrapper( * * ```jsx * import { - * __experimentalInputControl as InputControl, + * InputControl, * __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper, * } from '@wordpress/components'; * diff --git a/packages/components/src/input-control/stories/index.story.tsx b/packages/components/src/input-control/stories/index.story.tsx index 6ad01b9408527..df930ff14024e 100644 --- a/packages/components/src/input-control/stories/index.story.tsx +++ b/packages/components/src/input-control/stories/index.story.tsx @@ -11,7 +11,7 @@ import { InputControlPrefixWrapper } from '../input-prefix-wrapper'; import { InputControlSuffixWrapper } from '../input-suffix-wrapper'; const meta: Meta< typeof InputControl > = { - title: 'Components (Experimental)/InputControl', + title: 'Components/InputControl', component: InputControl, // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 subcomponents: { InputControlPrefixWrapper, InputControlSuffixWrapper }, diff --git a/packages/components/src/input-control/types.ts b/packages/components/src/input-control/types.ts index ef01a9fe3db00..cf8021ef97f50 100644 --- a/packages/components/src/input-control/types.ts +++ b/packages/components/src/input-control/types.ts @@ -130,7 +130,7 @@ export interface InputBaseProps extends BaseProps, FlexProps { * * @example * import { - * __experimentalInputControl as InputControl, + * InputControl, * __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper, * } from '@wordpress/components'; * @@ -148,7 +148,7 @@ export interface InputBaseProps extends BaseProps, FlexProps { * * @example * import { - * __experimentalInputControl as InputControl, + * InputControl, * __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper, * } from '@wordpress/components'; * diff --git a/packages/components/src/item-group/item-group/README.md b/packages/components/src/item-group/item-group/README.md index 773883f3d9e49..a1daac0a2c85f 100644 --- a/packages/components/src/item-group/item-group/README.md +++ b/packages/components/src/item-group/item-group/README.md @@ -1,9 +1,5 @@ # `ItemGroup` -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- `ItemGroup` displays a list of `Item`s grouped and styled together. ## Usage @@ -12,7 +8,7 @@ This feature is still experimental. “Experimental” means this is an early im ```jsx import { - __experimentalItemGroup as ItemGroup, + ItemGroup, __experimentalItem as Item, } from '@wordpress/components'; @@ -66,7 +62,7 @@ In the following example, the `` will render with a size of `small`: ```jsx import { - __experimentalItemGroup as ItemGroup, + ItemGroup, __experimentalItem as Item, } from '@wordpress/components'; diff --git a/packages/components/src/item-group/item-group/component.tsx b/packages/components/src/item-group/item-group/component.tsx index 6bfae11dd4f85..1d7b34ce5b300 100644 --- a/packages/components/src/item-group/item-group/component.tsx +++ b/packages/components/src/item-group/item-group/component.tsx @@ -46,7 +46,7 @@ function UnconnectedItemGroup( * * ```jsx * import { - * __experimentalItemGroup as ItemGroup, + * ItemGroup, * __experimentalItem as Item, * } from '@wordpress/components'; * diff --git a/packages/components/src/item-group/item/README.md b/packages/components/src/item-group/item/README.md index 093d9fc192f6d..cfd298f0ba718 100644 --- a/packages/components/src/item-group/item/README.md +++ b/packages/components/src/item-group/item/README.md @@ -1,9 +1,5 @@ # `Item` -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- `Item` is used in combination with `ItemGroup` to display a list of items grouped and styled together. ## Usage @@ -12,7 +8,7 @@ This feature is still experimental. “Experimental” means this is an early im ```jsx import { - __experimentalItemGroup as ItemGroup, + ItemGroup, __experimentalItem as Item, } from '@wordpress/components'; @@ -50,7 +46,7 @@ In the following example, the `` will render with a size of `small`: ```jsx import { - __experimentalItemGroup as ItemGroup, + ItemGroup, __experimentalItem as Item, } from '@wordpress/components'; diff --git a/packages/components/src/item-group/item/component.tsx b/packages/components/src/item-group/item/component.tsx index f3f11617312a7..5ede51c8e88a7 100644 --- a/packages/components/src/item-group/item/component.tsx +++ b/packages/components/src/item-group/item/component.tsx @@ -31,7 +31,7 @@ function UnconnectedItem( * * ```jsx * import { - * __experimentalItemGroup as ItemGroup, + * ItemGroup, * __experimentalItem as Item, * } from '@wordpress/components'; * diff --git a/packages/components/src/item-group/stories/index.story.tsx b/packages/components/src/item-group/stories/index.story.tsx index 473cdfedbf4f1..ee68d6bd9bb0e 100644 --- a/packages/components/src/item-group/stories/index.story.tsx +++ b/packages/components/src/item-group/stories/index.story.tsx @@ -15,7 +15,7 @@ const meta: Meta< typeof ItemGroup > = { component: ItemGroup, // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 subcomponents: { Item }, - title: 'Components (Experimental)/ItemGroup', + title: 'Components/ItemGroup', argTypes: { as: { control: { type: null } }, children: { control: { type: null } }, diff --git a/packages/components/src/navigator/navigator-back-button/README.md b/packages/components/src/navigator/navigator-back-button/README.md index 01d4221be536e..65a1ac1e749af 100644 --- a/packages/components/src/navigator/navigator-back-button/README.md +++ b/packages/components/src/navigator/navigator-back-button/README.md @@ -1,9 +1,5 @@ # `NavigatorBackButton` -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- The `NavigatorBackButton` component can be used to navigate to a screen and should be used in combination with the [`NavigatorProvider`](/packages/components/src/navigator/navigator-provider/README.md), the [`NavigatorScreen`](/packages/components/src/navigator/navigator-screen/README.md) and the [`NavigatorButton`](/packages/components/src/navigator/navigator-button/README.md) components (or the `useNavigator` hook). ## Usage diff --git a/packages/components/src/navigator/navigator-back-button/component.tsx b/packages/components/src/navigator/navigator-back-button/component.tsx index 71c5ac14cd00d..b8f2febe59638 100644 --- a/packages/components/src/navigator/navigator-back-button/component.tsx +++ b/packages/components/src/navigator/navigator-back-button/component.tsx @@ -30,10 +30,10 @@ function UnconnectedNavigatorBackButton( * @example * ```jsx * import { - * __experimentalNavigatorProvider as NavigatorProvider, - * __experimentalNavigatorScreen as NavigatorScreen, - * __experimentalNavigatorButton as NavigatorButton, - * __experimentalNavigatorBackButton as NavigatorBackButton, + * NavigatorProvider, + * NavigatorScreen, + * NavigatorButton, + * NavigatorBackButton, * } from '@wordpress/components'; * * const MyNavigation = () => ( diff --git a/packages/components/src/navigator/navigator-button/README.md b/packages/components/src/navigator/navigator-button/README.md index 72154ec317da4..695c08a450c15 100644 --- a/packages/components/src/navigator/navigator-button/README.md +++ b/packages/components/src/navigator/navigator-button/README.md @@ -1,9 +1,5 @@ # `NavigatorButton` -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- The `NavigatorButton` component can be used to navigate to a screen and should be used in combination with the [`NavigatorProvider`](/packages/components/src/navigator/navigator-provider/README.md), the [`NavigatorScreen`](/packages/components/src/navigator/navigator-screen/README.md) and the [`NavigatorBackButton`](/packages/components/src/navigator/navigator-back-button/README.md) components (or the `useNavigator` hook). ## Usage diff --git a/packages/components/src/navigator/navigator-button/component.tsx b/packages/components/src/navigator/navigator-button/component.tsx index 1b84a2315c04d..c87738767c923 100644 --- a/packages/components/src/navigator/navigator-button/component.tsx +++ b/packages/components/src/navigator/navigator-button/component.tsx @@ -29,10 +29,10 @@ function UnconnectedNavigatorButton( * @example * ```jsx * import { - * __experimentalNavigatorProvider as NavigatorProvider, - * __experimentalNavigatorScreen as NavigatorScreen, - * __experimentalNavigatorButton as NavigatorButton, - * __experimentalNavigatorBackButton as NavigatorBackButton, + * NavigatorProvider, + * NavigatorScreen, + * NavigatorButton, + * NavigatorBackButton, * } from '@wordpress/components'; * * const MyNavigation = () => ( diff --git a/packages/components/src/navigator/navigator-provider/README.md b/packages/components/src/navigator/navigator-provider/README.md index 8be27a6510184..5e5f3a0caaba3 100644 --- a/packages/components/src/navigator/navigator-provider/README.md +++ b/packages/components/src/navigator/navigator-provider/README.md @@ -1,19 +1,15 @@ # `NavigatorProvider` -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- The `NavigatorProvider` component allows rendering nested views/panels/menus (via the [`NavigatorScreen` component](/packages/components/src/navigator/navigator-screen/README.md)) and navigate between these different states (via the [`NavigatorButton`](/packages/components/src/navigator/navigator-button/README.md), [`NavigatorToParentButton`](/packages/components/src/navigator/navigator-to-parent-button/README.md) and [`NavigatorBackButton`](/packages/components/src/navigator/navigator-back-button/README.md) components or the `useNavigator` hook). The Global Styles sidebar is an example of this. ## Usage ```jsx import { - __experimentalNavigatorProvider as NavigatorProvider, - __experimentalNavigatorScreen as NavigatorScreen, - __experimentalNavigatorButton as NavigatorButton, - __experimentalNavigatorToParentButton as NavigatorToParentButton, + NavigatorProvider, + NavigatorScreen, + NavigatorButton, + NavigatorToParentButton, } from '@wordpress/components'; const MyNavigation = () => ( diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx index 15eb4d6bd3b1d..5da1d02109bfc 100644 --- a/packages/components/src/navigator/navigator-provider/component.tsx +++ b/packages/components/src/navigator/navigator-provider/component.tsx @@ -274,10 +274,10 @@ function UnconnectedNavigatorProvider( * * ```jsx * import { - * __experimentalNavigatorProvider as NavigatorProvider, - * __experimentalNavigatorScreen as NavigatorScreen, - * __experimentalNavigatorButton as NavigatorButton, - * __experimentalNavigatorBackButton as NavigatorBackButton, + * NavigatorProvider, + * NavigatorScreen, + * NavigatorButton, + * NavigatorBackButton, * } from '@wordpress/components'; * * const MyNavigation = () => ( diff --git a/packages/components/src/navigator/navigator-screen/README.md b/packages/components/src/navigator/navigator-screen/README.md index 5ba5af44fe8c1..93e258a850327 100644 --- a/packages/components/src/navigator/navigator-screen/README.md +++ b/packages/components/src/navigator/navigator-screen/README.md @@ -1,9 +1,5 @@ # `NavigatorScreen` -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- The `NavigatorScreen` component represents a single view/screen/panel and should be used in combination with the [`NavigatorProvider`](/packages/components/src/navigator/navigator-provider/README.md), the [`NavigatorButton`](/packages/components/src/navigator/navigator-button/README.md) and the [`NavigatorBackButton`](/packages/components/src/navigator/navigator-back-button/README.md) components (or the `useNavigator` hook). ## Usage diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx index be5c4bfaf41ec..ea7ec18c0f7e3 100644 --- a/packages/components/src/navigator/navigator-screen/component.tsx +++ b/packages/components/src/navigator/navigator-screen/component.tsx @@ -147,10 +147,10 @@ function UnconnectedNavigatorScreen( * @example * ```jsx * import { - * __experimentalNavigatorProvider as NavigatorProvider, - * __experimentalNavigatorScreen as NavigatorScreen, - * __experimentalNavigatorButton as NavigatorButton, - * __experimentalNavigatorBackButton as NavigatorBackButton, + * NavigatorProvider, + * NavigatorScreen, + * NavigatorButton, + * NavigatorBackButton, * } from '@wordpress/components'; * * const MyNavigation = () => ( diff --git a/packages/components/src/navigator/navigator-to-parent-button/README.md b/packages/components/src/navigator/navigator-to-parent-button/README.md index 62dacc3dfa4ea..309f9eb0e2c33 100644 --- a/packages/components/src/navigator/navigator-to-parent-button/README.md +++ b/packages/components/src/navigator/navigator-to-parent-button/README.md @@ -1,9 +1,5 @@ # `NavigatorToParentButton` -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- The `NavigatorToParentButton` component can be used to navigate to a screen and should be used in combination with the [`NavigatorProvider`](/packages/components/src/navigator/navigator-provider/README.md), the [`NavigatorScreen`](/packages/components/src/navigator/navigator-screen/README.md) and the [`NavigatorButton`](/packages/components/src/navigator/navigator-button/README.md) components (or the `useNavigator` hook). ## Usage diff --git a/packages/components/src/navigator/navigator-to-parent-button/component.tsx b/packages/components/src/navigator/navigator-to-parent-button/component.tsx index e73a3619f3d49..126c9ee7f45db 100644 --- a/packages/components/src/navigator/navigator-to-parent-button/component.tsx +++ b/packages/components/src/navigator/navigator-to-parent-button/component.tsx @@ -33,10 +33,10 @@ function UnconnectedNavigatorToParentButton( * @example * ```jsx * import { - * __experimentalNavigatorProvider as NavigatorProvider, - * __experimentalNavigatorScreen as NavigatorScreen, - * __experimentalNavigatorButton as NavigatorButton, - * __experimentalNavigatorToParentButton as NavigatorToParentButton, + * NavigatorProvider, + * NavigatorScreen, + * NavigatorButton, + * NavigatorToParentButton, * } from '@wordpress/components'; * * const MyNavigation = () => ( diff --git a/packages/components/src/navigator/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx index 5adeadcf7ac1d..6e7096ac833fa 100644 --- a/packages/components/src/navigator/stories/index.story.tsx +++ b/packages/components/src/navigator/stories/index.story.tsx @@ -23,7 +23,7 @@ const meta: Meta< typeof NavigatorProvider > = { component: NavigatorProvider, // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 subcomponents: { NavigatorScreen, NavigatorButton, NavigatorBackButton }, - title: 'Components (Experimental)/Navigator', + title: 'Components/Navigator', argTypes: { as: { control: { type: null } }, children: { control: { type: null } }, diff --git a/packages/components/src/number-control/README.md b/packages/components/src/number-control/README.md index 3a54351cd2925..7994b4189330f 100644 --- a/packages/components/src/number-control/README.md +++ b/packages/components/src/number-control/README.md @@ -1,15 +1,11 @@ # NumberControl -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- NumberControl is an enhanced HTML [`input[type="number]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number) element. ## Usage ```jsx -import { __experimentalNumberControl as NumberControl } from '@wordpress/components'; +import { NumberControl } from '@wordpress/components'; const Example = () => { const [ value, setValue ] = useState( 10 ); diff --git a/packages/components/src/number-control/stories/index.story.tsx b/packages/components/src/number-control/stories/index.story.tsx index 3588063f0f4bb..de13ebd16d21f 100644 --- a/packages/components/src/number-control/stories/index.story.tsx +++ b/packages/components/src/number-control/stories/index.story.tsx @@ -14,7 +14,7 @@ import { useState } from '@wordpress/element'; import NumberControl from '..'; const meta: Meta< typeof NumberControl > = { - title: 'Components (Experimental)/NumberControl', + title: 'Components/NumberControl', component: NumberControl, argTypes: { onChange: { action: 'onChange' }, diff --git a/packages/components/src/progress-bar/stories/index.story.tsx b/packages/components/src/progress-bar/stories/index.story.tsx index dad1958bf0e66..0fff97c1e0671 100644 --- a/packages/components/src/progress-bar/stories/index.story.tsx +++ b/packages/components/src/progress-bar/stories/index.story.tsx @@ -10,7 +10,7 @@ import { ProgressBar } from '..'; const meta: Meta< typeof ProgressBar > = { component: ProgressBar, - title: 'Components (Experimental)/ProgressBar', + title: 'Components/ProgressBar', argTypes: { value: { control: { type: 'number', min: 0, max: 100, step: 1 } }, }, diff --git a/packages/components/src/scrollable/README.md b/packages/components/src/scrollable/README.md index db93265340228..2eab47a94c7de 100644 --- a/packages/components/src/scrollable/README.md +++ b/packages/components/src/scrollable/README.md @@ -1,15 +1,11 @@ # Scrollable -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- `Scrollable` is a layout component that content in a scrollable container. ## Usage ```jsx -import { __experimentalScrollable as Scrollable } from '@wordpress/components'; +import { Scrollable } from '@wordpress/components'; function Example() { return ( diff --git a/packages/components/src/scrollable/component.tsx b/packages/components/src/scrollable/component.tsx index 415ea6d4628e1..cfa5f2a2c624e 100644 --- a/packages/components/src/scrollable/component.tsx +++ b/packages/components/src/scrollable/component.tsx @@ -25,7 +25,7 @@ function UnconnectedScrollable( * `Scrollable` is a layout component that content in a scrollable container. * * ```jsx - * import { __experimentalScrollable as Scrollable } from `@wordpress/components`; + * import { Scrollable } from `@wordpress/components`; * * function Example() { * return ( diff --git a/packages/components/src/scrollable/stories/index.story.tsx b/packages/components/src/scrollable/stories/index.story.tsx index 53d4919de3aab..3183138b4c593 100644 --- a/packages/components/src/scrollable/stories/index.story.tsx +++ b/packages/components/src/scrollable/stories/index.story.tsx @@ -16,7 +16,7 @@ import { Scrollable } from '..'; const meta: Meta< typeof Scrollable > = { component: Scrollable, - title: 'Components (Experimental)/Scrollable', + title: 'Components/Scrollable', argTypes: { as: { control: { type: 'text' }, diff --git a/packages/components/src/spacer/README.md b/packages/components/src/spacer/README.md index 16160d39b61fa..c9e46cee6a9ba 100644 --- a/packages/components/src/spacer/README.md +++ b/packages/components/src/spacer/README.md @@ -1,9 +1,5 @@ # Spacer -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- `Spacer` is a primitive layout component that providers inner (`padding`) or outer (`margin`) space in-between components. It can also be used to adaptively provide space within an `HStack` or `VStack`. ## Usage @@ -12,9 +8,9 @@ This feature is still experimental. “Experimental” means this is an early im ```jsx import { - __experimentalSpacer as Spacer, - __experimentalHeading as Heading, - __experimentalView as View, + Spacer, + Heading, + View, } from '@wordpress/components'; function Example() { diff --git a/packages/components/src/spacer/stories/index.story.tsx b/packages/components/src/spacer/stories/index.story.tsx index 586658ac0f01f..0c69e901b26e9 100644 --- a/packages/components/src/spacer/stories/index.story.tsx +++ b/packages/components/src/spacer/stories/index.story.tsx @@ -31,7 +31,7 @@ const controls = [ const meta: Meta< typeof Spacer > = { component: Spacer, - title: 'Components (Experimental)/Spacer', + title: 'Components/Spacer', argTypes: { as: { control: { type: 'text' } }, children: { diff --git a/packages/components/src/surface/README.md b/packages/components/src/surface/README.md index 6f0d83ecb9cc9..6f4f6e365b012 100644 --- a/packages/components/src/surface/README.md +++ b/packages/components/src/surface/README.md @@ -1,9 +1,5 @@ # Surface -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- `Surface` is a core component that renders a primary background color. ## Usage @@ -12,8 +8,8 @@ In the example below, notice how the `Surface` renders in white (or dark gray if ```jsx import { - __experimentalSurface as Surface, - __experimentalText as Text, + Surface, + Text, } from '@wordpress/components'; function Example() { diff --git a/packages/components/src/surface/component.tsx b/packages/components/src/surface/component.tsx index ba0745a40b504..0390743460c50 100644 --- a/packages/components/src/surface/component.tsx +++ b/packages/components/src/surface/component.tsx @@ -28,8 +28,8 @@ function UnconnectedSurface( * * ```jsx * import { - * __experimentalSurface as Surface, - * __experimentalText as Text, + * Surface, + * Text, * } from '@wordpress/components'; * * function Example() { diff --git a/packages/components/src/surface/stories/index.story.tsx b/packages/components/src/surface/stories/index.story.tsx index 7f6790d09c848..424f1c0112e4e 100644 --- a/packages/components/src/surface/stories/index.story.tsx +++ b/packages/components/src/surface/stories/index.story.tsx @@ -11,7 +11,7 @@ import { Text } from '../../text'; const meta: Meta< typeof Surface > = { component: Surface, - title: 'Components (Experimental)/Surface', + title: 'Components/Surface', argTypes: { children: { control: { type: null } }, as: { control: { type: 'text' } }, diff --git a/packages/components/src/tabs/stories/index.story.tsx b/packages/components/src/tabs/stories/index.story.tsx index 883a75c46ad13..885a2752a3a69 100644 --- a/packages/components/src/tabs/stories/index.story.tsx +++ b/packages/components/src/tabs/stories/index.story.tsx @@ -18,7 +18,7 @@ import DropdownMenu from '../../dropdown-menu'; import Button from '../../button'; const meta: Meta< typeof Tabs > = { - title: 'Components (Experimental)/Tabs', + title: 'Components/Tabs', component: Tabs, subcomponents: { // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 diff --git a/packages/components/src/text/README.md b/packages/components/src/text/README.md index 46bd6a5f10de7..ab492f94716ff 100644 --- a/packages/components/src/text/README.md +++ b/packages/components/src/text/README.md @@ -11,7 +11,7 @@ This feature is still experimental. “Experimental” means this is an early im `Text` can be used to render any text-content, like an HTML `p` or `span`. ```jsx -import { __experimentalText as Text } from '@wordpress/components'; +import { Text } from '@wordpress/components'; function Example() { return Code is Poetry; @@ -27,7 +27,7 @@ function Example() { Automatically calculate the appropriate line-height value for contents that render text and Control elements (e.g. `TextInput`). ```jsx -import { __experimentalText as Text, TextInput } from '@wordpress/components'; +import { Text, TextInput } from '@wordpress/components'; function Example() { return ( @@ -46,7 +46,7 @@ function Example() { Adjusts the text alignment. ```jsx -import { __experimentalText as Text } from '@wordpress/components'; +import { Text } from '@wordpress/components'; function Example() { return ( @@ -111,7 +111,7 @@ Array of search words. String search terms are automatically cast to RegExps unl Letters or words within `Text` can be highlighted using `highlightWords`. ```jsx -import { __experimentalText as Text } from '@wordpress/components'; +import { Text } from '@wordpress/components'; function Example() { return ( @@ -165,7 +165,7 @@ Clamps the text content to the specifiec `numberOfLines`, adding the `ellipsis` The `Text` color can be adapted to a background color for optimal readability. `optimizeReadabilityFor` can accept CSS variables, in addition to standard CSS color values (e.g. Hex, RGB, HSL, etc...). ```jsx -import { __experimentalText as Text, View } from '@wordpress/components'; +import { Text, View } from '@wordpress/components'; function Example() { const backgroundColor = 'blue'; @@ -187,7 +187,7 @@ function Example() { Adjusts text size based on the typography system. `Text` can render a wide range of font sizes, which are automatically calculated and adapted to the typography system. The `size` value can be a system preset, a `number`, or a custom unit value (`string`) such as `30em`. ```jsx -import { __experimentalText as Text } from '@wordpress/components'; +import { Text } from '@wordpress/components'; function Example() { return Code is Poetry; @@ -203,7 +203,7 @@ Enables text truncation. When `truncate` is set, we are able to truncate the lon Note: text truncation won't work if the `isBlock` property is set to `true` ```jsx -import { __experimentalText as Text } from '@wordpress/components'; +import { Text } from '@wordpress/components'; function Example() { return ( @@ -231,7 +231,7 @@ Uppercases the text content. Adjusts style variation of the text. ```jsx -import { __experimentalText as Text } from '@wordpress/components'; +import { Text } from '@wordpress/components'; function Example() { return Code is Poetry; diff --git a/packages/components/src/text/component.tsx b/packages/components/src/text/component.tsx index f3fe69d936584..01c23f5289ebc 100644 --- a/packages/components/src/text/component.tsx +++ b/packages/components/src/text/component.tsx @@ -29,7 +29,7 @@ function UnconnectedText( * @example * * ```jsx - * import { __experimentalText as Text } from `@wordpress/components`; + * import { Text } from `@wordpress/components`; * * function Example() { * return Code is Poetry; diff --git a/packages/components/src/text/stories/index.story.tsx b/packages/components/src/text/stories/index.story.tsx index f762ca3b4e3ff..0f9ab0c1878a7 100644 --- a/packages/components/src/text/stories/index.story.tsx +++ b/packages/components/src/text/stories/index.story.tsx @@ -10,7 +10,7 @@ import { Text } from '../component'; const meta: Meta< typeof Text > = { component: Text, - title: 'Components (Experimental)/Text', + title: 'Components/Text', argTypes: { as: { control: { type: 'text' } }, color: { control: { type: 'color' } }, diff --git a/packages/components/src/theme/stories/index.story.tsx b/packages/components/src/theme/stories/index.story.tsx index c26e0a752c0d4..15570f7ded1da 100644 --- a/packages/components/src/theme/stories/index.story.tsx +++ b/packages/components/src/theme/stories/index.story.tsx @@ -13,7 +13,7 @@ import { HStack } from '../../h-stack'; const meta: Meta< typeof Theme > = { component: Theme, - title: 'Components (Experimental)/Theme', + title: 'Components/Theme', argTypes: { accent: { control: { type: 'color' } }, background: { control: { type: 'color' } }, diff --git a/packages/components/src/toggle-group-control/stories/index.story.tsx b/packages/components/src/toggle-group-control/stories/index.story.tsx index 92f1e6076248b..3bc5abe74230e 100644 --- a/packages/components/src/toggle-group-control/stories/index.story.tsx +++ b/packages/components/src/toggle-group-control/stories/index.story.tsx @@ -27,7 +27,7 @@ const meta: Meta< typeof ToggleGroupControl > = { component: ToggleGroupControl, // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 subcomponents: { ToggleGroupControlOption, ToggleGroupControlOptionIcon }, - title: 'Components (Experimental)/ToggleGroupControl', + title: 'Components/ToggleGroupControl', argTypes: { help: { control: { type: 'text' } }, onChange: { action: 'onChange' }, diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx index 421a6078b0495..1e829e7f5e499 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx +++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx @@ -184,8 +184,8 @@ function ToggleGroupControlOptionBase( * @example * ```jsx * import { - * __experimentalToggleGroupControl as ToggleGroupControl, - * __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase, + * ToggleGroupControl, + * ToggleGroupControlOptionBase, * } from '@wordpress/components'; * * function Example() { diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md index 8b96470e21301..4df6682ae5620 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md +++ b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md @@ -1,17 +1,13 @@ # `ToggleGroupControlOptionIcon` -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a child of [`ToggleGroupControl`](/packages/components/src/toggle-group-control/toggle-group-control/README.md) and displays an icon. ## Usage ```js import { - __experimentalToggleGroupControl as ToggleGroupControl, - __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, + ToggleGroupControl, + ToggleGroupControlOptionIcon, } from '@wordpress/components'; import { formatLowercase, formatUppercase } from '@wordpress/icons'; diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx index ec009d82344c3..980bbdbbf8bc7 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx +++ b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx @@ -45,8 +45,8 @@ function UnforwardedToggleGroupControlOptionIcon( * ```jsx * * import { - * __experimentalToggleGroupControl as ToggleGroupControl, - * __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, + * ToggleGroupControl, + * ToggleGroupControlOptionIcon, * from '@wordpress/components'; * import { formatLowercase, formatUppercase } from '@wordpress/icons'; * diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option/README.md b/packages/components/src/toggle-group-control/toggle-group-control-option/README.md index 7f9f4d32f29fc..817d6fa1faec1 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control-option/README.md +++ b/packages/components/src/toggle-group-control/toggle-group-control-option/README.md @@ -1,9 +1,5 @@ # `ToggleGroupControlOption` -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- `ToggleGroupControlOption` is a form component and is meant to be used as a child of [`ToggleGroupControl`](/packages/components/src/toggle-group-control/toggle-group-control/README.md). @@ -11,8 +7,8 @@ This feature is still experimental. “Experimental” means this is an early im ```js import { - __experimentalToggleGroupControl as ToggleGroupControl, - __experimentalToggleGroupControlOption as ToggleGroupControlOption, + ToggleGroupControl, + ToggleGroupControlOption, } from '@wordpress/components'; function Example() { diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx index e4b9cff4b8033..105e806182475 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx +++ b/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx @@ -42,8 +42,8 @@ function UnforwardedToggleGroupControlOption( * * ```jsx * import { - * __experimentalToggleGroupControl as ToggleGroupControl, - * __experimentalToggleGroupControlOption as ToggleGroupControlOption, + * ToggleGroupControl, + * ToggleGroupControlOption, * } from '@wordpress/components'; * * function Example() { diff --git a/packages/components/src/toggle-group-control/toggle-group-control/README.md b/packages/components/src/toggle-group-control/toggle-group-control/README.md index 64e0489f4171b..9afa85a40e7f9 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control/README.md +++ b/packages/components/src/toggle-group-control/toggle-group-control/README.md @@ -1,9 +1,5 @@ # `ToggleGroupControl` -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- `ToggleGroupControl` is a form component that lets users choose options represented in horizontal segments. To render options for this control use [`ToggleGroupControlOption`](/packages/components/src/toggle-group-control/toggle-group-control-option/README.md) component. This component is intended for selecting a single persistent value from a set of options, similar to a how a radio button group would work. If you simply want a toggle to switch between views, use a [`TabPanel`](/packages/components/src/tab-panel/README.md) instead. @@ -14,8 +10,8 @@ Only use this control when you know for sure the labels of items inside won't wr ```js import { - __experimentalToggleGroupControl as ToggleGroupControl, - __experimentalToggleGroupControlOption as ToggleGroupControlOption, + ToggleGroupControl, + ToggleGroupControlOption, } from '@wordpress/components'; function Example() { diff --git a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx index 2fa35e2a5e80a..18f5f73d8a2a4 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx +++ b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx @@ -111,8 +111,8 @@ function UnconnectedToggleGroupControl( * * ```jsx * import { - * __experimentalToggleGroupControl as ToggleGroupControl, - * __experimentalToggleGroupControlOption as ToggleGroupControlOption, + * ToggleGroupControl, + * ToggleGroupControlOption, * } from '@wordpress/components'; * * function Example() { diff --git a/packages/components/src/tools-panel/stories/index.story.tsx b/packages/components/src/tools-panel/stories/index.story.tsx index cd6f61c6e921b..855177a0ea4b6 100644 --- a/packages/components/src/tools-panel/stories/index.story.tsx +++ b/packages/components/src/tools-panel/stories/index.story.tsx @@ -26,7 +26,7 @@ import UnitControl from '../../unit-control'; import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill'; const meta: Meta< typeof ToolsPanel > = { - title: 'Components (Experimental)/ToolsPanel', + title: 'Components/ToolsPanel', component: ToolsPanel, // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 subcomponents: { ToolsPanelItem }, diff --git a/packages/components/src/tools-panel/tools-panel/README.md b/packages/components/src/tools-panel/tools-panel/README.md index df41b623eefb6..5d2ebdaa111a7 100644 --- a/packages/components/src/tools-panel/tools-panel/README.md +++ b/packages/components/src/tools-panel/tools-panel/README.md @@ -1,10 +1,5 @@ # ToolsPanel -
-This feature is still experimental. “Experimental” means this is an early -implementation subject to drastic and breaking changes. -
-
These panels provide progressive discovery options for their children. For example the controls provided via block supports. @@ -60,10 +55,10 @@ import styled from '@emotion/styled'; * WordPress dependencies */ import { - __experimentalBoxControl as BoxControl, - __experimentalToolsPanel as ToolsPanel, - __experimentalToolsPanelItem as ToolsPanelItem, - __experimentalUnitControl as UnitControl, + BoxControl, + ToolsPanel, + ToolsPanelItem, + UnitControl, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; diff --git a/packages/components/src/tools-panel/tools-panel/component.tsx b/packages/components/src/tools-panel/tools-panel/component.tsx index 4e01e39ffffb4..ae1165dad819a 100644 --- a/packages/components/src/tools-panel/tools-panel/component.tsx +++ b/packages/components/src/tools-panel/tools-panel/component.tsx @@ -53,9 +53,9 @@ const UnconnectedToolsPanel = ( * ```jsx * import { __ } from '@wordpress/i18n'; * import { - * __experimentalToolsPanel as ToolsPanel, - * __experimentalToolsPanelItem as ToolsPanelItem, - * __experimentalUnitControl as UnitControl + * ToolsPanel, + * ToolsPanelItem, + * UnitControl * } from '@wordpress/components'; * * function Example() { diff --git a/packages/components/src/tree-grid/stories/index.story.tsx b/packages/components/src/tree-grid/stories/index.story.tsx index 44af154c685b2..4a693a2ad2f07 100644 --- a/packages/components/src/tree-grid/stories/index.story.tsx +++ b/packages/components/src/tree-grid/stories/index.story.tsx @@ -16,7 +16,7 @@ import { Button } from '../../button'; import InputControl from '../../input-control'; const meta: Meta< typeof TreeGrid > = { - title: 'Components (Experimental)/TreeGrid', + title: 'Components/TreeGrid', component: TreeGrid, // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 subcomponents: { TreeGridRow, TreeGridCell }, diff --git a/packages/components/src/truncate/README.md b/packages/components/src/truncate/README.md index 6d5285244078e..08b80190b7de8 100644 --- a/packages/components/src/truncate/README.md +++ b/packages/components/src/truncate/README.md @@ -1,15 +1,11 @@ # Truncate -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- `Truncate` is a typography primitive that trims text content. For almost all cases, it is recommended that `Text`, `Heading`, or `Subheading` is used to render text content. However, `Truncate` is available for custom implementations. ## Usage ```jsx -import { __experimentalTruncate as Truncate } from '@wordpress/components'; +import { Truncate } from '@wordpress/components'; function Example() { return ( @@ -66,7 +62,7 @@ Clamps the text content to the specified `numberOfLines`, adding an ellipsis at - Default: `0` ```jsx -import { __experimentalTruncate as Truncate } from '@wordpress/components'; +import { Truncate } from '@wordpress/components'; function Example() { return ( diff --git a/packages/components/src/truncate/component.tsx b/packages/components/src/truncate/component.tsx index 4b6c721f92c70..41752e06afa00 100644 --- a/packages/components/src/truncate/component.tsx +++ b/packages/components/src/truncate/component.tsx @@ -28,7 +28,7 @@ function UnconnectedTruncate( * available for custom implementations. * * ```jsx - * import { __experimentalTruncate as Truncate } from `@wordpress/components`; + * import { Truncate } from `@wordpress/components`; * * function Example() { * return ( diff --git a/packages/components/src/truncate/stories/index.story.tsx b/packages/components/src/truncate/stories/index.story.tsx index 84eaf59edbb3e..306915313af87 100644 --- a/packages/components/src/truncate/stories/index.story.tsx +++ b/packages/components/src/truncate/stories/index.story.tsx @@ -10,7 +10,7 @@ import { Truncate } from '..'; const meta: Meta< typeof Truncate > = { component: Truncate, - title: 'Components (Experimental)/Truncate', + title: 'Components/Truncate', argTypes: { children: { control: { type: 'text' } }, as: { control: { type: 'text' } }, diff --git a/packages/components/src/unit-control/README.md b/packages/components/src/unit-control/README.md index b3c0496f86b80..296d87a4c13e0 100644 --- a/packages/components/src/unit-control/README.md +++ b/packages/components/src/unit-control/README.md @@ -10,7 +10,7 @@ This feature is still experimental. “Experimental” means this is an early im ```jsx import { useState } from 'react'; -import { __experimentalUnitControl as UnitControl } from '@wordpress/components'; +import { UnitControl } from '@wordpress/components'; const Example = () => { const [ value, setValue ] = useState( '10px' ); @@ -116,7 +116,7 @@ Example: ```jsx import { useState } from 'react'; -import { __experimentalUnitControl as UnitControl } from '@wordpress/components'; +import { UnitControl } from '@wordpress/components'; const Example = () => { const [ value, setValue ] = useState( '10px' ); diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx index 93ec2c358ecf1..b7b01ff7690df 100644 --- a/packages/components/src/unit-control/index.tsx +++ b/packages/components/src/unit-control/index.tsx @@ -235,7 +235,7 @@ function UnforwardedUnitControl( * * * ```jsx - * import { __experimentalUnitControl as UnitControl } from '@wordpress/components'; + * import { UnitControl } from '@wordpress/components'; * import { useState } from '@wordpress/element'; * * const Example = () => { diff --git a/packages/components/src/unit-control/stories/index.story.tsx b/packages/components/src/unit-control/stories/index.story.tsx index 5134d4902144d..7773f38536905 100644 --- a/packages/components/src/unit-control/stories/index.story.tsx +++ b/packages/components/src/unit-control/stories/index.story.tsx @@ -16,7 +16,7 @@ import { CSS_UNITS } from '../utils'; const meta: Meta< typeof UnitControl > = { component: UnitControl, - title: 'Components (Experimental)/UnitControl', + title: 'Components/UnitControl', argTypes: { __unstableInputWidth: { control: { type: 'text' } }, __unstableStateReducer: { control: { type: null } }, diff --git a/packages/components/src/v-stack/README.md b/packages/components/src/v-stack/README.md index 2f447b18015e5..79186c4a7db4c 100644 --- a/packages/components/src/v-stack/README.md +++ b/packages/components/src/v-stack/README.md @@ -12,8 +12,8 @@ This feature is still experimental. “Experimental” means this is an early im ```jsx import { - __experimentalText as Text, - __experimentalVStack as VStack, + Text, + VStack, } from '@wordpress/components'; function Example() { @@ -73,9 +73,9 @@ When a `Spacer` is used within an `VStack`, the `Spacer` adaptively expands to t ```jsx import { - __experimentalSpacer as Spacer, - __experimentalText as Text, - __experimentalVStack as VStack, + Spacer, + Text, + VStack, } from '@wordpress/components'; function Example() { @@ -95,9 +95,9 @@ function Example() { ```jsx import { - __experimentalSpacer as Spacer, - __experimentalText as Text, - __experimentalVStack as VStack, + Spacer, + Text, + VStack, } from '@wordpress/components'; function Example() { diff --git a/packages/components/src/v-stack/component.tsx b/packages/components/src/v-stack/component.tsx index c3ae9fece97dc..2a526993275a8 100644 --- a/packages/components/src/v-stack/component.tsx +++ b/packages/components/src/v-stack/component.tsx @@ -29,8 +29,8 @@ function UnconnectedVStack( * * ```jsx * import { - * __experimentalText as Text, - * __experimentalVStack as VStack, + * Text, + * VStack, * } from `@wordpress/components`; * * function Example() { diff --git a/packages/components/src/v-stack/stories/index.story.tsx b/packages/components/src/v-stack/stories/index.story.tsx index 781c1bce6676c..64ed680a345c0 100644 --- a/packages/components/src/v-stack/stories/index.story.tsx +++ b/packages/components/src/v-stack/stories/index.story.tsx @@ -25,7 +25,7 @@ const ALIGNMENTS = { const meta: Meta< typeof VStack > = { component: VStack, - title: 'Components (Experimental)/VStack', + title: 'Components/VStack', argTypes: { alignment: { control: { type: 'select' }, diff --git a/packages/components/src/view/README.md b/packages/components/src/view/README.md index c1e04ebd8cfff..7de75cbd1c5a7 100644 --- a/packages/components/src/view/README.md +++ b/packages/components/src/view/README.md @@ -12,8 +12,8 @@ This feature is still experimental. “Experimental” means this is an early im ```jsx import { - __experimentalText as Text, - __experimentalView as View, + Text, + View, } from '@wordpress/components'; function Example() { diff --git a/packages/components/src/view/stories/index.story.tsx b/packages/components/src/view/stories/index.story.tsx index 324825059deb2..233cee15f8ffc 100644 --- a/packages/components/src/view/stories/index.story.tsx +++ b/packages/components/src/view/stories/index.story.tsx @@ -10,7 +10,7 @@ import { View } from '..'; const meta: Meta< typeof View > = { component: View, - title: 'Components (Experimental)/View', + title: 'Components/View', argTypes: { as: { control: { type: null } }, children: { control: { type: 'text' } }, diff --git a/packages/components/src/z-stack/README.md b/packages/components/src/z-stack/README.md index 4de3d93c89681..1480ffaed7aef 100644 --- a/packages/components/src/z-stack/README.md +++ b/packages/components/src/z-stack/README.md @@ -9,7 +9,7 @@ This feature is still experimental. “Experimental” means this is an early im `ZStack` allows you to stack things along the Z-axis. ```jsx -import { __experimentalZStack as ZStack } from '@wordpress/components'; +import { ZStack } from '@wordpress/components'; function Example() { return ( diff --git a/packages/components/src/z-stack/component.tsx b/packages/components/src/z-stack/component.tsx index 411ef13c7085e..03393cd3ccb39 100644 --- a/packages/components/src/z-stack/component.tsx +++ b/packages/components/src/z-stack/component.tsx @@ -68,7 +68,7 @@ function UnconnectedZStack( * `ZStack` allows you to stack things along the Z-axis. * * ```jsx - * import { __experimentalZStack as ZStack } from '@wordpress/components'; + * import { ZStack } from '@wordpress/components'; * * function Example() { * return ( diff --git a/packages/components/src/z-stack/stories/index.story.tsx b/packages/components/src/z-stack/stories/index.story.tsx index 46a364bc520f3..b010d3ead0419 100644 --- a/packages/components/src/z-stack/stories/index.story.tsx +++ b/packages/components/src/z-stack/stories/index.story.tsx @@ -13,7 +13,7 @@ import { ZStack } from '..'; const meta: Meta< typeof ZStack > = { component: ZStack, - title: 'Components (Experimental)/ZStack', + title: 'Components/ZStack', argTypes: { as: { control: { type: 'text' } }, children: { control: { type: null } }, diff --git a/storybook/manager-head.html b/storybook/manager-head.html index 629f06bf98edf..967e4c8008ed0 100644 --- a/storybook/manager-head.html +++ b/storybook/manager-head.html @@ -1,6 +1,40 @@