mirka · Aug 20, 2026 · Aug 13, 2026 · Aug 13, 2026 · Aug 13, 2026 · Aug 14, 2026
@@ -33,6 +33,8 @@
 -   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)).
 -   `ToggleGroupControl`: Streamline focus ring color styles ([#81242](https://github.com/WordPress/gutenberg/pull/81242)).
+-   `ControlWithError`: Remove the internal implementation in favor of the `ControlWithError` component from `@wordpress/ui` ([#81230](https://github.com/WordPress/gutenberg/issues/81230)) ([#81574](https://github.com/WordPress/gutenberg/pull/81574)).
+-   Remove the unused `components-validated-control__indicator*` styles; the indicator is now rendered and styled by `ValidityIndicator` from `@wordpress/ui` ([#81230](https://github.com/WordPress/gutenberg/issues/81230)) ([#81574](https://github.com/WordPress/gutenberg/pull/81574)).
 
 ## 39.0.0 (2026-08-12)
 

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { forwardRef, useRef } from '@wordpress/element';
-import { ControlWithError } from '../control-with-error';
+import { ControlWithError } from '@wordpress/ui';
 import type { ValidatedControlProps } from './types';
 import ContentEditableControl from '../../content-editable-control';
 
@@ -34,6 +34,7 @@ const UnforwardedValidatedContentEditableControl = (
 	return (
 		<div className="components-validated-control__wrapper-with-error-delegate">
 			<ControlWithError
+				className="components-validated-control"
 				required={ required }
 				markWhenOptional={ markWhenOptional }
 				customValidity={ customValidity }

@@ -1,5 +1,5 @@
 import { forwardRef, useRef } from '@wordpress/element';
-import { ControlWithError } from '../control-with-error';
+import { ControlWithError } from '@wordpress/ui';
 import type { ValidatedControlProps } from './types';
 import CustomSelectControl from '../../custom-select-control';
 
@@ -21,6 +21,7 @@ const UnforwardedValidatedCustomSelectControl = (
 			ref={ forwardedRef }
 		>
 			<ControlWithError
+				className="components-validated-control"
 				required={ required }
 				markWhenOptional={ markWhenOptional }
 				customValidity={ customValidity }

@@ -1,6 +1,6 @@
 import { forwardRef, useRef } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
-import { ControlWithError } from '../control-with-error';
+import { ControlWithError } from '@wordpress/ui';
 import type { ValidatedControlProps } from './types';
 import InputControl from '../../input-control';
 
@@ -18,6 +18,7 @@ const UnforwardedValidatedInputControl = (
 
 	return (
 		<ControlWithError
+			className="components-validated-control"
 			required={ required }
 			markWhenOptional={ markWhenOptional }
 			customValidity={ customValidity }

@@ -1,6 +1,6 @@
 import { useMergeRefs } from '@wordpress/compose';
 import { forwardRef, useRef } from '@wordpress/element';
-import { ControlWithError } from '../control-with-error';
+import { ControlWithError } from '@wordpress/ui';
 import type { ValidatedControlProps } from './types';
 import RangeControl from '../../range-control';
 
@@ -18,6 +18,7 @@ const UnforwardedValidatedRangeControl = (
 
 	return (
 		<ControlWithError
+			className="components-validated-control"
 			required={ required }
 			markWhenOptional={ markWhenOptional }
 			customValidity={ customValidity }

@@ -3,9 +3,9 @@ import { expect, userEvent, waitFor, within } from 'storybook/test';
 import clsx from 'clsx';
 import { useRef, useCallback, useState } from '@wordpress/element';
 import { debounce } from '@wordpress/compose';
+import type { ControlWithError } from '@wordpress/ui';
 import { ValidatedInputControl } from '..';
 import { formDecorator } from './story-utils';
-import type { ControlWithError } from '../../control-with-error';
 import Dropdown from '../../../dropdown';
 import { Button } from '../../../button';
 import Modal from '../../../modal';

@@ -1,6 +1,6 @@
 import { forwardRef, useRef } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
-import { ControlWithError } from '../control-with-error';
+import { ControlWithError } from '@wordpress/ui';
 import type { ValidatedControlProps } from './types';
 import TextareaControl from '../../textarea-control';
 
@@ -18,6 +18,7 @@ const UnforwardedValidatedTextareaControl = (
 
 	return (
 		<ControlWithError
+			className="components-validated-control"
 			required={ required }
 			markWhenOptional={ markWhenOptional }
 			customValidity={ customValidity }

@@ -1,2 +1 @@
 export * from './components';
-export * from './control-with-error';
@@ -1,6 +1,4 @@
 @use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
-@use "../utils/theme-variables" as *;
 
 %red-focus-ring {
 	--focus-color: #{ $alert-red };
@@ -50,46 +48,3 @@
 	opacity: 0;
 	pointer-events: none;
 }
-
-.components-validated-control__indicator {
-	display: flex;
-	align-items: flex-start;
-	gap: 4px;
-	margin: 8px 0 0;
-	font-family: $font-family-body;
-	font-size: $font-size-small;
-	line-height: 16px; // matches the icon size
-	color: $components-color-gray-700;
-	animation:
-		components-validated-control__indicator-jump 0.2s
-		cubic-bezier(0.68, -0.55, 0.27, 1.55);
-
-	&.is-invalid {
-		color: $alert-red;
-	}
-
-	&.is-valid {
-		color: color-mix(in srgb, $black 30%, $alert-green);
-	}
-}
-
-.components-validated-control__indicator-icon {
-	flex-shrink: 0;
-}
-
-.components-validated-control__indicator-spinner {
-	margin: 2px;
-	width: $grid-unit-15;
-	height: $grid-unit-15;
-}
-
-@keyframes components-validated-control__indicator-jump {
-	0% {
-		transform: translateY(-4px);
-		opacity: 0;
-	}
-	100% {
-		transform: translateY(0);
-		opacity: 1;
-	}
-}
@@ -23,6 +23,8 @@
 -   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)
 -   `ValidatedToggleGroupControl`: Use `--focus-color` for the error focus ring so ancestor overrides apply correctly ([#81242](https://github.com/WordPress/gutenberg/pull/81242)).
+-   DataForm: Remove the vendored `ControlWithError` copy in favor of the `ControlWithError` component from `@wordpress/ui`. ([#81230](https://github.com/WordPress/gutenberg/issues/81230)) ([#81574](https://github.com/WordPress/gutenberg/pull/81574))
+-   DataForm: Render the `date` control's validity message with `ValidityIndicator` from `@wordpress/ui` instead of hand-rolled markup styled by `@wordpress/components` global class names. ([#81230](https://github.com/WordPress/gutenberg/issues/81230)) ([#81574](https://github.com/WordPress/gutenberg/pull/81574))
 
 ## 18.0.0 (2026-08-12)
 

@@ -1,4 +1,3 @@
-import clsx from 'clsx';
 import {
 	format,
 	isValid as isValidDate,
@@ -11,7 +10,6 @@ import {
 import {
 	BaseControl,
 	Button,
-	Icon as WCIcon,
 	__experimentalInputControl as InputControl,
 } from '@wordpress/components';
 import { speak } from '@wordpress/a11y';
@@ -24,8 +22,12 @@ import {
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { getDate, getSettings } from '@wordpress/date';
-import { error as errorIcon } from '@wordpress/icons';
-import { Calendar, RangeCalendar, Stack } from '@wordpress/ui';
+import {
+	Calendar,
+	RangeCalendar,
+	Stack,
+	ValidityIndicator,
+} from '@wordpress/ui';
 import RelativeDateControl from './utils/relative-date-control';
 import useDisabledDateMatchers from './utils/use-disabled-date-matchers';
 import {
@@ -253,22 +255,10 @@ function ValidatedDateControl< Item >( {
 		<div onBlur={ onBlur }>
 			{ children }
 			{ customValidity && (
-				<p
-					className={ clsx(
-						'components-validated-control__indicator',
-						customValidity.type === 'invalid'
-							? 'is-invalid'
-							: undefined
-					) }
-				>
-					<WCIcon
-						className="components-validated-control__indicator-icon"
-						icon={ errorIcon }
-						size={ 16 }
-						fill="currentColor"
-					/>
-					{ customValidity.message }
-				</p>
+				<ValidityIndicator
+					type={ customValidity.type }
+					message={ customValidity.message }
+				/>
 			) }
 		</div>
 	);

@@ -1,7 +1,7 @@
 import { forwardRef, useRef } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
 import { CheckboxControl } from '@wordpress/components';
-import { ControlWithError } from './control-with-error';
+import { ControlWithError } from '@wordpress/ui';
 import type { ValidatedControlProps } from './types';
 
 type CheckboxControlProps = React.ComponentProps< typeof CheckboxControl >;
@@ -23,6 +23,7 @@ const UnforwardedValidatedCheckboxControl = (
 
 	return (
 		<ControlWithError
+			className="dataviews-validated-control"
 			required={ required }
 			markWhenOptional={ markWhenOptional }
 			ref={ mergedRefs }

@@ -1,7 +1,7 @@
 import { forwardRef, useEffect, useRef } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
 import { ComboboxControl } from '@wordpress/components';
-import { ControlWithError } from './control-with-error';
+import { ControlWithError } from '@wordpress/ui';
 import type { ValidatedControlProps } from './types';
 
 type ComboboxControlProps = React.ComponentProps< typeof ComboboxControl >;
@@ -39,6 +39,7 @@ const UnforwardedValidatedComboboxControl = (
 	return (
 		// TODO: Bug - Missing value error is not cleared immediately on change, waits for blur.
 		<ControlWithError
+			className="dataviews-validated-control"
 			required={ required }
 			markWhenOptional={ markWhenOptional }
 			ref={ mergedRefs }
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export * from './components';
		export * from './control-with-error';
oandregal Aug 24, 2026 Copy link Copy Markdown Member Author Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. @mirka wouldn't this cause issues if a consumer uses a DataViews version that depends on the ControlWithError or ValidityIndicator components exposed via the `wp.components.privateApis` global? oandregal Aug 24, 2026 Copy link Copy Markdown Member Author Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. I got the impression that we shouldn't remove these private APIs but rather deprecate them and keep them for 2 major WordPress versions (related). oandregal Aug 24, 2026 Copy link Copy Markdown Member Author Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. Actually, scratch that. I just double-checked plus checked history and they had never been exported via the private APIs.