From 762d4cae67a8717d31d2c05d0d05e1bee90823bc Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 1 Dec 2021 15:18:55 -0600 Subject: [PATCH 01/16] placeholder docs --- wiki/creating-components-manually.md | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/wiki/creating-components-manually.md b/wiki/creating-components-manually.md index 0e895d9162c..0b302b82471 100644 --- a/wiki/creating-components-manually.md +++ b/wiki/creating-components-manually.md @@ -1,14 +1,9 @@ # 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`. - -This makes your styles available to your project and to the [EUI documentation][docs]. +2. TBD ## Create the React component From 0b328346fabf61d705f70a569c9ae1048ab3bc5d Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 1 Sep 2021 10:33:09 -0500 Subject: [PATCH 02/16] CL TODO --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d9c695e9877..504f15e53bc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -597,6 +597,8 @@ ## [`37.6.0`](https://github.com/elastic/eui/tree/v37.6.0) +**TODO** + - Updated `EuiSuperDatePicker` to pass a `data-test-subj` prop ([#5085](https://github.com/elastic/eui/pull/5085)) - Added `euiTextBreakWord()` mixin to the `euiTitle()` mixin to ensure all titles break long words ([#5107](https://github.com/elastic/eui/pull/5107)) - Added `euiTextBreakWord()` to `EuiFormLabels` ([#5107](https://github.com/elastic/eui/pull/5107)) From 96ec57b0d510202c054be0ab90e4697509c2a0b5 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 1 Sep 2021 10:28:29 -0500 Subject: [PATCH 03/16] 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 +++++++++++++++ src/themes/amsterdam/overrides/_index.scss | 1 - src/themes/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/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 234088f4f7a..3bdd42f0367 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 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..347ee9f9fec 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 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.tsx b/src/components/mark/mark.tsx index 581d29c871a..0cc72aa50b5 100644 --- a/src/components/mark/mark.tsx +++ b/src/components/mark/mark.tsx @@ -7,8 +7,9 @@ */ import React, { HTMLAttributes, FunctionComponent, ReactNode } 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 00000000000..ec1d27cd05c --- /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/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; -} From c6c80b317a39919a3a035f9abb3479fe96b6007d Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Thu, 14 Oct 2021 16:26:40 -0500 Subject: [PATCH 04/16] import location --- src/components/mark/mark_styles.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/mark/mark_styles.ts b/src/components/mark/mark_styles.ts index ec1d27cd05c..3eac05c916d 100644 --- a/src/components/mark/mark_styles.ts +++ b/src/components/mark/mark_styles.ts @@ -7,7 +7,8 @@ */ import { css } from '@emotion/react'; -import { useEuiTheme, isDefaultTheme } from '../../services'; +import { useEuiTheme } from '../../services'; +import { isDefaultTheme } from '../../themes/themes'; export const useEuiMarkStyles = () => { const { euiTheme } = useEuiTheme(); From 7c59f02444d9b9ad1fc48669f1eed7ee04a21886 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Mon, 7 Feb 2022 12:27:48 -0600 Subject: [PATCH 05/16] move CL --- CHANGELOG.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 504f15e53bc..d9c695e9877 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -597,8 +597,6 @@ ## [`37.6.0`](https://github.com/elastic/eui/tree/v37.6.0) -**TODO** - - Updated `EuiSuperDatePicker` to pass a `data-test-subj` prop ([#5085](https://github.com/elastic/eui/pull/5085)) - Added `euiTextBreakWord()` mixin to the `euiTitle()` mixin to ensure all titles break long words ([#5107](https://github.com/elastic/eui/pull/5107)) - Added `euiTextBreakWord()` to `EuiFormLabels` ([#5107](https://github.com/elastic/eui/pull/5107)) From 8cd5225c295a96bf403985889e45820e1b0cef0d Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Tue, 15 Feb 2022 16:05:22 -0600 Subject: [PATCH 06/16] rename style file; style factory pattern --- src/components/mark/mark.styles.ts | 29 +++++++++++++++++++++++++++++ src/components/mark/mark.tsx | 8 +++++--- src/components/mark/mark_styles.ts | 24 ------------------------ 3 files changed, 34 insertions(+), 27 deletions(-) create mode 100644 src/components/mark/mark.styles.ts delete mode 100644 src/components/mark/mark_styles.ts diff --git a/src/components/mark/mark.styles.ts b/src/components/mark/mark.styles.ts new file mode 100644 index 00000000000..839cf18ea41 --- /dev/null +++ b/src/components/mark/mark.styles.ts @@ -0,0 +1,29 @@ +/* + * 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'; +import { isLegacyTheme } from '../../themes/themes'; + +export const euiMarkStyles = ({ euiTheme, colorMode }: UseEuiTheme) => { + // TODO: Global variables? + const transparency = { LIGHT: 0.1, DARK: 0.3 }; + const backgroundColor = isLegacyTheme(euiTheme.themeName) + ? 'transparent' + : transparentize(euiTheme.colors.primary, transparency[colorMode]); + + return { + main: css` + background-color: ${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/components/mark/mark.tsx b/src/components/mark/mark.tsx index 0cc72aa50b5..7a1f491e167 100644 --- a/src/components/mark/mark.tsx +++ b/src/components/mark/mark.tsx @@ -9,7 +9,8 @@ import React, { HTMLAttributes, FunctionComponent, ReactNode } from 'react'; import classNames from 'classnames'; import { CommonProps } from '../common'; -import { useEuiMarkStyles } from './mark_styles'; +import { useEuiTheme } from '../../services'; +import { euiMarkStyles as markStyles } from './mark.styles'; export type EuiMarkProps = HTMLAttributes & CommonProps & { /** @@ -23,11 +24,12 @@ export const EuiMark: FunctionComponent = ({ className, ...rest }) => { - const euiMarkStyles = useEuiMarkStyles(); + const useTheme = useEuiTheme(); + const styles = markStyles(useTheme); const classes = classNames('euiMark', className); return ( - + {children} ); diff --git a/src/components/mark/mark_styles.ts b/src/components/mark/mark_styles.ts deleted file mode 100644 index 3eac05c916d..00000000000 --- a/src/components/mark/mark_styles.ts +++ /dev/null @@ -1,24 +0,0 @@ -/* - * 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 } from '../../services'; -import { isDefaultTheme } from '../../themes/themes'; - -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}; - `; -}; From 90614e7eba9bf9ca649cfacbea1bbdc556566210 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 16 Feb 2022 14:23:45 -0600 Subject: [PATCH 07/16] use simple return --- src/components/mark/mark.styles.ts | 23 ++++++++++------------- src/components/mark/mark.tsx | 6 +++--- 2 files changed, 13 insertions(+), 16 deletions(-) diff --git a/src/components/mark/mark.styles.ts b/src/components/mark/mark.styles.ts index 839cf18ea41..b70434202ab 100644 --- a/src/components/mark/mark.styles.ts +++ b/src/components/mark/mark.styles.ts @@ -8,22 +8,19 @@ import { css } from '@emotion/react'; import { UseEuiTheme, transparentize } from '../../services'; -import { isLegacyTheme } from '../../themes/themes'; export const euiMarkStyles = ({ euiTheme, colorMode }: UseEuiTheme) => { // TODO: Global variables? const transparency = { LIGHT: 0.1, DARK: 0.3 }; - const backgroundColor = isLegacyTheme(euiTheme.themeName) - ? 'transparent' - : transparentize(euiTheme.colors.primary, transparency[colorMode]); - return { - main: css` - background-color: ${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}; - `, - }; + 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 7a1f491e167..f559d9f038e 100644 --- a/src/components/mark/mark.tsx +++ b/src/components/mark/mark.tsx @@ -10,7 +10,7 @@ import React, { HTMLAttributes, FunctionComponent, ReactNode } from 'react'; import classNames from 'classnames'; import { CommonProps } from '../common'; import { useEuiTheme } from '../../services'; -import { euiMarkStyles as markStyles } from './mark.styles'; +import { euiMarkStyles } from './mark.styles'; export type EuiMarkProps = HTMLAttributes & CommonProps & { /** @@ -25,11 +25,11 @@ export const EuiMark: FunctionComponent = ({ ...rest }) => { const useTheme = useEuiTheme(); - const styles = markStyles(useTheme); + const styles = euiMarkStyles(useTheme); const classes = classNames('euiMark', className); return ( - + {children} ); From 659d267c6ad7cb40f983920568493bb50121527e Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 16 Feb 2022 14:24:06 -0600 Subject: [PATCH 08/16] update generated classname pattern --- .babelrc.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.babelrc.js b/.babelrc.js index 5bf29e39aa2..61038d3a470 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -16,7 +16,8 @@ module.exports = { [ "@emotion/babel-preset-css-prop", { - "labelFormat": "[filename]-[local]" + "autoLabel": "always", + "labelFormat": "[dirname]-[local]" }, ], ], From 7bbfbbbf03453a9ab0ec27771da1bfb4cfa79384 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 16 Feb 2022 14:27:15 -0600 Subject: [PATCH 09/16] update snapshots --- .../__snapshots__/highlight.test.tsx.snap | 6 +++--- .../mark/__snapshots__/mark.test.tsx.snap | 2 +- .../__snapshots__/selectable_list.test.tsx.snap | 16 ++++++++++++++-- 3 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/components/highlight/__snapshots__/highlight.test.tsx.snap b/src/components/highlight/__snapshots__/highlight.test.tsx.snap index 3bdd42f0367..d071f694d43 100644 --- a/src/components/highlight/__snapshots__/highlight.test.tsx.snap +++ b/src/components/highlight/__snapshots__/highlight.test.tsx.snap @@ -2,7 +2,7 @@ exports[`EuiHighlight behavior loose matching matches strings with different casing 1`] = ` .emotion-0 { - background-color: transparent; + background-color: rgba(0,119,204,0.1); font-weight: 700; color: #343741; } @@ -20,7 +20,7 @@ exports[`EuiHighlight behavior loose matching matches strings with different cas exports[`EuiHighlight behavior matching applies to all matches 1`] = ` .emotion-0 { - background-color: transparent; + background-color: rgba(0,119,204,0.1); font-weight: 700; color: #343741; } @@ -48,7 +48,7 @@ exports[`EuiHighlight behavior matching applies to all matches 1`] = ` exports[`EuiHighlight behavior matching only applies to first match 1`] = ` .emotion-0 { - background-color: transparent; + background-color: rgba(0,119,204,0.1); font-weight: 700; color: #343741; } diff --git a/src/components/mark/__snapshots__/mark.test.tsx.snap b/src/components/mark/__snapshots__/mark.test.tsx.snap index 347ee9f9fec..7e59d90a94c 100644 --- a/src/components/mark/__snapshots__/mark.test.tsx.snap +++ b/src/components/mark/__snapshots__/mark.test.tsx.snap @@ -2,7 +2,7 @@ exports[`EuiMark is rendered 1`] = ` .emotion-0 { - background-color: transparent; + background-color: rgba(0,119,204,0.1); font-weight: 700; color: #343741; } 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 From de1278b0b4e293fc3084fbe42c54a8c5f2cb8b0e Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 2 Mar 2022 10:59:25 -0600 Subject: [PATCH 10/16] better class name generation --- .babelrc.js | 2 +- src/components/mark/mark.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.babelrc.js b/.babelrc.js index 61038d3a470..cbf6ac908f6 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -17,7 +17,7 @@ module.exports = { "@emotion/babel-preset-css-prop", { "autoLabel": "always", - "labelFormat": "[dirname]-[local]" + "labelFormat": "[local]" }, ], ], diff --git a/src/components/mark/mark.tsx b/src/components/mark/mark.tsx index f559d9f038e..6e9ee57698e 100644 --- a/src/components/mark/mark.tsx +++ b/src/components/mark/mark.tsx @@ -29,7 +29,7 @@ export const EuiMark: FunctionComponent = ({ const classes = classNames('euiMark', className); return ( - + {children} ); From 3a206703a854351871c6ed4c306c0701006b92b7 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 2 Mar 2022 14:05:06 -0600 Subject: [PATCH 11/16] cl --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d9c695e9877..2859c1843f4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,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)) From cf363df6f38e7adb2cf7da3a67c55b542456b916 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Thu, 3 Mar 2022 11:28:35 -0600 Subject: [PATCH 12/16] Update src/components/mark/mark.styles.ts Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src/components/mark/mark.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/mark/mark.styles.ts b/src/components/mark/mark.styles.ts index b70434202ab..d015e46093c 100644 --- a/src/components/mark/mark.styles.ts +++ b/src/components/mark/mark.styles.ts @@ -10,7 +10,7 @@ import { css } from '@emotion/react'; import { UseEuiTheme, transparentize } from '../../services'; export const euiMarkStyles = ({ euiTheme, colorMode }: UseEuiTheme) => { - // TODO: Global variables? + // TODO: Was $euiFocusBackgroundColor const transparency = { LIGHT: 0.1, DARK: 0.3 }; return css` From 68f2bcdc097969d6b6922f5b11c420c7a2a5e17a Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Mon, 14 Mar 2022 14:38:01 -0500 Subject: [PATCH 13/16] clean up --- CHANGELOG.md | 2 +- wiki/creating-components-manually.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2859c1843f4..a28c1eee466 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,7 @@ - Removed Legacy theme including compiled CSS ([#5688](https://github.com/elastic/eui/pull/5688)) -**CSS-in-JS Conversions** +**CSS-in-JS conversions** - Converted `EuiMark` to CSS-in-JS styling ([#4575](https://github.com/elastic/eui/pull/4575)) diff --git a/wiki/creating-components-manually.md b/wiki/creating-components-manually.md index 0b302b82471..a676fb2831b 100644 --- a/wiki/creating-components-manually.md +++ b/wiki/creating-components-manually.md @@ -3,11 +3,11 @@ ## Create component style files 1. Create a directory for your component in `src/components`. -2. TBD +2. Create a `{component name}.styles.ts` file inside the directory. ## 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`. From 48c9d84e55d706bb2f8434d9f308cbd7a030caf7 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Mon, 14 Mar 2022 16:16:43 -0500 Subject: [PATCH 14/16] better wiki --- wiki/creating-components-manually.md | 27 +++++++++++++++++++++++++++ wiki/writing-styles-with-emotion.md | 8 +++++++- 2 files changed, 34 insertions(+), 1 deletion(-) diff --git a/wiki/creating-components-manually.md b/wiki/creating-components-manually.md index a676fb2831b..a90aa1fd4e4 100644 --- a/wiki/creating-components-manually.md +++ b/wiki/creating-components-manually.md @@ -5,6 +5,33 @@ 1. Create a directory for your component in `src/components`. 2. Create a `{component name}.styles.ts` file inside the directory. +```ts +import { css } from '@emotion/react'; +import { UseEuiTheme } from '../../services'; + +export const euiComponentNameStyles = ({ euiTheme }: UseEuiTheme) => { + return css` + color: ${euiTheme.colors.primary}; + `; +}; +``` + +3. Import the `{component name}.styles.ts` file into your component, for example: + +```tsx +import { useEuiTheme } from '../../services'; +import { euiComponentNameStyles } from './{component name}.styles.ts'; + +export const EuiComponent = () => { + const theme = useEuiTheme(); + const styles = euiComponentStyles(theme); + + return ( +
+ ); +}; +``` + ## Create the React component 1. Create the React component(s) (preferably as TypeScript) in the same directory as the related style file(s). diff --git a/wiki/writing-styles-with-emotion.md b/wiki/writing-styles-with-emotion.md index 61a250b1876..e921eb0b766 100644 --- a/wiki/writing-styles-with-emotion.md +++ b/wiki/writing-styles-with-emotion.md @@ -22,4 +22,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 + +``` From 1f4272419dda8cd2be42be2ce50fb1d851bea81b Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Mon, 14 Mar 2022 16:43:22 -0500 Subject: [PATCH 15/16] more wiki --- wiki/creating-components-manually.md | 31 +++------------------------- wiki/writing-styles-with-emotion.md | 30 +++++++++++++++++++++++++++ 2 files changed, 33 insertions(+), 28 deletions(-) diff --git a/wiki/creating-components-manually.md b/wiki/creating-components-manually.md index a90aa1fd4e4..f44ce39892b 100644 --- a/wiki/creating-components-manually.md +++ b/wiki/creating-components-manually.md @@ -3,34 +3,9 @@ ## Create component style files 1. Create a directory for your component in `src/components`. -2. Create a `{component name}.styles.ts` file inside the directory. - -```ts -import { css } from '@emotion/react'; -import { UseEuiTheme } from '../../services'; - -export const euiComponentNameStyles = ({ euiTheme }: UseEuiTheme) => { - return css` - color: ${euiTheme.colors.primary}; - `; -}; -``` - -3. Import the `{component name}.styles.ts` file into your component, for example: - -```tsx -import { useEuiTheme } from '../../services'; -import { euiComponentNameStyles } from './{component name}.styles.ts'; - -export const EuiComponent = () => { - const theme = useEuiTheme(); - const styles = euiComponentStyles(theme); - - return ( -
- ); -}; -``` +2. Create a `{component name}.styles.ts` file inside the directory + +Refer to the [Writing styles with emotion](wiki/writing-styles-with-emotion.md) guidelines for more instruction. ## Create the React component diff --git a/wiki/writing-styles-with-emotion.md b/wiki/writing-styles-with-emotion.md index e921eb0b766..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. From 833cd799425e04ba86d7f2e57f5f7ae3fb5613d1 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Mon, 14 Mar 2022 17:11:50 -0500 Subject: [PATCH 16/16] Update wiki/creating-components-manually.md Co-authored-by: Constance --- wiki/creating-components-manually.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/wiki/creating-components-manually.md b/wiki/creating-components-manually.md index f44ce39892b..94bd7d47f70 100644 --- a/wiki/creating-components-manually.md +++ b/wiki/creating-components-manually.md @@ -5,7 +5,7 @@ 1. Create a directory for your component in `src/components`. 2. Create a `{component name}.styles.ts` file inside the directory -Refer to the [Writing styles with emotion](wiki/writing-styles-with-emotion.md) guidelines for more instruction. +Refer to the [Writing styles with emotion](./writing-styles-with-emotion.md) guidelines for more instruction. ## Create the React component