Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

InputControl: Tighten gap between input and prefix/suffix #64908

Merged
merged 4 commits into from
Aug 30, 2024
Merged

InputControl: Tighten gap between input and prefix/suffix #64908

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a41c9a9
InputControl: Tighten padding between input and prefix/suffix
mirka Aug 29, 2024
38c94c4
Add changelog
mirka Aug 29, 2024
39e1ea0
BorderControl: Add back padding
mirka Aug 30, 2024
885cfb6
Add more components to changelog
mirka Aug 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,15 @@
- `UnitControl`: Update unit select styles ([#64712](https://github.com/WordPress/gutenberg/pull/64712)).
- `InputControl`: Add variants to prefix/suffix wrappers ([#64824](https://github.com/WordPress/gutenberg/pull/64824)).
- `Navigator`: remove location history, simplify internal logic ([#64675](https://github.com/WordPress/gutenberg/pull/64675)).
- Tighten gap between the main control and the prefix/suffix slot for the following components ([#64908](https://github.com/WordPress/gutenberg/pull/64908)).
- `InputControl`
- `NumberControl`
- `SelectControl`
- `TreeSelect`
- `UnitControl`
Comment on lines +27 to +32
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are these all the affected components? I can see some other components that use InputControl with prefix/suffix will be affected by it (for example, ColorPicker)

Copy link
Member Author

@mirka mirka Aug 29, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh right, I was thinking in terms of "components where a consumer can add a prefix/suffix".

Good that you pointed that out, because it's unclear whether this blanket change is desirable in use cases like ColorPicker. It looks fine in hex mode, but one could say it slightly decreases legibility in the RGB/HSL modes. (cc @WordPress/gutenberg-design)

ColorPicker, hex mode ColorPicker, RGB mode

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The above looks good to me.

- Contains internal visual changes from this PR:
- `AnglePickerControl`
- `ColorPicker`
- Decrease horizontal padding from 16px to 12px on the following components, when in the 40px default size ([#64708](https://github.com/WordPress/gutenberg/pull/64708)).
- `AnglePickerControl`
- `ColorPicker` (on the inputs)
Expand Down
39 changes: 23 additions & 16 deletions packages/components/src/border-control/border-control/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { contextConnect } from '../../context';
import { useBorderControl } from './hook';

import type { BorderControlProps, LabelProps } from '../types';
import { Spacer } from '../../spacer';

const BorderLabel = ( props: LabelProps ) => {
const { label, hideLabelFromVision } = props;
Expand Down Expand Up @@ -75,22 +76,28 @@ const UnconnectedBorderControl = (
<HStack spacing={ 4 } className={ innerWrapperClassName }>
<UnitControl
prefix={
<BorderControlDropdown
border={ border }
colors={ colors }
__unstablePopoverProps={ __unstablePopoverProps }
disableCustomColors={ disableCustomColors }
enableAlpha={ enableAlpha }
enableStyle={ enableStyle }
isStyleSettable={ isStyleSettable }
onChange={ onBorderChange }
previousStyleSelection={ previousStyleSelection }
showDropdownHeader={ showDropdownHeader }
__experimentalIsRenderedInSidebar={
__experimentalIsRenderedInSidebar
}
size={ size }
/>
<Spacer marginRight={ 1 } marginBottom={ 0 }>
<BorderControlDropdown
border={ border }
colors={ colors }
__unstablePopoverProps={
__unstablePopoverProps
}
disableCustomColors={ disableCustomColors }
enableAlpha={ enableAlpha }
enableStyle={ enableStyle }
isStyleSettable={ isStyleSettable }
onChange={ onBorderChange }
previousStyleSelection={
previousStyleSelection
}
showDropdownHeader={ showDropdownHeader }
__experimentalIsRenderedInSidebar={
__experimentalIsRenderedInSidebar
}
size={ size }
/>
</Spacer>
}
label={ __( 'Border width' ) }
hideLabelFromVision
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/input-control/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,8 +100,8 @@ export function UnforwardedInputControl(
isPressEnterToChange={ isPressEnterToChange }
onKeyDown={ onKeyDown }
onValidate={ onValidate }
paddingInlineStart={ prefix ? space( 2 ) : undefined }
paddingInlineEnd={ suffix ? space( 2 ) : undefined }
paddingInlineStart={ prefix ? space( 1 ) : undefined }
paddingInlineEnd={ suffix ? space( 1 ) : undefined }
ref={ ref }
size={ size }
stateReducer={ stateReducer }
Expand Down
Loading