UnitControl: show unit label when units prop has only one unit

[ciampo]

What?

Fix an issue in UnitControl, where the unit label was not being shown if the units array prop only had one item.

Why?

This is a bug and should be fixed. See #40697 (comment) and #40697 (comment) for more context.

How?

The fix is to use the label of the single unit passed through the units prop as the initial unit value (as suggested in this comment by @stokesman ).

This PR also restores the should render label if single units unit test to how it used to be before the changes applied in #40697.

Testing Instructions

• Make sure tests pass

• Visit the "Single Unit Controlled" Storybook example on trunk, verify that there's no unit being displayed when the Story initially renders. Check that the unit is only shown after a numeric value is entered in the input field.

• Apply this patch below to restore the same Storybook example on this branch, visit the same "Single Unit Controlled" Storybook example, and verify that the initial unit is being displayed during the Story initial render.

Click to show the patch

diff --git a/packages/components/src/unit-control/stories/index.tsx b/packages/components/src/unit-control/stories/index.tsx
index 87dfd3a84c..de60479e7b 100644
--- a/packages/components/src/unit-control/stories/index.tsx
+++ b/packages/components/src/unit-control/stories/index.tsx
@@ -117,6 +117,29 @@ WithSingleUnit.args = {
 	units: CSS_UNITS.slice( 0, 1 ),
 };
 
+export const WithSingleUnitControlled: ComponentStory<
+	typeof UnitControl
+> = ( { onChange, ...args } ) => {
+	const [ value, setValue ] = useState< string | undefined >( undefined );
+
+	return (
+		<div style={ { maxWidth: '100px' } }>
+			<UnitControl
+				{ ...args }
+				value={ value }
+				onChange={ ( v, extra ) => {
+					setValue( v );
+					onChange?.( v, extra );
+				} }
+			/>
+		</div>
+	);
+};
+WithSingleUnitControlled.args = {
+	...Default.args,
+	units: CSS_UNITS.slice( 0, 1 ),
+};
+
 /**
  * It is possible to pass a custom list of units. Every time the unit changes,
  * if the `isResetValueOnUnitChange` is set to `true`, the input's quantity is

Screenshots or screencast

Before

unit-control-single-label-before.mp4

After

unit-control-single-label-after.mp4

[ciampo]

Just undoing some Storybook changes that were left from previous work on #40697

[ciampo]

Removing value prop from test, which was added as a temporary fix in #40697 (see #40697 (comment) for context)

[aaronrobertshaw]

Thanks for cleaning this up @ciampo 👍

✅ Tests pass
✅ All Storybook examples for UnitControl function as expected
✅ Works as expected in editor and theme setting only single unit

I did have one minor question/tweak that I've left as an inline comment. Happy to review again and give final approval once that's resolved.

[aaronrobertshaw]

LGTM 🚢

✅ Tests still pass
✅ UnitControl behaves as advertised within Storybook examples
✅ Still working in the editor with varying custom unit configurations

I'd say this should be right to land once all the checks are green. 👍