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 index 52e9bc1660b..454d2c5796d 100644 --- 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 index 6d817d9495f..dd9b1cf4bde 100644 --- 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 index c8687344af9..0def45152a3 100644 --- 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 index 23acf9107b3..d68a921478c 100644 --- 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 index 6edb0f54863..a1dcf8bf97c 100644 --- 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 new file mode 100644 index 00000000000..d0dd6848c4e --- /dev/null +++ b/upcoming_changelogs/6514.md @@ -0,0 +1 @@ +- Updated `EuiText.blockquote` styles to match the `EuiMarkdownFormat.blockquote` styles \ No newline at end of file