From 4172b8519d0778e1183fb0f39b7e0a4d489c16ca Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 12 Jul 2023 12:40:02 -0700 Subject: [PATCH 1/3] Move `cloneElementWithCss` util to its own folder - it's fairly Emotion specific and not EUI theme specific, so should probably be in its own service folder + export as top-level export & remove comment --- src/services/{theme => emotion}/clone_element.test.tsx | 0 src/services/{theme => emotion}/clone_element.tsx | 2 -- src/services/emotion/index.ts | 9 +++++++++ src/services/index.ts | 1 + 4 files changed, 10 insertions(+), 2 deletions(-) rename src/services/{theme => emotion}/clone_element.test.tsx (100%) rename src/services/{theme => emotion}/clone_element.tsx (92%) create mode 100644 src/services/emotion/index.ts diff --git a/src/services/theme/clone_element.test.tsx b/src/services/emotion/clone_element.test.tsx similarity index 100% rename from src/services/theme/clone_element.test.tsx rename to src/services/emotion/clone_element.test.tsx diff --git a/src/services/theme/clone_element.tsx b/src/services/emotion/clone_element.tsx similarity index 92% rename from src/services/theme/clone_element.tsx rename to src/services/emotion/clone_element.tsx index 3e3dea80deb..a090e5d4713 100644 --- a/src/services/theme/clone_element.tsx +++ b/src/services/emotion/clone_element.tsx @@ -13,8 +13,6 @@ import { jsx } from '@emotion/react'; * React.cloneElement does not work if the cloned element does not already have the * `css` prop - as a result, we need to use `jsx()` to manually clone the element * See https://github.com/emotion-js/emotion/issues/1404 - * - * NOTE: We're still using/testing this utility internally, so this is not yet a public API */ export const cloneElementWithCss = ( element: any, diff --git a/src/services/emotion/index.ts b/src/services/emotion/index.ts new file mode 100644 index 00000000000..d7a50a60227 --- /dev/null +++ b/src/services/emotion/index.ts @@ -0,0 +1,9 @@ +/* + * 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. + */ + +export * from './clone_element'; diff --git a/src/services/index.ts b/src/services/index.ts index eb18a0e8adc..5243593e1e9 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -72,6 +72,7 @@ export { useColorPickerState, useColorStopsState } from './color_picker'; export type { EuiSetColorMethod } from './color_picker'; export * from './console'; export { copyToClipboard } from './copy_to_clipboard'; +export * from './emotion'; export * from './findElement'; export { dateFormatAliases, From a32630bf1a548f6bca4aa6e2ccf56f294c5cfa85 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 12 Jul 2023 12:45:40 -0700 Subject: [PATCH 2/3] Update internal EUI usages of `cloneElementWithCss` --- .../screen_reader_only/screen_reader_only.tsx | 2 +- src/components/card/card.tsx | 7 +++++-- src/components/facet/facet_button.tsx | 3 +-- src/components/list_group/list_group.tsx | 3 +-- src/components/list_group/list_group_item.tsx | 7 +++++-- src/components/text/text_align.tsx | 2 +- src/components/text/text_color.tsx | 4 ++-- src/components/title/title.tsx | 3 +-- src/components/toast/global_toast_list_item.tsx | 3 +-- src/test/internal/render_custom_styles.tsx | 2 +- 10 files changed, 19 insertions(+), 17 deletions(-) diff --git a/src/components/accessibility/screen_reader_only/screen_reader_only.tsx b/src/components/accessibility/screen_reader_only/screen_reader_only.tsx index faf1b9d38f3..e46e5278db6 100644 --- a/src/components/accessibility/screen_reader_only/screen_reader_only.tsx +++ b/src/components/accessibility/screen_reader_only/screen_reader_only.tsx @@ -9,7 +9,7 @@ import { ReactElement, FunctionComponent } from 'react'; import classNames from 'classnames'; -import { cloneElementWithCss } from '../../../services/theme/clone_element'; +import { cloneElementWithCss } from '../../../services'; import { euiScreenReaderOnlyStyles } from './screen_reader_only.styles'; export interface EuiScreenReaderOnlyProps { diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx index 4c8347bf8c0..f28d1245dcb 100644 --- a/src/components/card/card.tsx +++ b/src/components/card/card.tsx @@ -16,8 +16,11 @@ import React, { import classNames from 'classnames'; import { CommonProps, ExclusiveUnion } from '../common'; -import { getSecureRelForTarget, useEuiTheme } from '../../services'; -import { cloneElementWithCss } from '../../services/theme/clone_element'; +import { + getSecureRelForTarget, + useEuiTheme, + cloneElementWithCss, +} from '../../services'; import { EuiText } from '../text'; import { EuiTitle } from '../title'; import { EuiBetaBadge, EuiBetaBadgeProps } from '../badge/beta_badge'; diff --git a/src/components/facet/facet_button.tsx b/src/components/facet/facet_button.tsx index 93121934650..5f6000659ae 100644 --- a/src/components/facet/facet_button.tsx +++ b/src/components/facet/facet_button.tsx @@ -20,8 +20,7 @@ import { EuiNotificationBadge } from '../badge'; import { EuiLoadingSpinner } from '../loading'; import { EuiInnerText } from '../inner_text'; -import { cloneElementWithCss } from '../../services/theme/clone_element'; -import { useEuiTheme } from '../../services'; +import { useEuiTheme, cloneElementWithCss } from '../../services'; import { euiFacetButtonStyles, euiFacetButtonTextStyles, diff --git a/src/components/list_group/list_group.tsx b/src/components/list_group/list_group.tsx index c780131602f..f55feae989a 100644 --- a/src/components/list_group/list_group.tsx +++ b/src/components/list_group/list_group.tsx @@ -11,8 +11,7 @@ import classNames from 'classnames'; import { EuiListGroupItem, EuiListGroupItemProps } from './list_group_item'; import { CommonProps } from '../common'; -import { useEuiTheme } from '../../services'; -import { cloneElementWithCss } from '../../services/theme/clone_element'; +import { useEuiTheme, cloneElementWithCss } from '../../services'; import { logicalStyle } from '../../global_styling'; import { euiListGroupStyles } from './list_group.styles'; diff --git a/src/components/list_group/list_group_item.tsx b/src/components/list_group/list_group_item.tsx index 3482bbdaacf..581585b8572 100644 --- a/src/components/list_group/list_group_item.tsx +++ b/src/components/list_group/list_group_item.tsx @@ -27,8 +27,11 @@ import { EuiListGroupItemExtraActionProps, } from './list_group_item_extra_action'; -import { getSecureRelForTarget, useEuiTheme } from '../../services'; -import { cloneElementWithCss } from '../../services/theme/clone_element'; +import { + getSecureRelForTarget, + useEuiTheme, + cloneElementWithCss, +} from '../../services'; import { validateHref } from '../../services/security/href_validator'; import { diff --git a/src/components/text/text_align.tsx b/src/components/text/text_align.tsx index 487932fb041..0b42a77556c 100644 --- a/src/components/text/text_align.tsx +++ b/src/components/text/text_align.tsx @@ -12,7 +12,7 @@ import React, { isValidElement, } from 'react'; import { CommonProps } from '../common'; -import { cloneElementWithCss } from '../../services/theme/clone_element'; +import { cloneElementWithCss } from '../../services'; import { euiTextAlignStyles } from './text_align.styles'; diff --git a/src/components/text/text_color.tsx b/src/components/text/text_color.tsx index 8a2054a14d4..dff5f4622b6 100644 --- a/src/components/text/text_color.tsx +++ b/src/components/text/text_color.tsx @@ -12,10 +12,10 @@ import React, { CSSProperties, isValidElement, } from 'react'; + import { CommonProps } from '../common'; -import { cloneElementWithCss } from '../../services/theme/clone_element'; +import { useEuiTheme, cloneElementWithCss } from '../../services'; -import { useEuiTheme } from '../../services'; import { euiTextColorStyles } from './text_color.styles'; export const COLORS = [ diff --git a/src/components/title/title.tsx b/src/components/title/title.tsx index 06372639a2a..0a0a819a45d 100644 --- a/src/components/title/title.tsx +++ b/src/components/title/title.tsx @@ -8,8 +8,7 @@ import { FunctionComponent, ReactElement } from 'react'; import classNames from 'classnames'; -import { useEuiTheme } from '../../services'; -import { cloneElementWithCss } from '../../services/theme/clone_element'; +import { useEuiTheme, cloneElementWithCss } from '../../services'; import { euiTitleStyles } from './title.styles'; import { CommonProps } from '../common'; diff --git a/src/components/toast/global_toast_list_item.tsx b/src/components/toast/global_toast_list_item.tsx index bbc9ec25749..25eeb345a17 100644 --- a/src/components/toast/global_toast_list_item.tsx +++ b/src/components/toast/global_toast_list_item.tsx @@ -8,8 +8,7 @@ import { FunctionComponent, ReactElement } from 'react'; import classNames from 'classnames'; -import { useEuiTheme } from '../../services'; -import { cloneElementWithCss } from '../../services/theme/clone_element'; +import { useEuiTheme, cloneElementWithCss } from '../../services'; import { CommonProps } from '../common'; import { euiGlobalToastListItemStyles } from './global_toast_list.styles'; diff --git a/src/test/internal/render_custom_styles.tsx b/src/test/internal/render_custom_styles.tsx index 1aa511ba2d7..cd734df0660 100644 --- a/src/test/internal/render_custom_styles.tsx +++ b/src/test/internal/render_custom_styles.tsx @@ -11,7 +11,7 @@ import { css } from '@emotion/react'; import { get, set } from 'lodash'; import { render } from '../rtl'; -import { cloneElementWithCss } from '../../services/theme/clone_element'; +import { cloneElementWithCss } from '../../services'; import { keysOf } from '../../components'; export const customStyles = { From 108d7448d3ebe9ec17b987da91042e55c93c5e33 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 12 Jul 2023 12:49:31 -0700 Subject: [PATCH 3/3] changelog --- upcoming_changelogs/6939.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 upcoming_changelogs/6939.md diff --git a/upcoming_changelogs/6939.md b/upcoming_changelogs/6939.md new file mode 100644 index 00000000000..dd5eea8dcd5 --- /dev/null +++ b/upcoming_changelogs/6939.md @@ -0,0 +1 @@ +- Added a new `cloneElementWithCss` Emotion utility