Remove margin top on the input component if no label is provided in core_components.ex

[NTurchi]

Environment

• Elixir version (elixir -v):

Erlang/OTP 25 [erts-13.2.2.6] [source] [64-bit] [smp:10:10] [ds:10:10:10] [async-threads:1]

Elixir 1.16.1 (compiled with Erlang/OTP 25)

• Phoenix version (mix deps): 1.7.12
• Operating system: MacOS

Actual behavior

Hello Phoenix Team 👋
This is a minor issue with the input component from the core_components.ex file (used in phx.gen.live)
A margin top is added by default for the spacing between the label and the input.

phoenix/priv/templates/phx.gen.live/core_components.ex

Lines 357 to 361 in 69685f7

	class={[
	"mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6 min-h-[6rem]",
	@errors == [] && "border-zinc-300 focus:border-zinc-400",
	@errors != [] && "border-rose-400 focus:border-rose-400"
	]}

However it is not removed if a label is not provided. Which causes alignment issue when combining the input component with other elements on our UI.

Of course this can be fixed easily by modifying the core_component in my project but I guess this can be a quick win improvement to update the core_components.ex directly in Phoenix. I can propose a PR if you think it's worth making a small update 🙏

Expected behavior

Avoid adding a margin to the input if a label is not provided to the input component.

Fix: one idea could be to put the mt-2 class behind a condition, e.g:

class={[ 
    "block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6 min-h-[6rem]", 
    @errors == [] && "border-zinc-300 focus:border-zinc-400", 
    @errors != [] && "border-rose-400 focus:border-rose-400",
    # new condition
    label != nil && "mt-2",
]} 

[josevalim]

Maybe we should add mb-2 to the label instead? A PR is welcome.

[HerrBertling]

Not sure whether the error should have the same margin as the label and textarea have between each other. If that‘s the case, you could make use of the gap classes that work with either flex or grid.

Here, you could slap some Tailwind classes onto the surrounding div and the spacing would „just“ happen between the different children, no matter if a specific one is present or not: <div class="flex flex-col gap-2">… 😊

EDIT: this article lays out in more detail why avoiding margin is overall better in composition of components: https://mxstbr.com/thoughts/margin