From 666f6ea367d70800fff7dd5a9239f50252b7b2d2 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sat, 17 Aug 2024 05:53:28 +0900
Subject: [PATCH] Add 40px size prop

---
 .../src/textarea-control/stories/index.story.tsx  |  1 +
 .../styles/textarea-control-styles.ts             | 15 ++++++++++++++-
 packages/components/src/textarea-control/types.ts |  6 ++++++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/textarea-control/stories/index.story.tsx b/packages/components/src/textarea-control/stories/index.story.tsx
index e8cb986a14132..a8e5dc036248d 100644
--- a/packages/components/src/textarea-control/stories/index.story.tsx
+++ b/packages/components/src/textarea-control/stories/index.story.tsx
@@ -54,4 +54,5 @@ Default.args = {
 	__nextHasNoMarginBottom: true,
 	label: 'Text',
 	help: 'Enter some text',
+	placeholder: 'Placeholder',
 };
diff --git a/packages/components/src/textarea-control/styles/textarea-control-styles.ts b/packages/components/src/textarea-control/styles/textarea-control-styles.ts
index 8097dd0373001..191722383bae0 100644
--- a/packages/components/src/textarea-control/styles/textarea-control-styles.ts
+++ b/packages/components/src/textarea-control/styles/textarea-control-styles.ts
@@ -32,11 +32,24 @@ const inputStyleFocus = css`
 	outline: 2px solid transparent;
 `;
 
+const deprecatedStyles = ( { __next40pxDefaultSize = false } ) => {
+	if ( ! __next40pxDefaultSize ) {
+		return css`
+			padding: 6px 8px;
+		`;
+	}
+
+	return css`
+		// Vertical padding is to match the standard 40px control height when rows=1.
+		padding: 11.5px 12px;
+	`;
+};
+
 export const StyledTextarea = styled.textarea`
 	width: 100%;
 	display: block;
 	font-family: ${ font( 'default.fontFamily' ) };
-	padding: 6px 8px;
+	${ deprecatedStyles }
 	${ inputStyleNeutral };
 
 	/* Fonts smaller than 16px causes mobile safari to zoom. */
diff --git a/packages/components/src/textarea-control/types.ts b/packages/components/src/textarea-control/types.ts
index 51bf152920b49..eba8ed3d56028 100644
--- a/packages/components/src/textarea-control/types.ts
+++ b/packages/components/src/textarea-control/types.ts
@@ -12,6 +12,12 @@ export type TextareaControlProps = Pick<
 	BaseControlProps,
 	'hideLabelFromVision' | 'help' | 'label' | '__nextHasNoMarginBottom'
 > & {
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * A function that receives the new value of the textarea each time it
 	 * changes.