From 910badbfada9b83f5132e3ee706436b5e46b68df Mon Sep 17 00:00:00 2001 From: brookewp Date: Wed, 29 Nov 2023 13:28:40 -0800 Subject: [PATCH 01/37] Change to vertical formatting without width constraints --- .../src/box-control/input-controls.tsx | 47 ++++++++++++------- .../box-control/styles/box-control-styles.ts | 2 - 2 files changed, 31 insertions(+), 18 deletions(-) diff --git a/packages/components/src/box-control/input-controls.tsx b/packages/components/src/box-control/input-controls.tsx index f72179f0d18c1..65f937c62ba6f 100644 --- a/packages/components/src/box-control/input-controls.tsx +++ b/packages/components/src/box-control/input-controls.tsx @@ -4,9 +4,11 @@ import UnitControl from './unit-control'; import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils'; import { ALL_SIDES, LABELS } from './utils'; +import { FlexItem } from '../flex'; import { LayoutContainer, Layout } from './styles/box-control-styles'; import type { BoxControlInputControlProps, BoxControlValue } from './types'; import type { UnitControlProps } from '../unit-control/types'; +import BoxControlIcon from './icon'; const noop = () => {}; @@ -100,6 +102,7 @@ export default function BoxInputControls( { gap={ 0 } align="top" className="component-box-control__input-controls" + direction="column" > { filteredSides.map( ( side ) => { const [ parsedQuantity, parsedUnit ] = @@ -110,22 +113,34 @@ export default function BoxInputControls( { : selectedUnits[ side ]; return ( - + + + + + + + + ); } ) } diff --git a/packages/components/src/box-control/styles/box-control-styles.ts b/packages/components/src/box-control/styles/box-control-styles.ts index d961d4322ba5a..3b015a92037ce 100644 --- a/packages/components/src/box-control/styles/box-control-styles.ts +++ b/packages/components/src/box-control/styles/box-control-styles.ts @@ -13,7 +13,6 @@ import type { BoxUnitControlProps } from '../types'; export const Root = styled.div` box-sizing: border-box; - max-width: 235px; padding-bottom: 12px; width: 100%; `; @@ -74,7 +73,6 @@ const unitControlMarginStyles = ( { }; export const UnitControl = styled( BaseUnitControl )` - max-width: 60px; ${ unitControlBorderRadiusStyles }; ${ unitControlMarginStyles }; `; From bdf11577015f7b81382f71977d6a0d1f8f4b9c42 Mon Sep 17 00:00:00 2001 From: brookewp Date: Wed, 29 Nov 2023 13:30:36 -0800 Subject: [PATCH 02/37] Add RangeControl to input controls --- .../src/box-control/input-controls.tsx | 29 ++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/packages/components/src/box-control/input-controls.tsx b/packages/components/src/box-control/input-controls.tsx index 65f937c62ba6f..7b5049828b1be 100644 --- a/packages/components/src/box-control/input-controls.tsx +++ b/packages/components/src/box-control/input-controls.tsx @@ -4,11 +4,12 @@ import UnitControl from './unit-control'; import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils'; import { ALL_SIDES, LABELS } from './utils'; -import { FlexItem } from '../flex'; +import { FlexBlock, FlexItem } from '../flex'; import { LayoutContainer, Layout } from './styles/box-control-styles'; import type { BoxControlInputControlProps, BoxControlValue } from './types'; import type { UnitControlProps } from '../unit-control/types'; import BoxControlIcon from './icon'; +import RangeControl from '../range-control'; const noop = () => {}; @@ -41,6 +42,15 @@ export default function BoxInputControls( { onChange( nextValues ); }; + const createSliderOnChange = ( + side: keyof BoxControlValue, + next: string + ) => { + const nextValues = { ...values }; + nextValues[ side ] = next; + handleOnChange( nextValues ); + }; + const createHandleOnChange: ( side: keyof BoxControlValue ) => UnitControlProps[ 'onChange' ] = @@ -140,6 +150,23 @@ export default function BoxInputControls( { __next40pxDefaultSize /> + + { + createSliderOnChange?.( + side, + [ newValue, computedUnit ].join( + '' + ) + ); + } } + value={ parsedQuantity } + withInputField={ false } + /> + ); } ) } From 5eb20ccf0030294a6ff49f21c1b45e70deed5870 Mon Sep 17 00:00:00 2001 From: brookewp Date: Wed, 29 Nov 2023 13:35:00 -0800 Subject: [PATCH 03/37] Only show Icon for AllInputControl --- packages/components/src/box-control/index.tsx | 26 ++++++++++++------- .../box-control/styles/box-control-styles.ts | 1 - 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx index c7fcf066c545c..3fd47a4f71005 100644 --- a/packages/components/src/box-control/index.tsx +++ b/packages/components/src/box-control/index.tsx @@ -176,17 +176,23 @@ function BoxControl( { ) } - - - - + { isLinked && ( - - - + <> + + + + + + + ) } { ! isLinked && splitOnAxis && ( diff --git a/packages/components/src/box-control/styles/box-control-styles.ts b/packages/components/src/box-control/styles/box-control-styles.ts index 3b015a92037ce..67d64749d589c 100644 --- a/packages/components/src/box-control/styles/box-control-styles.ts +++ b/packages/components/src/box-control/styles/box-control-styles.ts @@ -23,7 +23,6 @@ export const Header = styled( Flex )` export const HeaderControlWrapper = styled( Flex )` min-height: 30px; - gap: 0; `; export const UnitControlWrapper = styled.div` From e3c63de0b3a7f7dafbf5e879ac9faa458770c57d Mon Sep 17 00:00:00 2001 From: brookewp Date: Wed, 29 Nov 2023 18:44:59 -0800 Subject: [PATCH 04/37] Add RangeControl to AllInputControl --- .../src/box-control/all-input-control.tsx | 48 ++++++++++++----- packages/components/src/box-control/index.tsx | 52 +++++++++---------- .../box-control/styles/box-control-styles.ts | 4 +- 3 files changed, 61 insertions(+), 43 deletions(-) diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx index b66e10fdb4ce3..3c7151378c40b 100644 --- a/packages/components/src/box-control/all-input-control.tsx +++ b/packages/components/src/box-control/all-input-control.tsx @@ -1,7 +1,10 @@ /** * Internal dependencies */ +import { FlexBlock, FlexItem } from '../flex'; +import RangeControl from '../range-control'; import type { UnitControlProps } from '../unit-control/types'; +import { Layout } from './styles/box-control-styles'; import type { BoxControlInputControlProps } from './types'; import UnitControl from './unit-control'; import { @@ -36,6 +39,11 @@ export default function AllInputControl( { onFocus( event, { side: 'all' } ); }; + const createSliderOnChange = ( next: number | undefined ) => { + const nextValues = applyValueToSides( values, String( next ), sides ); + onChange( nextValues ); + }; + const handleOnChange: UnitControlProps[ 'onChange' ] = ( next ) => { const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) ); const nextValue = isNumeric ? next : undefined; @@ -70,17 +78,33 @@ export default function AllInputControl( { }; return ( - + + + + + + { + createSliderOnChange?.( newValue ); + } } + value={ Number( allValue ) } + withInputField={ false } + /> + + ); } diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx index 3fd47a4f71005..ec6ee7d355cfd 100644 --- a/packages/components/src/box-control/index.tsx +++ b/packages/components/src/box-control/index.tsx @@ -19,7 +19,7 @@ import LinkedButton from './linked-button'; import { Root, Header, - HeaderControlWrapper, + AllInputControlWrapper, } from './styles/box-control-styles'; import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils'; import { @@ -157,11 +157,11 @@ function BoxControl( { return (
- + { label } - + { allowReset && (
- - { isLinked && ( - <> - - - - - - - - ) } - { ! isLinked && splitOnAxis && ( - - - - ) } { ! hasOneSide && ( ) } - + + { isLinked && ( + + + + + + + + + ) } + { ! isLinked && splitOnAxis && ( + + ) } { ! isLinked && ! splitOnAxis && ( ) } diff --git a/packages/components/src/box-control/styles/box-control-styles.ts b/packages/components/src/box-control/styles/box-control-styles.ts index 67d64749d589c..41403e0625330 100644 --- a/packages/components/src/box-control/styles/box-control-styles.ts +++ b/packages/components/src/box-control/styles/box-control-styles.ts @@ -21,7 +21,7 @@ export const Header = styled( Flex )` margin-bottom: 8px; `; -export const HeaderControlWrapper = styled( Flex )` +export const AllInputControlWrapper = styled( Flex )` min-height: 30px; `; @@ -36,8 +36,6 @@ export const LayoutContainer = styled( Flex )` `; export const Layout = styled( Flex )` - position: relative; - height: 100%; width: 100%; justify-content: flex-start; `; From 5dcef4355fcacc63123e8ee637b4ab5ca22242a0 Mon Sep 17 00:00:00 2001 From: brookewp Date: Thu, 30 Nov 2023 17:50:30 -0800 Subject: [PATCH 05/37] Clean up styles and match SpacingInputControl --- .../src/box-control/all-input-control.tsx | 58 ++++----- packages/components/src/box-control/index.tsx | 84 ++++++------ .../src/box-control/input-controls.tsx | 120 ++++++++---------- .../box-control/styles/box-control-styles.ts | 38 +++--- 4 files changed, 131 insertions(+), 169 deletions(-) diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx index 3c7151378c40b..bebbaeee2cd45 100644 --- a/packages/components/src/box-control/all-input-control.tsx +++ b/packages/components/src/box-control/all-input-control.tsx @@ -1,10 +1,9 @@ /** * Internal dependencies */ -import { FlexBlock, FlexItem } from '../flex'; -import RangeControl from '../range-control'; import type { UnitControlProps } from '../unit-control/types'; -import { Layout } from './styles/box-control-styles'; +import { FlexedRangeControl } from './styles/box-control-styles'; +import { HStack } from '../h-stack'; import type { BoxControlInputControlProps } from './types'; import UnitControl from './unit-control'; import { @@ -78,33 +77,30 @@ export default function AllInputControl( { }; return ( - - - - - - { - createSliderOnChange?.( newValue ); - } } - value={ Number( allValue ) } - withInputField={ false } - /> - - + + + + { + createSliderOnChange?.( newValue ); + } } + value={ Number( allValue ) } + withInputField={ false } + /> + ); } diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx index ec6ee7d355cfd..993c3d062cb23 100644 --- a/packages/components/src/box-control/index.tsx +++ b/packages/components/src/box-control/index.tsx @@ -10,17 +10,17 @@ import { __ } from '@wordpress/i18n'; */ import { BaseControl } from '../base-control'; import Button from '../button'; -import { FlexItem, FlexBlock } from '../flex'; import AllInputControl from './all-input-control'; import InputControls from './input-controls'; import AxialInputControls from './axial-input-controls'; -import BoxControlIcon from './icon'; import LinkedButton from './linked-button'; import { Root, - Header, - AllInputControlWrapper, + FlexedBoxControlIcon, + ButtonWrapper, } from './styles/box-control-styles'; +import { HStack } from '../h-stack'; +import { Spacer } from '../spacer'; import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils'; import { DEFAULT_VALUES, @@ -156,50 +156,42 @@ function BoxControl( { return ( -
- - - { label } - - - { allowReset && ( - - - + + + { label } + + { ( allowReset || ! hasOneSide ) && ( + + { allowReset && ( + + ) } + { ! hasOneSide && ( + + ) } + ) } - { ! hasOneSide && ( - - - - ) } -
+ + { isLinked && ( - - - - - - - - + + + + + ) } { ! isLinked && splitOnAxis && ( diff --git a/packages/components/src/box-control/input-controls.tsx b/packages/components/src/box-control/input-controls.tsx index 7b5049828b1be..3d1fc2af882b6 100644 --- a/packages/components/src/box-control/input-controls.tsx +++ b/packages/components/src/box-control/input-controls.tsx @@ -4,12 +4,14 @@ import UnitControl from './unit-control'; import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils'; import { ALL_SIDES, LABELS } from './utils'; -import { FlexBlock, FlexItem } from '../flex'; -import { LayoutContainer, Layout } from './styles/box-control-styles'; +import { + FlexedBoxControlIcon, + FlexedRangeControl, +} from './styles/box-control-styles'; +import { HStack } from '../h-stack'; +import { VStack } from '../v-stack'; import type { BoxControlInputControlProps, BoxControlValue } from './types'; import type { UnitControlProps } from '../unit-control/types'; -import BoxControlIcon from './icon'; -import RangeControl from '../range-control'; const noop = () => {}; @@ -107,70 +109,50 @@ export default function BoxInputControls( { const only = first === last && first; return ( - - - { filteredSides.map( ( side ) => { - const [ parsedQuantity, parsedUnit ] = - parseQuantityAndUnitFromRawValue( values[ side ] ); - - const computedUnit = values[ side ] - ? parsedUnit - : selectedUnits[ side ]; - - return ( - - - - - - - - - { - createSliderOnChange?.( - side, - [ newValue, computedUnit ].join( - '' - ) - ); - } } - value={ parsedQuantity } - withInputField={ false } - /> - - - ); - } ) } - - + + { filteredSides.map( ( side ) => { + const [ parsedQuantity, parsedUnit ] = + parseQuantityAndUnitFromRawValue( values[ side ] ); + + const computedUnit = values[ side ] + ? parsedUnit + : selectedUnits[ side ]; + + return ( + + + + + { + createSliderOnChange?.( + side, + [ newValue, computedUnit ].join( '' ) + ); + } } + value={ parsedQuantity } + withInputField={ false } + /> + + ); + } ) } + ); } diff --git a/packages/components/src/box-control/styles/box-control-styles.ts b/packages/components/src/box-control/styles/box-control-styles.ts index 41403e0625330..a331796a4d38c 100644 --- a/packages/components/src/box-control/styles/box-control-styles.ts +++ b/packages/components/src/box-control/styles/box-control-styles.ts @@ -8,31 +8,29 @@ import styled from '@emotion/styled'; */ import { Flex } from '../../flex'; import BaseUnitControl from '../../unit-control'; +import BoxControlIcon from '../icon'; +import { HStack } from '../../h-stack'; +import RangeControl from '../../range-control'; import { rtl } from '../../utils'; +import { space } from '../../utils/space'; import type { BoxUnitControlProps } from '../types'; export const Root = styled.div` box-sizing: border-box; - padding-bottom: 12px; width: 100%; `; -export const Header = styled( Flex )` - margin-bottom: 8px; -`; - -export const AllInputControlWrapper = styled( Flex )` - min-height: 30px; -`; - export const UnitControlWrapper = styled.div` box-sizing: border-box; - max-width: 80px; + flex: 1; `; -export const LayoutContainer = styled( Flex )` - justify-content: center; - padding-top: 8px; +export const ButtonWrapper = styled( HStack )` + margin-bottom: ${ space( 2 ) }; +`; + +export const FlexedBoxControlIcon = styled( BoxControlIcon )` + flex: 0 0 auto; `; export const Layout = styled( Flex )` @@ -40,6 +38,10 @@ export const Layout = styled( Flex )` justify-content: flex-start; `; +export const FlexedRangeControl = styled( RangeControl )` + flex: 1; +`; + const unitControlBorderRadiusStyles = ( { isFirst, isLast, @@ -60,16 +62,6 @@ const unitControlBorderRadiusStyles = ( { } ); }; -const unitControlMarginStyles = ( { - isFirst, - isOnly, -}: Pick< BoxUnitControlProps, 'isFirst' | 'isOnly' > ) => { - const marginLeft = isFirst || isOnly ? 0 : -1; - - return rtl( { marginLeft } )(); -}; - export const UnitControl = styled( BaseUnitControl )` ${ unitControlBorderRadiusStyles }; - ${ unitControlMarginStyles }; `; From 695bba7403a1bbf7975583f344a89620b7f51666 Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 1 Dec 2023 17:44:42 -0800 Subject: [PATCH 06/37] Add changes to InputControls to AxialInputControls --- .../src/box-control/axial-input-controls.tsx | 83 +++++++++++++------ 1 file changed, 59 insertions(+), 24 deletions(-) diff --git a/packages/components/src/box-control/axial-input-controls.tsx b/packages/components/src/box-control/axial-input-controls.tsx index bc8a4bd420bbd..4e7986231a472 100644 --- a/packages/components/src/box-control/axial-input-controls.tsx +++ b/packages/components/src/box-control/axial-input-controls.tsx @@ -4,7 +4,12 @@ import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils'; import UnitControl from './unit-control'; import { LABELS } from './utils'; -import { Layout } from './styles/box-control-styles'; +import { + FlexedBoxControlIcon, + FlexedRangeControl, +} from './styles/box-control-styles'; +import { HStack } from '../h-stack'; +import { VStack } from '../v-stack'; import type { BoxControlInputControlProps } from './types'; const groupedSides = [ 'vertical', 'horizontal' ] as const; @@ -66,6 +71,21 @@ export default function AxialInputControls( { } }; + const createSliderOnChange = ( side: GroupedSide, next: string ) => { + const nextValues = { ...values }; + + if ( side === 'vertical' ) { + nextValues.top = next; + nextValues.bottom = next; + } + + if ( side === 'horizontal' ) { + nextValues.left = next; + nextValues.right = next; + } + onChange?.( nextValues ); + }; + const createHandleOnChange = ( side: GroupedSide ) => ( next?: string ) => { if ( ! onChange ) { return; @@ -114,11 +134,7 @@ export default function AxialInputControls( { const only = first === last && first; return ( - + { filteredSides.map( ( side ) => { const [ parsedQuantity, parsedUnit ] = parseQuantityAndUnitFromRawValue( @@ -129,25 +145,44 @@ export default function AxialInputControls( { ? selectedUnits.top : selectedUnits.left; return ( - + + + + { + createSliderOnChange?.( + side, + [ + newValue, + selectedUnit ?? parsedUnit, + ].join( '' ) + ); + } } + value={ parsedQuantity } + withInputField={ false } + /> + ); } ) } - + ); } From c0a8d7f4c40e75c77de4cc8ff8c7648362170d93 Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 1 Dec 2023 17:45:52 -0800 Subject: [PATCH 07/37] Update styles based on design input --- packages/components/src/box-control/input-controls.tsx | 2 +- .../src/box-control/styles/box-control-styles.ts | 7 +------ 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/components/src/box-control/input-controls.tsx b/packages/components/src/box-control/input-controls.tsx index 3d1fc2af882b6..19041ced32bde 100644 --- a/packages/components/src/box-control/input-controls.tsx +++ b/packages/components/src/box-control/input-controls.tsx @@ -109,7 +109,7 @@ export default function BoxInputControls( { const only = first === last && first; return ( - + { filteredSides.map( ( side ) => { const [ parsedQuantity, parsedUnit ] = parseQuantityAndUnitFromRawValue( values[ side ] ); diff --git a/packages/components/src/box-control/styles/box-control-styles.ts b/packages/components/src/box-control/styles/box-control-styles.ts index a331796a4d38c..7f0db347ccea1 100644 --- a/packages/components/src/box-control/styles/box-control-styles.ts +++ b/packages/components/src/box-control/styles/box-control-styles.ts @@ -6,7 +6,6 @@ import styled from '@emotion/styled'; /** * Internal dependencies */ -import { Flex } from '../../flex'; import BaseUnitControl from '../../unit-control'; import BoxControlIcon from '../icon'; import { HStack } from '../../h-stack'; @@ -23,6 +22,7 @@ export const Root = styled.div` export const UnitControlWrapper = styled.div` box-sizing: border-box; flex: 1; + max-width: 90px; `; export const ButtonWrapper = styled( HStack )` @@ -33,11 +33,6 @@ export const FlexedBoxControlIcon = styled( BoxControlIcon )` flex: 0 0 auto; `; -export const Layout = styled( Flex )` - width: 100%; - justify-content: flex-start; -`; - export const FlexedRangeControl = styled( RangeControl )` flex: 1; `; From 6b78cf17f256ca5c1c2545a3dc670285e8feb4a2 Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 1 Dec 2023 17:46:33 -0800 Subject: [PATCH 08/37] =?UTF-8?q?Fix=20issue=20where=20changing=20input=20?= =?UTF-8?q?didn=E2=80=99t=20affect=20rangecontrol?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/box-control/all-input-control.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx index bebbaeee2cd45..dabc8e05a3a05 100644 --- a/packages/components/src/box-control/all-input-control.tsx +++ b/packages/components/src/box-control/all-input-control.tsx @@ -13,6 +13,7 @@ import { isValuesMixed, isValuesDefined, } from './utils'; +import { parseQuantityAndUnitFromRawValue } from '../unit-control'; const noop = () => {}; @@ -38,7 +39,7 @@ export default function AllInputControl( { onFocus( event, { side: 'all' } ); }; - const createSliderOnChange = ( next: number | undefined ) => { + const createSliderOnChange = ( next: string ) => { const nextValues = applyValueToSides( values, String( next ), sides ); onChange( nextValues ); }; @@ -76,13 +77,16 @@ export default function AllInputControl( { } ); }; + const [ parsedQuantity, parsedUnit ] = + parseQuantityAndUnitFromRawValue( allValue ); + return ( { - createSliderOnChange?.( newValue ); + createSliderOnChange?.( + [ newValue, parsedUnit ].join( '' ) + ); } } - value={ Number( allValue ) } + value={ parsedQuantity } withInputField={ false } /> From 94db8094068828ac1e22a3cb3ed71d949c263bd2 Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 1 Dec 2023 18:24:43 -0800 Subject: [PATCH 09/37] Add labels to sliders --- packages/components/src/box-control/all-input-control.tsx | 1 + packages/components/src/box-control/axial-input-controls.tsx | 1 + packages/components/src/box-control/input-controls.tsx | 1 + 3 files changed, 3 insertions(+) diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx index dabc8e05a3a05..e48e39fdb80bc 100644 --- a/packages/components/src/box-control/all-input-control.tsx +++ b/packages/components/src/box-control/all-input-control.tsx @@ -99,6 +99,7 @@ export default function AllInputControl( { __nextHasNoMarginBottom hideLabelFromVision initialPosition={ 0 } + label={ LABELS.all } onChange={ ( newValue ) => { createSliderOnChange?.( [ newValue, parsedUnit ].join( '' ) diff --git a/packages/components/src/box-control/axial-input-controls.tsx b/packages/components/src/box-control/axial-input-controls.tsx index 4e7986231a472..6f3b99f3abb5a 100644 --- a/packages/components/src/box-control/axial-input-controls.tsx +++ b/packages/components/src/box-control/axial-input-controls.tsx @@ -168,6 +168,7 @@ export default function AxialInputControls( { __nextHasNoMarginBottom hideLabelFromVision initialPosition={ 0 } + label={ LABELS[ side ] } onChange={ ( newValue ) => { createSliderOnChange?.( side, diff --git a/packages/components/src/box-control/input-controls.tsx b/packages/components/src/box-control/input-controls.tsx index 19041ced32bde..a7bbf6e070bf9 100644 --- a/packages/components/src/box-control/input-controls.tsx +++ b/packages/components/src/box-control/input-controls.tsx @@ -141,6 +141,7 @@ export default function BoxInputControls( { __nextHasNoMarginBottom hideLabelFromVision initialPosition={ 0 } + label={ LABELS[ side ] } onChange={ ( newValue ) => { createSliderOnChange?.( side, From ac87f8edd1448397bf209685b49a445472f0570c Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 1 Dec 2023 18:29:14 -0800 Subject: [PATCH 10/37] Add unit tests for slider --- .../components/src/box-control/test/index.tsx | 82 ++++++++++++++++++- 1 file changed, 81 insertions(+), 1 deletion(-) diff --git a/packages/components/src/box-control/test/index.tsx b/packages/components/src/box-control/test/index.tsx index 8a861eff37e1b..ca0152fb14ce6 100644 --- a/packages/components/src/box-control/test/index.tsx +++ b/packages/components/src/box-control/test/index.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import { render, screen } from '@testing-library/react'; +import { fireEvent, render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; /** @@ -51,6 +51,36 @@ describe( 'BoxControl', () => { expect( input ).toHaveValue( '100' ); } ); + + it( 'should update input values when interacting with slider', () => { + render( {} } /> ); + + const slider = screen.getByRole( 'slider' ); + + fireEvent.change( slider, { target: { value: 50 } } ); + + expect( slider ).toHaveValue( '50' ); + expect( + screen.getByRole( 'textbox', { + name: 'Box Control', + } ) + ).toHaveValue( '50' ); + } ); + + it( 'should update slider values when interacting with input', async () => { + const user = userEvent.setup(); + render( {} } /> ); + + const input = screen.getByRole( 'textbox', { + name: 'Box Control', + } ); + + await user.type( input, '50' ); + await user.keyboard( '{Enter}' ); + + expect( input ).toHaveValue( '50' ); + expect( screen.getByRole( 'slider' ) ).toHaveValue( '50' ); + } ); } ); describe( 'Reset', () => { @@ -170,6 +200,34 @@ describe( 'BoxControl', () => { ).not.toHaveValue(); } ); + it( 'should update a single side value when using slider unlinked', async () => { + const user = userEvent.setup(); + + render( ); + + await user.click( + screen.getByRole( 'button', { name: 'Unlink sides' } ) + ); + + const slider = screen.getByRole( 'slider', { name: 'Right' } ); + + fireEvent.change( slider, { target: { value: 50 } } ); + + expect( slider ).toHaveValue( '50' ); + expect( + screen.getByRole( 'textbox', { name: 'Top' } ) + ).not.toHaveValue(); + expect( + screen.getByRole( 'textbox', { name: 'Right' } ) + ).toHaveValue( '50' ); + expect( + screen.getByRole( 'textbox', { name: 'Bottom' } ) + ).not.toHaveValue(); + expect( + screen.getByRole( 'textbox', { name: 'Left' } ) + ).not.toHaveValue(); + } ); + it( 'should update a whole axis when value is changed when unlinked', async () => { const user = userEvent.setup(); @@ -193,6 +251,28 @@ describe( 'BoxControl', () => { screen.getByRole( 'textbox', { name: 'Horizontal' } ) ).not.toHaveValue(); } ); + + it( 'should update a whole axis using a slider when value is changed when unlinked', async () => { + const user = userEvent.setup(); + + render( ); + + await user.click( + screen.getByRole( 'button', { name: 'Unlink sides' } ) + ); + + const slider = screen.getByRole( 'slider', { name: 'Horizontal' } ); + + fireEvent.change( slider, { target: { value: 50 } } ); + + expect( slider ).toHaveValue( '50' ); + expect( + screen.getByRole( 'textbox', { name: 'Vertical' } ) + ).not.toHaveValue(); + expect( + screen.getByRole( 'textbox', { name: 'Horizontal' } ) + ).toHaveValue( '50' ); + } ); } ); describe( 'Unit selections', () => { From c9ac4b54e5131ca1157f2eb54b17f5eb049b93c6 Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 1 Dec 2023 18:39:07 -0800 Subject: [PATCH 11/37] Update changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index e8beb4717d1e0..98d725769c4eb 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -35,6 +35,7 @@ - `Tabs`: do not render hidden content ([#57046](https://github.com/WordPress/gutenberg/pull/57046)). - `Tabs`: improve hover and text alignment styles ([#57275](https://github.com/WordPress/gutenberg/pull/57275)). - `Tabs`: make sure `Tab`s are associated to the right `TabPanel`s, regardless of the order they're rendered in ([#57033](https://github.com/WordPress/gutenberg/pull/57033)). +- `BoxControl`: Update design ([#56665](https://github.com/WordPress/gutenberg/pull/56665)). ## 25.14.0 (2023-12-13) From 6076058adb9a71a2e460a96867ee71845ce13a51 Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 8 Dec 2023 15:03:43 -0800 Subject: [PATCH 12/37] Update function name and add limitations to slider based on units --- .../src/box-control/all-input-control.tsx | 12 ++++-- .../src/box-control/axial-input-controls.tsx | 15 ++++++-- .../src/box-control/input-controls.tsx | 18 ++++++--- packages/components/src/box-control/types.ts | 4 ++ packages/components/src/box-control/utils.ts | 37 ++++++++++++++++++- 5 files changed, 72 insertions(+), 14 deletions(-) diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx index e48e39fdb80bc..f63d893eedc15 100644 --- a/packages/components/src/box-control/all-input-control.tsx +++ b/packages/components/src/box-control/all-input-control.tsx @@ -12,6 +12,7 @@ import { getAllValue, isValuesMixed, isValuesDefined, + CUSTOM_VALUE_SETTINGS, } from './utils'; import { parseQuantityAndUnitFromRawValue } from '../unit-control'; @@ -39,7 +40,7 @@ export default function AllInputControl( { onFocus( event, { side: 'all' } ); }; - const createSliderOnChange = ( next: string ) => { + const sliderOnChange = ( next: string ) => { const nextValues = applyValueToSides( values, String( next ), sides ); onChange( nextValues ); }; @@ -101,10 +102,13 @@ export default function AllInputControl( { initialPosition={ 0 } label={ LABELS.all } onChange={ ( newValue ) => { - createSliderOnChange?.( - [ newValue, parsedUnit ].join( '' ) - ); + sliderOnChange( [ newValue, parsedUnit ].join( '' ) ); } } + min={ 0 } + max={ CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.max ?? 10 } + step={ + CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.steps ?? 0.1 + } value={ parsedQuantity } withInputField={ false } /> diff --git a/packages/components/src/box-control/axial-input-controls.tsx b/packages/components/src/box-control/axial-input-controls.tsx index 6f3b99f3abb5a..25c18473040e6 100644 --- a/packages/components/src/box-control/axial-input-controls.tsx +++ b/packages/components/src/box-control/axial-input-controls.tsx @@ -3,7 +3,7 @@ */ import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils'; import UnitControl from './unit-control'; -import { LABELS } from './utils'; +import { CUSTOM_VALUE_SETTINGS, LABELS } from './utils'; import { FlexedBoxControlIcon, FlexedRangeControl, @@ -71,7 +71,7 @@ export default function AxialInputControls( { } }; - const createSliderOnChange = ( side: GroupedSide, next: string ) => { + const sliderOnChange = ( side: GroupedSide, next: string ) => { const nextValues = { ...values }; if ( side === 'vertical' ) { @@ -170,7 +170,7 @@ export default function AxialInputControls( { initialPosition={ 0 } label={ LABELS[ side ] } onChange={ ( newValue ) => { - createSliderOnChange?.( + sliderOnChange( side, [ newValue, @@ -178,6 +178,15 @@ export default function AxialInputControls( { ].join( '' ) ); } } + min={ 0 } + max={ + CUSTOM_VALUE_SETTINGS[ selectedUnit ?? 'px' ] + ?.max ?? 10 + } + step={ + CUSTOM_VALUE_SETTINGS[ selectedUnit ?? 'px' ] + ?.steps ?? 0.1 + } value={ parsedQuantity } withInputField={ false } /> diff --git a/packages/components/src/box-control/input-controls.tsx b/packages/components/src/box-control/input-controls.tsx index a7bbf6e070bf9..f2764252942b8 100644 --- a/packages/components/src/box-control/input-controls.tsx +++ b/packages/components/src/box-control/input-controls.tsx @@ -3,7 +3,7 @@ */ import UnitControl from './unit-control'; import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils'; -import { ALL_SIDES, LABELS } from './utils'; +import { ALL_SIDES, CUSTOM_VALUE_SETTINGS, LABELS } from './utils'; import { FlexedBoxControlIcon, FlexedRangeControl, @@ -44,10 +44,7 @@ export default function BoxInputControls( { onChange( nextValues ); }; - const createSliderOnChange = ( - side: keyof BoxControlValue, - next: string - ) => { + const sliderOnChange = ( side: keyof BoxControlValue, next: string ) => { const nextValues = { ...values }; nextValues[ side ] = next; handleOnChange( nextValues ); @@ -143,11 +140,20 @@ export default function BoxInputControls( { initialPosition={ 0 } label={ LABELS[ side ] } onChange={ ( newValue ) => { - createSliderOnChange?.( + sliderOnChange( side, [ newValue, computedUnit ].join( '' ) ); } } + min={ 0 } + max={ + CUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ] + ?.max ?? 10 + } + step={ + CUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ] + ?.steps ?? 0.1 + } value={ parsedQuantity } withInputField={ false } /> diff --git a/packages/components/src/box-control/types.ts b/packages/components/src/box-control/types.ts index 0eba0e58fd33c..0278771f51a0f 100644 --- a/packages/components/src/box-control/types.ts +++ b/packages/components/src/box-control/types.ts @@ -16,6 +16,10 @@ export type BoxControlValue = { left?: string; }; +export type CustomValueUnits = { + [ index: string ]: { max: number; steps: number }; +}; + type UnitControlPassthroughProps = Omit< UnitControlProps, 'label' | 'onChange' | 'onFocus' | 'onMouseOver' | 'onMouseOut' | 'units' diff --git a/packages/components/src/box-control/utils.ts b/packages/components/src/box-control/utils.ts index 6614342d3da6d..423f12f82d2f8 100644 --- a/packages/components/src/box-control/utils.ts +++ b/packages/components/src/box-control/utils.ts @@ -7,7 +7,42 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils'; -import type { BoxControlProps, BoxControlValue } from './types'; +import type { + BoxControlProps, + BoxControlValue, + CustomValueUnits, +} from './types'; + +export const CUSTOM_VALUE_SETTINGS: CustomValueUnits = { + px: { max: 300, steps: 1 }, + '%': { max: 100, steps: 1 }, + vw: { max: 100, steps: 1 }, + vh: { max: 100, steps: 1 }, + em: { max: 10, steps: 0.1 }, + rm: { max: 10, steps: 0.1 }, + svw: { max: 100, steps: 1 }, + lvw: { max: 100, steps: 1 }, + dvw: { max: 100, steps: 1 }, + svh: { max: 100, steps: 1 }, + lvh: { max: 100, steps: 1 }, + dvh: { max: 100, steps: 1 }, + vi: { max: 100, steps: 1 }, + svi: { max: 100, steps: 1 }, + lvi: { max: 100, steps: 1 }, + dvi: { max: 100, steps: 1 }, + vb: { max: 100, steps: 1 }, + svb: { max: 100, steps: 1 }, + lvb: { max: 100, steps: 1 }, + dvb: { max: 100, steps: 1 }, + vmin: { max: 100, steps: 1 }, + svmin: { max: 100, steps: 1 }, + lvmin: { max: 100, steps: 1 }, + dvmin: { max: 100, steps: 1 }, + vmax: { max: 100, steps: 1 }, + svmax: { max: 100, steps: 1 }, + lvmax: { max: 100, steps: 1 }, + dvmax: { max: 100, steps: 1 }, +}; export const LABELS = { all: __( 'All' ), From 11b46d6674448cf8b9532752ac57d5b0150e5335 Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 8 Dec 2023 15:08:01 -0800 Subject: [PATCH 13/37] Add right margin to prevent slider thumb from being cut off --- packages/components/src/box-control/styles/box-control-styles.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/box-control/styles/box-control-styles.ts b/packages/components/src/box-control/styles/box-control-styles.ts index 7f0db347ccea1..e9fb4b9001d7a 100644 --- a/packages/components/src/box-control/styles/box-control-styles.ts +++ b/packages/components/src/box-control/styles/box-control-styles.ts @@ -35,6 +35,7 @@ export const FlexedBoxControlIcon = styled( BoxControlIcon )` export const FlexedRangeControl = styled( RangeControl )` flex: 1; + margin-right: ${ space( 2 ) }; `; const unitControlBorderRadiusStyles = ( { From 8fa41ab0a7ae665cdf6bb2291adf78897e30cb7a Mon Sep 17 00:00:00 2001 From: brookewp Date: Mon, 11 Dec 2023 10:56:52 -0800 Subject: [PATCH 14/37] =?UTF-8?q?Update=20slider=E2=80=99s=20initial=20pos?= =?UTF-8?q?ition=20to=20check=20for=20a=20value?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/components/src/box-control/all-input-control.tsx | 2 +- packages/components/src/box-control/axial-input-controls.tsx | 2 +- packages/components/src/box-control/input-controls.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx index f63d893eedc15..e2448364b592e 100644 --- a/packages/components/src/box-control/all-input-control.tsx +++ b/packages/components/src/box-control/all-input-control.tsx @@ -99,7 +99,7 @@ export default function AllInputControl( { { sliderOnChange( [ newValue, parsedUnit ].join( '' ) ); diff --git a/packages/components/src/box-control/axial-input-controls.tsx b/packages/components/src/box-control/axial-input-controls.tsx index 25c18473040e6..bb3289c522220 100644 --- a/packages/components/src/box-control/axial-input-controls.tsx +++ b/packages/components/src/box-control/axial-input-controls.tsx @@ -167,7 +167,7 @@ export default function AxialInputControls( { { sliderOnChange( diff --git a/packages/components/src/box-control/input-controls.tsx b/packages/components/src/box-control/input-controls.tsx index f2764252942b8..67dac74b8526a 100644 --- a/packages/components/src/box-control/input-controls.tsx +++ b/packages/components/src/box-control/input-controls.tsx @@ -137,7 +137,7 @@ export default function BoxInputControls( { { sliderOnChange( From f1c9be2aeeea2f9bd1cf3b4483a8bc8149e7b444 Mon Sep 17 00:00:00 2001 From: brookewp Date: Tue, 12 Dec 2023 12:22:34 -0800 Subject: [PATCH 15/37] Replace Tooltip with component --- .../src/box-control/unit-control.tsx | 28 ++----------------- 1 file changed, 2 insertions(+), 26 deletions(-) diff --git a/packages/components/src/box-control/unit-control.tsx b/packages/components/src/box-control/unit-control.tsx index 24d71cf0d6cd3..1056a8ecd43ed 100644 --- a/packages/components/src/box-control/unit-control.tsx +++ b/packages/components/src/box-control/unit-control.tsx @@ -6,7 +6,7 @@ import { useHover } from '@use-gesture/react'; /** * Internal dependencies */ -import BaseTooltip from '../tooltip'; +import Tooltip from '../tooltip'; import { UnitControlWrapper, UnitControl } from './styles/box-control-styles'; import type { BoxUnitControlProps } from './types'; @@ -32,7 +32,7 @@ export default function BoxUnitControl( { return ( - + ); } - -function Tooltip( { - children, - text, -}: { - children: JSX.Element; - text?: string; -} ) { - if ( ! text ) return children; - - /** - * Wrapping the children in a `
` as Tooltip as it attempts - * to render the . Using a plain `
` appears to - * resolve this issue. - * - * Originally discovered and referenced here: - * https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026 - */ - return ( - -
{ children }
- - ); -} From ec4985cf758c80e9b4a10112ab18572152417bf2 Mon Sep 17 00:00:00 2001 From: brookewp Date: Tue, 12 Dec 2023 12:36:05 -0800 Subject: [PATCH 16/37] Use Grid for better semantics and a11y --- .../src/box-control/axial-input-controls.tsx | 11 ++- packages/components/src/box-control/index.tsx | 73 +++++++++---------- .../src/box-control/input-controls.tsx | 11 ++- .../box-control/styles/box-control-styles.ts | 20 +++-- 4 files changed, 59 insertions(+), 56 deletions(-) diff --git a/packages/components/src/box-control/axial-input-controls.tsx b/packages/components/src/box-control/axial-input-controls.tsx index bb3289c522220..10f1829be7876 100644 --- a/packages/components/src/box-control/axial-input-controls.tsx +++ b/packages/components/src/box-control/axial-input-controls.tsx @@ -7,9 +7,8 @@ import { CUSTOM_VALUE_SETTINGS, LABELS } from './utils'; import { FlexedBoxControlIcon, FlexedRangeControl, + InputWrapper, } from './styles/box-control-styles'; -import { HStack } from '../h-stack'; -import { VStack } from '../v-stack'; import type { BoxControlInputControlProps } from './types'; const groupedSides = [ 'vertical', 'horizontal' ] as const; @@ -134,7 +133,7 @@ export default function AxialInputControls( { const only = first === last && first; return ( - + <> { filteredSides.map( ( side ) => { const [ parsedQuantity, parsedUnit ] = parseQuantityAndUnitFromRawValue( @@ -145,7 +144,7 @@ export default function AxialInputControls( { ? selectedUnits.top : selectedUnits.left; return ( - + - + ); } ) } - + ); } diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx index 993c3d062cb23..760afabc9676b 100644 --- a/packages/components/src/box-control/index.tsx +++ b/packages/components/src/box-control/index.tsx @@ -9,18 +9,17 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { BaseControl } from '../base-control'; -import Button from '../button'; import AllInputControl from './all-input-control'; import InputControls from './input-controls'; import AxialInputControls from './axial-input-controls'; import LinkedButton from './linked-button'; +import { Grid } from '../grid'; import { - Root, FlexedBoxControlIcon, - ButtonWrapper, + InputWrapper, + ResetButton, + LinkedButtonWrapper, } from './styles/box-control-styles'; -import { HStack } from '../h-stack'; -import { Spacer } from '../spacer'; import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils'; import { DEFAULT_VALUES, @@ -155,51 +154,51 @@ function BoxControl( { }; return ( - - - - { label } - - { ( allowReset || ! hasOneSide ) && ( - - { allowReset && ( - - ) } - { ! hasOneSide && ( - - ) } - - ) } - - + + + { label } + { isLinked && ( - + - - + + ) } + { ! hasOneSide && ( + + + ) } + { ! isLinked && splitOnAxis && ( ) } { ! isLinked && ! splitOnAxis && ( ) } - + { allowReset && ( + + { __( 'Reset' ) } + + ) } + ); } diff --git a/packages/components/src/box-control/input-controls.tsx b/packages/components/src/box-control/input-controls.tsx index 67dac74b8526a..713671d9f57ec 100644 --- a/packages/components/src/box-control/input-controls.tsx +++ b/packages/components/src/box-control/input-controls.tsx @@ -7,9 +7,8 @@ import { ALL_SIDES, CUSTOM_VALUE_SETTINGS, LABELS } from './utils'; import { FlexedBoxControlIcon, FlexedRangeControl, + InputWrapper, } from './styles/box-control-styles'; -import { HStack } from '../h-stack'; -import { VStack } from '../v-stack'; import type { BoxControlInputControlProps, BoxControlValue } from './types'; import type { UnitControlProps } from '../unit-control/types'; @@ -106,7 +105,7 @@ export default function BoxInputControls( { const only = first === last && first; return ( - + <> { filteredSides.map( ( side ) => { const [ parsedQuantity, parsedUnit ] = parseQuantityAndUnitFromRawValue( values[ side ] ); @@ -116,7 +115,7 @@ export default function BoxInputControls( { : selectedUnits[ side ]; return ( - + - + ); } ) } - + ); } diff --git a/packages/components/src/box-control/styles/box-control-styles.ts b/packages/components/src/box-control/styles/box-control-styles.ts index e9fb4b9001d7a..5a4e671906d4e 100644 --- a/packages/components/src/box-control/styles/box-control-styles.ts +++ b/packages/components/src/box-control/styles/box-control-styles.ts @@ -8,25 +8,31 @@ import styled from '@emotion/styled'; */ import BaseUnitControl from '../../unit-control'; import BoxControlIcon from '../icon'; +import Button from '../../button'; import { HStack } from '../../h-stack'; import RangeControl from '../../range-control'; import { rtl } from '../../utils'; import { space } from '../../utils/space'; import type { BoxUnitControlProps } from '../types'; -export const Root = styled.div` - box-sizing: border-box; - width: 100%; -`; - export const UnitControlWrapper = styled.div` box-sizing: border-box; flex: 1; max-width: 90px; `; -export const ButtonWrapper = styled( HStack )` - margin-bottom: ${ space( 2 ) }; +export const InputWrapper = styled( HStack )` + grid-column: 1 / span 4; +`; + +export const ResetButton = styled( Button )` + grid-area: 1 / 3; + justify-self: end; +`; + +export const LinkedButtonWrapper = styled.div` + grid-area: 1 / 4; + justify-self: end; `; export const FlexedBoxControlIcon = styled( BoxControlIcon )` From a9ae993172030e64e425b0527fa6e945a86d3b7b Mon Sep 17 00:00:00 2001 From: brookewp Date: Tue, 12 Dec 2023 13:22:46 -0800 Subject: [PATCH 17/37] Add id for slider aria labels --- .../components/src/box-control/all-input-control.tsx | 8 ++++++++ .../src/box-control/axial-input-controls.tsx | 8 ++++++++ packages/components/src/box-control/input-controls.tsx | 10 +++++++++- 3 files changed, 25 insertions(+), 1 deletion(-) diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx index e2448364b592e..a6aefab80ded6 100644 --- a/packages/components/src/box-control/all-input-control.tsx +++ b/packages/components/src/box-control/all-input-control.tsx @@ -1,3 +1,7 @@ +/** + * WordPress dependencies + */ +import { useInstanceId } from '@wordpress/compose'; /** * Internal dependencies */ @@ -29,6 +33,7 @@ export default function AllInputControl( { setSelectedUnits, ...props }: BoxControlInputControlProps ) { + const inputId = useInstanceId( AllInputControl, 'box-control-input' ); const allValue = getAllValue( values, selectedUnits, sides ); const hasValues = isValuesDefined( values ); const isMixed = hasValues && isValuesMixed( values, selectedUnits, sides ); @@ -86,6 +91,7 @@ export default function AllInputControl( { ( event: React.FocusEvent< HTMLInputElement > ) => { @@ -148,6 +153,7 @@ export default function AxialInputControls( { ( event: React.FocusEvent< HTMLInputElement > ) => { @@ -122,6 +128,7 @@ export default function BoxInputControls( { isFirst={ first === side } isLast={ last === side } isOnly={ only === side } + id={ inputId } value={ [ parsedQuantity, computedUnit ].join( '' ) } @@ -134,10 +141,11 @@ export default function BoxInputControls( { /> { sliderOnChange( side, From 2494cdb583a4d4d6ceec00128497f0e691c08522 Mon Sep 17 00:00:00 2001 From: brookewp Date: Wed, 13 Dec 2023 17:57:09 -0800 Subject: [PATCH 18/37] Implement changes from PR feedback --- .../src/box-control/all-input-control.tsx | 32 ++++++++++--------- .../src/box-control/axial-input-controls.tsx | 3 +- .../src/box-control/input-controls.tsx | 3 +- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx index a6aefab80ded6..814363b3b69d4 100644 --- a/packages/components/src/box-control/all-input-control.tsx +++ b/packages/components/src/box-control/all-input-control.tsx @@ -39,18 +39,16 @@ export default function AllInputControl( { const isMixed = hasValues && isValuesMixed( values, selectedUnits, sides ); const allPlaceholder = isMixed ? LABELS.mixed : undefined; + const [ parsedQuantity, parsedUnit ] = + parseQuantityAndUnitFromRawValue( allValue ); + const handleOnFocus: React.FocusEventHandler< HTMLInputElement > = ( event ) => { onFocus( event, { side: 'all' } ); }; - const sliderOnChange = ( next: string ) => { - const nextValues = applyValueToSides( values, String( next ), sides ); - onChange( nextValues ); - }; - - const handleOnChange: UnitControlProps[ 'onChange' ] = ( next ) => { + const onValueChange = ( next?: string ) => { const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) ); const nextValue = isNumeric ? next : undefined; const nextValues = applyValueToSides( values, nextValue, sides ); @@ -58,6 +56,16 @@ export default function AllInputControl( { onChange( nextValues ); }; + const unitControlOnChange: UnitControlProps[ 'onChange' ] = ( next ) => { + onValueChange( next ); + }; + + const sliderOnChange = ( next?: number ) => { + onValueChange( + next !== undefined ? [ next, parsedUnit ].join( '' ) : undefined + ); + }; + // Set selected unit so it can be used as fallback by unlinked controls // when individual sides do not have a value containing a unit. const handleOnUnitChange: UnitControlProps[ 'onUnitChange' ] = ( unit ) => { @@ -83,9 +91,6 @@ export default function AllInputControl( { } ); }; - const [ parsedQuantity, parsedUnit ] = - parseQuantityAndUnitFromRawValue( allValue ); - return ( { - sliderOnChange( [ newValue, parsedUnit ].join( '' ) ); - } } + onChange={ sliderOnChange } min={ 0 } max={ CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.max ?? 10 } step={ CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.steps ?? 0.1 } - value={ parsedQuantity } + value={ parsedQuantity ?? 0 } withInputField={ false } /> diff --git a/packages/components/src/box-control/axial-input-controls.tsx b/packages/components/src/box-control/axial-input-controls.tsx index b83163451ac25..9fba588b7708d 100644 --- a/packages/components/src/box-control/axial-input-controls.tsx +++ b/packages/components/src/box-control/axial-input-controls.tsx @@ -174,7 +174,6 @@ export default function AxialInputControls( { aria-controls={ inputId } aria-labelledby={ inputId } hideLabelFromVision - initialPosition={ parsedQuantity ?? 0 } label={ LABELS[ side ] } onChange={ ( newValue ) => { sliderOnChange( @@ -194,7 +193,7 @@ export default function AxialInputControls( { CUSTOM_VALUE_SETTINGS[ selectedUnit ?? 'px' ] ?.steps ?? 0.1 } - value={ parsedQuantity } + value={ parsedQuantity ?? 0 } withInputField={ false } /> diff --git a/packages/components/src/box-control/input-controls.tsx b/packages/components/src/box-control/input-controls.tsx index e4de9faac5e1f..82a970195994d 100644 --- a/packages/components/src/box-control/input-controls.tsx +++ b/packages/components/src/box-control/input-controls.tsx @@ -145,7 +145,6 @@ export default function BoxInputControls( { aria-labelledby={ inputId } __nextHasNoMarginBottom hideLabelFromVision - initialPosition={ parsedQuantity ?? 0 } onChange={ ( newValue ) => { sliderOnChange( side, @@ -161,7 +160,7 @@ export default function BoxInputControls( { CUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ] ?.steps ?? 0.1 } - value={ parsedQuantity } + value={ parsedQuantity ?? 0 } withInputField={ false } /> From 0a041fc9836c007baf40d300f8cfcca8ff36add1 Mon Sep 17 00:00:00 2001 From: brookewp Date: Wed, 13 Dec 2023 18:42:38 -0800 Subject: [PATCH 19/37] Adjust grid --- packages/components/src/box-control/index.tsx | 1 + .../src/box-control/styles/box-control-styles.ts | 9 ++++----- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx index 760afabc9676b..e9e94c884129e 100644 --- a/packages/components/src/box-control/index.tsx +++ b/packages/components/src/box-control/index.tsx @@ -157,6 +157,7 @@ function BoxControl( { diff --git a/packages/components/src/box-control/styles/box-control-styles.ts b/packages/components/src/box-control/styles/box-control-styles.ts index 5a4e671906d4e..2e254f6bbec01 100644 --- a/packages/components/src/box-control/styles/box-control-styles.ts +++ b/packages/components/src/box-control/styles/box-control-styles.ts @@ -17,21 +17,20 @@ import type { BoxUnitControlProps } from '../types'; export const UnitControlWrapper = styled.div` box-sizing: border-box; - flex: 1; max-width: 90px; `; export const InputWrapper = styled( HStack )` - grid-column: 1 / span 4; + grid-column: 1 / span 3; `; export const ResetButton = styled( Button )` - grid-area: 1 / 3; + grid-area: 1 / 2; justify-self: end; `; export const LinkedButtonWrapper = styled.div` - grid-area: 1 / 4; + grid-area: 1 / 3; justify-self: end; `; @@ -40,7 +39,7 @@ export const FlexedBoxControlIcon = styled( BoxControlIcon )` `; export const FlexedRangeControl = styled( RangeControl )` - flex: 1; + width: 100%; margin-right: ${ space( 2 ) }; `; From 8dc9b1c5f92e453f08cdb25e9f539f6593a22d9a Mon Sep 17 00:00:00 2001 From: brookewp Date: Thu, 14 Dec 2023 15:32:03 -0800 Subject: [PATCH 20/37] Update column sizing --- packages/components/src/box-control/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx index e9e94c884129e..73c7008f6184e 100644 --- a/packages/components/src/box-control/index.tsx +++ b/packages/components/src/box-control/index.tsx @@ -157,7 +157,7 @@ function BoxControl( { From a57f3e2e40b8466b0e222e6b79b77da6bab787f6 Mon Sep 17 00:00:00 2001 From: brookewp Date: Thu, 14 Dec 2023 15:35:13 -0800 Subject: [PATCH 21/37] Fix value by using `allValue` again --- packages/components/src/box-control/all-input-control.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx index 814363b3b69d4..ab2f2c8d61917 100644 --- a/packages/components/src/box-control/all-input-control.tsx +++ b/packages/components/src/box-control/all-input-control.tsx @@ -98,7 +98,7 @@ export default function AllInputControl( { disableUnits={ isMixed } id={ inputId } isOnly - value={ parsedQuantity } + value={ allValue } onChange={ unitControlOnChange } onUnitChange={ handleOnUnitChange } onFocus={ handleOnFocus } From b28c652b3ab996e39314b3e1496a10b3aa8ecca0 Mon Sep 17 00:00:00 2001 From: brookewp Date: Thu, 14 Dec 2023 15:39:09 -0800 Subject: [PATCH 22/37] Refactor to remove duplicate onChange based on feedback --- .../src/box-control/axial-input-controls.tsx | 39 +++------ .../src/box-control/input-controls.tsx | 86 +++++++++---------- 2 files changed, 55 insertions(+), 70 deletions(-) diff --git a/packages/components/src/box-control/axial-input-controls.tsx b/packages/components/src/box-control/axial-input-controls.tsx index 9fba588b7708d..34720a7ef6ddb 100644 --- a/packages/components/src/box-control/axial-input-controls.tsx +++ b/packages/components/src/box-control/axial-input-controls.tsx @@ -75,22 +75,7 @@ export default function AxialInputControls( { } }; - const sliderOnChange = ( side: GroupedSide, next: string ) => { - const nextValues = { ...values }; - - if ( side === 'vertical' ) { - nextValues.top = next; - nextValues.bottom = next; - } - - if ( side === 'horizontal' ) { - nextValues.left = next; - nextValues.right = next; - } - onChange?.( nextValues ); - }; - - const createHandleOnChange = ( side: GroupedSide ) => ( next?: string ) => { + const handleOnValueChange = ( side: GroupedSide, next?: string ) => { if ( ! onChange ) { return; } @@ -161,7 +146,9 @@ export default function AxialInputControls( { parsedQuantity, selectedUnit ?? parsedUnit, ].join( '' ) } - onChange={ createHandleOnChange( side ) } + onChange={ ( newValue ) => + handleOnValueChange( side, newValue ) + } onUnitChange={ createHandleOnUnitChange( side ) } onFocus={ createHandleOnFocus( side ) } onHoverOn={ createHandleOnHoverOn( side ) } @@ -175,15 +162,17 @@ export default function AxialInputControls( { aria-labelledby={ inputId } hideLabelFromVision label={ LABELS[ side ] } - onChange={ ( newValue ) => { - sliderOnChange( + onChange={ ( newValue ) => + handleOnValueChange( side, - [ - newValue, - selectedUnit ?? parsedUnit, - ].join( '' ) - ); - } } + newValue !== undefined + ? [ + newValue, + selectedUnit ?? parsedUnit, + ].join( '' ) + : undefined + ) + } min={ 0 } max={ CUSTOM_VALUE_SETTINGS[ selectedUnit ?? 'px' ] diff --git a/packages/components/src/box-control/input-controls.tsx b/packages/components/src/box-control/input-controls.tsx index 82a970195994d..6c65cd85b46d1 100644 --- a/packages/components/src/box-control/input-controls.tsx +++ b/packages/components/src/box-control/input-controls.tsx @@ -14,7 +14,6 @@ import { InputWrapper, } from './styles/box-control-styles'; import type { BoxControlInputControlProps, BoxControlValue } from './types'; -import type { UnitControlProps } from '../unit-control/types'; const noop = () => {}; @@ -49,50 +48,43 @@ export default function BoxInputControls( { onChange( nextValues ); }; - const sliderOnChange = ( side: keyof BoxControlValue, next: string ) => { + const handleOnValueChange = ( + side: keyof BoxControlValue, + next?: string, + extra?: { event: React.SyntheticEvent< Element, Event > } + ) => { const nextValues = { ...values }; - nextValues[ side ] = next; - handleOnChange( nextValues ); - }; - - const createHandleOnChange: ( - side: keyof BoxControlValue - ) => UnitControlProps[ 'onChange' ] = - ( side ) => - ( next, { event } ) => { - const nextValues = { ...values }; - const isNumeric = - next !== undefined && ! isNaN( parseFloat( next ) ); - const nextValue = isNumeric ? next : undefined; - - nextValues[ side ] = nextValue; - - /** - * Supports changing pair sides. For example, holding the ALT key - * when changing the TOP will also update BOTTOM. - */ - // @ts-expect-error - TODO: event.altKey is only present when the change event was - // triggered by a keyboard event. Should this feature be implemented differently so - // it also works with drag events? - if ( event.altKey ) { - switch ( side ) { - case 'top': - nextValues.bottom = nextValue; - break; - case 'bottom': - nextValues.top = nextValue; - break; - case 'left': - nextValues.right = nextValue; - break; - case 'right': - nextValues.left = nextValue; - break; - } + const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) ); + const nextValue = isNumeric ? next : undefined; + + nextValues[ side ] = nextValue; + + /** + * Supports changing pair sides. For example, holding the ALT key + * when changing the TOP will also update BOTTOM. + */ + // @ts-expect-error - TODO: event.altKey is only present when the change event was + // triggered by a keyboard event. Should this feature be implemented differently so + // it also works with drag events? + if ( extra?.event.altKey ) { + switch ( side ) { + case 'top': + nextValues.bottom = nextValue; + break; + case 'bottom': + nextValues.top = nextValue; + break; + case 'left': + nextValues.right = nextValue; + break; + case 'right': + nextValues.left = nextValue; + break; } + } - handleOnChange( nextValues ); - }; + handleOnChange( nextValues ); + }; const createHandleOnUnitChange = ( side: keyof BoxControlValue ) => ( next?: string ) => { @@ -132,7 +124,9 @@ export default function BoxInputControls( { value={ [ parsedQuantity, computedUnit ].join( '' ) } - onChange={ createHandleOnChange( side ) } + onChange={ ( nextValue, extra ) => + handleOnValueChange( side, nextValue, extra ) + } onUnitChange={ createHandleOnUnitChange( side ) } onFocus={ createHandleOnFocus( side ) } onHoverOn={ createHandleOnHoverOn( side ) } @@ -146,9 +140,11 @@ export default function BoxInputControls( { __nextHasNoMarginBottom hideLabelFromVision onChange={ ( newValue ) => { - sliderOnChange( + handleOnValueChange( side, - [ newValue, computedUnit ].join( '' ) + newValue !== undefined + ? [ newValue, computedUnit ].join( '' ) + : undefined ); } } min={ 0 } From 7fbbe434a7344fd0c248a37d99951ba881b3d406 Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 15 Dec 2023 13:52:19 -0800 Subject: [PATCH 23/37] Fix mapped ids --- .../components/src/box-control/all-input-control.tsx | 6 +++--- .../src/box-control/axial-input-controls.tsx | 11 ++++++++--- .../components/src/box-control/input-controls.tsx | 5 +++-- 3 files changed, 14 insertions(+), 8 deletions(-) diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx index ab2f2c8d61917..2995553b32dd4 100644 --- a/packages/components/src/box-control/all-input-control.tsx +++ b/packages/components/src/box-control/all-input-control.tsx @@ -33,7 +33,9 @@ export default function AllInputControl( { setSelectedUnits, ...props }: BoxControlInputControlProps ) { - const inputId = useInstanceId( AllInputControl, 'box-control-input' ); + const generatedId = useInstanceId( AllInputControl, 'box-control-input' ); + const inputId = [ generatedId, LABELS.all ].join( '-' ); + const allValue = getAllValue( values, selectedUnits, sides ); const hasValues = isValuesDefined( values ); const isMixed = hasValues && isValuesMixed( values, selectedUnits, sides ); @@ -111,8 +113,6 @@ export default function AllInputControl( { __nextHasNoMarginBottom aria-controls={ inputId } aria-labelledby={ inputId } - hideLabelFromVision - label={ LABELS.all } onChange={ sliderOnChange } min={ 0 } max={ CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.max ?? 10 } diff --git a/packages/components/src/box-control/axial-input-controls.tsx b/packages/components/src/box-control/axial-input-controls.tsx index 34720a7ef6ddb..686eab731332f 100644 --- a/packages/components/src/box-control/axial-input-controls.tsx +++ b/packages/components/src/box-control/axial-input-controls.tsx @@ -29,7 +29,11 @@ export default function AxialInputControls( { sides, ...props }: BoxControlInputControlProps ) { - const inputId = useInstanceId( AxialInputControls, 'box-control-input' ); + const generatedId = useInstanceId( + AxialInputControls, + `box-control-input` + ); + const createHandleOnFocus = ( side: GroupedSide ) => ( event: React.FocusEvent< HTMLInputElement > ) => { @@ -133,6 +137,9 @@ export default function AxialInputControls( { side === 'vertical' ? selectedUnits.top : selectedUnits.left; + + const inputId = [ generatedId, side ].join( '-' ); + return ( @@ -160,8 +167,6 @@ export default function AxialInputControls( { __nextHasNoMarginBottom aria-controls={ inputId } aria-labelledby={ inputId } - hideLabelFromVision - label={ LABELS[ side ] } onChange={ ( newValue ) => handleOnValueChange( side, diff --git a/packages/components/src/box-control/input-controls.tsx b/packages/components/src/box-control/input-controls.tsx index 6c65cd85b46d1..a0f863f1486d2 100644 --- a/packages/components/src/box-control/input-controls.tsx +++ b/packages/components/src/box-control/input-controls.tsx @@ -28,7 +28,7 @@ export default function BoxInputControls( { sides, ...props }: BoxControlInputControlProps ) { - const inputId = useInstanceId( BoxInputControls, 'box-control-input' ); + const generatedId = useInstanceId( BoxInputControls, 'box-control-input' ); const createHandleOnFocus = ( side: keyof BoxControlValue ) => @@ -112,6 +112,8 @@ export default function BoxInputControls( { ? parsedUnit : selectedUnits[ side ]; + const inputId = [ generatedId, side ].join( '-' ); + return ( @@ -138,7 +140,6 @@ export default function BoxInputControls( { aria-controls={ inputId } aria-labelledby={ inputId } __nextHasNoMarginBottom - hideLabelFromVision onChange={ ( newValue ) => { handleOnValueChange( side, From 73b65ebbaad1648acffdc6af95a54ee5e63a42d8 Mon Sep 17 00:00:00 2001 From: brookewp Date: Wed, 3 Jan 2024 12:34:44 -0800 Subject: [PATCH 24/37] Update naming based on feedback --- .../src/box-control/all-input-control.tsx | 3 +- .../src/box-control/axial-input-controls.tsx | 2 +- .../src/box-control/input-controls.tsx | 2 +- packages/components/src/box-control/types.ts | 2 +- packages/components/src/box-control/utils.ts | 72 +++++++++---------- 5 files changed, 40 insertions(+), 41 deletions(-) diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx index 2995553b32dd4..42841ce1cd018 100644 --- a/packages/components/src/box-control/all-input-control.tsx +++ b/packages/components/src/box-control/all-input-control.tsx @@ -112,12 +112,11 @@ export default function AllInputControl( { Date: Wed, 3 Jan 2024 12:54:23 -0800 Subject: [PATCH 25/37] Fix id and key --- packages/components/src/box-control/all-input-control.tsx | 3 +-- packages/components/src/box-control/axial-input-controls.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx index 42841ce1cd018..b158a73c1ea17 100644 --- a/packages/components/src/box-control/all-input-control.tsx +++ b/packages/components/src/box-control/all-input-control.tsx @@ -33,8 +33,7 @@ export default function AllInputControl( { setSelectedUnits, ...props }: BoxControlInputControlProps ) { - const generatedId = useInstanceId( AllInputControl, 'box-control-input' ); - const inputId = [ generatedId, LABELS.all ].join( '-' ); + const inputId = useInstanceId( AllInputControl, 'box-control-input-all' ); const allValue = getAllValue( values, selectedUnits, sides ); const hasValues = isValuesDefined( values ); diff --git a/packages/components/src/box-control/axial-input-controls.tsx b/packages/components/src/box-control/axial-input-controls.tsx index a70e1da94fda8..6a5b621137c8d 100644 --- a/packages/components/src/box-control/axial-input-controls.tsx +++ b/packages/components/src/box-control/axial-input-controls.tsx @@ -141,7 +141,7 @@ export default function AxialInputControls( { const inputId = [ generatedId, side ].join( '-' ); return ( - + Date: Wed, 3 Jan 2024 13:06:36 -0800 Subject: [PATCH 26/37] Remove unused border radius logic --- .../src/box-control/all-input-control.tsx | 1 - .../src/box-control/axial-input-controls.tsx | 7 ----- .../src/box-control/input-controls.tsx | 7 ----- .../box-control/styles/box-control-styles.ts | 28 ------------------- packages/components/src/box-control/types.ts | 3 -- .../src/box-control/unit-control.tsx | 9 ++---- 6 files changed, 2 insertions(+), 53 deletions(-) diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx index b158a73c1ea17..daf14688b8f59 100644 --- a/packages/components/src/box-control/all-input-control.tsx +++ b/packages/components/src/box-control/all-input-control.tsx @@ -98,7 +98,6 @@ export default function AllInputControl( { { ...props } disableUnits={ isMixed } id={ inputId } - isOnly value={ allValue } onChange={ unitControlOnChange } onUnitChange={ handleOnUnitChange } diff --git a/packages/components/src/box-control/axial-input-controls.tsx b/packages/components/src/box-control/axial-input-controls.tsx index 6a5b621137c8d..9d83521774c62 100644 --- a/packages/components/src/box-control/axial-input-controls.tsx +++ b/packages/components/src/box-control/axial-input-controls.tsx @@ -122,10 +122,6 @@ export default function AxialInputControls( { ? groupedSides.filter( ( side ) => sides.includes( side ) ) : groupedSides; - const first = filteredSides[ 0 ]; - const last = filteredSides[ filteredSides.length - 1 ]; - const only = first === last && first; - return ( <> { filteredSides.map( ( side ) => { @@ -146,9 +142,6 @@ export default function AxialInputControls( { sides.includes( side ) ) : ALL_SIDES; - const first = filteredSides[ 0 ]; - const last = filteredSides[ filteredSides.length - 1 ]; - const only = first === last && first; - return ( <> { filteredSides.map( ( side ) => { @@ -119,9 +115,6 @@ export default function BoxInputControls( { ) => { - if ( isFirst ) { - return rtl( { borderTopRightRadius: 0, borderBottomRightRadius: 0 } )(); - } - if ( isLast ) { - return rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )(); - } - if ( isOnly ) { - return css( { borderRadius: 2 } ); - } - - return css( { - borderRadius: 0, - } ); -}; - -export const UnitControl = styled( BaseUnitControl )` - ${ unitControlBorderRadiusStyles }; -`; diff --git a/packages/components/src/box-control/types.ts b/packages/components/src/box-control/types.ts index 84a48932ff019..f6bba2e3bbf87 100644 --- a/packages/components/src/box-control/types.ts +++ b/packages/components/src/box-control/types.ts @@ -98,9 +98,6 @@ export type BoxControlInputControlProps = UnitControlPassthroughProps & { export type BoxUnitControlProps = UnitControlPassthroughProps & Pick< UnitControlProps, 'onChange' | 'onFocus' > & { - isFirst?: boolean; - isLast?: boolean; - isOnly?: boolean; label?: string; onHoverOff?: ( event: ReturnType< typeof useHover >[ 'event' ], diff --git a/packages/components/src/box-control/unit-control.tsx b/packages/components/src/box-control/unit-control.tsx index 1056a8ecd43ed..4ec9df2d5c53c 100644 --- a/packages/components/src/box-control/unit-control.tsx +++ b/packages/components/src/box-control/unit-control.tsx @@ -7,15 +7,13 @@ import { useHover } from '@use-gesture/react'; * Internal dependencies */ import Tooltip from '../tooltip'; -import { UnitControlWrapper, UnitControl } from './styles/box-control-styles'; +import UnitControl from '../unit-control'; +import { UnitControlWrapper } from './styles/box-control-styles'; import type { BoxUnitControlProps } from './types'; const noop = () => {}; export default function BoxUnitControl( { - isFirst, - isLast, - isOnly, onHoverOn = noop, onHoverOff = noop, label, @@ -36,9 +34,6 @@ export default function BoxUnitControl( { Date: Wed, 3 Jan 2024 13:06:57 -0800 Subject: [PATCH 27/37] Update margin to include RTL --- .../components/src/box-control/styles/box-control-styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/box-control/styles/box-control-styles.ts b/packages/components/src/box-control/styles/box-control-styles.ts index b2fb9eb42041e..c9edf5ca13e41 100644 --- a/packages/components/src/box-control/styles/box-control-styles.ts +++ b/packages/components/src/box-control/styles/box-control-styles.ts @@ -36,5 +36,5 @@ export const FlexedBoxControlIcon = styled( BoxControlIcon )` export const FlexedRangeControl = styled( RangeControl )` width: 100%; - margin-right: ${ space( 2 ) }; + margin-inline-end: ${ space( 2 ) }; `; From 9121904be551a75390b945c9b7f38bda90388ac9 Mon Sep 17 00:00:00 2001 From: brookewp Date: Wed, 3 Jan 2024 14:03:20 -0800 Subject: [PATCH 28/37] Remove unused hover functions for previously replaced visualizer --- .../src/box-control/all-input-control.tsx | 22 ------ .../src/box-control/axial-input-controls.tsx | 40 ---------- .../src/box-control/input-controls.tsx | 12 --- .../styles/box-control-visualizer-styles.ts | 75 ------------------- .../src/box-control/unit-control.tsx | 19 +---- 5 files changed, 1 insertion(+), 167 deletions(-) delete mode 100644 packages/components/src/box-control/styles/box-control-visualizer-styles.ts diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx index daf14688b8f59..9c2f0524d090d 100644 --- a/packages/components/src/box-control/all-input-control.tsx +++ b/packages/components/src/box-control/all-input-control.tsx @@ -25,8 +25,6 @@ const noop = () => {}; export default function AllInputControl( { onChange = noop, onFocus = noop, - onHoverOn = noop, - onHoverOff = noop, values, sides, selectedUnits, @@ -74,24 +72,6 @@ export default function AllInputControl( { setSelectedUnits( newUnits ); }; - const handleOnHoverOn = () => { - onHoverOn( { - top: true, - bottom: true, - left: true, - right: true, - } ); - }; - - const handleOnHoverOff = () => { - onHoverOff( { - top: false, - bottom: false, - left: false, - right: false, - } ); - }; - return ( diff --git a/packages/components/src/box-control/axial-input-controls.tsx b/packages/components/src/box-control/axial-input-controls.tsx index 9d83521774c62..65b3ab6be8507 100644 --- a/packages/components/src/box-control/axial-input-controls.tsx +++ b/packages/components/src/box-control/axial-input-controls.tsx @@ -21,8 +21,6 @@ type GroupedSide = ( typeof groupedSides )[ number ]; export default function AxialInputControls( { onChange, onFocus, - onHoverOn, - onHoverOff, values, selectedUnits, setSelectedUnits, @@ -43,42 +41,6 @@ export default function AxialInputControls( { onFocus( event, { side } ); }; - const createHandleOnHoverOn = ( side: GroupedSide ) => () => { - if ( ! onHoverOn ) { - return; - } - if ( side === 'vertical' ) { - onHoverOn( { - top: true, - bottom: true, - } ); - } - if ( side === 'horizontal' ) { - onHoverOn( { - left: true, - right: true, - } ); - } - }; - - const createHandleOnHoverOff = ( side: GroupedSide ) => () => { - if ( ! onHoverOff ) { - return; - } - if ( side === 'vertical' ) { - onHoverOff( { - top: false, - bottom: false, - } ); - } - if ( side === 'horizontal' ) { - onHoverOff( { - left: false, - right: false, - } ); - } - }; - const handleOnValueChange = ( side: GroupedSide, next?: string ) => { if ( ! onChange ) { return; @@ -151,8 +113,6 @@ export default function AxialInputControls( { } onUnitChange={ createHandleOnUnitChange( side ) } onFocus={ createHandleOnFocus( side ) } - onHoverOn={ createHandleOnHoverOn( side ) } - onHoverOff={ createHandleOnHoverOff( side ) } label={ LABELS[ side ] } key={ side } /> diff --git a/packages/components/src/box-control/input-controls.tsx b/packages/components/src/box-control/input-controls.tsx index abca7fb41393b..0e2d77da35d05 100644 --- a/packages/components/src/box-control/input-controls.tsx +++ b/packages/components/src/box-control/input-controls.tsx @@ -20,8 +20,6 @@ const noop = () => {}; export default function BoxInputControls( { onChange = noop, onFocus = noop, - onHoverOn = noop, - onHoverOff = noop, values, selectedUnits, setSelectedUnits, @@ -36,14 +34,6 @@ export default function BoxInputControls( { onFocus( event, { side } ); }; - const createHandleOnHoverOn = ( side: keyof BoxControlValue ) => () => { - onHoverOn( { [ side ]: true } ); - }; - - const createHandleOnHoverOff = ( side: keyof BoxControlValue ) => () => { - onHoverOff( { [ side ]: false } ); - }; - const handleOnChange = ( nextValues: BoxControlValue ) => { onChange( nextValues ); }; @@ -124,8 +114,6 @@ export default function BoxInputControls( { } onUnitChange={ createHandleOnUnitChange( side ) } onFocus={ createHandleOnFocus( side ) } - onHoverOn={ createHandleOnHoverOn( side ) } - onHoverOff={ createHandleOnHoverOff( side ) } label={ LABELS[ side ] } /> diff --git a/packages/components/src/box-control/styles/box-control-visualizer-styles.ts b/packages/components/src/box-control/styles/box-control-visualizer-styles.ts deleted file mode 100644 index bbfe66c9a71e9..0000000000000 --- a/packages/components/src/box-control/styles/box-control-visualizer-styles.ts +++ /dev/null @@ -1,75 +0,0 @@ -/** - * External dependencies - */ -import { css } from '@emotion/react'; -import styled from '@emotion/styled'; - -/** - * Internal dependencies - */ -import { COLORS, rtl } from '../../utils'; - -const containerPositionStyles = ( { - isPositionAbsolute, -}: { - isPositionAbsolute: boolean; -} ) => { - if ( ! isPositionAbsolute ) return ''; - - return css` - bottom: 0; - left: 0; - pointer-events: none; - position: absolute; - right: 0; - top: 0; - z-index: 1; - `; -}; - -export const Container = styled.div` - box-sizing: border-box; - position: relative; - ${ containerPositionStyles }; -`; - -export const Side = styled.div` - box-sizing: border-box; - background: ${ COLORS.theme.accent }; - filter: brightness( 1 ); - opacity: 0; - position: absolute; - pointer-events: none; - transition: opacity 120ms linear; - z-index: 1; - - ${ ( { isActive }: { isActive: boolean } ) => - isActive && - ` - opacity: 0.3; - ` } -`; - -export const TopView = styled( Side )` - top: 0; - left: 0; - right: 0; -`; - -export const RightView = styled( Side )` - top: 0; - bottom: 0; - ${ rtl( { right: 0 } ) }; -`; - -export const BottomView = styled( Side )` - bottom: 0; - left: 0; - right: 0; -`; - -export const LeftView = styled( Side )` - top: 0; - bottom: 0; - ${ rtl( { left: 0 } ) }; -`; diff --git a/packages/components/src/box-control/unit-control.tsx b/packages/components/src/box-control/unit-control.tsx index 4ec9df2d5c53c..6d5eb2da3f389 100644 --- a/packages/components/src/box-control/unit-control.tsx +++ b/packages/components/src/box-control/unit-control.tsx @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { useHover } from '@use-gesture/react'; - /** * Internal dependencies */ @@ -11,25 +6,13 @@ import UnitControl from '../unit-control'; import { UnitControlWrapper } from './styles/box-control-styles'; import type { BoxUnitControlProps } from './types'; -const noop = () => {}; - export default function BoxUnitControl( { - onHoverOn = noop, - onHoverOff = noop, label, value, ...props }: BoxUnitControlProps ) { - const bindHoverGesture = useHover( ( { event, ...state } ) => { - if ( state.hovering ) { - onHoverOn( event, state ); - } else { - onHoverOff( event, state ); - } - } ); - return ( - + Date: Wed, 3 Jan 2024 14:25:05 -0800 Subject: [PATCH 29/37] Replace custom UnitControl with standard --- .../src/box-control/all-input-control.tsx | 9 +++-- .../src/box-control/axial-input-controls.tsx | 40 +++++++++++-------- .../src/box-control/input-controls.tsx | 40 ++++++++++++------- .../box-control/styles/box-control-styles.ts | 4 +- packages/components/src/box-control/types.ts | 18 --------- .../src/box-control/unit-control.tsx | 28 ------------- 6 files changed, 58 insertions(+), 81 deletions(-) delete mode 100644 packages/components/src/box-control/unit-control.tsx diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx index 9c2f0524d090d..8dcefc118bf55 100644 --- a/packages/components/src/box-control/all-input-control.tsx +++ b/packages/components/src/box-control/all-input-control.tsx @@ -6,10 +6,10 @@ import { useInstanceId } from '@wordpress/compose'; * Internal dependencies */ import type { UnitControlProps } from '../unit-control/types'; -import { FlexedRangeControl } from './styles/box-control-styles'; +import { FlexedRangeControl, UnitControl } from './styles/box-control-styles'; import { HStack } from '../h-stack'; import type { BoxControlInputControlProps } from './types'; -import UnitControl from './unit-control'; +import { parseQuantityAndUnitFromRawValue } from '../unit-control'; import { LABELS, applyValueToSides, @@ -18,7 +18,6 @@ import { isValuesDefined, CUSTOM_VALUE_SETTINGS, } from './utils'; -import { parseQuantityAndUnitFromRawValue } from '../unit-control'; const noop = () => {}; @@ -76,13 +75,17 @@ export default function AllInputControl( { - - handleOnValueChange( side, newValue ) - } - onUnitChange={ createHandleOnUnitChange( side ) } - onFocus={ createHandleOnFocus( side ) } - label={ LABELS[ side ] } - key={ side } - /> + + + handleOnValueChange( side, newValue ) + } + onUnitChange={ createHandleOnUnitChange( + side + ) } + onFocus={ createHandleOnFocus( side ) } + label={ LABELS[ side ] } + hideLabelFromVision + key={ side } + /> + - - handleOnValueChange( side, nextValue, extra ) - } - onUnitChange={ createHandleOnUnitChange( side ) } - onFocus={ createHandleOnFocus( side ) } - label={ LABELS[ side ] } - /> + + + handleOnValueChange( + side, + nextValue, + extra + ) + } + onUnitChange={ createHandleOnUnitChange( + side + ) } + onFocus={ createHandleOnFocus( side ) } + label={ LABELS[ side ] } + hideLabelFromVision + /> + & { - label?: string; - onHoverOff?: ( - event: ReturnType< typeof useHover >[ 'event' ], - state: Omit< ReturnType< typeof useHover >, 'event' > - ) => void; - onHoverOn?: ( - event: ReturnType< typeof useHover >[ 'event' ], - state: Omit< ReturnType< typeof useHover >, 'event' > - ) => void; - }; - export type BoxControlIconProps = { /** * @default 24 diff --git a/packages/components/src/box-control/unit-control.tsx b/packages/components/src/box-control/unit-control.tsx deleted file mode 100644 index 6d5eb2da3f389..0000000000000 --- a/packages/components/src/box-control/unit-control.tsx +++ /dev/null @@ -1,28 +0,0 @@ -/** - * Internal dependencies - */ -import Tooltip from '../tooltip'; -import UnitControl from '../unit-control'; -import { UnitControlWrapper } from './styles/box-control-styles'; -import type { BoxUnitControlProps } from './types'; - -export default function BoxUnitControl( { - label, - value, - ...props -}: BoxUnitControlProps ) { - return ( - - - - - - ); -} From 6287be9800b8836dc80027dec0b9d7b58f4f425f Mon Sep 17 00:00:00 2001 From: brookewp Date: Wed, 3 Jan 2024 14:30:22 -0800 Subject: [PATCH 30/37] Fix all input label --- packages/components/src/box-control/index.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx index 73c7008f6184e..dcc890e8e3c51 100644 --- a/packages/components/src/box-control/index.tsx +++ b/packages/components/src/box-control/index.tsx @@ -167,10 +167,7 @@ function BoxControl( { { isLinked && ( - + ) } { ! hasOneSide && ( From 25cf3f686f4c4f9cc3b2e69d9e991674328e1263 Mon Sep 17 00:00:00 2001 From: brookewp Date: Mon, 8 Jan 2024 12:30:59 -0800 Subject: [PATCH 31/37] Update naming in tests --- .../components/src/box-control/test/index.tsx | 59 ++++++++++--------- 1 file changed, 30 insertions(+), 29 deletions(-) diff --git a/packages/components/src/box-control/test/index.tsx b/packages/components/src/box-control/test/index.tsx index ca0152fb14ce6..db76bf610fea5 100644 --- a/packages/components/src/box-control/test/index.tsx +++ b/packages/components/src/box-control/test/index.tsx @@ -33,7 +33,10 @@ describe( 'BoxControl', () => { render( {} } /> ); expect( - screen.getByRole( 'textbox', { name: 'Box Control' } ) + screen.getByRole( 'group', { name: 'Box Control' } ) + ).toBeVisible(); + expect( + screen.getByRole( 'textbox', { name: 'All sides' } ) ).toBeVisible(); } ); @@ -42,9 +45,7 @@ describe( 'BoxControl', () => { render( {} } /> ); - const input = screen.getByRole( 'textbox', { - name: 'Box Control', - } ); + const input = screen.getByRole( 'textbox', { name: 'All sides' } ); await user.type( input, '100' ); await user.keyboard( '{Enter}' ); @@ -61,9 +62,7 @@ describe( 'BoxControl', () => { expect( slider ).toHaveValue( '50' ); expect( - screen.getByRole( 'textbox', { - name: 'Box Control', - } ) + screen.getByRole( 'textbox', { name: 'All sides' } ) ).toHaveValue( '50' ); } ); @@ -72,7 +71,7 @@ describe( 'BoxControl', () => { render( {} } /> ); const input = screen.getByRole( 'textbox', { - name: 'Box Control', + name: 'All sides', } ); await user.type( input, '50' ); @@ -90,7 +89,7 @@ describe( 'BoxControl', () => { render( {} } /> ); const input = screen.getByRole( 'textbox', { - name: 'Box Control', + name: 'All sides', } ); await user.type( input, '100' ); @@ -109,7 +108,7 @@ describe( 'BoxControl', () => { render( ); const input = screen.getByRole( 'textbox', { - name: 'Box Control', + name: 'All sides', } ); await user.type( input, '100' ); @@ -128,7 +127,7 @@ describe( 'BoxControl', () => { render( ); const input = screen.getByRole( 'textbox', { - name: 'Box Control', + name: 'All sides', } ); await user.type( input, '100' ); @@ -148,7 +147,7 @@ describe( 'BoxControl', () => { render( spyChange( v ) } /> ); const input = screen.getByRole( 'textbox', { - name: 'Box Control', + name: 'All sides', } ); await user.type( input, '100' ); @@ -182,21 +181,21 @@ describe( 'BoxControl', () => { ); await user.type( - screen.getByRole( 'textbox', { name: 'Top' } ), + screen.getByRole( 'textbox', { name: 'Top side' } ), '100' ); expect( - screen.getByRole( 'textbox', { name: 'Top' } ) + screen.getByRole( 'textbox', { name: 'Top side' } ) ).toHaveValue( '100' ); expect( - screen.getByRole( 'textbox', { name: 'Right' } ) + screen.getByRole( 'textbox', { name: 'Right side' } ) ).not.toHaveValue(); expect( - screen.getByRole( 'textbox', { name: 'Bottom' } ) + screen.getByRole( 'textbox', { name: 'Bottom side' } ) ).not.toHaveValue(); expect( - screen.getByRole( 'textbox', { name: 'Left' } ) + screen.getByRole( 'textbox', { name: 'Left side' } ) ).not.toHaveValue(); } ); @@ -209,22 +208,22 @@ describe( 'BoxControl', () => { screen.getByRole( 'button', { name: 'Unlink sides' } ) ); - const slider = screen.getByRole( 'slider', { name: 'Right' } ); + const slider = screen.getByRole( 'slider', { name: 'Right side' } ); fireEvent.change( slider, { target: { value: 50 } } ); expect( slider ).toHaveValue( '50' ); expect( - screen.getByRole( 'textbox', { name: 'Top' } ) + screen.getByRole( 'textbox', { name: 'Top side' } ) ).not.toHaveValue(); expect( - screen.getByRole( 'textbox', { name: 'Right' } ) + screen.getByRole( 'textbox', { name: 'Right side' } ) ).toHaveValue( '50' ); expect( - screen.getByRole( 'textbox', { name: 'Bottom' } ) + screen.getByRole( 'textbox', { name: 'Bottom side' } ) ).not.toHaveValue(); expect( - screen.getByRole( 'textbox', { name: 'Left' } ) + screen.getByRole( 'textbox', { name: 'Left side' } ) ).not.toHaveValue(); } ); @@ -239,16 +238,16 @@ describe( 'BoxControl', () => { await user.type( screen.getByRole( 'textbox', { - name: 'Vertical', + name: 'Top and bottom sides', } ), '100' ); expect( - screen.getByRole( 'textbox', { name: 'Vertical' } ) + screen.getByRole( 'textbox', { name: 'Top and bottom sides' } ) ).toHaveValue( '100' ); expect( - screen.getByRole( 'textbox', { name: 'Horizontal' } ) + screen.getByRole( 'textbox', { name: 'Left and right sides' } ) ).not.toHaveValue(); } ); @@ -261,16 +260,18 @@ describe( 'BoxControl', () => { screen.getByRole( 'button', { name: 'Unlink sides' } ) ); - const slider = screen.getByRole( 'slider', { name: 'Horizontal' } ); + const slider = screen.getByRole( 'slider', { + name: 'Left and right sides', + } ); fireEvent.change( slider, { target: { value: 50 } } ); expect( slider ).toHaveValue( '50' ); expect( - screen.getByRole( 'textbox', { name: 'Vertical' } ) + screen.getByRole( 'textbox', { name: 'Top and bottom sides' } ) ).not.toHaveValue(); expect( - screen.getByRole( 'textbox', { name: 'Horizontal' } ) + screen.getByRole( 'textbox', { name: 'Left and right sides' } ) ).toHaveValue( '50' ); } ); } ); @@ -367,7 +368,7 @@ describe( 'BoxControl', () => { render( ); const valueInput = screen.getByRole( 'textbox', { - name: 'Box Control', + name: 'All sides', } ); const unitSelect = screen.getByRole( 'combobox', { name: 'Select unit', From 3f9ec19bb0bc2e6d2c77f0305117215035c6d341 Mon Sep 17 00:00:00 2001 From: brookewp Date: Mon, 8 Jan 2024 13:29:05 -0800 Subject: [PATCH 32/37] Add mixed label and test --- .../src/box-control/all-input-control.tsx | 2 +- .../components/src/box-control/test/index.tsx | 29 +++++++++++++++++++ 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx index 8dcefc118bf55..87d7b241d8be1 100644 --- a/packages/components/src/box-control/all-input-control.tsx +++ b/packages/components/src/box-control/all-input-control.tsx @@ -84,7 +84,7 @@ export default function AllInputControl( { onUnitChange={ handleOnUnitChange } onFocus={ handleOnFocus } placeholder={ allPlaceholder } - label={ LABELS.all } + label={ isMixed ? LABELS.mixed : LABELS.all } hideLabelFromVision /> diff --git a/packages/components/src/box-control/test/index.tsx b/packages/components/src/box-control/test/index.tsx index db76bf610fea5..b26392e5b6bbc 100644 --- a/packages/components/src/box-control/test/index.tsx +++ b/packages/components/src/box-control/test/index.tsx @@ -274,6 +274,35 @@ describe( 'BoxControl', () => { screen.getByRole( 'textbox', { name: 'Left and right sides' } ) ).toHaveValue( '50' ); } ); + + it( 'should show "Mixed sides" label when sides have different values but are linked', async () => { + const user = userEvent.setup(); + + render( ); + + const unlinkButton = screen.getByRole( 'button', { + name: 'Unlink sides', + } ); + + await user.click( unlinkButton ); + + await user.type( + screen.getByRole( 'textbox', { + name: 'Right side', + } ), + '13' + ); + + expect( + screen.getByRole( 'textbox', { name: 'Right side' } ) + ).toHaveValue( '13' ); + + await user.click( unlinkButton ); + + expect( + screen.getByRole( 'textbox', { name: 'Mixed sides' } ) + ).toHaveValue( '' ); + } ); } ); describe( 'Unit selections', () => { From 178ff28fc01c33b781b80b424fb139a9bb556405 Mon Sep 17 00:00:00 2001 From: brookewp Date: Tue, 9 Jan 2024 12:54:59 -0800 Subject: [PATCH 33/37] Restore Mixed placeholder --- packages/components/src/box-control/all-input-control.tsx | 2 +- packages/components/src/box-control/utils.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx index 87d7b241d8be1..8dcefc118bf55 100644 --- a/packages/components/src/box-control/all-input-control.tsx +++ b/packages/components/src/box-control/all-input-control.tsx @@ -84,7 +84,7 @@ export default function AllInputControl( { onUnitChange={ handleOnUnitChange } onFocus={ handleOnFocus } placeholder={ allPlaceholder } - label={ isMixed ? LABELS.mixed : LABELS.all } + label={ LABELS.all } hideLabelFromVision /> diff --git a/packages/components/src/box-control/utils.ts b/packages/components/src/box-control/utils.ts index d7adb9e7c7c84..e480c9a9f4674 100644 --- a/packages/components/src/box-control/utils.ts +++ b/packages/components/src/box-control/utils.ts @@ -50,7 +50,7 @@ export const LABELS = { bottom: __( 'Bottom side' ), left: __( 'Left side' ), right: __( 'Right side' ), - mixed: __( 'Mixed sides' ), + mixed: __( 'Mixed' ), vertical: __( 'Top and bottom sides' ), horizontal: __( 'Left and right sides' ), }; From a780070e1efa3afd5755b71bb6f131363d934cd7 Mon Sep 17 00:00:00 2001 From: brookewp Date: Tue, 9 Jan 2024 15:04:54 -0800 Subject: [PATCH 34/37] Remove unnecessary function --- packages/components/src/box-control/all-input-control.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx index 8dcefc118bf55..1d123b7215d9b 100644 --- a/packages/components/src/box-control/all-input-control.tsx +++ b/packages/components/src/box-control/all-input-control.tsx @@ -54,10 +54,6 @@ export default function AllInputControl( { onChange( nextValues ); }; - const unitControlOnChange: UnitControlProps[ 'onChange' ] = ( next ) => { - onValueChange( next ); - }; - const sliderOnChange = ( next?: number ) => { onValueChange( next !== undefined ? [ next, parsedUnit ].join( '' ) : undefined @@ -80,7 +76,7 @@ export default function AllInputControl( { id={ inputId } isPressEnterToChange value={ allValue } - onChange={ unitControlOnChange } + onChange={ onValueChange } onUnitChange={ handleOnUnitChange } onFocus={ handleOnFocus } placeholder={ allPlaceholder } From ced9711fefa3725d1ba6b9265d2f8b0d5883c7e9 Mon Sep 17 00:00:00 2001 From: brookewp Date: Tue, 9 Jan 2024 15:12:57 -0800 Subject: [PATCH 35/37] Update naming --- packages/components/src/box-control/all-input-control.tsx | 7 +++++-- .../components/src/box-control/axial-input-controls.tsx | 4 ++-- packages/components/src/box-control/input-controls.tsx | 4 ++-- .../src/box-control/styles/box-control-styles.ts | 4 ++-- 4 files changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx index 1d123b7215d9b..6c967d2573603 100644 --- a/packages/components/src/box-control/all-input-control.tsx +++ b/packages/components/src/box-control/all-input-control.tsx @@ -6,7 +6,10 @@ import { useInstanceId } from '@wordpress/compose'; * Internal dependencies */ import type { UnitControlProps } from '../unit-control/types'; -import { FlexedRangeControl, UnitControl } from './styles/box-control-styles'; +import { + FlexedRangeControl, + StyledUnitControl, +} from './styles/box-control-styles'; import { HStack } from '../h-stack'; import type { BoxControlInputControlProps } from './types'; import { parseQuantityAndUnitFromRawValue } from '../unit-control'; @@ -69,7 +72,7 @@ export default function AllInputControl( { return ( - - - Date: Wed, 10 Jan 2024 11:19:54 -0800 Subject: [PATCH 36/37] Add labels to slider --- packages/components/src/box-control/all-input-control.tsx | 2 ++ packages/components/src/box-control/axial-input-controls.tsx | 3 ++- packages/components/src/box-control/input-controls.tsx | 5 +++-- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx index 6c967d2573603..9c18694bbd0b6 100644 --- a/packages/components/src/box-control/all-input-control.tsx +++ b/packages/components/src/box-control/all-input-control.tsx @@ -90,6 +90,8 @@ export default function AllInputControl( { handleOnValueChange( side, diff --git a/packages/components/src/box-control/input-controls.tsx b/packages/components/src/box-control/input-controls.tsx index 5a4ebf50011b2..c8aaeae222749 100644 --- a/packages/components/src/box-control/input-controls.tsx +++ b/packages/components/src/box-control/input-controls.tsx @@ -130,9 +130,10 @@ export default function BoxInputControls( { { handleOnValueChange( side, From 505ac98af1c3af6d702835a2e819215663859627 Mon Sep 17 00:00:00 2001 From: brookewp Date: Thu, 11 Jan 2024 17:45:12 -0800 Subject: [PATCH 37/37] Fix label in test --- packages/components/src/box-control/test/index.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/components/src/box-control/test/index.tsx b/packages/components/src/box-control/test/index.tsx index b26392e5b6bbc..1ea3c84aae922 100644 --- a/packages/components/src/box-control/test/index.tsx +++ b/packages/components/src/box-control/test/index.tsx @@ -275,7 +275,7 @@ describe( 'BoxControl', () => { ).toHaveValue( '50' ); } ); - it( 'should show "Mixed sides" label when sides have different values but are linked', async () => { + it( 'should show "Mixed" label when sides have different values but are linked', async () => { const user = userEvent.setup(); render( ); @@ -299,9 +299,7 @@ describe( 'BoxControl', () => { await user.click( unlinkButton ); - expect( - screen.getByRole( 'textbox', { name: 'Mixed sides' } ) - ).toHaveValue( '' ); + expect( screen.getByPlaceholderText( 'Mixed' ) ).toHaveValue( '' ); } ); } );