From acae9350143652d2e750128cebfd181923251b78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 12 Aug 2026 11:54:13 +0200 Subject: [PATCH] DataViews: vendor `ValidatedToggleControl` Co-Authored-By: Claude Fable 5 --- packages/components/CHANGELOG.md | 1 + packages/components/src/private-apis.ts | 2 - .../components/index.ts | 1 - .../stories/toggle-control.story.tsx | 47 ------------------- packages/dataviews/CHANGELOG.md | 1 + .../components/dataform-controls/toggle.tsx | 5 +- .../validated-form-controls/index.ts | 1 + .../test/toggle-control.tsx | 2 +- .../toggle-control.tsx | 17 ++++--- 9 files changed, 16 insertions(+), 61 deletions(-) delete mode 100644 packages/components/src/validated-form-controls/components/stories/toggle-control.story.tsx rename packages/{components/src => dataviews/src/components}/validated-form-controls/test/toggle-control.tsx (95%) rename packages/{components/src/validated-form-controls/components => dataviews/src/components/validated-form-controls}/toggle-control.tsx (64%) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 480c09c1f64631..2373b75a7be0b7 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -11,6 +11,7 @@ - Remove `ValidatedComboboxControl` from the private APIs; it now lives internally in `@wordpress/dataviews`, its only consumer ([#81449](https://github.com/WordPress/gutenberg/pull/81449)). - Remove `ValidatedFormTokenField` from the private APIs; it now lives internally in `@wordpress/dataviews`, its only consumer ([#81451](https://github.com/WordPress/gutenberg/pull/81451)). +- Remove `ValidatedToggleControl` from the private APIs; it now lives internally in `@wordpress/dataviews`, its only consumer ([#81492](https://github.com/WordPress/gutenberg/pull/81492)). - Remove `ValidatedToggleGroupControl` from the private APIs; it now lives internally in `@wordpress/dataviews`, its only consumer ([#81450](https://github.com/WordPress/gutenberg/pull/81450)). ## 39.0.0 (2026-08-12) diff --git a/packages/components/src/private-apis.ts b/packages/components/src/private-apis.ts index fe941a1e4e972a..14c3df2fa41b69 100644 --- a/packages/components/src/private-apis.ts +++ b/packages/components/src/private-apis.ts @@ -9,7 +9,6 @@ import { ValidatedInputControl, ValidatedContentEditableControl, ValidatedTextareaControl, - ValidatedToggleControl, } from './validated-form-controls'; import ContentEditableControl from './content-editable-control'; @@ -25,5 +24,4 @@ lock( privateApis, { ValidatedInputControl, ValidatedContentEditableControl, ValidatedTextareaControl, - ValidatedToggleControl, } ); diff --git a/packages/components/src/validated-form-controls/components/index.ts b/packages/components/src/validated-form-controls/components/index.ts index 7d0df907570547..f5edf63b873d7a 100644 --- a/packages/components/src/validated-form-controls/components/index.ts +++ b/packages/components/src/validated-form-controls/components/index.ts @@ -3,4 +3,3 @@ export * from './input-control'; export * from './range-control'; export * from './content-editable-control'; export * from './textarea-control'; -export * from './toggle-control'; diff --git a/packages/components/src/validated-form-controls/components/stories/toggle-control.story.tsx b/packages/components/src/validated-form-controls/components/stories/toggle-control.story.tsx deleted file mode 100644 index 9d265fc0419847..00000000000000 --- a/packages/components/src/validated-form-controls/components/stories/toggle-control.story.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { useState } from '@wordpress/element'; -import type { StoryObj, Meta } from '@storybook/react-vite'; -import { formDecorator } from './story-utils'; -import { ValidatedToggleControl } from '../toggle-control'; - -const meta: Meta< typeof ValidatedToggleControl > = { - title: 'Components/Selection & Input/Validated Form Controls/ValidatedToggleControl', - id: 'components-validatedtogglecontrol', - component: ValidatedToggleControl, - tags: [ 'status-private' ], - decorators: formDecorator, - args: { onChange: () => {} }, - argTypes: { - checked: { control: false }, - }, -}; -export default meta; - -export const Default: StoryObj< typeof ValidatedToggleControl > = { - render: function Template( { onChange, ...args } ) { - const [ checked, setChecked ] = useState( false ); - - return ( - { - setChecked( newValue ); - onChange?.( newValue ); - } } - customValidity={ - checked - ? { - type: 'invalid', - message: 'This toggle may not be enabled.', - } - : undefined - } - /> - ); - }, -}; -Default.args = { - required: true, - label: 'Toggle', - help: 'This toggle may neither be enabled nor disabled.', -}; diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md index 2a766a4baad381..8a9fc66d556847 100644 --- a/packages/dataviews/CHANGELOG.md +++ b/packages/dataviews/CHANGELOG.md @@ -10,6 +10,7 @@ - DataForm: Internalize `ValidatedComboboxControl` instead of unlocking it from the `@wordpress/components` private APIs. [#81449](https://github.com/WordPress/gutenberg/pull/81449) - DataForm: Internalize `ValidatedFormTokenField` instead of unlocking it from the `@wordpress/components` private APIs. [#81451](https://github.com/WordPress/gutenberg/pull/81451) +- DataForm: Internalize `ValidatedToggleControl` instead of unlocking it from the `@wordpress/components` private APIs. [#81492](https://github.com/WordPress/gutenberg/pull/81492) - DataForm: Internalize `ValidatedToggleGroupControl` instead of unlocking it from the `@wordpress/components` private APIs. [#81450](https://github.com/WordPress/gutenberg/pull/81450) ## 18.0.0 (2026-08-12) diff --git a/packages/dataviews/src/components/dataform-controls/toggle.tsx b/packages/dataviews/src/components/dataform-controls/toggle.tsx index 4e6e6a4c764596..0b3347612b3f3a 100644 --- a/packages/dataviews/src/components/dataform-controls/toggle.tsx +++ b/packages/dataviews/src/components/dataform-controls/toggle.tsx @@ -1,11 +1,8 @@ -import { privateApis } from '@wordpress/components'; import { useCallback } from '@wordpress/element'; import type { DataFormControlProps } from '../../types'; -import { unlock } from '../../lock-unlock'; +import { ValidatedToggleControl } from '../validated-form-controls'; import getCustomValidity from './utils/get-custom-validity'; -const { ValidatedToggleControl } = unlock( privateApis ); - export default function Toggle< Item >( { field, onChange, diff --git a/packages/dataviews/src/components/validated-form-controls/index.ts b/packages/dataviews/src/components/validated-form-controls/index.ts index 3dbd78a40b80df..32430476356a5e 100644 --- a/packages/dataviews/src/components/validated-form-controls/index.ts +++ b/packages/dataviews/src/components/validated-form-controls/index.ts @@ -5,5 +5,6 @@ export { ValidatedFormTokenField } from './form-token-field'; export { ValidatedNumberControl } from './number-control'; export { ValidatedRadioControl } from './radio-control'; export { ValidatedSelectControl } from './select-control'; +export { ValidatedToggleControl } from './toggle-control'; export { ValidatedToggleGroupControl } from './toggle-group-control'; export type { ValidatedControlProps } from './types'; diff --git a/packages/components/src/validated-form-controls/test/toggle-control.tsx b/packages/dataviews/src/components/validated-form-controls/test/toggle-control.tsx similarity index 95% rename from packages/components/src/validated-form-controls/test/toggle-control.tsx rename to packages/dataviews/src/components/validated-form-controls/test/toggle-control.tsx index e8300f67dc5153..96feae1f82e4c1 100644 --- a/packages/components/src/validated-form-controls/test/toggle-control.tsx +++ b/packages/dataviews/src/components/validated-form-controls/test/toggle-control.tsx @@ -1,6 +1,6 @@ import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { ValidatedToggleControl } from '../components'; +import { ValidatedToggleControl } from '../toggle-control'; describe( 'ValidatedToggleControl', () => { it( 'should preserve the help description', () => { diff --git a/packages/components/src/validated-form-controls/components/toggle-control.tsx b/packages/dataviews/src/components/validated-form-controls/toggle-control.tsx similarity index 64% rename from packages/components/src/validated-form-controls/components/toggle-control.tsx rename to packages/dataviews/src/components/validated-form-controls/toggle-control.tsx index 51583681dbd588..78f8857761ad9f 100644 --- a/packages/components/src/validated-form-controls/components/toggle-control.tsx +++ b/packages/dataviews/src/components/validated-form-controls/toggle-control.tsx @@ -1,8 +1,12 @@ import { forwardRef, useRef } from '@wordpress/element'; import { useMergeRefs } from '@wordpress/compose'; -import { ControlWithError } from '../control-with-error'; +import { ToggleControl } from '@wordpress/components'; +import { ControlWithError } from './control-with-error'; import type { ValidatedControlProps } from './types'; -import ToggleControl from '../../toggle-control'; + +type ToggleControlProps = React.ComponentProps< typeof ToggleControl >; + +type ValidatedToggleControlProps = ToggleControlProps & ValidatedControlProps; // TODO: Should we customize the default `missingValue` message? It says to "check this box". @@ -12,7 +16,7 @@ const UnforwardedValidatedToggleControl = ( customValidity, markWhenOptional, ...restProps - }: React.ComponentProps< typeof ToggleControl > & ValidatedControlProps, + }: ValidatedToggleControlProps, forwardedRef: React.ForwardedRef< HTMLInputElement > ) => { const validityTargetRef = useRef< HTMLInputElement >( null ); @@ -34,7 +38,8 @@ const UnforwardedValidatedToggleControl = ( ); }; -export const ValidatedToggleControl = forwardRef( - UnforwardedValidatedToggleControl -); +export const ValidatedToggleControl: React.ForwardRefExoticComponent< + React.PropsWithoutRef< ValidatedToggleControlProps > & + React.RefAttributes< HTMLInputElement > +> = forwardRef( UnforwardedValidatedToggleControl ); ValidatedToggleControl.displayName = 'ValidatedToggleControl';