Fixed EuiCodeBlock whitespace pre bug

[elizabetdev]

Summary

Closes #3815

Setting whiteSpace="pre" was making the content overlap with the control buttons.

The solution was to change the euiCodeBlock__pre--whiteSpacePre padding-right to a margin-right to make the horizontal scrollbar appear until the control buttons.

I also changed the whiteSpace="pre" example. I think it makes sense to show the code in just one line.

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in IE11 and Firefox
• [ ] Props have proper autodocs
• [ ] Added documentation
• [ ] Checked Code Sandbox works for the any docs examples
• [ ] Added or updated jest tests
• [ ] Checked for breaking changes and labeled appropriately
• [ ] Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3853/

[elizabetdev]

After further exploration, the best way to accomplish this PR would be to create a horizontal toolbar.

• This horizontal toolbar wouldn't interfere with the code area.
• We would gain more space for the code.

Should we start looking at #3500 as a possible solution?

[cchaos]

If creating a universal toolbar is something that you'd like to take on, then I say go for it and tackle it similarly to the original spec you did for the markdown editor.

Since that would eventually make this component have a top horizontal toolbar similar to data grid, you could temporarily just shift these action icons in the code block to be horizontal now (above the code) and so fixing the current bug while also moving closer towards the final toolbar.

[snide]

As an aside. I will need a "language switcher" for EuiCodeBlock soon for docs that contain similar snippets for multiple OSes. I'll touch base to see if it fits in what we're thinking.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3853/

[elizabetdev]

After changing the toolbar to horizontal. It actually looked good when we have whiteSpace="pre" and overflows x and y.

But it takes to much space for cases like the following one:

I think the best solution is the one we use a margin-right instead of padding-right in the pre element when whiteSpace="pre".

So the EuiCodeBlock it will look the same when whiteSpace="pre-wrap":

But when whiteSpace="pre" it will look like this:

And in case we have an overflowHeight it will look like this.

Not the best design but I think is better than adding a horizontal toolbar that won't benefit most of the scenarios.

[cchaos]

I'm good with the weird scrollbar position in that very specific instance. I don't think it would happen often and is honestly the easiest fix for now.

I tested some of the different padding settings though and it looks like we still have the issue if the paddingSize = none.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3853/

[elizabetdev]

I just added a default padding-right for .euiCodeBlock__pre--whiteSpacePreWrap and a default margin-right to euiCodeBlock__pre--whiteSpacePre. For both scenarios when paddingSize = none the content will never ovelarp with the control buttons.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3853/

[cchaos]

This will actually cause unnecessary padding when the controls don't exist. You'll only want to add this extra spacing when .euiCodeBlock--hasControls

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3853/

[cchaos]

👍 Cool, all the variations LGTM!