[EuiText] Add new blockquotes styles (#6514)

* [EuiText] Add new `blockquotes` styles * Added CL * Removed unnecessary styles * Updated CL number * Removing unnecessary styles
elastic · Jan 10, 2023 · 85bfbd2 · 85bfbd2
1 parent 1e957ae
commit 85bfbd2
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 82 deletions.
diff --git a/src/components/markdown_editor/__snapshots__/markdown_format.styles.test.ts.snap b/src/components/markdown_editor/__snapshots__/markdown_format.styles.test.ts.snap
@@ -2,15 +2,6 @@
 
 exports[`euiMarkdownFormat text sizes m 1`] = `
 "
-    .euiMarkdownFormat__blockquote {
-      
-    padding-block: 0;
-    padding-inline: 1.1429rem;
-    
-      border-inline-start-width: 0.285725rem;
-      margin-block-end: 1.1429rem;
-    }
-
     .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { // Extra specificity necessary to override default checkbox CSS
       font-size: 1.1429rem;
       padding-inline-start: 1.7143rem;
@@ -39,15 +30,6 @@ exports[`euiMarkdownFormat text sizes m 1`] = `
 
 exports[`euiMarkdownFormat text sizes relative 1`] = `
 "
-    .euiMarkdownFormat__blockquote {
-      
-    padding-block: 0;
-    padding-inline: 1em;
-    
-      border-inline-start-width: 0.25em;
-      margin-block-end: 1em;
-    }
-
     .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { // Extra specificity necessary to override default checkbox CSS
       font-size: 1em;
       padding-inline-start: 1.5000em;
@@ -76,15 +58,6 @@ exports[`euiMarkdownFormat text sizes relative 1`] = `
 
 exports[`euiMarkdownFormat text sizes s 1`] = `
 "
-    .euiMarkdownFormat__blockquote {
-      
-    padding-block: 0;
-    padding-inline: 1.0000rem;
-    
-      border-inline-start-width: 0.25rem;
-      margin-block-end: 1.0000rem;
-    }
-
     .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { // Extra specificity necessary to override default checkbox CSS
       font-size: 1.0000rem;
       padding-inline-start: 1.4286rem;
@@ -113,15 +86,6 @@ exports[`euiMarkdownFormat text sizes s 1`] = `
 
 exports[`euiMarkdownFormat text sizes xs 1`] = `
 "
-    .euiMarkdownFormat__blockquote {
-      
-    padding-block: 0;
-    padding-inline: 0.8571rem;
-    
-      border-inline-start-width: 0.214275rem;
-      margin-block-end: 0.8571rem;
-    }
-
     .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { // Extra specificity necessary to override default checkbox CSS
       font-size: 0.8571rem;
       padding-inline-start: 1.1429rem;

diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss
@@ -56,10 +56,6 @@
     }
   }
 
-  .euiMarkdownFormat__blockquote {
-    border-left-style: solid;
-  }
-
   .euiCheckbox {
     // stylelint-disable-next-line declaration-no-important
     margin-bottom: 0 !important;

diff --git a/src/components/markdown_editor/markdown_format.styles.ts b/src/components/markdown_editor/markdown_format.styles.ts
@@ -10,7 +10,6 @@ import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
 import {
   logicalCSS,
-  logicalShorthandCSS,
   euiFontSize,
   _FontScaleOptions,
   mathWithUnits,
@@ -29,17 +28,10 @@ const euiScaleMarkdownFormatText = (
   const lineHeightSize = measurement === 'em' ? `${lineHeight}em` : lineHeight;
 
   // Custom scales
-  const blockQuoteBorderWidth = mathWithUnits(fontSize, (x) => x / 4);
   const tablePaddingVertical = mathWithUnits(fontSize, (x) => x / 4);
   const tablePaddingHorizontal = mathWithUnits(fontSize, (x) => x / 2);
 
   return `
-    .euiMarkdownFormat__blockquote {
-      ${logicalShorthandCSS('padding', `0 ${fontSize}`)}
-      ${logicalCSS('border-left-width', blockQuoteBorderWidth)}
-      ${logicalCSS('margin-bottom', fontSize)}
-    }
-
     .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { // Extra specificity necessary to override default checkbox CSS
       font-size: ${fontSize};
       ${logicalCSS('padding-left', lineHeightSize)}

diff --git a/src/components/text/__snapshots__/text.styles.test.ts.snap b/src/components/text/__snapshots__/text.styles.test.ts.snap
@@ -95,7 +95,12 @@ exports[`euiTextStyles sizes m 1`] = `
   
     blockquote {
       font-size: 1.1429rem;
-      padding: 1.7143rem;
+      
+    padding-block: 0;
+    padding-inline: 1.1429rem;
+    
+      border-inline-start-width: 0.285725rem;
+      margin-block-end: 1.1429rem;
     }
 
     dd + dt {
@@ -238,7 +243,12 @@ exports[`euiTextStyles sizes relative 1`] = `
   
     blockquote {
       font-size: 1em;
-      padding: 1.5000em;
+      
+    padding-block: 0;
+    padding-inline: 1em;
+    
+      border-inline-start-width: 0.25em;
+      margin-block-end: 1em;
     }
 
     dd + dt {
@@ -366,7 +376,12 @@ exports[`euiTextStyles sizes s 1`] = `
   
     blockquote {
       font-size: 1.0000rem;
-      padding: 1.4286rem;
+      
+    padding-block: 0;
+    padding-inline: 1.0000rem;
+    
+      border-inline-start-width: 0.25rem;
+      margin-block-end: 1.0000rem;
     }
 
     dd + dt {
@@ -494,7 +509,12 @@ exports[`euiTextStyles sizes xs 1`] = `
   
     blockquote {
       font-size: 0.8571rem;
-      padding: 1.1429rem;
+      
+    padding-block: 0;
+    padding-inline: 0.8571rem;
+    
+      border-inline-start-width: 0.214275rem;
+      margin-block-end: 0.8571rem;
     }
 
     dd + dt {

diff --git a/src/components/text/text.styles.ts b/src/components/text/text.styles.ts
@@ -10,6 +10,7 @@ import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
 import {
   logicalCSS,
+  logicalShorthandCSS,
   logicalTextAlignCSS,
   euiFontSize,
   euiBackgroundColor,
@@ -61,6 +62,7 @@ const euiScaleText = (
   const marginSize = euiTheme.size[customScale];
   const headingMarginTop = mathWithUnits(marginSize, (x) => x * 2);
   const headingMarginBottom = marginSize;
+  const blockQuoteBorderWidth = mathWithUnits(fontSize, (x) => x / 4);
 
   return `
     font-size: ${fontSize};
@@ -156,7 +158,9 @@ const euiScaleText = (
   
     blockquote {
       font-size: ${fontSize};
-      padding: ${lineHeightSize};
+      ${logicalShorthandCSS('padding', `0 ${fontSize}`)}
+      ${logicalCSS('border-left-width', blockQuoteBorderWidth)}
+      ${logicalCSS('margin-bottom', fontSize)}
     }
 
     dd + dt {
@@ -244,36 +248,17 @@ export const euiTextStyles = (euiThemeContext: UseEuiTheme) => {
         list-style: decimal;
       }
 
+      blockquote {
+        border-inline-start-color: ${euiTheme.border.color};
+        border-inline-start-style: solid;
+      }
+
+      // the blockquote color in euiMarkdownFormat works differently
+      // it inherits the color from the parent element
+      // for this reason, we just apply the subdued text color for
+      // blockquotes that are not in euiMarkdownFormat
       blockquote:not(.euiMarkdownFormat__blockquote) {
-        position: relative;
-        ${logicalTextAlignCSS('center')}
-        ${logicalCSS('margin-horizontal', 'auto')}
-        font-family: ${euiTheme.font.familySerif};
-        font-style: italic;
-        letter-spacing: normal;
-
-        p:last-child {
-          ${logicalCSS('margin-bottom', '0')}
-        }
-
-        &:before,
-        &:after {
-          position: absolute;
-          content: '';
-          ${logicalCSS('height', euiTheme.border.width.thick)}
-          ${logicalCSS('width', '50%')}
-          ${logicalCSS('left', '25%')}
-          ${logicalCSS('right', '25%')}
-          background: ${euiTheme.colors.darkShade};
-        }
-
-        &:before {
-          ${logicalCSS('top', '0')}
-        }
-
-        &:after {
-          ${logicalCSS('bottom', '0')}
-        }
+        color: ${euiTheme.colors.subduedText};
       }
 
       h1 {

diff --git a/upcoming_changelogs/6514.md b/upcoming_changelogs/6514.md
@@ -0,0 +1 @@
+- Updated `EuiText.blockquote` styles to match the `EuiMarkdownFormat.blockquote` styles
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- Updated `EuiText.blockquote` styles to match the `EuiMarkdownFormat.blockquote` styles