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

BoxControl: Passive deprecate onMouseOver/onMouseOut #67332

Merged
merged 5 commits into from
Nov 28, 2024
Merged

BoxControl: Passive deprecate onMouseOver/onMouseOut #67332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
04c4e53
BoxControl: Passive deprecate `onMouseOver`/`onMouseOut`
mirka Nov 26, 2024
331c5d8
Fix usage in DimensionsPanel
mirka Nov 26, 2024
80c0dc3
Add changelog
mirka Nov 26, 2024
7109c57
Merge branch 'trunk' into box-control-event-api
mirka Nov 28, 2024
3c7147f
Update CHANGELOG.md
mirka Nov 28, 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
32 changes: 16 additions & 16 deletions packages/block-editor/src/components/global-styles/dimensions-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -444,17 +444,6 @@ export default function DimensionsPanel( {

const onMouseLeaveControls = () => onVisualize( false );

const inputProps = {
min: minMarginValue,
onDragStart: () => {
//Reset to 0 in case the value was negative.
setMinMarginValue( 0 );
},
onDragEnd: () => {
setMinMarginValue( minimumMargin );
},
};

return (
<Wrapper
resetAllFilter={ resetAllFilter }
Expand Down Expand Up @@ -545,8 +534,10 @@ export default function DimensionsPanel( {
units={ units }
allowReset={ false }
splitOnAxis={ isAxialPadding }
onMouseOver={ onMouseOverPadding }
onMouseOut={ onMouseLeaveControls }
inputProps={ {
onMouseOver: onMouseOverPadding,
onMouseOut: onMouseLeaveControls,
} }
/>
) }
{ showSpacingPresetsControl && (
Expand Down Expand Up @@ -581,14 +572,23 @@ export default function DimensionsPanel( {
__next40pxDefaultSize
values={ marginValues }
onChange={ setMarginValues }
inputProps={ inputProps }
inputProps={ {
min: minMarginValue,
onDragStart: () => {
// Reset to 0 in case the value was negative.
setMinMarginValue( 0 );
},
onDragEnd: () => {
setMinMarginValue( minimumMargin );
},
onMouseOver: onMouseOverMargin,
onMouseOut: onMouseLeaveControls,
} }
label={ __( 'Margin' ) }
sides={ marginSides }
units={ units }
allowReset={ false }
splitOnAxis={ isAxialMargin }
onMouseOver={ onMouseOverMargin }
onMouseOut={ onMouseLeaveControls }
/>
) }
{ showSpacingPresetsControl && (
Expand Down
6 changes: 5 additions & 1 deletion packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

## Unreleased

### Deprecations

- `BoxControl`: Passive deprecate `onMouseOver`/`onMouseOut`. Pass to the `inputProps` prop instead ([#67332](https://github.com/WordPress/gutenberg/pull/67332)).

### Internal

- Upgraded `@ariakit/react` (v0.4.13) and `@ariakit/test` (v0.4.5) ([#65907](https://github.com/WordPress/gutenberg/pull/65907)).
Expand All @@ -15,7 +19,7 @@
- `FontSizePicker`: Deprecate 36px default size ([#66920](https://github.com/WordPress/gutenberg/pull/66920)).
- `ComboboxControl`: Deprecate 36px default size ([#66900](https://github.com/WordPress/gutenberg/pull/66900)).
- `ToggleGroupControl`: Deprecate 36px default size ([#66747](https://github.com/WordPress/gutenberg/pull/66747)).
- `RangeControl`: Deprecate 36px default size ([#66721](https://github.com/WordPress/gutenberg/pull/66721)).
- `RangeControl`: Deprecate 36px default size ([#66721](https://github.com/WordPress/gutenberg/pull/66721)).

### Bug Fixes

Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/box-control/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,8 @@ function BoxControl( {
};

const inputControlProps = {
onMouseOver,
onMouseOut,
...inputProps,
onChange: handleOnChange,
onFocus: handleOnFocus,
Expand All @@ -150,8 +152,6 @@ function BoxControl( {
setSelectedUnits,
sides,
values: inputValues,
onMouseOver,
onMouseOut,
__next40pxDefaultSize,
};

Expand Down
127 changes: 71 additions & 56 deletions packages/components/src/box-control/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,70 +17,85 @@ export type CustomValueUnits = {

type UnitControlPassthroughProps = Omit<
UnitControlProps,
'label' | 'onChange' | 'onFocus' | 'onMouseOver' | 'onMouseOut' | 'units'
'label' | 'onChange' | 'onFocus' | 'units'
>;

export type BoxControlProps = Pick<
UnitControlProps,
'onMouseOver' | 'onMouseOut' | 'units'
> & {
/**
* If this property is true, a button to reset the box control is rendered.
*
* @default true
*/
allowReset?: boolean;
/**
* The id to use as a base for the unique HTML id attribute of the control.
*/
id?: string;
/**
* Props for the internal `UnitControl` components.
*
* @default { min: 0 }
*/
inputProps?: UnitControlPassthroughProps;
/**
* Heading label for the control.
*
* @default __( 'Box Control' )
*/
label?: string;
type DeprecatedBoxControlProps = {
/**
* A callback function when an input value changes.
* @deprecated Pass to the `inputProps` prop instead.
* @ignore
*/
onChange: ( next: BoxControlValue ) => void;
onMouseOver?: UnitControlProps[ 'onMouseOver' ];
/**
* The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.
*
* @default { top: undefined, right: undefined, bottom: undefined, left: undefined }
* @deprecated Pass to the `inputProps` prop instead.
* @ignore
*/
resetValues?: BoxControlValue;
/**
* Collection of sides to allow control of. If omitted or empty, all sides will be available.
*
* Allowed values are "top", "right", "bottom", "left", "vertical", and "horizontal".
*/
sides?: readonly ( keyof BoxControlValue | 'horizontal' | 'vertical' )[];
/**
* If this property is true, when the box control is unlinked, vertical and horizontal controls
* can be used instead of updating individual sides.
*
* @default false
*/
splitOnAxis?: boolean;
/**
* The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.
*/
values?: BoxControlValue;
/**
* Start opting into the larger default height that will become the default size in a future version.
*
* @default false
*/
__next40pxDefaultSize?: boolean;
onMouseOut?: UnitControlProps[ 'onMouseOut' ];
};

export type BoxControlProps = Pick< UnitControlProps, 'units' > &
DeprecatedBoxControlProps & {
/**
* If this property is true, a button to reset the box control is rendered.
*
* @default true
*/
allowReset?: boolean;
/**
* The id to use as a base for the unique HTML id attribute of the control.
*/
id?: string;
/**
* Props for the internal `UnitControl` components.
*
* @default { min: 0 }
*/
inputProps?: UnitControlPassthroughProps;
/**
* Heading label for the control.
*
* @default __( 'Box Control' )
*/
label?: string;
/**
* A callback function when an input value changes.
*/
onChange: ( next: BoxControlValue ) => void;
/**
* The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.
*
* @default { top: undefined, right: undefined, bottom: undefined, left: undefined }
*/
resetValues?: BoxControlValue;
/**
* Collection of sides to allow control of. If omitted or empty, all sides will be available.
*
* Allowed values are "top", "right", "bottom", "left", "vertical", and "horizontal".
*/
sides?: readonly (
| keyof BoxControlValue
| 'horizontal'
| 'vertical'
)[];
/**
* If this property is true, when the box control is unlinked, vertical and horizontal controls
* can be used instead of updating individual sides.
*
* @default false
*/
splitOnAxis?: boolean;
/**
* The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.
*/
values?: BoxControlValue;
/**
* Start opting into the larger default height that will become the default size in a future version.
*
* @default false
*/
__next40pxDefaultSize?: boolean;
};

export type BoxControlInputControlProps = UnitControlPassthroughProps & {
onChange?: ( nextValues: BoxControlValue ) => void;
onFocus?: (
Expand Down
Loading