From ef42dbf0dfe991687a18153d41d95e384f9f4f05 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 6 Jul 2022 02:17:31 +0900 Subject: [PATCH 1/8] InputControl: Decrease padding when prefix/suffix --- packages/components/src/input-control/index.tsx | 3 +++ .../input-control/styles/input-control-styles.tsx | 10 ++++++++++ packages/components/src/input-control/types.ts | 13 ++++++++++--- 3 files changed, 23 insertions(+), 3 deletions(-) diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx index ffec6a8a5a7f2b..73fb7dc4cab8f4 100644 --- a/packages/components/src/input-control/index.tsx +++ b/packages/components/src/input-control/index.tsx @@ -16,6 +16,7 @@ import { useState, forwardRef } from '@wordpress/element'; import InputBase from './input-base'; import InputField from './input-field'; import type { InputControlProps } from './types'; +import { space } from '../ui/utils/space'; import { useDraft } from './utils'; const noop = () => {}; @@ -85,6 +86,8 @@ export function UnforwardedInputControl( isPressEnterToChange={ isPressEnterToChange } onKeyDown={ onKeyDown } onValidate={ onValidate } + paddingInlineStart={ prefix ? space( 2 ) : undefined } + paddingInlineEnd={ suffix ? space( 2 ) : undefined } ref={ ref } setIsFocused={ setIsFocused } size={ size } diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx index 1c8463675b39f2..0a857582cd208f 100644 --- a/packages/components/src/input-control/styles/input-control-styles.tsx +++ b/packages/components/src/input-control/styles/input-control-styles.tsx @@ -110,6 +110,8 @@ type InputProps = { inputSize?: Size; isDragging?: boolean; dragCursor?: CSSProperties[ 'cursor' ]; + paddingInlineStart?: CSSProperties[ 'paddingInlineStart' ]; + paddingInlineEnd?: CSSProperties[ 'paddingInlineEnd' ]; }; const disabledStyles = ( { disabled }: InputProps ) => { @@ -184,6 +186,13 @@ const sizeStyles = ( { return css( style ); }; +const customPaddings = ( { + paddingInlineStart, + paddingInlineEnd, +}: InputProps ) => { + return css( { paddingInlineStart, paddingInlineEnd } ); +}; + const dragStyles = ( { isDragging, dragCursor }: InputProps ) => { let defaultArrowStyles: SerializedStyles | undefined; let activeDragCursorStyles: SerializedStyles | undefined; @@ -235,6 +244,7 @@ export const Input = styled.input< InputProps >` ${ disabledStyles } ${ fontSizeStyles } ${ sizeStyles } + ${ customPaddings } &::-webkit-input-placeholder { line-height: normal; diff --git a/packages/components/src/input-control/types.ts b/packages/components/src/input-control/types.ts index bdf0c33dfadf71..341d5fe51e3997 100644 --- a/packages/components/src/input-control/types.ts +++ b/packages/components/src/input-control/types.ts @@ -102,6 +102,8 @@ export interface InputFieldProps extends BaseProps { nextValue: string, event?: SyntheticEvent< HTMLInputElement > ) => void; + paddingInlineStart?: CSSProperties[ 'paddingInlineStart' ]; + paddingInlineEnd?: CSSProperties[ 'paddingInlineEnd' ]; setIsFocused: ( isFocused: boolean ) => void; stateReducer?: StateReducer; /** @@ -152,12 +154,17 @@ export interface InputControlProps * be the only prefix prop. Otherwise it tries to do a union of the two prefix properties and you end up * with an unresolvable type. * - * `isFocused` and `setIsFocused` are managed internally by the InputControl, but the rest of the props - * for InputField are passed through. + * `isFocused`, `setIsFocused`, `paddingInlineStart`, and `paddingInlineEnd` are managed internally by + * the InputControl, but the rest of the props for InputField are passed through. */ Omit< WordPressComponentProps< InputFieldProps, 'input', false >, - 'stateReducer' | 'prefix' | 'isFocused' | 'setIsFocused' + | 'stateReducer' + | 'prefix' + | 'isFocused' + | 'setIsFocused' + | 'paddingInlineStart' + | 'paddingInlineEnd' > { __unstableStateReducer?: InputFieldProps[ 'stateReducer' ]; } From 3b0e3ec9a8e9834c9b834cc19aa04aa49d6a596b Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 6 Jul 2022 02:20:21 +0900 Subject: [PATCH 2/8] UnitControl: Remove padding override --- .../src/unit-control/styles/unit-control-styles.ts | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/components/src/unit-control/styles/unit-control-styles.ts b/packages/components/src/unit-control/styles/unit-control-styles.ts index 6085f1fe9cdf65..8ef8bdb249bee1 100644 --- a/packages/components/src/unit-control/styles/unit-control-styles.ts +++ b/packages/components/src/unit-control/styles/unit-control-styles.ts @@ -26,14 +26,6 @@ export const Root = styled.div` position: relative; `; -const paddingStyles = ( { disableUnits }: InputProps ) => { - if ( disableUnits ) return ''; - - return css` - ${ rtl( { paddingRight: 8 } )() }; - `; -}; - const arrowStyles = ( { disableUnits }: InputProps ) => { if ( disableUnits ) return ''; @@ -58,7 +50,6 @@ export const ValueInput = styled( NumberControl )` width: 100%; ${ arrowStyles }; - ${ paddingStyles }; } } `; From 1a98f980e05081e5bb5de49d15a73cdcf9f8588f Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 6 Jul 2022 02:21:00 +0900 Subject: [PATCH 3/8] UnitControl: Clean up unused type --- .../components/src/unit-control/styles/unit-control-styles.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/unit-control/styles/unit-control-styles.ts b/packages/components/src/unit-control/styles/unit-control-styles.ts index 8ef8bdb249bee1..3e3521b418d74d 100644 --- a/packages/components/src/unit-control/styles/unit-control-styles.ts +++ b/packages/components/src/unit-control/styles/unit-control-styles.ts @@ -18,7 +18,6 @@ type SelectProps = { type InputProps = { disableUnits?: boolean; - size: SelectSize; }; export const Root = styled.div` From 8ddc12622aaff209ffd52adffc82479688dd31a8 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 6 Jul 2022 02:35:47 +0900 Subject: [PATCH 4/8] Tweak story examples for better RTL support --- packages/components/src/input-control/stories/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/input-control/stories/index.tsx b/packages/components/src/input-control/stories/index.tsx index 27ddb23262a0c6..2ae41172df0d2c 100644 --- a/packages/components/src/input-control/stories/index.tsx +++ b/packages/components/src/input-control/stories/index.tsx @@ -40,13 +40,13 @@ Default.args = { export const WithPrefix = Template.bind( {} ); WithPrefix.args = { ...Default.args, - prefix: @, + prefix: @, }; export const WithSuffix = Template.bind( {} ); WithSuffix.args = { ...Default.args, - suffix: , + suffix: , }; export const WithSideLabel = Template.bind( {} ); From edf295b8a52d0a7ea9056653a907bc77b4b5a3d1 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 6 Jul 2022 03:04:01 +0900 Subject: [PATCH 5/8] Add changelog --- packages/components/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index c0295cfd63bac9..2210ddd89fe102 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,10 @@ - `BoxControl`: Change ARIA role from `region` to `group` to avoid unwanted ARIA landmark regions ([#42094](https://github.com/WordPress/gutenberg/pull/42094)). +### Enhancements + +- `InputControl`: Ensure that the padding between a `prefix`/`suffix` and the text input stays at a reasonable 8px, even in larger size variants ([#42166](https://github.com/WordPress/gutenberg/pull/42166)). + ### Internal - `Grid`: Convert to TypeScript ([#41923](https://github.com/WordPress/gutenberg/pull/41923)). From dc3e9ca70b5adbcb764e12458e194b749e13f930 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 6 Jul 2022 03:15:23 +0900 Subject: [PATCH 6/8] Update snapshot --- .../src/unit-control/test/__snapshots__/index.tsx.snap | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/unit-control/test/__snapshots__/index.tsx.snap b/packages/components/src/unit-control/test/__snapshots__/index.tsx.snap index a723bc9f257d35..6b3f683f21308c 100644 --- a/packages/components/src/unit-control/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/unit-control/test/__snapshots__/index.tsx.snap @@ -10,8 +10,8 @@ Snapshot Diff: class="components-unit-control-wrapper css-aa2xc3-Root e1bagdl33" >
@@ -22,7 +22,7 @@ Snapshot Diff: > Date: Wed, 6 Jul 2022 06:35:05 +0900 Subject: [PATCH 7/8] Add comment --- .../components/src/input-control/styles/input-control-styles.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx index 0a857582cd208f..574321c537f5b5 100644 --- a/packages/components/src/input-control/styles/input-control-styles.tsx +++ b/packages/components/src/input-control/styles/input-control-styles.tsx @@ -147,6 +147,7 @@ const sizeStyles = ( { inputSize: size, __next36pxDefaultSize, }: InputProps ) => { + // Paddings may be overriden by the custom paddings props. const sizes = { default: { height: 36, From 832944526c4315fd84da3057fd1f370eee416390 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 7 Jul 2022 04:51:27 +0900 Subject: [PATCH 8/8] Fix typo Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> --- .../src/input-control/styles/input-control-styles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx index 574321c537f5b5..943db6d0654246 100644 --- a/packages/components/src/input-control/styles/input-control-styles.tsx +++ b/packages/components/src/input-control/styles/input-control-styles.tsx @@ -147,7 +147,7 @@ const sizeStyles = ( { inputSize: size, __next36pxDefaultSize, }: InputProps ) => { - // Paddings may be overriden by the custom paddings props. + // Paddings may be overridden by the custom paddings props. const sizes = { default: { height: 36,