Chip component height not consistent for all types.

[satyamyadav]

Description

The height and width of the Chip component is 2px more than type input in case of types action and selection. It seems that the border width is adding up in width and height and property box-sizing: border-box is not applied as it has display inline-flex.

Steps to reproduce

• Open examples for the different types here https://innovaccer.github.io/design-system/?path=/docs/components-chip-action-chip--action-chip
• Inspect the width and height for the same content either on different stories or by changing the prop type in live code editor or knobs (canvas tab of All titled story).

Expected result

• Height and width should be consistent irrespective of the value of type prop.
• The height should be 24px for all the types.

Actual result

What happened.

Height and width is not consistent for all types of the Chip component.

[AlithAnar]

Hi, I think that the inline-flex property is not an issue here. The Chip component doesn't know how tu sum up the total width here because the element width is not static (width: fit-content currently). For action and selection Chips wouldn't outline property be a better choice?

[innosatyam]

Closing due to inactivity.