search

carbon-design-system / carbon

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

[Bug]: `OverflowMenu` tooltip should support auto align (like the stand alone `Tooltop`), currently it gets cropped off when the container ends #17305

Open Mikadv opened 2 months ago

Mikadv commented 2 months ago

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:

image

Here is an example with the component right in the story book:

image

Expectation

From the carbon Tooltip component I saw the autoAlign 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 the OverflowMenu it is not there. Only manual alignments. Since in the underlaying component you anyhow use a Tooltip provide also a autoAlign prop for the OverflowMenu 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

  1. Open the link
  2. Hover the OverflowMenu button.
  3. Experience what you see above in the image.

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

guidari commented 2 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.

Mikadv commented 2 months ago

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