Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
1 of 2 tasks
guigueb opened this issue Jan 14, 2021 · 6 comments
Open
1 of 2 tasks

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

guigueb opened this issue Jan 14, 2021 · 6 comments
Labels
adopter: product Work-stream that directly helps a Product team. component: code-snippet role: dev 🤖 severity: 3 https://ibm.biz/carbon-severity type: bug 🐛

Comments

@guigueb
Copy link
Contributor

guigueb commented Jan 14, 2021

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

What package(s) are you using?

  • carbon-components
  • 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
Copy link
Contributor Author

guigueb commented Jan 14, 2021

This bug is described in #7551

@guigueb guigueb mentioned this issue Jan 15, 2021
Closed
@tw15egan
Copy link
Collaborator

@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:

Screen Shot 2021-01-25 at 9 58 39 AM

Screen Shot 2021-01-25 at 9 59 46 AM

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

Screen Shot 2021-01-25 at 10 00 02 AM

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

@guigueb
Copy link
Contributor Author

guigueb commented Jan 25, 2021 •
edited
Loading

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 #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
Copy link
Contributor Author

guigueb commented Jan 25, 2021 •
edited
Loading

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.

This was referenced Mar 6, 2021
Closed
Closed
@guigueb guigueb mentioned this issue Mar 13, 2021
Merged
guigueb pushed a commit to guigueb/carbon that referenced this issue Mar 22, 2021
feat(CodeSnippet): revert to only adding overflow-y
80b123f 
changing to overflow - from -x/-y - on the snippet-container
caused issues with scrollbars colliding with the buttons.
for now only add overflow-y and address overflow clean up and
scrollbars/button collisions in carbon-design-system#7574
@guigueb guigueb mentioned this issue Mar 22, 2021
Closed
@guigueb
Copy link
Contributor Author

guigueb commented Mar 22, 2021

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
Copy link
Contributor Author

guigueb commented Mar 22, 2021

Screen.Recording.2021-03-22.at.11.54.56.AM.mov

kodiakhq bot added a commit that referenced this issue Mar 23, 2021
@guigueb @tw15egan @kodiakhq
feat(CodeSnippet): set closed and expanded max number of rows (#8085)
cfcda43 
* feat(codesnippet): set closed and expanded max number of rows

defaulted the height to show everything (100%)
added two new props maxClosedNumberOfRows and maxExpandedNumberOfRows
added logic using the new props to determine when to show moreLessBtn
added maxHeight style based on new props

* feat(CodeSnippet): apply auto scroll to snippet-mult

allow snippet-mult + snippet-container to auto scroll, both x and y
remove scroll/overflow from nested snippet-expand, pre, and code conditions
this will show the horizontal scroll when the snippet is closed or expanded
it is a behavour change/bug fix, it will address 7574

* feat(CodeSnippet): add background to snippet buttons

add background to buttons to stop scrollbars from stomping on them

* feat(CodeSnippet): revert to only adding overflow-y

changing to overflow - from -x/-y - on the snippet-container
caused issues with scrollbars colliding with the buttons.
for now only add overflow-y and address overflow clean up and
scrollbars/button collisions in #7574

* feat(CodeSnippet): move overflow-y placement

apply it for both closed and expanded modes

* feat(CodeSnippet): changed closed to collapsed

changed closed to collapsed

* feat(CodeSnippet): update snapshot

update snapshot

* feat(CodeSnippet): rename closed to collapsed in the story

rename closed to collapsed in the story

Co-authored-by: Bill Guigue <Bill.Guigue@ca.ibm.com>
Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
@johnbister johnbister mentioned this issue Apr 23, 2021
Closed
@sstrubberg sstrubberg moved this to 🪆 Needs Refined in Design System Dec 6, 2022
@sstrubberg sstrubberg added adopter: product Work-stream that directly helps a Product team. severity: 3 https://ibm.biz/carbon-severity and removed status: waiting for maintainer response 💬 labels Dec 6, 2022
@sstrubberg sstrubberg moved this from 🪆 Needs Refined to ⏱ Backlog in Design System Dec 7, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
adopter: product Work-stream that directly helps a Product team. component: code-snippet role: dev 🤖 severity: 3 https://ibm.biz/carbon-severity type: bug 🐛
Projects
Design System
Status: ⏱ Backlog
Milestone
No milestone
Development

No branches or pull requests
3 participants
@guigueb @tw15egan @sstrubberg