Badge positioning when wrapping children

[aweell]

Tasks

• [ ] Update specs
• [ ] Add to mobile library
• [ ] Add to desktop library
• [ ] Web ticket

Discussed in https://github.com/Telefonica/mistica-design/discussions/1656

^{Originally posted by aweell February 19, 2024}

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