UnitControl: Set correct unit when units has one option

[walbo]

Description

When only one option is passed to the units prop in UnitControl component the onChange always returns px.

Ex on pattern that will return px:

const [ value, setValue ] = useState( '10%' );

<UnitControl
	value={ value }
	unit="%"
	units={ [ { value: '%', label: '%' } ] }
	onChange={ setValue }
/>

How has this been tested?

Testet with both multiple and single option in units prop.

Screenshots

Before

After

Types of changes

Bug fix

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

[Mamaduka]

Thanks for working on this, @walbo.

I noticed this issue yesterday and was about the create an issue when I saw your PR 😄

[aaronrobertshaw]

Thanks for fixing this issue @walbo. I was also looking into this problem but you were too quick for me 🚀

Our solutions were pretty similar the only difference being that if we are changing the behaviour of the hasUnits utility we need to also update the native UnitControl component. It currently relies on the old implementation of hasUnits to prevent rendering a touchable button and picker for the units when the user doesn't in fact have any alternative options.

I've created a quick PR to address adding explicit checks for units.length into the native unit control and restoring it previous behaviour.

[walbo]

Thanks for the follow-up @aaronrobertshaw 👍 Didn't spot that one.