[CodeSnippet]: several enhancements and bugs

[guigueb]

IBM Cognos has ran into several issues with CodeSnippet.

I've tried to capture them all, so we can discuss what to do. I am not guaranteeing that I got all the issues. For reference these are also tracked in https://jsw.ibm.com/browse/MUI-1316.

This Jira is happening because of imitations/bugs in Carbon CodeSnippet.

When the contents overflow the size of a single line Carbon CodeSnippet (type="single")...

The contents will scroll horizontally and a scroll bar will show. As this is a single line no vertical scroll is needed (newlines are removed and all the lines are concatenated into one long string). Single is easy and works.

When the contents overflow the size of a multi line Carbon CodeSnippet (type="multi")...

The multi-line CodeSnippet is always expandable - ie: the showMoreText / showMoreText will always be present. An enhancement https://github.com/carbon-design-system/carbon/issues/7579 to disable the use of showMoreText / showMoreText, and allow scrolling, should be logged.

If the content is less than 15 rows (the CodeSnippet grows to show up to 14 rows)... An enhancement https://github.com/carbon-design-system/carbon/issues/7579 to set the number of rows when in closed form (the 'Show more' button is visible) should be logged.

If the contents overflows the width...

• the contents can be scrolled horizontally
• a horizontal scroll bar is not shown (bug https://github.com/carbon-design-system/carbon/issues/7574 )

If the content is exactly 15 rows (the CodeSnippet grows to show up to 15 rows)...

If the contents overflows the width...

• the contents can be scrolled horizontally
• a horizontal scroll bar is not shown (bug https://github.com/carbon-design-system/carbon/issues/7574 )

The 'Show more' button shows...

• but there really is no more to show, clicking it only toggles the 'ShowMore' / 'ShowLess' button
• the button should only exist if there are more then 15 rows (bug https://github.com/carbon-design-system/carbon/issues/7572 )

When in short form (the 'Show more' button is visible)... An enhancement https://github.com/carbon-design-system/carbon/issues/7579 to set the number of rows when in closed form (the 'Show more' button is visible) should be logged.

If the contents overflows the width...

• the contents can be scrolled horizontally
• a horizontal scroll bar is not shown (bug https://github.com/carbon-design-system/carbon/issues/7574 )

If the contents overflows the height...

• the contents can not be scrolled vertically
• the vertical scroll bar is not shown
• (I kinda understand this as there is a 'Show more' button)

When in long form (the 'Show less' button is visible)... The CodeSnippet grows to show the total number of rows available. An enhancement https://github.com/carbon-design-system/carbon/issues/7579 to set the number of rows when in expanded form (the 'Show more' button is visible) should be logged.

If the contents overflows the width...

• the contents can be scrolled horizontally
• a horizontal scroll bar is not shown (bug https://github.com/carbon-design-system/carbon/issues/7574 )

If the contents can be scrolled vertically

• well no need as the CodeSnippet is huge at this point showing all the rows

If the CodeSnippet is constrained by a parents width/height and/or the Carbon CodeSnippet is styled with a height and/or width... The CodeSnippet does not adopt to fit nicely.

• in short form, 15 lines are still displayed overflowing the container, even if only 10 can be shown within the height (bug)
• in long form, the contents do not scroll vertically (bug)

[guigueb]

I logged a bug to deal with the showMore button showing when there are exactly 15 rows. https://github.com/carbon-design-system/carbon/issues/7572

[guigueb]

I logged a bug to deal with the horizontal scrollbar not showing when type is multi and there is a long row of data https://github.com/carbon-design-system/carbon/issues/7574

[guigueb]

I have logged an enhancement to set the closed and expanded number of rows https://github.com/carbon-design-system/carbon/issues/7579

[tw15egan]

@guigueb I've converted this issue into an epic so that we can make sure we properly keep track of all the bugs/enhancements you've described. Let me know if I've missed any and I can add them to the epic:

• 7572 - Only display Show More button when there are more than 15 rows (PR #https://github.com/carbon-design-system/carbon/pull/7582)

• 7579 - Add a new prop to determine the number of rows that need to be displayed before the Show More button should be displayed, and then another prop to determine how many rows in total should be shown. This could possibly be bundled into #7582

• 7574 - Possible issues with horizontal scrolling when type={multi}

[sstrubberg]

Closing this issue as it looks like most of it has been handled and the remaining piece is being tracked in https://github.com/carbon-design-system/carbon/issues/7574