Input: Don't add margin-top when input has no Label

[ralvarezing]

Description

When a Label is not set, a margin-top is not set. This fixes that inputs with no label won't align with other items.
This removes the margin-top from input text variants, but instead incorporates a new class (mud-input-{variant}-with-label), that adds margin top only if the input has a Label set.

fixes #8262

Before this change:

How Has This Been Tested?

Added a Viewer test to have all inputs affected by this fix in one place

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

• The PR is submitted to the correct branch (dev).
• My code follows the code style of this project.
• I've added relevant tests.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 89.54%. Comparing base (8518947) to head (0d7928d).
Report is 11 commits behind head on dev.

Additional details and impacted files

@@            Coverage Diff             @@
##              dev    #8540      +/-   ##
==========================================
+ Coverage   89.28%   89.54%   +0.25%     
==========================================
  Files         411      411              
  Lines       11903    11836      -67     
  Branches     2357     2349       -8     
==========================================
- Hits        10628    10598      -30     
+ Misses        752      716      -36     
+ Partials      523      522       -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[danielchalmers]

Nice one! Looks great from the light testing in my app.

cc @henon

[henon]

For completeness, can you post a before picture that shows the same MudStack with misaligned text fields?

[ralvarezing]

For completeness, can you post a before picture that shows the same MudStack with misaligned text fields?

There, I also added a button so it's easier to see the difference:

Before this change:

Afterr this change:

[henon]

I have another question. When you have textfields with labels, textfields without labels and buttons they will still all align well?

[ralvarezing]

I have another question. When you have textfields with labels, textfields without labels and buttons they will still all align well?

This is a great question, and you're right,
because they will have different heights, they won't align right away (if you take the bottom line as base for alignment).

You could accept it as expected behavior because "they will have different heights" and the dev has two main options to fix it:

Fix this aligning using baseline and not center (But if you look close, the radio, checkbox and button are not aligned now).

Or Fix it with a mt-4 in each input that has no label. Which could be a good option because intentionally you want to add an input with label and an input with no label aligned (different "styles" in the same row).

Alternativity, we could change the approach and add a negative margin to the label itself (never add the margin to the input), and they will always align. 

But you get this kind of problems

Which could be solved by the dev with a margin top to the input or to the Stack (depending on how is structure the layout)
But still, I don't think it should be how any component should work. Is like an intentional bug that the dev should "fix" when using it.

[henon]

Ok, I think the solution we have now is the most reasonable of all the options.

Thanks @ralvarezing

[henon]

Added to v7.0.0 Migration Guide #8447

[danielchalmers]

@ralvarezing I think this broke MudAutocomplete visually. Could you check on your end?

v7:

v6:

[ralvarezing]

Oooh yeah I think I know what happened... i'll breake it down

Almost all the inputs use the MudInput to implement the "field" itself, this MudInput is the one that implements the margins.
But it does not have the access to the Label that has been set from the parent (ex. MudTextField). So, when trying to build the classes, this evaluation !string.IsNullOrEmpty(baseInput.Label) is always false.

This is were this comes in:

And has to be set in all the inputs that uses this MudInput... So preatty sure I missed some (like the AutoComplete).

I'll see to get that fixed and before opening a new PR, double check that I don't miss any other

[ralvarezing]

That should do it,
Is a really small PR but, for what I've seen, this should complete all inputs

Of corse, let me know if there is any other

[mrDenning]

@ralvarezing I think this broke MudAutocomplete visually. Could you check on your end?

v7:

v6:

This issue still exists in 7.0.0-preview3 with MudTextField

[ralvarezing]

@ralvarezing I think this broke MudAutocomplete visually. Could you check on your end?
v7:

v6:

This issue still exists in 7.0.0-preview3 with MudTextField

Sorry, can you provide some example in a playground or where do you have this issue.
I am not being able to reproduce this in the tag for the release 7.0.0-preview3 or later commits

[danielchalmers]

@ralvarezing Noticed this in the switches in this DataGrid examples:

https://dev.mudblazor.com/components/datagrid#visual-styling

Before:

https://mudblazor.com/components/datagrid#editing

Do you think it's related to this PR?

[danielchalmers]

And the sorting example

[ralvarezing]

And the sorting example

Thxs for the example.

I haven't had much time, but taking a look, yes this is the cause of this, specifically the removal of the margin-inline-end.
Wasn't found in the switch examples because there is extra spacing added in those examples (which hide the missing margin-inline-end).

I've created this small pr (literally 2 chars :D) so this gets fixed fast: #9102
But I'm maybe taking a look at this issue if you're interested #9009

[danielchalmers]

Thanks @ralvarezing, glad it's an easy fix.

I would love if you could look at #9009! Got semi approval here #8988 (comment)