Add 40px size prop

WordPress · Aug 16, 2024 · 666f6ea · 666f6ea
1 parent d2f3c07
commit 666f6ea
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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.