@wordpress/components 32.1.1-next.v.0 → 32.2.0

package/src/validated-form-controls/components/toggle-control.tsx

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { forwardRef, useRef, useEffect } from '@wordpress/element';
+import { forwardRef, useRef } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
 
 /**
@@ -25,14 +25,6 @@ const UnforwardedValidatedToggleControl = (
 	const validityTargetRef = useRef< HTMLInputElement >( null );
 	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
 
-	// TODO: Upstream limitation - The `required` attribute is not passed down to the input,
-	// so we need to set it manually.
-	useEffect( () => {
-		if ( validityTargetRef.current ) {
-			validityTargetRef.current.required = required ?? false;
-		}
-	}, [ required ] );
-
 	return (
 		<ControlWithError
 			required={ required }
@@ -40,7 +32,11 @@ const UnforwardedValidatedToggleControl = (
 			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
-			<ToggleControl ref={ mergedRefs } { ...restProps } />
+			<ToggleControl
+				ref={ mergedRefs }
+				required={ required }
+				{ ...restProps }
+			/>
 		</ControlWithError>
 	);
 };

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

@@ -19,6 +19,11 @@ const meta: Meta< typeof View > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'not-recommended',
+			whereUsed: 'global',
+			notes: 'Planned for deprecation.',
+		},
 	},
 };
 export default meta;

package/src/view/test/__snapshots__/index.js.snap

@@ -3,7 +3,7 @@
 exports[`props should render as another element 1`] = `
 <div>
   <p
-    class="emotion-0 emotion-1"
+    class="css-1ragr82-PolymorphicDiv emotion-0"
   >
     <span />
   </p>
@@ -13,7 +13,7 @@ exports[`props should render as another element 1`] = `
 exports[`props should render correctly 1`] = `
 <div>
   <div
-    class="emotion-0 emotion-1"
+    class="css-1ragr82-PolymorphicDiv emotion-0"
   >
     <span />
   </div>
@@ -23,7 +23,7 @@ exports[`props should render correctly 1`] = `
 exports[`props should render with custom styles (Array) 1`] = `
 <div>
   <p
-    class="emotion-0 emotion-1"
+    class="css-1ragr82-PolymorphicDiv emotion-0"
   >
     <span />
   </p>
@@ -33,7 +33,7 @@ exports[`props should render with custom styles (Array) 1`] = `
 exports[`props should render with custom styles (object) 1`] = `
 <div>
   <p
-    class="emotion-0 emotion-1"
+    class="css-1ragr82-PolymorphicDiv emotion-0"
   >
     <span />
   </p>
@@ -43,7 +43,7 @@ exports[`props should render with custom styles (object) 1`] = `
 exports[`props should render with custom styles (string) 1`] = `
 <div>
   <p
-    class="emotion-0 emotion-1"
+    class="css-1ragr82-PolymorphicDiv emotion-0"
   >
     <span />
   </p>

package/src/visually-hidden/stories/index.story.tsx

@@ -21,6 +21,10 @@ const meta: Meta< typeof VisuallyHidden > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

package/src/visually-hidden/test/__snapshots__/index.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`VisuallyHidden should render correctly 1`] = `
 <div
-  class="components-visually-hidden emotion-0 emotion-1"
+  class="components-visually-hidden css-1ragr82-PolymorphicDiv emotion-0"
   data-wp-c16t="true"
   data-wp-component="VisuallyHidden"
   style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"

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

@@ -24,6 +24,11 @@ const meta: Meta< typeof ZStack > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'not-recommended',
+			whereUsed: 'global',
+			notes: 'Planned for deprecation. Write your own CSS instead.',
+		},
 	},
 };
 export default meta;