From 3f5cbcfe1eb572a551743ae2246299c57a8ea846 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 6 May 2024 13:23:26 -0700 Subject: [PATCH 01/17] Convert tooltips plugin to use inline Emotion --- src/components/markdown_editor/_index.scss | 1 - src/components/markdown_editor/plugins/markdown_tooltip.scss | 4 ---- .../markdown_editor/plugins/markdown_tooltip/renderer.tsx | 3 ++- 3 files changed, 2 insertions(+), 6 deletions(-) delete mode 100644 src/components/markdown_editor/plugins/markdown_tooltip.scss diff --git a/src/components/markdown_editor/_index.scss b/src/components/markdown_editor/_index.scss index c0d8b9e6538..beedb3d75af 100644 --- a/src/components/markdown_editor/_index.scss +++ b/src/components/markdown_editor/_index.scss @@ -6,4 +6,3 @@ @import 'markdown_editor_preview'; @import 'markdown_editor_text_area'; @import 'markdown_editor_toolbar'; -@import 'plugins/markdown_tooltip'; diff --git a/src/components/markdown_editor/plugins/markdown_tooltip.scss b/src/components/markdown_editor/plugins/markdown_tooltip.scss deleted file mode 100644 index 2fe1a191c83..00000000000 --- a/src/components/markdown_editor/plugins/markdown_tooltip.scss +++ /dev/null @@ -1,4 +0,0 @@ -// This is to offset the tooltip icon, which isn't perfectly centered -.euiMarkdownTooltip__icon { - transform: translateY(-1px); -} diff --git a/src/components/markdown_editor/plugins/markdown_tooltip/renderer.tsx b/src/components/markdown_editor/plugins/markdown_tooltip/renderer.tsx index ef952bb2f69..69f1672f973 100644 --- a/src/components/markdown_editor/plugins/markdown_tooltip/renderer.tsx +++ b/src/components/markdown_editor/plugins/markdown_tooltip/renderer.tsx @@ -27,7 +27,8 @@ export const tooltipMarkdownRenderer: FunctionComponent< {children} From 922eb007a8644bdae24f143a1b952dfe07336d61 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 6 May 2024 13:36:53 -0700 Subject: [PATCH 02/17] [EuiMarkdownFormat] Migrate all checkbox styles - remove unnecessary `margin-bottom !important` - doesn't appear to be doing anything whatsoever --- .../markdown_format.styles.test.ts.snap | 32 +++++++++++++-- .../markdown_editor/_markdown_format.scss | 11 ------ .../markdown_editor/markdown_format.styles.ts | 39 +++++++++++-------- 3 files changed, 50 insertions(+), 32 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 index 454d2c5796d..d8b9b05e82e 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 @@ -12,6 +12,12 @@ exports[`euiMarkdownFormat text sizes m 1`] = ` margin-block-start: 1.1429rem; } + /* Better align checkboxes with all text sizes */ + .euiCheckbox .euiCheckbox__input + .euiCheckbox__square { + inset-block-start: 50%; + transform: translateY(-50%); + } + .euiMarkdownFormat__codeblockWrapper { margin-block-end: 1.1429rem; } @@ -25,7 +31,7 @@ exports[`euiMarkdownFormat text sizes m 1`] = ` padding-block: 0.285725rem; padding-inline: 0.57145rem; } - ;;label:m;" + ;label:m;" `; exports[`euiMarkdownFormat text sizes relative 1`] = ` @@ -40,6 +46,12 @@ exports[`euiMarkdownFormat text sizes relative 1`] = ` margin-block-start: 1em; } + /* Better align checkboxes with all text sizes */ + .euiCheckbox .euiCheckbox__input + .euiCheckbox__square { + inset-block-start: 50%; + transform: translateY(-50%); + } + .euiMarkdownFormat__codeblockWrapper { margin-block-end: 1em; } @@ -53,7 +65,7 @@ exports[`euiMarkdownFormat text sizes relative 1`] = ` padding-block: 0.25em; padding-inline: 0.5em; } - ;;label:relative;" + ;label:relative;" `; exports[`euiMarkdownFormat text sizes s 1`] = ` @@ -68,6 +80,12 @@ exports[`euiMarkdownFormat text sizes s 1`] = ` margin-block-start: 1.0000rem; } + /* Better align checkboxes with all text sizes */ + .euiCheckbox .euiCheckbox__input + .euiCheckbox__square { + inset-block-start: 50%; + transform: translateY(-50%); + } + .euiMarkdownFormat__codeblockWrapper { margin-block-end: 1.0000rem; } @@ -81,7 +99,7 @@ exports[`euiMarkdownFormat text sizes s 1`] = ` padding-block: 0.25rem; padding-inline: 0.5rem; } - ;;label:s;" + ;label:s;" `; exports[`euiMarkdownFormat text sizes xs 1`] = ` @@ -96,6 +114,12 @@ exports[`euiMarkdownFormat text sizes xs 1`] = ` margin-block-start: 0.8571rem; } + /* Better align checkboxes with all text sizes */ + .euiCheckbox .euiCheckbox__input + .euiCheckbox__square { + inset-block-start: 50%; + transform: translateY(-50%); + } + .euiMarkdownFormat__codeblockWrapper { margin-block-end: 0.8571rem; } @@ -109,5 +133,5 @@ exports[`euiMarkdownFormat text sizes xs 1`] = ` padding-block: 0.214275rem; padding-inline: 0.42855rem; } - ;;label:xs;" + ;label:xs;" `; diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss index dd9b1cf4bde..feb42cd9ac0 100644 --- a/src/components/markdown_editor/_markdown_format.scss +++ b/src/components/markdown_editor/_markdown_format.scss @@ -56,17 +56,6 @@ } } - .euiCheckbox { - // stylelint-disable-next-line declaration-no-important - margin-bottom: 0 !important; - } - - // We're adjusting the position of the checkboxes so that when the text size is `relative` the checkboxes get better positioned - .euiCheckbox .euiCheckbox__input + .euiCheckbox__square { - top: 50%; - transform: translateY(-50%); - } - // Tables .euiMarkdownFormat__table { display: block; diff --git a/src/components/markdown_editor/markdown_format.styles.ts b/src/components/markdown_editor/markdown_format.styles.ts index c57fb005b3a..e6a68230a28 100644 --- a/src/components/markdown_editor/markdown_format.styles.ts +++ b/src/components/markdown_editor/markdown_format.styles.ts @@ -42,6 +42,12 @@ const euiScaleMarkdownFormatText = ( ${logicalCSS('margin-top', fontSize)} } + /* Better align checkboxes with all text sizes */ + .euiCheckbox .euiCheckbox__input + .euiCheckbox__square { + ${logicalCSS('top', '50%')} + transform: translateY(-50%); + } + .euiMarkdownFormat__codeblockWrapper { ${logicalCSS('margin-bottom', fontSize)} } @@ -62,27 +68,26 @@ const euiScaleMarkdownFormatText = ( * Styles */ export const euiMarkdownFormatStyles = (euiTheme: UseEuiTheme) => ({ - // TODO: Remaining _markdown_format.scss styles euiMarkdownFormat: css``, // Text sizes - m: css` - ${euiScaleMarkdownFormatText(euiTheme, { + m: css( + euiScaleMarkdownFormatText(euiTheme, { customScale: 'm', - })} - `, - s: css` - ${euiScaleMarkdownFormatText(euiTheme, { + }) + ), + s: css( + euiScaleMarkdownFormatText(euiTheme, { customScale: 's', - })} - `, - xs: css` - ${euiScaleMarkdownFormatText(euiTheme, { + }) + ), + xs: css( + euiScaleMarkdownFormatText(euiTheme, { customScale: 'xs', - })} - `, - relative: css` - ${euiScaleMarkdownFormatText(euiTheme, { + }) + ), + relative: css( + euiScaleMarkdownFormatText(euiTheme, { unit: 'em', - })} - `, + }) + ), }); From ad2597ae762657060fdb1c91d7613134fcb2174f Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 6 May 2024 14:33:03 -0700 Subject: [PATCH 03/17] [EuiMarkdownFormat] Convert remaining color styles to Emotion + export new/internal `isNamedColor` util from EuiTextColor --- .../markdown_format.styles.test.ts.snap | 333 ++++++++++++++++++ src/components/markdown_editor/_index.scss | 1 - .../markdown_editor/_markdown_format.scss | 67 ---- .../markdown_format.styles.test.ts | 19 +- .../markdown_editor/markdown_format.styles.ts | 76 +++- .../markdown_editor/markdown_format.tsx | 21 +- src/components/text/text_color.tsx | 4 +- 7 files changed, 442 insertions(+), 79 deletions(-) delete mode 100644 src/components/markdown_editor/_markdown_format.scss 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 d8b9b05e82e..09c4a8aaabf 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 @@ -1,5 +1,338 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`euiMarkdownFormat text colors accent 1`] = ` +" + .euiMarkdownFormat__blockquote { + border-inline-start-color: #F04E98; + } + + .euiHorizontalRule { + background-color: #F04E98; + color: #F04E98; /* ensure that firefox gets the currentColor */ + } + + /* Tables */ + + .euiMarkdownFormat__table { + display: block; + inline-size: 100%; + overflow: auto; + border-spacing: 0; + border-collapse: collapse; + border-inline-start: 1px solid #F04E98; + } + + .euiMarkdownFormat__table th, + .euiMarkdownFormat__table td { + border-block: 1px solid #F04E98; + + &:last-child { + border-inline-end: 1px solid #F04E98; + } + } + + .euiMarkdownFormat__table tr { + border-block-start: 1px solid #F04E98; + } + ;label:accent;" +`; + +exports[`euiMarkdownFormat text colors custom 1`] = ` +" + .euiMarkdownFormat__blockquote { + border-inline-start-color: currentColor; + } + + .euiHorizontalRule { + background-color: currentColor; + color: currentColor; /* ensure that firefox gets the currentColor */ + } + + /* Tables */ + + .euiMarkdownFormat__table { + display: block; + inline-size: 100%; + overflow: auto; + border-spacing: 0; + border-collapse: collapse; + border-inline-start: 1px solid currentColor; + } + + .euiMarkdownFormat__table th, + .euiMarkdownFormat__table td { + border-block: 1px solid currentColor; + + &:last-child { + border-inline-end: 1px solid currentColor; + } + } + + .euiMarkdownFormat__table tr { + border-block-start: 1px solid currentColor; + } + ;label:custom;" +`; + +exports[`euiMarkdownFormat text colors danger 1`] = ` +" + .euiMarkdownFormat__blockquote { + border-inline-start-color: #BD271E; + } + + .euiHorizontalRule { + background-color: #BD271E; + color: #BD271E; /* ensure that firefox gets the currentColor */ + } + + /* Tables */ + + .euiMarkdownFormat__table { + display: block; + inline-size: 100%; + overflow: auto; + border-spacing: 0; + border-collapse: collapse; + border-inline-start: 1px solid #BD271E; + } + + .euiMarkdownFormat__table th, + .euiMarkdownFormat__table td { + border-block: 1px solid #BD271E; + + &:last-child { + border-inline-end: 1px solid #BD271E; + } + } + + .euiMarkdownFormat__table tr { + border-block-start: 1px solid #BD271E; + } + ;label:danger;" +`; + +exports[`euiMarkdownFormat text colors default 1`] = ` +" + .euiMarkdownFormat__blockquote { + border-inline-start-color: rgba(0,0,0,0.15); + } + + .euiHorizontalRule { + background-color: rgba(0,0,0,0.15); + color: rgba(0,0,0,0.15); /* ensure that firefox gets the currentColor */ + } + + /* Tables */ + + .euiMarkdownFormat__table { + display: block; + inline-size: 100%; + overflow: auto; + border-spacing: 0; + border-collapse: collapse; + border-inline-start: 1px solid rgba(0,0,0,0.15); + } + + .euiMarkdownFormat__table th, + .euiMarkdownFormat__table td { + border-block: 1px solid rgba(0,0,0,0.15); + + &:last-child { + border-inline-end: 1px solid rgba(0,0,0,0.15); + } + } + + .euiMarkdownFormat__table tr { + border-block-start: 1px solid rgba(0,0,0,0.15); + } + ;label:default;" +`; + +exports[`euiMarkdownFormat text colors ghost 1`] = ` +" + .euiMarkdownFormat__blockquote { + border-inline-start-color: #FFF; + } + + .euiHorizontalRule { + background-color: #FFF; + color: #FFF; /* ensure that firefox gets the currentColor */ + } + + /* Tables */ + + .euiMarkdownFormat__table { + display: block; + inline-size: 100%; + overflow: auto; + border-spacing: 0; + border-collapse: collapse; + border-inline-start: 1px solid #FFF; + } + + .euiMarkdownFormat__table th, + .euiMarkdownFormat__table td { + border-block: 1px solid #FFF; + + &:last-child { + border-inline-end: 1px solid #FFF; + } + } + + .euiMarkdownFormat__table tr { + border-block-start: 1px solid #FFF; + } + ;label:ghost;" +`; + +exports[`euiMarkdownFormat text colors inherit 1`] = ` +" + .euiMarkdownFormat__blockquote { + border-inline-start-color: currentColor; + } + + .euiHorizontalRule { + background-color: currentColor; + color: currentColor; /* ensure that firefox gets the currentColor */ + } + + /* Tables */ + + .euiMarkdownFormat__table { + display: block; + inline-size: 100%; + overflow: auto; + border-spacing: 0; + border-collapse: collapse; + border-inline-start: 1px solid currentColor; + } + + .euiMarkdownFormat__table th, + .euiMarkdownFormat__table td { + border-block: 1px solid currentColor; + + &:last-child { + border-inline-end: 1px solid currentColor; + } + } + + .euiMarkdownFormat__table tr { + border-block-start: 1px solid currentColor; + } + ;label:inherit;" +`; + +exports[`euiMarkdownFormat text colors subdued 1`] = ` +" + .euiMarkdownFormat__blockquote { + border-inline-start-color: #646a77; + } + + .euiHorizontalRule { + background-color: #646a77; + color: #646a77; /* ensure that firefox gets the currentColor */ + } + + /* Tables */ + + .euiMarkdownFormat__table { + display: block; + inline-size: 100%; + overflow: auto; + border-spacing: 0; + border-collapse: collapse; + border-inline-start: 1px solid #646a77; + } + + .euiMarkdownFormat__table th, + .euiMarkdownFormat__table td { + border-block: 1px solid #646a77; + + &:last-child { + border-inline-end: 1px solid #646a77; + } + } + + .euiMarkdownFormat__table tr { + border-block-start: 1px solid #646a77; + } + ;label:subdued;" +`; + +exports[`euiMarkdownFormat text colors success 1`] = ` +" + .euiMarkdownFormat__blockquote { + border-inline-start-color: #00BFB3; + } + + .euiHorizontalRule { + background-color: #00BFB3; + color: #00BFB3; /* ensure that firefox gets the currentColor */ + } + + /* Tables */ + + .euiMarkdownFormat__table { + display: block; + inline-size: 100%; + overflow: auto; + border-spacing: 0; + border-collapse: collapse; + border-inline-start: 1px solid #00BFB3; + } + + .euiMarkdownFormat__table th, + .euiMarkdownFormat__table td { + border-block: 1px solid #00BFB3; + + &:last-child { + border-inline-end: 1px solid #00BFB3; + } + } + + .euiMarkdownFormat__table tr { + border-block-start: 1px solid #00BFB3; + } + ;label:success;" +`; + +exports[`euiMarkdownFormat text colors warning 1`] = ` +" + .euiMarkdownFormat__blockquote { + border-inline-start-color: #FEC514; + } + + .euiHorizontalRule { + background-color: #FEC514; + color: #FEC514; /* ensure that firefox gets the currentColor */ + } + + /* Tables */ + + .euiMarkdownFormat__table { + display: block; + inline-size: 100%; + overflow: auto; + border-spacing: 0; + border-collapse: collapse; + border-inline-start: 1px solid #FEC514; + } + + .euiMarkdownFormat__table th, + .euiMarkdownFormat__table td { + border-block: 1px solid #FEC514; + + &:last-child { + border-inline-end: 1px solid #FEC514; + } + } + + .euiMarkdownFormat__table tr { + border-block-start: 1px solid #FEC514; + } + ;label:warning;" +`; + exports[`euiMarkdownFormat text sizes m 1`] = ` " .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { // Extra specificity necessary to override default checkbox CSS diff --git a/src/components/markdown_editor/_index.scss b/src/components/markdown_editor/_index.scss index beedb3d75af..c1535b57b69 100644 --- a/src/components/markdown_editor/_index.scss +++ b/src/components/markdown_editor/_index.scss @@ -1,7 +1,6 @@ @import 'variables'; @import 'markdown_editor'; @import 'markdown_editor_drop_zone'; -@import 'markdown_format'; @import 'markdown_editor_footer'; @import 'markdown_editor_preview'; @import 'markdown_editor_text_area'; diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss deleted file mode 100644 index feb42cd9ac0..00000000000 --- a/src/components/markdown_editor/_markdown_format.scss +++ /dev/null @@ -1,67 +0,0 @@ -// The Markdown Format uses by default a few EUI components. -// It uses the EuiText to wrap all the content so all the styles related with scaling based on the font-size live inside `_text.scss` - -// This should only be used for .euiMarkdownFormat, therefore it's not included in a separate mixin file -@mixin euiMarkdownAdjustBorderColors($color) { - .euiMarkdownFormat__blockquote { - border-left-color: $color; - } - - .euiHorizontalRule { - background-color: $color; - color: $color; // ensure that firefox gets the `currentColor` - } - - .euiMarkdownFormat__table { - border-left: 1px solid $color; - } - - .euiMarkdownFormat__table th, - .euiMarkdownFormat__table td { - border-top: 1px solid $color; - border-bottom: 1px solid $color; - - &:last-child { - border-right: 1px solid $color; - } - } - - .euiMarkdownFormat__table tr { - border-top: 1px solid $color; - } -} - -.euiMarkdownFormat { - $euiMarkdownAlphaShade: rgba($euiColorFullShade, .15); - - // stylelint-disable indentation - $euiMarkdownBorderColors: ( - default: $euiMarkdownAlphaShade, - subdued: $euiTextSubduedColor, - success: $euiColorSuccess, - accent: $euiColorAccent, - warning: $euiColorWarning, - danger: $euiColorDanger, - ghost: $euiColorGhost, - inherit: currentColor, - custom: currentColor, - ); - // stylelint-enable indentation - - // We're adjusting the borders of the elements by passing a color defined in $euiMarkdownBorderColors. - // For the `custom` and `inherit` colors we're assigning the `currentColor` so we can get the current or computed value of the `color` property - @each $name, $color in $euiMarkdownBorderColors { - &[class*='euiTextColor-#{$name}'] { - @include euiMarkdownAdjustBorderColors($color); - } - } - - // Tables - .euiMarkdownFormat__table { - display: block; - width: 100%; - overflow: auto; - border-spacing: 0; - border-collapse: collapse; - } -} diff --git a/src/components/markdown_editor/markdown_format.styles.test.ts b/src/components/markdown_editor/markdown_format.styles.test.ts index 52ef1d04dad..74c2eb6ef40 100644 --- a/src/components/markdown_editor/markdown_format.styles.test.ts +++ b/src/components/markdown_editor/markdown_format.styles.test.ts @@ -10,15 +10,26 @@ import { useEuiTheme } from '../../services'; import { renderHook } from '../../test/rtl'; import { TEXT_SIZES } from '../text/text'; +import { COLORS } from '../text/text_color'; import { euiMarkdownFormatStyles } from './markdown_format.styles'; +const output = renderHook(() => euiMarkdownFormatStyles(useEuiTheme())).result + .current; + describe('euiMarkdownFormat text sizes', () => { TEXT_SIZES.forEach((size) => { test(size, () => { - const emotionReturn = renderHook(() => - euiMarkdownFormatStyles(useEuiTheme()) - ).result.current; - expect(emotionReturn[size].styles).toMatchSnapshot(); + expect(output[size].styles).toMatchSnapshot(); + }); + }); +}); + +describe('euiMarkdownFormat text colors', () => { + const colors = [...COLORS, 'custom'] as const; + + colors.forEach((color) => { + test(`${color}`, () => { + expect(output.colors[color].styles).toMatchSnapshot(); }); }); }); diff --git a/src/components/markdown_editor/markdown_format.styles.ts b/src/components/markdown_editor/markdown_format.styles.ts index e6a68230a28..e8cab594997 100644 --- a/src/components/markdown_editor/markdown_format.styles.ts +++ b/src/components/markdown_editor/markdown_format.styles.ts @@ -7,7 +7,7 @@ */ import { css } from '@emotion/react'; -import { UseEuiTheme } from '../../services'; +import { UseEuiTheme, transparentize } from '../../services'; import { logicalCSS, euiFontSize, @@ -64,6 +64,49 @@ const euiScaleMarkdownFormatText = ( `; }; +// Internal utility for generating border colors based on EuiText colors +const euiMarkdownAdjustBorderColors = ( + { euiTheme }: UseEuiTheme, + color: string +) => { + const border = `${euiTheme.border.width.thin} solid ${color}`; + + return ` + .euiMarkdownFormat__blockquote { + ${logicalCSS('border-left-color', color)} + } + + .euiHorizontalRule { + background-color: ${color}; + color: ${color}; /* ensure that firefox gets the currentColor */ + } + + /* Tables */ + + .euiMarkdownFormat__table { + display: block; + ${logicalCSS('width', '100%')} + overflow: auto; + border-spacing: 0; + border-collapse: collapse; + ${logicalCSS('border-left', border)} + } + + .euiMarkdownFormat__table th, + .euiMarkdownFormat__table td { + ${logicalCSS('border-vertical', border)} + + &:last-child { + ${logicalCSS('border-right', border)} + } + } + + .euiMarkdownFormat__table tr { + ${logicalCSS('border-top', border)} + } + `; +}; + /** * Styles */ @@ -90,4 +133,35 @@ export const euiMarkdownFormatStyles = (euiTheme: UseEuiTheme) => ({ unit: 'em', }) ), + colors: { + default: css( + euiMarkdownAdjustBorderColors( + euiTheme, + transparentize(euiTheme.euiTheme.colors.fullShade, 0.15) + ) + ), + subdued: css( + euiMarkdownAdjustBorderColors( + euiTheme, + euiTheme.euiTheme.colors.subduedText + ) + ), + success: css( + euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.success) + ), + accent: css( + euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.accent) + ), + warning: css( + euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.warning) + ), + danger: css( + euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.danger) + ), + ghost: css( + euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.ghost) + ), + inherit: css(euiMarkdownAdjustBorderColors(euiTheme, 'currentColor')), + custom: css(euiMarkdownAdjustBorderColors(euiTheme, 'currentColor')), + }, }); diff --git a/src/components/markdown_editor/markdown_format.tsx b/src/components/markdown_editor/markdown_format.tsx index c81cb8c0e6f..c626f7027f1 100644 --- a/src/components/markdown_editor/markdown_format.tsx +++ b/src/components/markdown_editor/markdown_format.tsx @@ -12,7 +12,8 @@ import { VFileContents } from 'vfile'; import classNames from 'classnames'; import { CommonProps } from '../common'; import { EuiText, EuiTextProps } from '../text/text'; -import { useEuiTheme } from '../../services'; +import { _isNamedColor } from '../text/text_color'; +import { useEuiMemoizedStyles } from '../../services'; import { euiMarkdownFormatStyles } from './markdown_format.styles'; import { defaultProcessingPlugins, @@ -38,6 +39,7 @@ export const EuiMarkdownFormat: FunctionComponent = ({ parsingPluginList = defaultParsingPlugins, processingPluginList = defaultProcessingPlugins, textSize = 'm', + color = 'default', ...rest }) => { const processor = useMemo( @@ -55,14 +57,23 @@ export const EuiMarkdownFormat: FunctionComponent = ({ } }, [children, processor]); - const euiTheme = useEuiTheme(); - const styles = euiMarkdownFormatStyles(euiTheme); - const cssStyles = [styles.euiMarkdownFormat, styles[textSize]]; + const styles = useEuiMemoizedStyles(euiMarkdownFormatStyles); + const cssStyles = [ + styles.euiMarkdownFormat, + styles[textSize], + _isNamedColor(color) ? styles.colors[color] : styles.colors.custom, + ]; const classes = classNames('euiMarkdownFormat', className); return ( - + {result} ); diff --git a/src/components/text/text_color.tsx b/src/components/text/text_color.tsx index 88245417381..bbc5ef2fb30 100644 --- a/src/components/text/text_color.tsx +++ b/src/components/text/text_color.tsx @@ -29,6 +29,8 @@ export const COLORS = [ 'inherit', ] as const; export type TextColor = (typeof COLORS)[number]; +export const _isNamedColor = (color: any): color is TextColor => + COLORS.includes(color); export type EuiTextColorProps = CommonProps & Omit< @@ -58,7 +60,7 @@ export const EuiTextColor: FunctionComponent = ({ style, ...rest }) => { - const isNamedColor = COLORS.includes(color as TextColor); + const isNamedColor = _isNamedColor(color); const styles = useEuiMemoizedStyles(euiTextColorStyles); const cssStyles = [ From 43eed23b54b55ad84b99654702dca2a0896e0609 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 6 May 2024 16:17:29 -0700 Subject: [PATCH 04/17] Clean up markdown checkbox styles - move them from global CSS to the specific plugin/renderer + DRY out readonly CSS by moving it to the default checkbox component styles, and setting the actual inputs to `readonly` (which is significantly more accessible to screen readers) --- src/components/form/checkbox/_checkbox.scss | 29 +++++++-- .../markdown_format.styles.test.ts.snap | 64 ------------------- .../_markdown_editor_preview.scss | 12 ---- .../markdown_editor/markdown_format.styles.ts | 20 +----- .../plugins/markdown_checkbox/renderer.tsx | 29 ++++++++- 5 files changed, 52 insertions(+), 102 deletions(-) diff --git a/src/components/form/checkbox/_checkbox.scss b/src/components/form/checkbox/_checkbox.scss index 849637d6dc3..5f3fad51018 100644 --- a/src/components/form/checkbox/_checkbox.scss +++ b/src/components/form/checkbox/_checkbox.scss @@ -50,6 +50,29 @@ } } + &:focus { + + .euiCheckbox__square { + @include euiCustomControlFocused; + } + } + + // Readonly checkboxes are used by EuiMarkdownEditor + &[readonly] { + cursor: default !important; // stylelint-disable-line declaration-no-important + + ~ .euiCheckbox__label { + cursor: default !important; // stylelint-disable-line declaration-no-important + } + + // maintain the initial color to enforce that clicks are not doing anything + &:focus { + + .euiCheckbox__square { + outline-color: $euiFormCustomControlBorderColor !important; // stylelint-disable-line declaration-no-important + border-color: $euiFormCustomControlBorderColor; + } + } + } + &[disabled] { cursor: not-allowed !important; // stylelint-disable-line declaration-no-important @@ -74,12 +97,6 @@ @include euiCustomControlDisabled($type: 'square'); } } - - &:focus { - + .euiCheckbox__square { - @include euiCustomControlFocused; - } - } } &.euiCheckbox--inList, 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 09c4a8aaabf..87cb7f80d69 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 @@ -335,22 +335,6 @@ exports[`euiMarkdownFormat text colors warning 1`] = ` exports[`euiMarkdownFormat text sizes m 1`] = ` " - .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { // Extra specificity necessary to override default checkbox CSS - font-size: 1.1429rem; - padding-inline-start: 1.7143rem; - line-height: 1.7143rem; - } - - .euiCheckbox + *:not(.euiCheckbox) { - margin-block-start: 1.1429rem; - } - - /* Better align checkboxes with all text sizes */ - .euiCheckbox .euiCheckbox__input + .euiCheckbox__square { - inset-block-start: 50%; - transform: translateY(-50%); - } - .euiMarkdownFormat__codeblockWrapper { margin-block-end: 1.1429rem; } @@ -369,22 +353,6 @@ exports[`euiMarkdownFormat text sizes m 1`] = ` exports[`euiMarkdownFormat text sizes relative 1`] = ` " - .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { // Extra specificity necessary to override default checkbox CSS - font-size: 1em; - padding-inline-start: 1.5000em; - line-height: 1.5000; - } - - .euiCheckbox + *:not(.euiCheckbox) { - margin-block-start: 1em; - } - - /* Better align checkboxes with all text sizes */ - .euiCheckbox .euiCheckbox__input + .euiCheckbox__square { - inset-block-start: 50%; - transform: translateY(-50%); - } - .euiMarkdownFormat__codeblockWrapper { margin-block-end: 1em; } @@ -403,22 +371,6 @@ exports[`euiMarkdownFormat text sizes relative 1`] = ` exports[`euiMarkdownFormat text sizes s 1`] = ` " - .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { // Extra specificity necessary to override default checkbox CSS - font-size: 1.0000rem; - padding-inline-start: 1.4286rem; - line-height: 1.4286rem; - } - - .euiCheckbox + *:not(.euiCheckbox) { - margin-block-start: 1.0000rem; - } - - /* Better align checkboxes with all text sizes */ - .euiCheckbox .euiCheckbox__input + .euiCheckbox__square { - inset-block-start: 50%; - transform: translateY(-50%); - } - .euiMarkdownFormat__codeblockWrapper { margin-block-end: 1.0000rem; } @@ -437,22 +389,6 @@ exports[`euiMarkdownFormat text sizes s 1`] = ` exports[`euiMarkdownFormat text sizes xs 1`] = ` " - .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { // Extra specificity necessary to override default checkbox CSS - font-size: 0.8571rem; - padding-inline-start: 1.1429rem; - line-height: 1.1429rem; - } - - .euiCheckbox + *:not(.euiCheckbox) { - margin-block-start: 0.8571rem; - } - - /* Better align checkboxes with all text sizes */ - .euiCheckbox .euiCheckbox__input + .euiCheckbox__square { - inset-block-start: 50%; - transform: translateY(-50%); - } - .euiMarkdownFormat__codeblockWrapper { margin-block-end: 0.8571rem; } diff --git a/src/components/markdown_editor/_markdown_editor_preview.scss b/src/components/markdown_editor/_markdown_editor_preview.scss index 741798dd549..32749abf0cb 100644 --- a/src/components/markdown_editor/_markdown_editor_preview.scss +++ b/src/components/markdown_editor/_markdown_editor_preview.scss @@ -6,15 +6,3 @@ border: $euiBorderThin; padding: $euiSizeM; } - -.euiMarkdownEditorPreview-isReadOnly { - // overrides cursor pointer to better indicate that checkboxes are not clickable - .euiCheckbox__input ~ .euiCheckbox__label { - cursor: default; - } - - // maintains the initial color on click to enforce that clicks are not doing anything - .euiCheckbox__input:focus:not(:checked) + .euiCheckbox__square { - border-color: $euiFormCustomControlBorderColor; - } -} \ No newline at end of file diff --git a/src/components/markdown_editor/markdown_format.styles.ts b/src/components/markdown_editor/markdown_format.styles.ts index e8cab594997..0d86331518a 100644 --- a/src/components/markdown_editor/markdown_format.styles.ts +++ b/src/components/markdown_editor/markdown_format.styles.ts @@ -23,31 +23,13 @@ const euiScaleMarkdownFormatText = ( euiTheme: UseEuiTheme, options: _FontScaleOptions ) => { - const { fontSize, lineHeight } = euiFontSize(euiTheme, 'm', options); - const { unit } = options; - const lineHeightSize = unit === 'em' ? `${lineHeight}em` : lineHeight; + const { fontSize } = euiFontSize(euiTheme, 'm', options); // Custom scales const tablePaddingVertical = mathWithUnits(fontSize, (x) => x / 4); const tablePaddingHorizontal = mathWithUnits(fontSize, (x) => x / 2); return ` - .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { // Extra specificity necessary to override default checkbox CSS - font-size: ${fontSize}; - ${logicalCSS('padding-left', lineHeightSize)} - line-height: ${lineHeight}; - } - - .euiCheckbox + *:not(.euiCheckbox) { - ${logicalCSS('margin-top', fontSize)} - } - - /* Better align checkboxes with all text sizes */ - .euiCheckbox .euiCheckbox__input + .euiCheckbox__square { - ${logicalCSS('top', '50%')} - transform: translateY(-50%); - } - .euiMarkdownFormat__codeblockWrapper { ${logicalCSS('margin-bottom', fontSize)} } diff --git a/src/components/markdown_editor/plugins/markdown_checkbox/renderer.tsx b/src/components/markdown_editor/plugins/markdown_checkbox/renderer.tsx index f952db2410c..a8e17fdf4af 100644 --- a/src/components/markdown_editor/plugins/markdown_checkbox/renderer.tsx +++ b/src/components/markdown_editor/plugins/markdown_checkbox/renderer.tsx @@ -7,6 +7,8 @@ */ import React, { FunctionComponent, PropsWithChildren, useContext } from 'react'; +import { css } from '@emotion/react'; +import { logicalCSS } from '../../../../global_styling'; import { EuiCheckbox } from '../../../form/checkbox'; import { EuiMarkdownContext } from '../../markdown_context'; import { useGeneratedHtmlId } from '../../../../services/accessibility'; @@ -21,7 +23,7 @@ type CheckboxMarkdownRendererProps = PropsWithChildren & export const CheckboxMarkdownRenderer: FunctionComponent< CheckboxMarkdownRendererProps > = ({ position, lead, label, isChecked, children }) => { - const { replaceNode } = useContext(EuiMarkdownContext); + const { replaceNode, readOnly } = useContext(EuiMarkdownContext); return ( { replaceNode(position, `${lead}[${isChecked ? ' ' : 'x'}]${label}`); }} + css={markdownCheckboxStyles} + readOnly={readOnly} /> ); }; + +const markdownCheckboxStyles = css` + /* && selector specificity overrides Sass. TODO: Remove once EuiCheckbox is on Emotion */ + && { + /* Inherit from markdown text size */ + .euiCheckbox__input ~ .euiCheckbox__label { + font-size: inherit; + line-height: inherit; + ${logicalCSS('padding-left', '1.5em')} + } + + /* Add a margin-bottom if the next sibling is not another checkbox */ + &:has(+ :not(.euiCheckbox)) { + ${logicalCSS('margin-bottom', '1em')} + } + + /* Better align checkboxes with all text sizes */ + .euiCheckbox__input + .euiCheckbox__square { + ${logicalCSS('top', '50%')} + transform: translateY(-50%); + } + } +`; From 0129b1383f2ccaf9ba858680ee5f6c98b52d2c99 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 6 May 2024 19:56:47 -0700 Subject: [PATCH 05/17] Convert footer styles --- .../markdown_editor.test.tsx.snap | 42 ++++++++--------- src/components/markdown_editor/_index.scss | 1 - .../_markdown_editor_footer.scss | 42 ----------------- .../markdown_editor_footer.styles.ts | 45 +++++++++++++++++++ .../markdown_editor_footer.tsx | 40 ++++++++++++----- 5 files changed, 95 insertions(+), 75 deletions(-) delete mode 100644 src/components/markdown_editor/_markdown_editor_footer.scss create mode 100644 src/components/markdown_editor/markdown_editor_footer.styles.ts diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap index 50a063e762d..4d4edbf9e27 100644 --- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap +++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap @@ -191,17 +191,17 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1 style="max-height: 500px;" />