From e06d9a5386194061ad9288ff0d41e259aec8488d Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 1 Sep 2021 10:28:29 -0500 Subject: [PATCH] converting euimark styles to emotion --- .../__snapshots__/highlight.test.tsx.snap | 28 +++++++++++++++---- src/components/index.scss | 1 - .../mark/__snapshots__/mark.test.tsx.snap | 8 +++++- src/components/mark/_index.scss | 1 - src/components/mark/_mark.scss | 7 ----- src/components/mark/mark.tsx | 6 ++-- src/components/mark/mark_styles.ts | 23 +++++++++++++++ .../eui-amsterdam/overrides/_index.scss | 1 - src/themes/eui-amsterdam/overrides/_mark.scss | 3 -- 9 files changed, 57 insertions(+), 21 deletions(-) delete mode 100644 src/components/mark/_index.scss delete mode 100644 src/components/mark/_mark.scss create mode 100644 src/components/mark/mark_styles.ts delete mode 100644 src/themes/eui-amsterdam/overrides/_mark.scss diff --git a/src/components/highlight/__snapshots__/highlight.test.tsx.snap b/src/components/highlight/__snapshots__/highlight.test.tsx.snap index 234088f4f7a5..3bdd42f03675 100644 --- a/src/components/highlight/__snapshots__/highlight.test.tsx.snap +++ b/src/components/highlight/__snapshots__/highlight.test.tsx.snap @@ -1,10 +1,16 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiHighlight behavior loose matching matches strings with different casing 1`] = ` +.emotion-0 { + background-color: transparent; + font-weight: 700; + color: #343741; +} + different case @@ -13,21 +19,27 @@ exports[`EuiHighlight behavior loose matching matches strings with different cas `; exports[`EuiHighlight behavior matching applies to all matches 1`] = ` +.emotion-0 { + background-color: transparent; + font-weight: 700; + color: #343741; +} + match match match @@ -35,9 +47,15 @@ exports[`EuiHighlight behavior matching applies to all matches 1`] = ` `; exports[`EuiHighlight behavior matching only applies to first match 1`] = ` +.emotion-0 { + background-color: transparent; + font-weight: 700; + color: #343741; +} + match diff --git a/src/components/index.scss b/src/components/index.scss index 02cd50190961..7a35554749d5 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -42,7 +42,6 @@ @import 'list_group/index'; @import 'loading/index'; @import 'markdown_editor/index'; -@import 'mark/index'; @import 'modal/index'; @import 'notification/index'; @import 'overlay_mask/index'; diff --git a/src/components/mark/__snapshots__/mark.test.tsx.snap b/src/components/mark/__snapshots__/mark.test.tsx.snap index 4c160bb08bec..347ee9f9fec9 100644 --- a/src/components/mark/__snapshots__/mark.test.tsx.snap +++ b/src/components/mark/__snapshots__/mark.test.tsx.snap @@ -1,8 +1,14 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiMark is rendered 1`] = ` +.emotion-0 { + background-color: transparent; + font-weight: 700; + color: #343741; +} + Marked diff --git a/src/components/mark/_index.scss b/src/components/mark/_index.scss deleted file mode 100644 index 4888bf861b63..000000000000 --- a/src/components/mark/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'mark'; \ No newline at end of file diff --git a/src/components/mark/_mark.scss b/src/components/mark/_mark.scss deleted file mode 100644 index 326b5b20c10f..000000000000 --- a/src/components/mark/_mark.scss +++ /dev/null @@ -1,7 +0,0 @@ -.euiMark { - background-color: transparent; - font-weight: $euiFontWeightBold; - // Override the browser's black color. - // Can't use `inherit` because the text to background color contrast may not be sufficient - color: $euiTextColor; -} diff --git a/src/components/mark/mark.tsx b/src/components/mark/mark.tsx index e9012c894c1b..727dddd54673 100644 --- a/src/components/mark/mark.tsx +++ b/src/components/mark/mark.tsx @@ -7,8 +7,9 @@ */ import React, { HTMLAttributes, FunctionComponent } from 'react'; -import { CommonProps } from '../common'; import classNames from 'classnames'; +import { CommonProps } from '../common'; +import { useEuiMarkStyles } from './mark_styles'; export type EuiMarkProps = HTMLAttributes & CommonProps & { /** @@ -22,10 +23,11 @@ export const EuiMark: FunctionComponent = ({ className, ...rest }) => { + const euiMarkStyles = useEuiMarkStyles(); const classes = classNames('euiMark', className); return ( - + {children} ); diff --git a/src/components/mark/mark_styles.ts b/src/components/mark/mark_styles.ts new file mode 100644 index 000000000000..ec1d27cd05c1 --- /dev/null +++ b/src/components/mark/mark_styles.ts @@ -0,0 +1,23 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; +import { useEuiTheme, isDefaultTheme } from '../../services'; + +export const useEuiMarkStyles = () => { + const { euiTheme } = useEuiTheme(); + return css` + background-color: ${isDefaultTheme(euiTheme.themeName) + ? 'transparent' + : euiTheme.focus!.backgroundColor}; + font-weight: ${euiTheme.font.weight.bold}; + // Override the browser's black color. + // Can't use 'inherit' because the text to background color contrast may not be sufficient + color: ${euiTheme.colors.text}; + `; +}; diff --git a/src/themes/eui-amsterdam/overrides/_index.scss b/src/themes/eui-amsterdam/overrides/_index.scss index 43f603d65f8c..4b3cd1ccf63b 100644 --- a/src/themes/eui-amsterdam/overrides/_index.scss +++ b/src/themes/eui-amsterdam/overrides/_index.scss @@ -21,7 +21,6 @@ @import 'list_group_item'; @import 'image'; @import 'key_pad_menu'; -@import 'mark'; @import 'markdown_editor'; @import 'modal'; @import 'notification_badge'; diff --git a/src/themes/eui-amsterdam/overrides/_mark.scss b/src/themes/eui-amsterdam/overrides/_mark.scss deleted file mode 100644 index 70d5b611a733..000000000000 --- a/src/themes/eui-amsterdam/overrides/_mark.scss +++ /dev/null @@ -1,3 +0,0 @@ -.euiMark { - background: $euiFocusBackgroundColor; -}