search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.76k stars 1.8k forks source link

[Feature Request]: Add `autoAlign` to Button #17168

Open kurtwaldowski-b opened 1 month ago

kurtwaldowski-b commented 1 month ago

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

github-actions[bot] commented 1 month ago

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 commented 1 month ago

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

tay1orjones commented 1 month ago

Thanks for opening an issue for this! There's a PR up for adding it to CopyButton, CodeSnippet and IconButton https://github.com/carbon-design-system/carbon/pull/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 commented 1 month ago

This also could be solved by https://github.com/carbon-design-system/carbon/issues/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 commented 1 day ago

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