carbon-design-system / carbon-addons-iot-react

A collection of React components shared between IBM Watson IoT products.
https://carbon-design-system.github.io/carbon-addons-iot-react/
Apache License 2.0
96 stars 78 forks source link

[Time Series Card] Time Series dropdown flows off the screen. #635

Open stuckless opened 5 years ago

stuckless commented 5 years ago

Describe the bug

When the time series chart is on the right side of the dashboard as per the dashboard story, the time series drowdown opens off the screen. It should position itself so that it does flow off the edge of the screen or cause a horizontal overflow.

To Reproduce

Steps to reproduce the behavior:

  1. https://deploy-preview-634--carbon-addons-iot-react.netlify.com/?selectedKind=Dashboard%20%28Experimental%29&selectedStory=basic%20dashboard&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs
  2. Click on 'Last 7 Days' dropdown in the 'Temperature' card.
  3. OPens, partially cut off. Pages gets scrollbars.

Expected behavior

Tooltip dialogs should reposition themselves so that they are never off the screen.

image

stuckless commented 5 years ago

I was looking in a V1 repo and a PR when I discovered this and didn't realize it. This bug only affects in V1 repo of the components, since, in the Carbon 10 repo the dialog opens left instead of right.

stuckless commented 5 years ago

Although in RTL mode the dialog does flow off the left side of the screen. Either way, it would be good if tooltip dialogs never caused the UI to scroll. They should position themselves more intelligently.

enricoberti commented 4 years ago

@stuckless is this bug still valid? i have this now:

image

stuckless commented 4 years ago

I think this issue only existed in the V1 repo (which was carbon 9). The current repo is using Carbon 10 and would appear to not be an issue. Although I can't really tell if it's broken in RTL mode, but sadly the entire dashboard is broken in RTL :( (RTL is not something we are worrying about for April)

One of the challenges with Carbon's components is that they do not appear to care about RTL so on an RTL environment the menu will be on the left and swing open on the left basically pushint it off the screen. Also on a smaller screen when they open their menus it will cause a vertical scroll on the page depending on where it is located :(

enricoberti commented 4 years ago

:( I've seen that we also have #791 that is another Carbon RTL-related thing. Regarding the small thing dropdown, is that something we can look into?

enricoberti commented 4 years ago

@stuckless @davidicus given we have all the RTL issues open, including one for the dashboard, is this one good to close?

stuckless commented 4 years ago

I'm doubtful that when the dashboard is fixed, that a developer will also just verify that every single card is also rendering correctly in RTL mode. I would leave this open as an RTL defect against the time series card.