[EuiCodeBlock] Fix border/margin interaction with EuiText

border was including the margin-bottom on `pre` tags in text, which we don't want reran VRT, no regressions
elastic · Dec 12, 2024 · 50502ee · 50502ee
1 parent ae36491
commit 50502ee
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 24 deletions.
diff --git a/packages/eui/src/components/code/code_block.styles.ts b/packages/eui/src/components/code/code_block.styles.ts
@@ -28,10 +28,6 @@ export const euiCodeBlockStyles = (euiThemeContext: UseEuiTheme) => {
       display: block;
       position: relative;
       background: ${codeSyntaxVariables.backgroundColor};
-      ${highContrastModeStyles(euiThemeContext, {
-        preferred: `border: ${euiTheme.border.thin};`,
-      })}
-
       ${codeSyntaxVariables.tokensCss}
     `,
     // Font size
@@ -84,6 +80,10 @@ export const euiCodeBlockPreStyles = (euiThemeContext: UseEuiTheme) => {
       overflow: auto;
       display: block;
       ${euiScrollBarStyles(euiThemeContext)}
+      ${highContrastModeStyles(euiThemeContext, {
+        // High contrast border must be on the <pre> element to play nicely with EuiText margins
+        preferred: `border: ${euiTheme.border.thin};`,
+      })}
     `,
     padding: {
       ...generatePaddingCss(euiThemeContext, (paddingSize: string) => {

diff --git a/...ages/eui/src/components/markdown_editor/__snapshots__/markdown_format.styles.test.ts.snap b/...ages/eui/src/components/markdown_editor/__snapshots__/markdown_format.styles.test.ts.snap
@@ -337,10 +337,6 @@ exports[`euiMarkdownFormat text sizes m 1`] = `
 "
     .euiMarkdownFormat__codeblockWrapper {
       margin-block-end: 1.1429rem;
-
-      .euiCodeBlock__pre {
-        margin-block-end: 0;
-      }
     }
 
     .euiMarkdownFormat__table {
@@ -359,10 +355,6 @@ exports[`euiMarkdownFormat text sizes relative 1`] = `
 "
     .euiMarkdownFormat__codeblockWrapper {
       margin-block-end: 1em;
-
-      .euiCodeBlock__pre {
-        margin-block-end: 0;
-      }
     }
 
     .euiMarkdownFormat__table {
@@ -381,10 +373,6 @@ exports[`euiMarkdownFormat text sizes s 1`] = `
 "
     .euiMarkdownFormat__codeblockWrapper {
       margin-block-end: 1.0000rem;
-
-      .euiCodeBlock__pre {
-        margin-block-end: 0;
-      }
     }
 
     .euiMarkdownFormat__table {
@@ -403,10 +391,6 @@ exports[`euiMarkdownFormat text sizes xs 1`] = `
 "
     .euiMarkdownFormat__codeblockWrapper {
       margin-block-end: 0.8571rem;
-
-      .euiCodeBlock__pre {
-        margin-block-end: 0;
-      }
     }
 
     .euiMarkdownFormat__table {

diff --git a/packages/eui/src/components/markdown_editor/markdown_format.styles.ts b/packages/eui/src/components/markdown_editor/markdown_format.styles.ts
@@ -32,10 +32,6 @@ const euiScaleMarkdownFormatText = (
   return `
     .euiMarkdownFormat__codeblockWrapper {
       ${logicalCSS('margin-bottom', fontSize)}
-
-      .euiCodeBlock__pre {
-        ${logicalCSS('margin-bottom', 0)}
-      }
     }
 
     .euiMarkdownFormat__table {