From 9448204ebca95ac6de562f0e16fc5cb26a6b9520 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 2 Nov 2022 09:44:37 +1000
Subject: [PATCH] InputControl: Allow inline styles to be applied to wrapper
 instead of inner input (#45340)

---
 packages/components/CHANGELOG.md                     | 1 +
 packages/components/src/input-control/index.tsx      | 2 ++
 packages/components/src/input-control/input-base.tsx | 6 +++---
 packages/components/src/input-control/types.ts       | 5 -----
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 1f877453b2c41..92b80aa383fb7 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -37,6 +37,7 @@
 -   `FontSizePicker`: Fallback to font size `slug` if `name` is undefined ([#45041](https://github.com/WordPress/gutenberg/pull/45041)).
 -   `AutocompleterUI`: fix issue where autocompleter UI would appear on top of other UI elements ([#44795](https://github.com/WordPress/gutenberg/pull/44795/))
 -   `ExternalLink`: Fix to re-enable support for `onClick` event handler ([#45214](https://github.com/WordPress/gutenberg/pull/45214)).
+-   `InputControl`: Allow inline styles to be applied to the wrapper not inner input ([#45340](https://github.com/WordPress/gutenberg/pull/45340/))
 
 ### Internal
 
diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx
index 23fee2b813c6a..ee6ab9e0d1334 100644
--- a/packages/components/src/input-control/index.tsx
+++ b/packages/components/src/input-control/index.tsx
@@ -45,6 +45,7 @@ export function UnforwardedInputControl(
 		onKeyDown = noop,
 		prefix,
 		size = 'default',
+		style,
 		suffix,
 		value,
 		...props
@@ -77,6 +78,7 @@ export function UnforwardedInputControl(
 			labelPosition={ labelPosition }
 			prefix={ prefix }
 			size={ size }
+			style={ style }
 			suffix={ suffix }
 		>
 			<InputField
diff --git a/packages/components/src/input-control/input-base.tsx b/packages/components/src/input-control/input-base.tsx
index 677bf35e61f44..3f520e279b8fa 100644
--- a/packages/components/src/input-control/input-base.tsx
+++ b/packages/components/src/input-control/input-base.tsx
@@ -22,7 +22,7 @@ import {
 	getSizeConfig,
 } from './styles/input-control-styles';
 import type { InputBaseProps, LabelPosition } from './types';
-import { ContextSystemProvider } from '../ui/context';
+import { ContextSystemProvider, WordPressComponentProps } from '../ui/context';
 
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( InputBase );
@@ -31,7 +31,7 @@ function useUniqueId( idProp?: string ) {
 	return idProp || id;
 }
 
-// Adapter to map props for the new ui/flex compopnent.
+// Adapter to map props for the new ui/flex component.
 function getUIFlexProps( labelPosition?: LabelPosition ) {
 	const props: { direction?: string; gap?: number; justify?: string } = {};
 	switch ( labelPosition ) {
@@ -67,7 +67,7 @@ export function InputBase(
 		size = 'default',
 		suffix,
 		...props
-	}: InputBaseProps,
+	}: WordPressComponentProps< InputBaseProps, 'div' >,
 	ref: ForwardedRef< HTMLDivElement >
 ) {
 	const id = useUniqueId( idProp );
diff --git a/packages/components/src/input-control/types.ts b/packages/components/src/input-control/types.ts
index d179e9a7c26a6..92972f18ee07b 100644
--- a/packages/components/src/input-control/types.ts
+++ b/packages/components/src/input-control/types.ts
@@ -165,11 +165,6 @@ export interface InputBaseProps extends BaseProps, FlexProps {
 	 * @default false
 	 */
 	disabled?: boolean;
-	/**
-	 * The class name to be added to the wrapper element.
-	 */
-	className?: string;
-	id?: string;
 	/**
 	 * If this property is added, a label will be generated using label property as the content.
 	 */