Badge positioning when wrapping children

[aweell]

Goal

The goal of the discussion is to find a configuration where the badge with children works in most use cases.

Context

• Currently the avatar uses a custom implementation since the default positioning (top and right values) of the badge when it has a children are designed to work on square elements, not circular ones.
• The component already provides the top and right props so its position could be adjusted to what is desired in each case.
• In the current badge specs (apart from the fact that the examples were broken) we were not considering those cases in which the badge is placed on a circular element.
  There could potentially be a case where someone would want to place that badge in an extended component that has the same characteristics as the current iconButton.

Example ->

Impact

This proposal aims to avoid doing custom implementations of the badge when is wrapping a circular visible container.

Discussion Questions

• One of the proposals is to assume all containers can be circular and position the badge accordingly
• Another option could be to create a prop that allows to configure the badge positioning out of the box for both types of containers.

Additional considerations

No response

Do you have a visual proposal?

No response

[aweell]

There are two options to be reviewed in order to solve this problem:

• Assume that in most of cases the badge will wrap a circular children and change the current default positioning
• Allow to configure the position based on the children shape