CodeSnippet: missing horizontal scrollbar when type is multi and there is a long row of data

[guigueb]

CodeSnippet: missing horizontal scrollbar when type is multi and there is a long row of data

What package(s) are you using?

• [ ] carbon-components
• [x] carbon-components-react

Detailed description

When you have a long row of data and the type='single'...

• the data can be scrolled horizontally
• the scroll bar show when scrolling
• this is good

When you have a long row of data and the type='multi'...

• the data can be scrolled horizontally
• the scroll bar does not show when scrolling
• this is not good

This shows in the latest Carbon Design System using any browser.

Steps to reproduce the issue

1. View CodeSnippet with a long row of data that overflows
2. when viewed with type=single it will scroll horizontally and has a scroll bar
3. when viewed with type=multi it will scroll horizontally and does not have a scroll bar

[guigueb]

This bug is described in #7551

[tw15egan]

@guigueb By default, the scrolling is set to wrap. You can set wrapText={false} on the CodeSnippet, which will allow horizontal scrolling. However, since the container is fully expanded (but hidden beneath the outer container), the scroll bar only shows up once the entire snippet has been expanded:

Since the scroll bar is not in view when the CodeSnippet is collapsed, they've added an overflow indicator to show that there is more content off the screen

Let me know if this is a viable solution, or if you have any alternative solutions you would like to explore!

[guigueb]

Just to be clear...

Given <CodeSnippet wrapText={false}> in closed mode (ShowMore button showing) and data that exceeds the width and length of the visible data area.

The horizontal and vertical scroll bars are there but not in view. So the solution is to show show lighter-text to indicate there is more?

So there is lighter-text to the right and/or left to indicate users can scroll in those directions. Will the top/bottom rows be lighter-text to indicate to users they can scroll in those directions? We do loose the 'grab and drag' ability that scroll bars give us.

When I address https://github.com/carbon-design-system/carbon/issues/7579 maybe we can re-evaluated the choice of scrollbars vs lighter-text. When/if numberOfRowsOpened = numberOfRowsClosed and the ShowMore/ShowLess buttons are not there I'm not sure lighter-text will cut it.

[guigueb]

About the comment "However, since the container is fully expanded (but hidden beneath the outer container), the scroll bar only shows up once the entire snippet has been expanded:"

One of the use cases IBM Cognos has for CodeSnippet is to show validation error information. It is not uncommon for this information to be 1000+ lines long with line lengths that are also very large. As this is formatted data - wrapping it would loose the nice formatting (indentation, alignment, and such). With the scroll bars being at the end and bottom of the container holding the data they will never be usable.

That said there are other options... copy/paste, find, etc.

[guigueb]

PR #8156 is in draft mode. It has the scrollbar/overflow changes and will allow you test the scrollbars and see the colliding issue

[guigueb]

https://user-images.githubusercontent.com/5973642/112042379-d5127080-8b1d-11eb-99e0-ef6e66122d0d.mov