Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

UnitControl: Revamp support for changing unit by typing #39303

Merged
merged 19 commits into from
Jun 21, 2023
+229 −392
Merged

UnitControl: Revamp support for changing unit by typing #39303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
d3544f9
Use a simpler way to allow changing units from the text input
stokesman Mar 9, 2022
d54b6fc
Change default of `isPressEnterToChange` in `BoxControl`
stokesman Mar 9, 2022
befab10
Update tests
stokesman Mar 9, 2022
1cfad18
Avoid potential undefined
stokesman Mar 9, 2022
213edc0
Remove extraneous null typing
stokesman Mar 24, 2022
4157ab6
Make key matching regex case-insensitive
stokesman Mar 24, 2022
b09c7b2
Revert removed condtional type="text" on `UnitControl`
stokesman Mar 24, 2022
a7075b8
Forward __unstableStateReducer through `UnitControl`
stokesman Mar 24, 2022
8d761b5
Avoid intefering with paste or other shortcuts
stokesman Apr 7, 2022
0877a46
Revert `BoxControl` changes
stokesman Jun 6, 2023
8e64f42
Update unit tests for `BoxControl`
stokesman Jun 6, 2023
624ed26
Optimize and guard creation of regex
stokesman Jun 13, 2023
6f1d706
Revise style
stokesman Jun 13, 2023
c205c7d
Make test of unit switching convenience run for each css unit
stokesman Jun 13, 2023
fcff0b1
Add changelog entry
stokesman Jun 13, 2023
1b386cf
Remove custom `onChange` callback on Storybook, as it interferes with…
ciampo Jun 21, 2023
92bbdaa
Improve tests by avoiding local `state` variables and using onChange …
ciampo Jun 21, 2023
06d06ff
Clarify comments about js-dom not updating select inputs when using t…
ciampo Jun 21, 2023
6a96ecd
Update README
ciampo Jun 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

### Enhancements

- `UnitControl`: Revamp support for changing unit by typing ([#39303](https://github.com/WordPress/gutenberg/pull/39303)).
- `Modal`: Update corner radius to be between buttons and the site view frame, in a 2-4-8 system. ([#51254](https://github.com/WordPress/gutenberg/pull/51254)).
- `ItemGroup`: Update button focus state styles to be inline with other button focus states in the editor. ([#51576](https://github.com/WordPress/gutenberg/pull/51576)).

Expand Down
88 changes: 28 additions & 60 deletions packages/components/src/box-control/test/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,15 +46,10 @@ describe( 'BoxControl', () => {
name: 'Box Control',
} );

await user.type( input, '100%' );
await user.type( input, '100' );
await user.keyboard( '{Enter}' );

expect( input ).toHaveValue( '100' );
expect(
screen.getByRole( 'combobox', {
name: 'Select unit',
} )
).toHaveValue( '%' );
} );
} );

Expand All @@ -67,20 +62,15 @@ describe( 'BoxControl', () => {
const input = screen.getByRole( 'textbox', {
name: 'Box Control',
} );
const select = screen.getByRole( 'combobox', {
name: 'Select unit',
} );

await user.type( input, '100px' );
await user.type( input, '100' );
await user.keyboard( '{Enter}' );

expect( input ).toHaveValue( '100' );
expect( select ).toHaveValue( 'px' );

await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );

expect( input ).toHaveValue( '' );
expect( select ).toHaveValue( 'px' );
} );

it( 'should reset values when clicking Reset, if controlled', async () => {
Expand All @@ -91,20 +81,15 @@ describe( 'BoxControl', () => {
const input = screen.getByRole( 'textbox', {
name: 'Box Control',
} );
const select = screen.getByRole( 'combobox', {
name: 'Select unit',
} );

await user.type( input, '100px' );
await user.type( input, '100' );
await user.keyboard( '{Enter}' );

expect( input ).toHaveValue( '100' );
expect( select ).toHaveValue( 'px' );

await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );

expect( input ).toHaveValue( '' );
expect( select ).toHaveValue( 'px' );
} );

it( 'should reset values when clicking Reset, if controlled <-> uncontrolled state changes', async () => {
Expand All @@ -115,20 +100,15 @@ describe( 'BoxControl', () => {
const input = screen.getByRole( 'textbox', {
name: 'Box Control',
} );
const select = screen.getByRole( 'combobox', {
name: 'Select unit',
} );

await user.type( input, '100px' );
await user.type( input, '100' );
await user.keyboard( '{Enter}' );

expect( input ).toHaveValue( '100' );
expect( select ).toHaveValue( 'px' );

await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );

expect( input ).toHaveValue( '' );
expect( select ).toHaveValue( 'px' );
} );

it( 'should persist cleared value when focus changes', async () => {
Expand All @@ -141,15 +121,10 @@ describe( 'BoxControl', () => {
name: 'Box Control',
} );

await user.type( input, '100%' );
await user.type( input, '100' );
await user.keyboard( '{Enter}' );

expect( input ).toHaveValue( '100' );
expect(
screen.getByRole( 'combobox', {
name: 'Select unit',
} )
).toHaveValue( '%' );

await user.clear( input );
expect( input ).toHaveValue( '' );
Expand Down Expand Up @@ -178,9 +153,8 @@ describe( 'BoxControl', () => {

await user.type(
screen.getByRole( 'textbox', { name: 'Top' } ),
'100px'
'100'
);
await user.keyboard( '{Enter}' );

expect(
screen.getByRole( 'textbox', { name: 'Top' } )
Expand All @@ -194,12 +168,6 @@ describe( 'BoxControl', () => {
expect(
screen.getByRole( 'textbox', { name: 'Left' } )
).not.toHaveValue();

screen
.getAllByRole( 'combobox', { name: 'Select unit' } )
.forEach( ( combobox ) => {
expect( combobox ).toHaveValue( 'px' );
} );
} );

it( 'should update a whole axis when value is changed when unlinked', async () => {
Expand All @@ -215,22 +183,15 @@ describe( 'BoxControl', () => {
screen.getByRole( 'textbox', {
name: 'Vertical',
} ),
'100px'
'100'
);
await user.keyboard( '{Enter}' );

expect(
screen.getByRole( 'textbox', { name: 'Vertical' } )
).toHaveValue( '100' );
expect(
screen.getByRole( 'textbox', { name: 'Horizontal' } )
).not.toHaveValue();

screen
.getAllByRole( 'combobox', { name: 'Select unit' } )
.forEach( ( combobox ) => {
expect( combobox ).toHaveValue( 'px' );
} );
} );
} );

Expand Down Expand Up @@ -321,23 +282,30 @@ describe( 'BoxControl', () => {
describe( 'onChange updates', () => {
it( 'should call onChange when values contain more than just CSS units', async () => {
const user = userEvent.setup();
const setState = jest.fn();
const onChangeSpy = jest.fn();

render( <BoxControl onChange={ setState } /> );
render( <BoxControl onChange={ onChangeSpy } /> );

await user.type(
screen.getByRole( 'textbox', {
name: 'Box Control',
} ),
'7.5rem'
);
await user.keyboard( '{Enter}' );
const valueInput = screen.getByRole( 'textbox', {
name: 'Box Control',
} );
const unitSelect = screen.getByRole( 'combobox', {
name: 'Select unit',
} );

expect( setState ).toHaveBeenCalledWith( {
top: '7.5rem',
right: '7.5rem',
bottom: '7.5rem',
left: '7.5rem',
// Typing the first letter of a unit blurs the input and focuses the combobox.
await user.type( valueInput, '7r' );

expect( unitSelect ).toHaveFocus();

// The correct expected behavior would be for the values to have "rem"
// as their unit, but the test environment doesn't seem to change
// values on `select` elements when using the keyboard.
expect( onChangeSpy ).toHaveBeenLastCalledWith( {
top: '7px',
right: '7px',
bottom: '7px',
left: '7px',
} );
} );

Expand Down
Loading