feat(CodeSnippet): set closed and expanded max number of rows

[guigueb]

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

Closes #

#7579

Testing / Reviewing

See 7579 for the tests to verify this PR.

Tested:

MacOS - Chrome, FireFox, and Safari
Win10 - Chrome, FireFox, and Edge

The margin fix described in 7582 was not done based on comments in 7826.

Any issues with (scrollbar, WCAG 1.4.10 compliance, minHeight, and overFlow indicators) have been discussed in 7826 will be addressed in these future PRs.
8056 CodeSnippet: there should be a way to set the min number of rows when in closed and expanded mode
7574 CodeSnippet: missing horizontal scrollbar when type is multi and there is a long row of data
8057 CodeSnippet: the scrollable content needs to be WCAG 1.4.10 compliant
8059 CodeSnippet: Remove or improve the overflow indicators

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 1735893

https://deploy-preview-8085--carbon-elements.netlify.app

[netlify]

Deploy preview for carbon-components-react ready!

Built without sensitive environment variables with commit 1735893

https://deploy-preview-8085--carbon-components-react.netlify.app

[guigueb]

Where can I see the conformance list for the platforms and browsers Carbon supports?
I likely missed it reading the Carbon Design System pages.

The reason being... I viewed CodeSnippet on my Samsung Tablet and the number of lines displayed does not match the max values given.
Although, if this is a problem its beyond this PR as it wasn't displaying 15 before this PR.

[emyarod]

Carbon targets evergreen browsers, but that would include the mobile variants so I think the issue with the incorrect number of lines being shown on mobile browsers should be addressed together

[guigueb]

@emyarod
I just retested and I am not able to reproduce the issue.
I believe the pixel count per row was off, and when I adjusted rowHeightInPixels from 18 to 16 it addressed the issue.

You mention evergreen browsers... can you point me to the conformance text on the Carbon Design System pages that mentions this?

The list of evergreen browsers (I learnt something) is huge and my ability to test them is limited (I can do mac, win, Samsung Tab S2, and a very old chromebook) so hard to tell if it works everywhere.

[emyarod]

@guigueb here is the Carbon browserslist

[emyarod]

also requesting ux/visual review for this feature

[tw15egan]

Since this PR introduces the ability to set the max number of rows when expanded to less than the total number of lines, I think we'll also need to add a selector that allows vertical scrolling, something like

  .#{$prefix}--snippet--multi.#{$prefix}--snippet--expand
    .#{$prefix}--snippet-container {
    overflow-y: auto;
  }

[guigueb]

I completely agree that overflow(scrollbars) should be taken into account for this.
That was attempted in #7826 but scrollbars are not directly related to adding the max props (although related/exacerbated, scrolling is an existing issue with large 100% height CodeSnippets - which is what I'm working on fixing) and introduces issues with WCAG 1.4.10 compliance.
As such they should be dealt with in #7574 and #8057.

[tw15egan]

@guigueb in the current implementation, when the content is expanded, it shows every line of code. If this PR introduces the ability to show less than the max number, you need to be able to scroll to the bottom to view all the code, and should not be handled in a separate PR.

Example: In the preview, set the max expanded to 16. When you hit expand, it only expands 1 line, and the rest of the code cannot be scrolled to

[guigueb]

I aware of the issue and agree, I tried to address this with my other PR - and was told to stick to the props.
I'll add changes for overflow back into this one, keep in mind it will be non-WCAG 1.4.10 compliant.

With current CodeSnippet showing 100% if there are 20000 lines you see only what you can... and the rest of the code cannot be scrolled to (same issue different number of max rows).
I suppose you can work around this by putting it in a scrollable container but that only causes other issues.
The vertical scroll issue isn't new but it is easer to see, with the limit.

[tw15egan]

@guigueb it seems like we just need to add the line I suggested to fix that issue. The current implementation will push all other content down, no matter the number of lines. I'm not seeing any "unreachable" code

[tw15egan]

Thanks for working on this! LGTM 👍 ✅

[tay1orjones]

Just one small piece of feedback on prop naming. Looks great otherwise!

[aagonzales]

Looks like it's working and looking correct to me!