Open Mikadv opened 3 months ago
OverflowMenu is using IconButton
that uses the Tooltip
.
We should add the autoAlign
prop to the IconButton
as default OR maybe add to the OverflowMenu
an option to enable that by a prop.
Setting the autoAlign
as default might be the best approach to fix that.
I realized this is also for the Pagination
component the case. And I assume for any other that has now the Tooltip
build in
FYI @guidari
Package
@carbon/react
Browser
Chrome, Safari, Firefox, Edge
Package version
@carbon/react@1.65.0
React version
17.0.2
Description
Problem
When the
OverflowMenu
is placed at the corner of an container the tooltip that is now with Carbon 11 rendered by default is cropped of. There is no option to bypass this problem, except ugly JavaScript or CSS hacking.Here is an example with
DataTable
:Here is an example with the component right in the story book:
Expectation
From the carbon
Tooltip
component I saw theautoAlign
prop that does this magic for us: Always shows the tooltip proper. I adore it really much, since it always lets it display proper, no matter where this tooltip is or how small or big the browser window is. But here for theOverflowMenu
it is not there. Only manual alignments. Since in the underlaying component you anyhow use aTooltip
provide also aautoAlign
prop for theOverflowMenu
and bubble it down.Reproduction/example
https://react.carbondesignsystem.com/?path=/story/components-overflowmenu--playground&args=aria-label:A+very+long+text+that+gets+cropped+off;iconDescription:A+very+long+text+that+gets+cropped+off
Steps to reproduce
OverflowMenu
button.Suggested Severity
Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.
Application/PAL
IKC
Code of Conduct