Fixed EuiCodeBlock whitespace pre bug#3853
Conversation
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3853/ |
|
After further exploration, the best way to accomplish this PR would be to create a horizontal toolbar.
Should we start looking at #3500 as a possible solution? |
|
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. |
|
As an aside. I will need a "language switcher" for |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3853/ |
|
After changing the toolbar to horizontal. It actually looked good when we have
But it takes to much space for cases like the following one:
I think the best solution is the one we use a So the EuiCodeBlock it will look the same when
But when
And in case we have an
Not the best design but I think is better than adding a horizontal toolbar that won't benefit most of the scenarios. |
|
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
|
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3853/ |
|
I just added a default padding-right for
|
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3853/ |
src/components/code/_code_block.scss
Outdated
| // Storing for re-use the sizing of controls plus extra padding | ||
| $controlsPadding: $euiSizeL + $euiSizeXS; | ||
|
|
||
| .euiCodeBlock__pre--whiteSpacePre { | ||
| white-space: pre; | ||
| margin-right: $controlsPadding; | ||
| } | ||
|
|
||
| .euiCodeBlock__pre--whiteSpacePreWrap { | ||
| white-space: pre-wrap; | ||
| padding-right: $controlsPadding; | ||
| } |
There was a problem hiding this comment.
This will actually cause unnecessary padding when the controls don't exist. You'll only want to add this extra spacing when .euiCodeBlock--hasControls
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3853/ |
cchaos
left a comment
There was a problem hiding this comment.
👍 Cool, all the variations LGTM!
* Fixed code block whitespace pre bug * Added CL * Adding default padding and margin for controls * Controls padding only when hasControls
Summary
Closes #3815
Setting
whiteSpace="pre"was making the content overlap with the control buttons.The solution was to change the
euiCodeBlock__pre--whiteSpacePrepadding-rightto amargin-rightto 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
[ ] 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