URLInput should use InputControl internally

[mirka]

What problem does this address?

The URLInput component uses an input element directly, instead of a standard component like InputControl or TextControl. This will cause styles to drift from the rest of the app, since it won't receive style updates with the rest of the componentry.

gutenberg/packages/block-editor/src/components/url-input/index.js

Line 475 in 4d4522c

<input { ...inputProps } />

What is your proposed solution?

We should see if we can refactor this to use InputControl or TextControl. I think InputControl would be better because one of the consumers (LinkControl) has a submit button within the input field border that would be best to put in the suffix slot of InputControl.

URLPopover

LinkControl

Social Icons block

@WordPress/gutenberg-design Do we also care to do some consolidation on how the submit button is placed? Especially the LinkControl and Social Icons block seem to have an unnecessary inconsistency.

[jasmussen]

Do we also care to do some consolidation on how the submit button is placed? Especially the LinkControl and Social Icons block seem to have an unnecessary inconsistency.

Definitely care about consolidation. Social links should be the same as the LinkControl.

[rahulharpal1603]

@mirka Can I take up this issue?

[mirka]

Of course, thank you! Please mention @WordPress/gutenberg-components in your PR when it's ready.

[rahulharpal1603]

Thanks, this may take some time, is it ok? Because, I also have some college work to do

[rahulharpal1603]

@mirka I replaced the <input> with <InputControl> but the problem is that the className prop, when applied to InputControl, it applies to the wrapper <div> instead of the <input> tag inside that wrapper <div>. This is causing the CSS to not apply properly on the input tag. This is due to some CSS property overriding the height property of the div class.

What to do? Please help, I am stuck here.

[rahulharpal1603]

See, the height of the <InputControl> element is smaller (36px) than the above element rendered with <TextControl>

[ciampo]

@rahulharpal1603 we can definitely help! Could you open a PR with your changes, so that we can help with precise code comments and test the changes?

[rahulharpal1603]

@rahulharpal1603 we can definitely help! Could you open a PR with your changes, so that we can help with precise code comments and test the changes?

Sure

[rahulharpal1603]

@ciampo, the height issue is fixed but there is some other issue, please check the above PR for more details