From cd9e9ddd2d8fa9db8bad0e2843ca06cc111e5636 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Wed, 9 Oct 2024 13:06:08 +0530 Subject: [PATCH 1/7] Add next40pxDefaultSize for the boxControl component --- packages/components/src/box-control/README.md | 1 + packages/components/src/box-control/index.tsx | 1 + packages/components/src/box-control/stories/index.story.tsx | 1 + 3 files changed, 3 insertions(+) diff --git a/packages/components/src/box-control/README.md b/packages/components/src/box-control/README.md index 77176b49eeb6d..4b09f5e33cbf3 100644 --- a/packages/components/src/box-control/README.md +++ b/packages/components/src/box-control/README.md @@ -18,6 +18,7 @@ function Example() { return ( setValues( nextValues ) } /> diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx index 41e95aa88bea3..e34f3e7f63ff4 100644 --- a/packages/components/src/box-control/index.tsx +++ b/packages/components/src/box-control/index.tsx @@ -64,6 +64,7 @@ function useUniqueId( idProp?: string ) { * * return ( * setValues( nextValues ) } * /> diff --git a/packages/components/src/box-control/stories/index.story.tsx b/packages/components/src/box-control/stories/index.story.tsx index 783f9d047b1bb..aa94e8c4bf00b 100644 --- a/packages/components/src/box-control/stories/index.story.tsx +++ b/packages/components/src/box-control/stories/index.story.tsx @@ -49,6 +49,7 @@ const TemplateControlled: StoryFn< typeof BoxControl > = ( props ) => { export const Default = TemplateUncontrolled.bind( {} ); Default.args = { label: 'Label', + __next40pxDefaultSize: true, }; export const Controlled = TemplateControlled.bind( {} ); From aa6975ac8946834f00df66026da6f191b66dea7c Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Mon, 4 Nov 2024 09:27:50 +0530 Subject: [PATCH 2/7] Add the deperecation notice for the BoxControl component --- packages/components/src/box-control/index.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx index e34f3e7f63ff4..2b2e533e8e41d 100644 --- a/packages/components/src/box-control/index.tsx +++ b/packages/components/src/box-control/index.tsx @@ -33,6 +33,7 @@ import type { BoxControlProps, BoxControlValue, } from './types'; +import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size'; const defaultInputProps = { min: 0, @@ -156,6 +157,12 @@ function BoxControl( { __next40pxDefaultSize, }; + maybeWarnDeprecated36pxSize( { + componentName: 'BoxControl', + __next40pxDefaultSize, + size: undefined, + } ); + return ( Date: Mon, 4 Nov 2024 09:35:23 +0530 Subject: [PATCH 3/7] Add the changelog for the deprecation --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 93b191bff269d..6cfb61821a487 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -5,6 +5,7 @@ ### Deprecations - `Radio`: Deprecate 36px default size ([#66572](https://github.com/WordPress/gutenberg/pull/66572)). +- `BoxControl`: Deprecate 36px default size ([#66704](https://github.com/WordPress/gutenberg/pull/66704)). ### Enhancements From 54045471006afc53e35ed1995c22dc1ff8a3cca5 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Mon, 4 Nov 2024 09:55:09 +0530 Subject: [PATCH 4/7] Add __next40pxDefaultSize to pass the failed unit test --- packages/components/src/box-control/test/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/components/src/box-control/test/index.tsx b/packages/components/src/box-control/test/index.tsx index 681e7721d0c13..cc492cda18df4 100644 --- a/packages/components/src/box-control/test/index.tsx +++ b/packages/components/src/box-control/test/index.tsx @@ -30,7 +30,9 @@ const Example = ( extraProps: Omit< BoxControlProps, 'onChange' > ) => { describe( 'BoxControl', () => { describe( 'Basic rendering', () => { it( 'should render a box control input', () => { - render( {} } /> ); + render( + {} } /> + ); expect( screen.getByRole( 'group', { name: 'Box Control' } ) From 7f01eb31dc39a2919d85c508b297648112c62234 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Thu, 28 Nov 2024 10:36:20 +0530 Subject: [PATCH 5/7] Update the unit test for the box control component --- .../components/src/box-control/test/index.tsx | 61 ++++++++++--------- 1 file changed, 33 insertions(+), 28 deletions(-) diff --git a/packages/components/src/box-control/test/index.tsx b/packages/components/src/box-control/test/index.tsx index cc492cda18df4..185a18b258951 100644 --- a/packages/components/src/box-control/test/index.tsx +++ b/packages/components/src/box-control/test/index.tsx @@ -15,11 +15,14 @@ import { useState } from '@wordpress/element'; import BoxControl from '..'; import type { BoxControlProps, BoxControlValue } from '../types'; -const Example = ( extraProps: Omit< BoxControlProps, 'onChange' > ) => { +const ControlledBoxControl = ( + extraProps: Omit< BoxControlProps, 'onChange' > +) => { const [ state, setState ] = useState< BoxControlValue >(); return ( setState( next ) } { ...extraProps } @@ -27,12 +30,17 @@ const Example = ( extraProps: Omit< BoxControlProps, 'onChange' > ) => { ); }; +const UncontrolledBoxControl = ( { + onChange = () => {}, + ...props +}: Omit< BoxControlProps, 'onChange' > & { + onChange?: BoxControlProps[ 'onChange' ]; +} ) => ; + describe( 'BoxControl', () => { describe( 'Basic rendering', () => { it( 'should render a box control input', () => { - render( - {} } /> - ); + render( ); expect( screen.getByRole( 'group', { name: 'Box Control' } ) @@ -45,7 +53,7 @@ describe( 'BoxControl', () => { it( 'should update values when interacting with input', async () => { const user = userEvent.setup(); - render( {} } /> ); + render( ); const input = screen.getByRole( 'textbox', { name: 'All sides' } ); @@ -56,7 +64,7 @@ describe( 'BoxControl', () => { } ); it( 'should update input values when interacting with slider', () => { - render( {} } /> ); + render( ); const slider = screen.getByRole( 'slider' ); @@ -70,7 +78,7 @@ describe( 'BoxControl', () => { it( 'should update slider values when interacting with input', async () => { const user = userEvent.setup(); - render( {} } /> ); + render( ); const input = screen.getByRole( 'textbox', { name: 'All sides', @@ -84,7 +92,7 @@ describe( 'BoxControl', () => { } ); it( 'should render the number input with a default min value of 0', () => { - render( {} } /> ); + render( ); const input = screen.getByRole( 'textbox', { name: 'All sides' } ); @@ -93,10 +101,7 @@ describe( 'BoxControl', () => { it( 'should pass down `inputProps` to the underlying number input', () => { render( - {} } - inputProps={ { min: 10, max: 50 } } - /> + ); const input = screen.getByRole( 'textbox', { name: 'All sides' } ); @@ -110,7 +115,7 @@ describe( 'BoxControl', () => { it( 'should reset values when clicking Reset', async () => { const user = userEvent.setup(); - render( {} } /> ); + render( ); const input = screen.getByRole( 'textbox', { name: 'All sides', @@ -129,7 +134,7 @@ describe( 'BoxControl', () => { it( 'should reset values when clicking Reset, if controlled', async () => { const user = userEvent.setup(); - render( ); + render( ); const input = screen.getByRole( 'textbox', { name: 'All sides', @@ -148,7 +153,7 @@ describe( 'BoxControl', () => { it( 'should reset values when clicking Reset, if controlled <-> uncontrolled state changes', async () => { const user = userEvent.setup(); - render( ); + render( ); const input = screen.getByRole( 'textbox', { name: 'All sides', @@ -168,7 +173,9 @@ describe( 'BoxControl', () => { const user = userEvent.setup(); const spyChange = jest.fn(); - render( spyChange( v ) } /> ); + render( + spyChange( v ) } /> + ); const input = screen.getByRole( 'textbox', { name: 'All sides', @@ -198,7 +205,7 @@ describe( 'BoxControl', () => { it( 'should update a single side value when unlinked', async () => { const user = userEvent.setup(); - render( ); + render( ); await user.click( screen.getByRole( 'button', { name: 'Unlink sides' } ) @@ -226,7 +233,7 @@ describe( 'BoxControl', () => { it( 'should update a single side value when using slider unlinked', async () => { const user = userEvent.setup(); - render( ); + render( ); await user.click( screen.getByRole( 'button', { name: 'Unlink sides' } ) @@ -254,7 +261,7 @@ describe( 'BoxControl', () => { it( 'should update a whole axis when value is changed when unlinked', async () => { const user = userEvent.setup(); - render( ); + render( ); await user.click( screen.getByRole( 'button', { name: 'Unlink sides' } ) @@ -278,7 +285,7 @@ describe( 'BoxControl', () => { it( 'should update a whole axis using a slider when value is changed when unlinked', async () => { const user = userEvent.setup(); - render( ); + render( ); await user.click( screen.getByRole( 'button', { name: 'Unlink sides' } ) @@ -302,7 +309,7 @@ describe( 'BoxControl', () => { it( 'should show "Mixed" label when sides have different values but are linked', async () => { const user = userEvent.setup(); - render( ); + render( ); const unlinkButton = screen.getByRole( 'button', { name: 'Unlink sides', @@ -332,7 +339,7 @@ describe( 'BoxControl', () => { const user = userEvent.setup(); // Render control. - render( {} } /> ); + render( ); // Make unit selection on all input control. await user.selectOptions( @@ -364,7 +371,7 @@ describe( 'BoxControl', () => { const user = userEvent.setup(); // Render control. - const { rerender } = render( {} } /> ); + const { rerender } = render( ); // Make unit selection on all input control. await user.selectOptions( @@ -392,9 +399,7 @@ describe( 'BoxControl', () => { } ); // Rerender with individual side value & confirm unit is selected. - rerender( - {} } /> - ); + rerender( ); const rerenderedControls = screen.getAllByRole( 'combobox', { name: 'Select unit', @@ -416,7 +421,7 @@ describe( 'BoxControl', () => { const user = userEvent.setup(); const onChangeSpy = jest.fn(); - render( ); + render( ); const valueInput = screen.getByRole( 'textbox', { name: 'All sides', @@ -445,7 +450,7 @@ describe( 'BoxControl', () => { const user = userEvent.setup(); const setState = jest.fn(); - render( ); + render( ); await user.selectOptions( screen.getByRole( 'combobox', { From 0fca90b744e8c937f4b4c3d12db268b57221ac5d Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Thu, 28 Nov 2024 10:38:50 +0530 Subject: [PATCH 6/7] Add __next40pxDefaultSize for BoxControl to toolspanel readme This is added because with this PR, we are passing as default 40px size to the BoxControl component, so its usage should also get updated --- packages/components/src/tools-panel/tools-panel/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/src/tools-panel/tools-panel/README.md b/packages/components/src/tools-panel/tools-panel/README.md index 1daa7537335e1..1895f5ccc843e 100644 --- a/packages/components/src/tools-panel/tools-panel/README.md +++ b/packages/components/src/tools-panel/tools-panel/README.md @@ -124,6 +124,7 @@ export function DimensionPanel() { onDeselect={ () => setPadding( undefined ) } > setMargin( undefined ) } > Date: Fri, 29 Nov 2024 07:10:42 +0900 Subject: [PATCH 7/7] Fix changelog --- packages/components/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 334a41660ad17..fe326e847970b 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -5,6 +5,7 @@ ### Deprecations - `BoxControl`: Passive deprecate `onMouseOver`/`onMouseOut`. Pass to the `inputProps` prop instead ([#67332](https://github.com/WordPress/gutenberg/pull/67332)). +- `BoxControl`: Deprecate 36px default size ([#66704](https://github.com/WordPress/gutenberg/pull/66704)). ### Internal @@ -62,7 +63,6 @@ ### Deprecations - `Radio`: Deprecate 36px default size ([#66572](https://github.com/WordPress/gutenberg/pull/66572)). -- `BoxControl`: Deprecate 36px default size ([#66704](https://github.com/WordPress/gutenberg/pull/66704)). ### Bug Fixes