feat: Adds deprecation notice for textControl.

WordPress · Nov 5, 2024 · 9cf1292 · 9cf1292
1 parent 3dece5e
commit 9cf1292
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 1 deletion.
diff --git a/packages/components/src/text-control/README.md b/packages/components/src/text-control/README.md
@@ -63,6 +63,7 @@ const MyTextControl = () => {
 	return (
 		<TextControl
 			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label="Additional CSS Class"
 			value={ className }
 			onChange={ ( value ) => setClassName( value ) }

diff --git a/packages/components/src/text-control/index.tsx b/packages/components/src/text-control/index.tsx
@@ -16,6 +16,7 @@ import { forwardRef } from '@wordpress/element';
 import BaseControl from '../base-control';
 import type { WordPressComponentProps } from '../context';
 import type { TextControlProps } from './types';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 function UnforwardedTextControl(
 	props: WordPressComponentProps< TextControlProps, 'input', false >,
@@ -38,6 +39,13 @@ function UnforwardedTextControl(
 	const onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>
 		onChange( event.target.value );
 
+	// Add Warning for deprecated 36px size.
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'TextControl',
+		size: undefined,
+		__next40pxDefaultSize,
+	} );
+
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
@@ -77,6 +85,7 @@ function UnforwardedTextControl(
  *   return (
  *     <TextControl
  *       __nextHasNoMarginBottom
+ *       __next40pxDefaultSize
  *       label="Additional CSS Class"
  *       value={ className }
  *       onChange={ ( value ) => setClassName( value ) }

diff --git a/packages/components/src/text-control/stories/index.story.tsx b/packages/components/src/text-control/stories/index.story.tsx
@@ -54,6 +54,7 @@ export const Default: StoryFn< typeof TextControl > = DefaultTemplate.bind(
 );
 Default.args = {
 	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
 };
 
 export const WithLabelAndHelpText: StoryFn< typeof TextControl > =

diff --git a/packages/components/src/text-control/test/text-control.tsx b/packages/components/src/text-control/test/text-control.tsx
@@ -9,7 +9,13 @@ import { render, screen } from '@testing-library/react';
 import _TextControl from '..';
 
 const TextControl = ( props: React.ComponentProps< typeof _TextControl > ) => {
-	return <_TextControl { ...props } __nextHasNoMarginBottom />;
+	return (
+		<_TextControl
+			{ ...props }
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+		/>
+	);
 };
 
 const noop = () => {};