From 0765049142a909c9a90420ef14c4faf82ecc970a Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 27 Oct 2022 19:01:02 +1000 Subject: [PATCH 1/6] Allow style prop to apply to InputBase wrapper --- packages/components/src/input-control/index.tsx | 2 ++ packages/components/src/input-control/types.ts | 4 ++++ 2 files changed, 6 insertions(+) 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 } > Date: Thu, 27 Oct 2022 19:20:38 +1000 Subject: [PATCH 2/6] Add changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 26173ee53bce7..0bb03d5aeb089 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -35,6 +35,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 From 3c8d736b6e1b9444fae07581beb6846bdfd1bc5c Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 1 Nov 2022 16:03:29 +1000 Subject: [PATCH 3/6] Try adding style prop via WordPressComponentProps --- packages/components/src/input-control/types.ts | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/components/src/input-control/types.ts b/packages/components/src/input-control/types.ts index 6829943ca18af..7cc988f0b94a6 100644 --- a/packages/components/src/input-control/types.ts +++ b/packages/components/src/input-control/types.ts @@ -121,7 +121,12 @@ export interface InputFieldProps extends BaseProps { type?: HTMLInputTypeAttribute; } -export interface InputBaseProps extends BaseProps, FlexProps { +export interface InputBaseProps + extends Pick< + WordPressComponentProps< BaseProps, 'div' >, + 'className' | 'id' | 'style' | keyof BaseProps + >, + FlexProps { children: ReactNode; /** * Renders an element on the left side of the input. @@ -165,19 +170,10 @@ 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. */ label?: ReactNode; - /** - * If this property is added, it will be added to the modal frame `div`. - */ - style?: CSSProperties; } export interface InputControlProps From f5b13ed38be064b2e96230c59342aebb97b0e0c8 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 1 Nov 2022 16:15:21 +1000 Subject: [PATCH 4/6] Revert "Try adding style prop via WordPressComponentProps" This reverts commit 3c8d736b6e1b9444fae07581beb6846bdfd1bc5c. --- packages/components/src/input-control/types.ts | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/components/src/input-control/types.ts b/packages/components/src/input-control/types.ts index 7cc988f0b94a6..6829943ca18af 100644 --- a/packages/components/src/input-control/types.ts +++ b/packages/components/src/input-control/types.ts @@ -121,12 +121,7 @@ export interface InputFieldProps extends BaseProps { type?: HTMLInputTypeAttribute; } -export interface InputBaseProps - extends Pick< - WordPressComponentProps< BaseProps, 'div' >, - 'className' | 'id' | 'style' | keyof BaseProps - >, - FlexProps { +export interface InputBaseProps extends BaseProps, FlexProps { children: ReactNode; /** * Renders an element on the left side of the input. @@ -170,10 +165,19 @@ export interface InputBaseProps * @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. */ label?: ReactNode; + /** + * If this property is added, it will be added to the modal frame `div`. + */ + style?: CSSProperties; } export interface InputControlProps From fb4df4f4e9d553385ed87f7ad17cfc628471d884 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 1 Nov 2022 16:28:41 +1000 Subject: [PATCH 5/6] Fix InputBase typing with WordPressComponentProps --- packages/components/src/input-control/input-base.tsx | 4 ++-- packages/components/src/input-control/types.ts | 9 --------- 2 files changed, 2 insertions(+), 11 deletions(-) diff --git a/packages/components/src/input-control/input-base.tsx b/packages/components/src/input-control/input-base.tsx index 677bf35e61f44..9ebaacea6f2fb 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 ); @@ -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 6829943ca18af..92972f18ee07b 100644 --- a/packages/components/src/input-control/types.ts +++ b/packages/components/src/input-control/types.ts @@ -165,19 +165,10 @@ 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. */ label?: ReactNode; - /** - * If this property is added, it will be added to the modal frame `div`. - */ - style?: CSSProperties; } export interface InputControlProps From 8ba0e2b08cf9bdbc1d165cc11fd7dbf50357a856 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 1 Nov 2022 16:36:06 +1000 Subject: [PATCH 6/6] Fix typo --- packages/components/src/input-control/input-base.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/input-control/input-base.tsx b/packages/components/src/input-control/input-base.tsx index 9ebaacea6f2fb..3f520e279b8fa 100644 --- a/packages/components/src/input-control/input-base.tsx +++ b/packages/components/src/input-control/input-base.tsx @@ -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 ) {