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: Refactor and unify the different sides implementation #67626

Merged
merged 11 commits into from
Dec 10, 2024
Merged

BoxControl: Refactor and unify the different sides implementation #67626

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
fcb341d
BoxControl: Refactor and unify the different sides implementation
youknowriad Dec 5, 2024
fb91c42
Add Changelog entry
youknowriad Dec 5, 2024
57a3fdc
Prevent the mixed placeholder form appearing when we're only modifyin…
youknowriad Dec 6, 2024
d50eb95
Fix the arbitrary sides use-case and swap sides
youknowriad Dec 6, 2024
9d69dca
Apply small simplification
youknowriad Dec 6, 2024
e06583a
Simplify merging logic
youknowriad Dec 6, 2024
e3db93f
Fix edge case
youknowriad Dec 9, 2024
5c8d201
Disable units when mixed units are used
youknowriad Dec 9, 2024
e04e4db
Move changelog entry to internal
youknowriad Dec 10, 2024
0c29c06
Document the props properly
youknowriad Dec 10, 2024
e3ff02f
Add due date for deprecation
youknowriad Dec 10, 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
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
- `MenuItem`: Increase height to 40px ([#67435](https://github.com/WordPress/gutenberg/pull/67435)).
- `MenuItemsChoice`: Increase option height to 40px ([#67435](https://github.com/WordPress/gutenberg/pull/67435)).
- `Navigation`: Fix active item hover color ([#67732](https://github.com/WordPress/gutenberg/pull/67732)).
- `BoxControl`: Refactor internals to unify the different combinations of sides. ([#67626](https://github.com/WordPress/gutenberg/pull/67626))
youknowriad marked this conversation as resolved.
Show resolved Hide resolved

### Deprecations

Expand Down
110 changes: 0 additions & 110 deletions packages/components/src/box-control/all-input-control.tsx
View file
Open in desktop

This file was deleted.

165 changes: 0 additions & 165 deletions packages/components/src/box-control/axial-input-controls.tsx
View file
Open in desktop

This file was deleted.

38 changes: 24 additions & 14 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 @@ -9,13 +9,10 @@ import { __ } from '@wordpress/i18n';
* Internal dependencies
*/
import { BaseControl } from '../base-control';
import AllInputControl from './all-input-control';
import InputControls from './input-controls';
import AxialInputControls from './axial-input-controls';
import InputControl from './input-control';
import LinkedButton from './linked-button';
import { Grid } from '../grid';
import {
FlexedBoxControlIcon,
InputWrapper,
ResetButton,
LinkedButtonWrapper,
Expand All @@ -24,8 +21,9 @@ import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
import {
DEFAULT_VALUES,
getInitialSide,
isValuesMixed,
isValueMixed,
isValuesDefined,
getAllowedSides,
} from './utils';
import { useControlledState } from '../utils/hooks';
import type {
Expand Down Expand Up @@ -97,7 +95,7 @@ function BoxControl( {

const [ isDirty, setIsDirty ] = useState( hasInitialValue );
const [ isLinked, setIsLinked ] = useState(
! hasInitialValue || ! isValuesMixed( inputValues ) || hasOneSide
! hasInitialValue || ! isValueMixed( inputValues ) || hasOneSide
);

const [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(
Expand Down Expand Up @@ -162,6 +160,7 @@ function BoxControl( {
__next40pxDefaultSize,
size: undefined,
} );
const sidesToRender = getAllowedSides( sides );

return (
<Grid
Expand All @@ -176,8 +175,7 @@ function BoxControl( {
</BaseControl.VisualLabel>
{ isLinked && (
<InputWrapper>
<FlexedBoxControlIcon side={ side } sides={ sides } />
<AllInputControl { ...inputControlProps } />
<InputControl side="all" { ...inputControlProps } />
</InputWrapper>
) }
{ ! hasOneSide && (
Expand All @@ -189,12 +187,24 @@ function BoxControl( {
</LinkedButtonWrapper>
) }

{ ! isLinked && splitOnAxis && (
<AxialInputControls { ...inputControlProps } />
) }
{ ! isLinked && ! splitOnAxis && (
<InputControls { ...inputControlProps } />
) }
{ ! isLinked &&
splitOnAxis &&
[ 'vertical', 'horizontal' ].map( ( axis ) => (
<InputControl
key={ axis }
side={ axis as 'horizontal' | 'vertical' }
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
{ ...inputControlProps }
/>
) ) }
{ ! isLinked &&
! splitOnAxis &&
Array.from( sidesToRender ).map( ( axis ) => (
<InputControl
key={ axis }
side={ axis }
{ ...inputControlProps }
/>
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
) ) }
{ allowReset && (
<ResetButton
className="component-box-control__reset-button"
Expand Down
Loading
Loading