@wordpress/components 30.1.1-next.46f643fa0.0 → 30.2.0

package/src/validated-form-controls/validity-indicator.tsx

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { error, published } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Icon from '../icon';
+import Spinner from '../spinner';
+
+export function ValidityIndicator( {
+	type,
+	message,
+}: {
+	type: 'validating' | 'valid' | 'invalid';
+	message?: string;
+} ) {
+	const ICON = {
+		valid: published,
+		invalid: error,
+	};
+	return (
+		<p
+			className={ clsx(
+				'components-validated-control__indicator',
+				`is-${ type }`
+			) }
+		>
+			{ type === 'validating' ? (
+				<Spinner className="components-validated-control__indicator-spinner" />
+			) : (
+				<Icon
+					className="components-validated-control__indicator-icon"
+					icon={ ICON[ type ] }
+					size={ 16 }
+					fill="currentColor"
+				/>
+			) }
+			{ message }
+		</p>
+	);
+}

package/src/view/stories/index.story.tsx

@@ -10,11 +10,12 @@ import { View } from '..';
 
 const meta: Meta< typeof View > = {
 	component: View,
-	title: 'Components (Experimental)/View',
+	title: 'Components/View',
 	argTypes: {
 		as: { control: false },
 		children: { control: { type: 'text' } },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },

package/src/z-stack/stories/index.story.tsx

@@ -13,11 +13,12 @@ import { ZStack } from '..';
 
 const meta: Meta< typeof ZStack > = {
 	component: ZStack,
-	title: 'Components (Experimental)/ZStack',
+	title: 'Components/ZStack',
 	argTypes: {
 		as: { control: { type: 'text' } },
 		children: { control: false },
 	},
+	tags: [ 'status-experimental' ],
 	parameters: {
 		controls: {
 			expanded: true,