[Badge] Fix transition flicker

[mnajdova]

This PR is fixing the flickering of the badge components, when transitioning to invisible state.

Previously:

(You can see the middle transition - the 0 being applied while it is disappearing)

Now:

The provided solution is based on the prev properties on the Badge component (only the props used in the classes + the content are being considered.

As an alternative I tried using the SwitchTransition component from react-transition-group, but the flickering was still there...

[mui-pr-bot]

@material-ui/core: parsed: +0.07% , gzip: +0.12%

Details of bundle changes

Generated by 🚫 dangerJS against 8fcbd11

[oliviertassinari]

I can confirm it work, It doesn't solve 100% of the problem, but it sounds pragmatic.

There is something I have been wondering about the Badge component for some time, is whether or not we should break it down. It seems that the positioning and animation logic could be isolated from the display. For instance: https://getbootstrap.com/docs/4.5/components/badge/#contextual-variations.

[mbrookes]

@oliviertassinari

It doesn't solve 100% of the problem

Out of curiosity, what part doesn't it solve?

[mnajdova]

There is something I have been wondering about the Badge component for some time, is whether or not we should break it down. It seems that the positioning and animation logic could be isolated from the display. For instance: https://getbootstrap.com/docs/4.5/components/badge/#contextual-variations.

On this I had a similar thought. I think there is too much opinion baked inside the Badge. I can easily as a client add the disappearing as a logic on top of it (or maybe we should have customization example, or some transition component that can handle this) In my opinion the badge should be just a small dot that contain some info optionally and can be positioned around an element... Not sure if it used internally in other components currently, but even on client's side, there shouldn't be any penalty for functionality that may not be used always... Anyway, I can see the benefit of clients not needing to handle this on their side, so it is about the less opinionated/more opinionated opposition :)

[oliviertassinari]

Out of curiosity, what part doesn't it solve?

@mbrookes From what I understand, if the component commit twice, we will notice the 0. But IMHO, it's good enough in the current tradeoff :).

I think there is too much opinion baked inside the Badge

Ok cool, there is a Trello item that is dedicated to this problem. It's not directly related to this problem we try to solve, we can discuss it later on.

[oliviertassinari]

@mnajdova Well done :)