[Feature Request]: Add autoAlign to Button

[kurtwaldowski-b]

The problem

In a recent update, autoAlign was added to tooltips, which allows them to take advantage of floating-ui and always render the tooltip on top. This prevents it from being cut off by surrounding elements, and was a great improvement.

However, most of our tooltips are baked into Buttons and Icon Buttons, and this issue is still persistent for them. There is no way to use autoAlign and prevent tooltips inside of Buttons from being cut off.

The solution

We should align the behavior of the Tooltip component and the baked in tooltip component within buttons and icon buttons.

Examples

Here is a stack blitz demonstrating the issue and current workaround

https://stackblitz.com/edit/vitejs-vite-nwjb3v?file=src%2FApp.tsx

Application/PAL

No response

Business priority

Medium Priority = upcoming release but is not pressing

Available extra resources

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[github-actions]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[kurtwaldowski-b]

I am not positive if this should be opened as a bug or a feature request

[tay1orjones]

Thanks for opening an issue for this! There's a PR up for adding it to CopyButton, CodeSnippet and IconButton #17138

We can refocus this issue towards just adding it to Button. It's technically an enhancement but we should've covered this earlier as part of adding it to Tooltip, so I'll classify it as a bug too.

[tay1orjones]

This also could be solved by #17003. I'm 50/50 if this should be an explicit prop drilled down to each of these components or if it should be more generally configured with something like what's proposed there. Maybe the best solution is both, I'm not sure. If you have any thoughts on it, please share.

[tay1orjones]

Update: I think adding this as an experimental prop on Button for now makes sense. If we change direction we can codemod the change pretty easily