CodeSnippet: Remove or improve the overflow indicators

[guigueb]

Summary

The CodeSnippet component has grey shading zones on the left and right zones of scrollable content.
There needs to be a better way to indicate scrollable (see #8057 and #7574).
And it needs to be applicable for both horizontal and vertical scrollable content.

Justification

The shading zones are of little (and sometimes no) use.
They are very subtle and easily overlooked.
If there is no content in the shading zones they have no effect at all (there is nothing to shade).
On all platforms besides apple scrollbars are always visible (indicating scrollable content) and the shading zones are not needed.

Apple users are aware/used to hidden scrollbars and have the option of turning them on (https://www.matuzo.at/blog/css-pro-tip-for-mac-users-always-show-scroll-bars-in-macos/)

The overflow indicators should be removed, and replaced with a more stable/noticeable option.
One solution would be to always force CodeSnippet to show scrollbars.
This would make it consistent across platforms (apple and others) and clearly show what scrolling is available.

Desired UX and success metrics

Testcase:
Given a CodeSnippet with data that overflows its container; it would be nice to be able to identify that scrolling to view more data is possible.

"Must have" functionality

No matter what the data is there needs to be some way to know that scrolling is an option.

Specific timeline issues / requests

nope

Available extra resources

What resources do you have to assist this effort?

Maybe

[sstrubberg]

Hey @guigueb, thanks for opening the request. Here are some notes from our backlog cleaning meeting today.

• If a consumer enables show scroll bars within their OS preferences, this is mostly taken care of.

• The shading zones you are referring to are more of a secondary indicator of scrollable content.

• Adjacently, @alisonjoseph made a fix to address the overflow which improves the usability of the scrollbars, which supplant the “secondary indicator” fade.

• Lastly, if you or a designer had a more concrete spec on how we could improve the overflow indicators, we would love to consider it.