From 59160883eca73c68c3510626b272d90ee9499700 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 20 Jul 2022 09:18:48 -0500 Subject: [PATCH] [CSS-in-JS] Convert `EuiTextDiff` (#6056) * emotion styles * delete sass * update tests * CL --- src/components/index.scss | 1 - .../__snapshots__/text-diff.test.tsx.snap | 530 +++++++----------- src/components/text_diff/_index.scss | 1 - src/components/text_diff/_text_diff.scss | 9 - src/components/text_diff/text-diff.test.tsx | 6 +- src/components/text_diff/text_diff.styles.ts | 23 + src/components/text_diff/text_diff.tsx | 7 +- upcoming_changelogs/6056.md | 3 + 8 files changed, 235 insertions(+), 345 deletions(-) delete mode 100644 src/components/text_diff/_index.scss delete mode 100644 src/components/text_diff/_text_diff.scss create mode 100644 src/components/text_diff/text_diff.styles.ts create mode 100644 upcoming_changelogs/6056.md diff --git a/src/components/index.scss b/src/components/index.scss index f0e1e949986..de44cbc2673 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -45,7 +45,6 @@ @import 'suggest/index'; @import 'table/index'; @import 'tabs/index'; -@import 'text_diff/index'; @import 'toast/index'; @import 'token/index'; @import 'tool_tip/index'; diff --git a/src/components/text_diff/__snapshots__/text-diff.test.tsx.snap b/src/components/text_diff/__snapshots__/text-diff.test.tsx.snap index 097d453fd33..ccccfac08ac 100644 --- a/src/components/text_diff/__snapshots__/text-diff.test.tsx.snap +++ b/src/components/text_diff/__snapshots__/text-diff.test.tsx.snap @@ -1,349 +1,219 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`useEuiTextDiff is rendered 1`] = ` - - + + Orbiting th + + i + + + o + + s + + e + + at a distance of roughly ninety- + + two + + + nine + + + + m + + + b + + illion + + mile + + + yard + + s is + + a + + n + + ut + + + o + + t + + erly + + insignificant + + little + + + dwaf + + + + blu + + + r + + e + + d + + green planet whose ape- + + de + + + a + + scended life forms are so amazingly primitive that they still think digital + + wat + + + clo + + c + + he + + + k + + s are a pretty neat idea. + +`; + +exports[`useEuiTextDiff props custom components is rendered 1`] = ` + +

Orbiting th - - i - - - o - +

+ + i + + + o + +

s - - e - +

+ + e + +

at a distance of roughly ninety- - - two - - - nine - +

+ + two + + + nine + +

- - m - - - b - +

+ + m + + + b + +

illion - - mile - - - yard - +

+ + mile + + + yard + +

s is - - a - +

+ + a + +

n - - ut - - - o - +

+ + ut + + + o + +

t - - erly - +

+ + erly + +

insignificant - - little - - - dwaf - +

+ + little + + + dwaf + +

- - blu - - - r - +

+ + blu + + + r + +

e - - d - +

+ + d + +

green planet whose ape- - - de - - - a - +

+ + de + + + a + +

scended life forms are so amazingly primitive that they still think digital - - wat - - - clo - +

+ + wat + + + clo + +

c - - he - - - k - +

+ + he + + + k + +

s are a pretty neat idea. - - -`; - -exports[`useEuiTextDiff props custom components is rendered 1`] = ` - - -

- Orbiting th -

- - i - - - o - -

- s -

- - e - -

- at a distance of roughly ninety- -

- - two - - - nine - -

- -

- - m - - - b - -

- illion -

- - mile - - - yard - -

- s is -

- - a - -

- n -

- - ut - - - o - -

- t -

- - erly - -

- insignificant -

- - little - - - dwaf - -

- -

- - blu - - - r - -

- e -

- - d - -

- green planet whose ape- -

- - de - - - a - -

- scended life forms are so amazingly primitive that they still think digital -

- - wat - - - clo - -

- c -

- - he - - - k - -

- s are a pretty neat idea. -

- - +

+ `; diff --git a/src/components/text_diff/_index.scss b/src/components/text_diff/_index.scss deleted file mode 100644 index e4b6a8c0360..00000000000 --- a/src/components/text_diff/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'text_diff'; diff --git a/src/components/text_diff/_text_diff.scss b/src/components/text_diff/_text_diff.scss deleted file mode 100644 index 6e38229934d..00000000000 --- a/src/components/text_diff/_text_diff.scss +++ /dev/null @@ -1,9 +0,0 @@ -.euiTextDiff { - del { - color: $euiColorDangerText; - } - - ins { - color: $euiColorSuccessText; - } -} diff --git a/src/components/text_diff/text-diff.test.tsx b/src/components/text_diff/text-diff.test.tsx index bb5df340458..957ec089df3 100644 --- a/src/components/text_diff/text-diff.test.tsx +++ b/src/components/text_diff/text-diff.test.tsx @@ -7,7 +7,7 @@ */ import React from 'react'; -import { shallow } from 'enzyme'; +import { render } from 'enzyme'; import { useEuiTextDiff } from './text_diff'; const beforeText = @@ -25,7 +25,7 @@ describe('useEuiTextDiff', () => { })[0]; return <>{renderedComponent}; }; - const component = shallow(); + const component = render(); expect(component).toMatchSnapshot(); }); @@ -44,7 +44,7 @@ describe('useEuiTextDiff', () => { })[0]; return <>{renderedComponent}; }; - const component = shallow(); + const component = render(); expect(component).toMatchSnapshot(); }); diff --git a/src/components/text_diff/text_diff.styles.ts b/src/components/text_diff/text_diff.styles.ts new file mode 100644 index 00000000000..28a9ca5582e --- /dev/null +++ b/src/components/text_diff/text_diff.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 } from '../../services'; + +export const euiTextDiffStyles = ({ euiTheme }: UseEuiTheme) => ({ + // Base + euiTextDiff: css` + del { + color: ${euiTheme.colors.dangerText}; + } + + ins { + color: ${euiTheme.colors.successText}; + } + `, +}); diff --git a/src/components/text_diff/text_diff.tsx b/src/components/text_diff/text_diff.tsx index 958d795b0fb..c6f58f45522 100644 --- a/src/components/text_diff/text_diff.tsx +++ b/src/components/text_diff/text_diff.tsx @@ -9,7 +9,9 @@ import React, { HTMLAttributes, useMemo, ElementType } from 'react'; import Diff from 'text-diff'; import classNames from 'classnames'; +import { useEuiTheme } from '../../services'; import { CommonProps } from '../common'; +import { euiTextDiffStyles } from './text_diff.styles'; interface Props { /** @@ -61,6 +63,9 @@ export const useEuiTextDiff = ({ return diff.main(beforeText, afterText); }, [beforeText, afterText, timeout]); // produces diff array + const euiTheme = useEuiTheme(); + const styles = euiTextDiffStyles(euiTheme); + const classes = classNames('euiTextDiff', className); const rendereredHtml = useMemo(() => { @@ -80,7 +85,7 @@ export const useEuiTextDiff = ({ }, [textDiff, deleteComponent, insertComponent, sameComponent]); // produces diff array return [ - + {rendereredHtml} , textDiff, diff --git a/upcoming_changelogs/6056.md b/upcoming_changelogs/6056.md new file mode 100644 index 00000000000..a8fc3b27931 --- /dev/null +++ b/upcoming_changelogs/6056.md @@ -0,0 +1,3 @@ +**CSS-in-JS conversions** + +- Converted `EuiTextDiff` to Emotion \ No newline at end of file