Code Snippet enhancements

Detailed description

Describe in detail the issue you’re having. Is this a feature request (new component, new icon), a bug, or a general issue?

Feature request.

Is this issue related to a specific component?

Code Snippet.

What did you expect to happen? What happened instead? What would you like to see changed?

Feedback from Adam Lankford & Co.

• Would be nice to fix the scroll bar on the terminal snippet (horizontal scroll, can it be vertical)?
• Some teams are interested in using the “light” code snippet, but have the sizing be similar to the Terminal snippet. Can we remove the max-height on the light code block?

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Containers / Kubernetes.

[tay-aitken]

Final Designs

The final designs for the code snippet revamp include:

• Terminal Snippet (single line)
• Code Snippet (multi-line)
• Inline code

All of the following designs should use Plex Mono

Terminal Snippet

Functions the same as the previous terminal snippet (can only scroll horizontally), just getting a visual update.

height:56px; width: 600px border: solid 1px #DFE3E6 (ui-03) background-color: #fff (ui-01)

Code Snippet

• Once the user clicks the ‘show more’ ghost button the hight of the code snippet expands to show all content contained within the code snippet
• Can only scroll horizontally, vertical scroll is not needed since component expands to full content size
• Added a ‘show more’ and ‘show less’ button
• visual updates, color and sizing

height:56px; width: 250px border: solid 1px #DFE3E6 (ui-03) background-color: #fff (ui-01)

Inline Code (new)

• the text size for the snippet will vary based off the body copy size it is in. If this is not possible let me know and we can revaluate.

height: 22px; width: varies based on content background-color: F4F7FB; corner-radius: 4px; padding: 0 4px;

Important Notes

• Line numbers and syntax highlighting
  • will be in the documentation and will not be included in the actual code of the component
  • will point to open source versions for numbers and highlighting
  • CodePen will be used as an example to show how the numbers and highlighting will be applied; will be linked in the documentation
  • line numbers will look like this

• In a future, for next breaking change release, we want to change the names of the components as follows:
  • terminal snippet > single line snippet
  • code snippet > multi-line snippet

[joshblack]

Could we do a percentage for the text size since there are different text sizes used across the platform?

Percentage is definitely possible, and it would be relative to the parent element’s font size 👍

What are the best practices for a code snippet?

• is it bad to break a line? (worried about having both horizontal and vertical scrolling)

Honestly the only two requirements I look for are:

1. Easy to copy
2. Has syntax highlighting for the language I’m viewing

For the line break stuff, it’s definitely not bad to break a line. Typically editors support this as an option in their editor. If someone has the line wrap option on, then some character on screen represents that the line has wrapped.

For example the carriage return character (might have to open it up to view the character):

Which of the options above do you prefer?

Option 4 for inline 👍 Really only because the blocks don’t touch when the line above or below has a code snippet as well, and visually it seems like the smaller font is more inline than the larger ones.