InputControl: Allow inline styles to be applied to wrapper instead of…

… inner input (#45340)
WordPress · Nov 1, 2022 · 9448204 · 9448204
1 parent 18bca71
commit 9448204
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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.
 	 */