Storybook: Add UnitControl story

[im3dabasia]

Part of #67165

What?

This PR will add stories for UnitControl component in the Storybook.

Why?

As part of the ongoing effort to improve component documentation and testing (tracked in #22891), we need comprehensive stories for all Block Editor components.

Testing Instructions

1. Run npm run storybook:dev
2. Open the storybook on http://localhost:50240/
3. Check the UnitControl stories.

Screenshots or screencast

Screen.Recording.2024-11-27.at.4.57.25.PM.mov

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @im3dabasia! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: im3dabasia <[email protected]>
Co-authored-by: t-hamano <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[im3dabasia]

Hey @t-hamano,

I have refactored this PR to align with the patterns suggested in the issue. Please review my work when you have a moment. Thank you!

Screen.Recording.2024-12-23.at.2.42.02.PM.mov

[im3dabasia]

Would it be a good idea to show a story with custom units? I had considered adding this but have removed it for now. Let me know if it makes sense to include a story for this.

[t-hamano]

Thanks for the PR!

We may also want to add the following three props to match the README:

• disabledUnits
• isPressEnterToChange
• isUnitSelectTabbable

[t-hamano]

Suggested change

	'UnitControl allows the user to set a numeric quantity as well as a unit ',
	'UnitControl allows the user to set a numeric quantity as well as a unit.',

[t-hamano]

Suggested change

	render: function Template( { onChange, onUnitChange, value, ...args } ) {
	const [ componentValue, setComponentValue ] = useState( value || '' );
	useEffect( () => {
	setComponentValue( value );
	}, [ value ] );
	const handleValueChange = ( newValue ) => {
	setComponentValue( newValue );
	if ( onChange ) {
	onChange( newValue );
	}
	};
	return (
	<UnitControl
	{ ...args }
	value={ componentValue }
	onChange={ handleValueChange }
	onUnitChange={ onUnitChange }
	/>
	);
	},
	render: function Template( { onChange, ...args } ) {
	const [ value, setValue ] = useState();
	return (
	<UnitControl
	{ ...args }
	value={ value }
	onChange={ ( ...changeArgs ) => {
	onChange( ...changeArgs );
	setValue( ...changeArgs );
	} }
	/>
	);
	},
	args: {
	label: 'Label',
	},

Is there a reason you implemented it this way? The above implementation should work too.

At the same time, it might be a good idea to display a default label, just like with the components package.

[t-hamano]

Suggested change

	options: [ 'top', 'side', 'bottom' ],
	options: [ 'top', 'side', 'bottom', 'edge' ],

[t-hamano]

Suggested change

	control: 'text',
	control: { type: null },

I believe the control is not necessary since the value can be updated directly via the UI.

[t-hamano]

Would it be a good idea to show a story with custom units?

This component is a kind of wrapper component for the UnitControl component in the components package. And this UnitControl component exported by the block-editor package doesn't seem to be used anywhere in Gutenberg right now.

Considering this, I think one story is enough.