From e7b3917dec4301dda0518530c3cc2828efe128fb Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Tue, 15 Mar 2022 11:24:56 -0500 Subject: [PATCH] [CSS-in-JS] Convert `EuiMark` (#4575) * placeholder docs * CL TODO * converting euimark styles to emotion * import location * move CL * rename style file; style factory pattern * use simple return * update generated classname pattern * update snapshots * better class name generation * cl * Update src/components/mark/mark.styles.ts Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * clean up * better wiki * more wiki * Update wiki/creating-components-manually.md Co-authored-by: Constance Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: Constance --- .babelrc.js | 3 +- CHANGELOG.md | 4 ++ .../__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.styles.ts | 26 +++++++++++++ src/components/mark/mark.tsx | 8 +++- .../selectable_list.test.tsx.snap | 16 +++++++- src/themes/amsterdam/overrides/_index.scss | 1 - src/themes/amsterdam/overrides/_mark.scss | 3 -- wiki/creating-components-manually.md | 11 ++---- wiki/writing-styles-with-emotion.md | 38 ++++++++++++++++++- 14 files changed, 123 insertions(+), 32 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/amsterdam/overrides/_mark.scss diff --git a/.babelrc.js b/.babelrc.js index 5bf29e39aa2..cbf6ac908f6 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -16,7 +16,8 @@ module.exports = { [ "@emotion/babel-preset-css-prop", { - "labelFormat": "[filename]-[local]" + "autoLabel": "always", + "labelFormat": "[local]" }, ], ], diff --git a/CHANGELOG.md b/CHANGELOG.md index ff85b8023d4..25667bf8d58 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ - Removed Legacy theme including compiled CSS ([#5688](https://github.com/elastic/eui/pull/5688)) +**CSS-in-JS conversions** + +- Converted `EuiMark` to CSS-in-JS styling ([#4575](https://github.com/elastic/eui/pull/4575)) + ## [`51.1.0`](https://github.com/elastic/eui/tree/v51.1.0) - Updated `testenv` mock for `EuiFlyout` to include default `aria-label` on the close button ([#5702](https://github.com/elastic/eui/pull/5702)) diff --git a/src/components/highlight/__snapshots__/highlight.test.tsx.snap b/src/components/highlight/__snapshots__/highlight.test.tsx.snap index 234088f4f7a..d071f694d43 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: rgba(0,119,204,0.1); + 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: rgba(0,119,204,0.1); + 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: rgba(0,119,204,0.1); + font-weight: 700; + color: #343741; +} + match diff --git a/src/components/index.scss b/src/components/index.scss index c885ef7e44a..a42e85b124e 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -41,7 +41,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 4c160bb08be..7e59d90a94c 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: rgba(0,119,204,0.1); + 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 4888bf861b6..00000000000 --- 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 326b5b20c10..00000000000 --- 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.styles.ts b/src/components/mark/mark.styles.ts new file mode 100644 index 00000000000..d015e46093c --- /dev/null +++ b/src/components/mark/mark.styles.ts @@ -0,0 +1,26 @@ +/* + * 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, transparentize } from '../../services'; + +export const euiMarkStyles = ({ euiTheme, colorMode }: UseEuiTheme) => { + // TODO: Was $euiFocusBackgroundColor + const transparency = { LIGHT: 0.1, DARK: 0.3 }; + + return css` + background-color: ${transparentize( + euiTheme.colors.primary, + transparency[colorMode] + )}; + 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/components/mark/mark.tsx b/src/components/mark/mark.tsx index 581d29c871a..6e9ee57698e 100644 --- a/src/components/mark/mark.tsx +++ b/src/components/mark/mark.tsx @@ -7,8 +7,10 @@ */ import React, { HTMLAttributes, FunctionComponent, ReactNode } from 'react'; -import { CommonProps } from '../common'; import classNames from 'classnames'; +import { CommonProps } from '../common'; +import { useEuiTheme } from '../../services'; +import { euiMarkStyles } from './mark.styles'; export type EuiMarkProps = HTMLAttributes & CommonProps & { /** @@ -22,10 +24,12 @@ export const EuiMark: FunctionComponent = ({ className, ...rest }) => { + const useTheme = useEuiTheme(); + const styles = euiMarkStyles(useTheme); const classes = classNames('euiMark', className); return ( - + {children} ); diff --git a/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap b/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap index 9eafde3b3f5..c7ab0c53c2b 100644 --- a/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap +++ b/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap @@ -2127,6 +2127,12 @@ exports[`EuiSelectableListItem props rowHeight 1`] = ` `; exports[`EuiSelectableListItem props searchValue 1`] = ` +.emotion-0 { + background-color: rgba(0,119,204,0.1); + font-weight: 700; + color: #343741; +} +
Mi @@ -2322,6 +2328,12 @@ exports[`EuiSelectableListItem props searchValue 1`] = ` `; exports[`EuiSelectableListItem props searchValue 2`] = ` +.emotion-0 { + background-color: rgba(0,119,204,0.1); + font-weight: 700; + color: #343741; +} +
Mi diff --git a/src/themes/amsterdam/overrides/_index.scss b/src/themes/amsterdam/overrides/_index.scss index 2e6753aca4a..8a47eb0736f 100644 --- a/src/themes/amsterdam/overrides/_index.scss +++ b/src/themes/amsterdam/overrides/_index.scss @@ -24,7 +24,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/amsterdam/overrides/_mark.scss b/src/themes/amsterdam/overrides/_mark.scss deleted file mode 100644 index 70d5b611a73..00000000000 --- a/src/themes/amsterdam/overrides/_mark.scss +++ /dev/null @@ -1,3 +0,0 @@ -.euiMark { - background: $euiFocusBackgroundColor; -} diff --git a/wiki/creating-components-manually.md b/wiki/creating-components-manually.md index 0e895d9162c..94bd7d47f70 100644 --- a/wiki/creating-components-manually.md +++ b/wiki/creating-components-manually.md @@ -1,18 +1,15 @@ # Creating components manually -## Create component SCSS files +## Create component style files 1. Create a directory for your component in `src/components`. -2. In this directory, create `_{component name}.scss`. -3. _Optional:_ Create any other components that should be [logically-grouped][docs-logical-group] in this directory. -4. Create an `_index.scss` file in this directory that import all of the new component SCSS files you created. -5. Import the `_index.scss` file into `src/components/index.scss`. +2. Create a `{component name}.styles.ts` file inside the directory -This makes your styles available to your project and to the [EUI documentation][docs]. +Refer to the [Writing styles with emotion](./writing-styles-with-emotion.md) guidelines for more instruction. ## Create the React component -1. Create the React component(s) (preferably as TypeScript) in the same directory as the related SCSS file(s). +1. Create the React component(s) (preferably as TypeScript) in the same directory as the related style file(s). 2. Export these components from an `index.ts` file. 3. Re-export these components from `src/components/index.ts`. diff --git a/wiki/writing-styles-with-emotion.md b/wiki/writing-styles-with-emotion.md index 61a250b1876..e1440dd2a37 100644 --- a/wiki/writing-styles-with-emotion.md +++ b/wiki/writing-styles-with-emotion.md @@ -3,6 +3,36 @@ EUI uses [`Emotion`](https://emotion.sh/) when writing CSS-in-JS styles. A general knowledge of writing CSS is enough in most cases, but there are some JavaScript-related differences that can result in unintended output. Similarly, there are feaures that don't exist in CSS of which we like to take advantage. + +## File patterns + +```ts +/* {component name}.styles.ts */ +import { css } from '@emotion/react'; +import { UseEuiTheme } from '../../services'; + +export const euiComponentNameStyles = ({ euiTheme }: UseEuiTheme) => { + return css` + color: ${euiTheme.colors.primary}; + `; +}; +``` + +```tsx +/* {component name}.tsx */ +import { useEuiTheme } from '../../services'; +import { euiComponentNameStyles } from './{component name}.styles.ts'; + +export const EuiComponent = () => { + const theme = useEuiTheme(); + const styles = euiComponentStyles(theme); + + return ( +
+ ); +}; +``` + ## Conditional styles Styles can be added conditionally based on environment variables, such as the active theme, using nested string template literals. @@ -22,4 +52,10 @@ Although possible in some contexts, it is not recommended to "shortcut" logic us ## The `css` prop -TBD +_Work in progress_ + +* Use an array inside of the `css` prop for optimal style composition and class name generation. This is relevant even if only a single style object is passed. + +```tsx + +```