[Bug]: Icon button tooltip caret should be centered even if label text itself has "start" or "end" alignment

[samcraftt]

Package

@carbon/react

Browser

Chrome

Package version

1.78.0

Description

When using tooltip alignments like top-start, top-end, bottom-start, and bottom-end, the caret should be centered, even though we want the label text to expand in a certain direction. It looks odd for the caret to be off-centered.

Screenshots

The caret is off-centered using align='bottom-end':

I'm able to achieve the desired appearance using autoAlign + align='bottom-end', but I feel like this shouldn't be necessary:

Steps to reproduce

Render an IconButton component with the align prop set to either top-start, top-end, bottom-start, or bottom-end. Notice that caret is off-centered.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[Gururajj77]

Hey @samcraftt , Thanks for bringing this up. The autoAlign feature was added to make sure these type of bugs can be rectified. As this is an experimental prop, the developer using it has to enable it manually, once it moves to stable we will make it as the default behaviour.