Focal point picker -use the input-number class and styles already available

[m-e-h]

Description

Replaces the class on the number input from components-text-control__input to components-range-control__number.

Also removes the styles for that input since components-range-control__number already has number input styles.

This keeps styles consistent with similar controls like "Background Opacity" and the "Columns" number range.

Visually looks the same. Might be a pixel or two different but it is consistent now.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[aduth]

We should never assume a class name of another component, as it will most certainly cause breakage in the future.

If it's meant to be a range control, it should be implemented as a <RangeControl> component.

Otherwise, its styles must be defined locally, and the class name assigned following the coding guidelines:

https://github.com/WordPress/gutenberg/blob/master/docs/contributors/coding-guidelines.md#naming

[m-e-h]

Thanks @aduth! That makes perfect sense and is sort of what I was thinking when I began working on #11555 .
But I think that may have mixed me up a little since the Font Size number input was using the components-range-control__number class outside of the <RangeControl> component.

I also figured components-range-control__number from the RangeControl component made as much or more sense here as components-text-control__input from the TextControl component, which is the current situation.
That rational may have been a little irresponsible.

I'm also used to a more functional CSS methodology to styling.
I'm learning though that it may not always work in this project. Perhaps my approach to #11555 is off?

[aduth]

But I think that may have mixed me up a little since the Font Size number input was using the components-range-control__number class outside of the <RangeControl> component.

Yes, FontSizePicker is wrong as well then.

I'm also used to a more functional CSS methodology to styling.
I'm learning though that it may not always work in this project. Perhaps my approach to #11555 is off?

I'm not entirely sure I follow the question. On its own, the changes from #11555 don't strike me as alarming, but it all depends how this transpires once FontSizePicker is fixed to stop appropriating the .components-range-control__number class.

[m-e-h]

I'm not entirely sure I follow the question.

Yeah, I was kinda thinking aloud there. To answer my own question, my thinking was a little off. I was trying to cut down on duplicate code by re-using class-names with a predictable set of styles attached. While the results would be good, it isn't really inline with the coding guidelines.

So, in light of discovering components like Focal Point and Font Size, both re-inventing the number input and misusing other control classes, my "new thinking" tells me that we need a <NumberControl> component. Right?

I'll put something together for that and see how it works out.

[chrisvanpatten]

@m-e-h I think that's a great approach; a generic NumberControl that could be re-used in all these instances would be really wonderful.

[youknowriad]

Hi There! I've triaging PRs today and it seems this one is stale. I'm going to close now as it doesn't seem like the desired direction. Thanks for your efforts.