fix(badge): remove badge margins

[crisbeto]

Removes the margins that are being added to an element that has a badge. Having the margin was problematic, because it can influence the user's layout and it doesn't handle toggling between a visible and hidden badge very well.

Fixes #11596.

[crisbeto]

@jelbourn @amcdnl marking this as "needs discussion" since I can see it going two ways. On one hand, we don't want to take up the extra space if we don't have to, but on the other it means that toggling between a visible and a hidden badge will cause the element to shift. IMO the shifting isn't that big of an issue, because the badge is being removed at the same time. What do you think?

[jelbourn]

Why does the badge affect layout at all?

[crisbeto]

AFAIK the reasoning is that it makes some extra space so it doesn't overlap with the element next to it.

[jelbourn]

@amcdnl do you have any opinions? I'm leaning towards not removing the margin because I think it's worse for the UI to jump than to have the extra space.

[amcdnl]

@jelbourn - I'm on the fence. I agree the jumping is not ideal but a odd white space in text might be just as frustrating. If I had to choose, I'd probably say remove the whitespace.

[crisbeto]

Removed the margins @jelbourn @amcdnl, PTAL. Also depending on how many screenshot failures we get, we might have to bump this to a major version.

[jelbourn]

LGTM

[jelbourn]

Caretaker note: we need to evaluate whether this change is minor or major based on how it affects google3

[andrewseguin]

Change did not affect any internal tests - I'd be alright with this being minor

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}