EUI CSS visual regression guide

[cjcenizal]

The removal of our CSS reset in #15486 can introduce visual regressions into the UI. Here's a guide to some of the most common regressions and corresponding solutions. See #15436 for examples of how we fixed some actual regressions.

Text and heading regressions

Symptoms

• Line-height is too tight
• Headings (<h1>, <h2>, etc) look the same as regular text (<p>)

Examples

Solutions

To make headings bold and larger, wrap the text and heading elements in a <EuiText> component or in an element with the euiText class.

{/* react */}
<EuiText>
  <h1>Title</h1>

  <p>Context text</p>
</EuiText>

<!-- html -->
<div class="euiText">
  <h1>Title</h1>

  <p>Context text</p>
</div>

This will also fix the line-height but if, for whatever reason, this solution doesn't fit your use case, you can apply line-height: 1.5 to the text to fix the problem of the line-height being too tight.

NOTE: Sometimes form labels can also get messed up by this. Here's show you would solve this problem:

{/* react */}
<KuiLabel>Label</KuiLabel>

<!-- html -->
<label class="kuiLabel">Label</label>

Vertical spacing/margin regressions

Symptoms

• Space between elements is suddenly too small
• Typically caused by a margin disappearing

Examples

Solutions

Aside from manually setting the margin in the CSS for a particular element, you can use the EuiSpacer component to insert vertical space between elements. See #15436 for examples of how we fixed some actual regressions.

{/* react */}
{/* This will create a small space */}
<EuiSpacer size="s" />

{/* This will create a medium space */}
<EuiSpacer size="m" />

<!-- html -->
<!-- This will create a small space -->
<div class="euiSpacer euiSpacer--s"></div>

<!-- This will create a medium space -->
<div class="euiSpacer euiSpacer--m"></div>

Code block regressions

Symptoms

Code blocks now look like regular text.

Examples

Solutions

Use the EuiCodeBlock component to restore basic code styling.

{/* react */}
<EuiCodeBlock>
  Code goes here
</EuiCodeBlock>

<!-- html -->
<div class="euiCodeBlock euiCodeBlock--light euiCodeBlock--paddingSmall">
  <pre class="euiCodeBlock__pre">
    <code class="euiCodeBlock__code">
      Code goes here
    </code>
  </pre>
</div>

[timroes]

You suggest here to nest the <pre> inside a <code> using pure HTML for code blocks. The documentation suggests the other way around. The paddings seem to be more correct when using <code><pre> instead of <pre><code>. The docs and this guide should be in sync which way to use.

Also the docs state, that you can append a language class to the euiCodeBlock__code. Does this work at all in the HTML only version, cause I can't get it working?

Also, is there a list of available supported language classes, I can use?

[cjcenizal]

@timroes Good catch! That was a typo on my part. I updated the example to match the docs (<pre><code>). Appending a language class only works within a React component, though internally the component just imports highlight.js and calls hljs.highlightBlock(codeElement), which you could do if you're not using React. All of highlight.js's languages should work, though I think some may need to be installed.