Material-ui: Badge Enhancement Request

[baoduy]

Currently, the badge position is on the top right of the component. Shall we enhance for all 4 corners?

[oliviertassinari]

Vuetify has a similar feature.

[vilvaathibanpb]

Can I work on this if no one else is doing ?

[oliviertassinari]

What API should we expose? What about:

type anchorOrigin = {
  horizontal: 'left' | 'right';
  vertical: 'top', 'bottom';
};

[vilvaathibanpb]

Yea that makes more sense. based on value, let's add position params to the 'badge' object within styles object

[vilvaathibanpb]

@oliviertassinari Though I am little confused as such how to implement it. Any detailed clarity would be appreciated. changing the positions (top, right, left and bottom) within styles of badge component will solve the issue, but what might be the better way to do it?

[baoduy]

@oliviertassinari, @vilvaathibanpb I think, Bringing the anchorOrigin property to the Badge component is more useful than control the location of badge via the style-sheet as we can make style-sheet is more generic and the position of the Badge can be controlled via the props.

What is your though?

[vilvaathibanpb]

@baoduy May be that makes sense. Lets try that out. I will check if thats feasible

[SerdarSanri]

and addition to that, it would be awesome if we can also use other content rather than just numeric value. Maybe another variant?

[oliviertassinari]

@SerdarSanri What stop you from using a non-metric value?