Add SizeControl component that allows negative values & customizable range

[protibimbok]

What?

Addressing the issues #61179 & #60633
This component allows:

1. Negative values
2. Custom min, max & step per unit
3. Option to allow adaptive min/max

Why?

While developing custom blocks, the use of negative values is often required. I myself have faced this issue many times. The current available option for managing custom size is HeightControl, which does not allow the negative values. And the range is pre-defined for all units.

How?

This new component is exactly same as the HeightControl except for two additional optional props: adaptiveRange: boolean & rangeConfig: Object.

1. If adaptiveRange is true, the min/max range will adapt to the current value.
2. And the rangeConfig prop allows to override the default min, max & step configuration.

Usage

<SizeControl
    label = "Your Label"
    adaptiveRange={true}
    rangeConfig={{
        px: {
            min: -500,
            max: 1000,
        },
        rem: {
            step: 0.5
        }
    }}
/>

Screenshots or screencast

2024-04-28.11-47-41.mp4

[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: protibimbok <protibimbok@git.wordpress.org>

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

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @protibimbok! 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.