From 22fa09bd5efdc2709144f2a710f5929e04b7fdc8 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 13 Sep 2023 16:57:26 -0700 Subject: [PATCH 01/17] [misc cleanup] fragment syntax --- src/components/drag_and_drop/draggable.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/drag_and_drop/draggable.tsx b/src/components/drag_and_drop/draggable.tsx index 0d343deacab..fbb7724d5f8 100644 --- a/src/components/drag_and_drop/draggable.tsx +++ b/src/components/drag_and_drop/draggable.tsx @@ -8,7 +8,6 @@ import React, { CSSProperties, - Fragment, FunctionComponent, ReactElement, cloneElement, @@ -102,7 +101,7 @@ export const EuiDraggable: FunctionComponent = ({ ? (children(provided, snapshot, rubric) as ReactElement) : children; return ( - + <>
= ({ {DraggableElement}
)} - + ); }} From 04322df3a58787a70464ad4e03b74322589b876c Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 13 Sep 2023 17:00:17 -0700 Subject: [PATCH 02/17] [EuiDraggable] Set up initial Emotion styles, convert spacing styles + remove modifier classes --- .../__snapshots__/draggable.test.tsx.snap | 2 +- src/components/drag_and_drop/_draggable.scss | 6 ---- src/components/drag_and_drop/_variables.scss | 5 --- .../drag_and_drop/draggable.styles.ts | 32 +++++++++++++++++++ src/components/drag_and_drop/draggable.tsx | 21 ++++++------ 5 files changed, 45 insertions(+), 21 deletions(-) create mode 100644 src/components/drag_and_drop/draggable.styles.ts diff --git a/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap b/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap index 5057e393180..c6750731c94 100644 --- a/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap +++ b/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap @@ -40,7 +40,7 @@ exports[`[React 18] EuiDraggable renders 1`] = ` >
{ + const { euiTheme } = euiThemeContext; + + return { + euiDraggable: css``, + spacing: { + none: css``, + s: css` + padding: ${euiTheme.size.xxs}; + `, + m: css` + padding: ${mathWithUnits(euiTheme.size.m, (x) => x / 2)}; + `, + l: css` + padding: ${euiTheme.size.m}; + `, + }, + }; +}; diff --git a/src/components/drag_and_drop/draggable.tsx b/src/components/drag_and_drop/draggable.tsx index fbb7724d5f8..ac3346b2d0f 100644 --- a/src/components/drag_and_drop/draggable.tsx +++ b/src/components/drag_and_drop/draggable.tsx @@ -15,17 +15,15 @@ import React, { } from 'react'; import { Draggable, DraggableProps } from '@hello-pangea/dnd'; import classNames from 'classnames'; + +import { useEuiTheme } from '../../services'; import { CommonProps } from '../common'; -import { EuiDroppableContext } from './droppable'; -const spacingToClassNameMap = { - none: null, - s: 'euiDraggable--s', - m: 'euiDraggable--m', - l: 'euiDraggable--l', -}; +import { EuiDroppableContext } from './droppable'; +import { euiDraggableStyles } from './draggable.styles'; -export type EuiDraggableSpacing = keyof typeof spacingToClassNameMap; +const SPACINGS = ['none', 's', 'm', 'l'] as const; +export type EuiDraggableSpacing = (typeof SPACINGS)[number]; export interface EuiDraggableProps extends CommonProps, @@ -71,6 +69,9 @@ export const EuiDraggable: FunctionComponent = ({ }) => { const { cloneItems } = useContext(EuiDroppableContext); + const euiTheme = useEuiTheme(); + const styles = euiDraggableStyles(euiTheme); + return ( = ({ {...rest} > {(provided, snapshot, rubric) => { + const cssStyles = [styles.euiDraggable, styles.spacing[spacing]]; + const classes = classNames( 'euiDraggable', { @@ -87,7 +90,6 @@ export const EuiDraggable: FunctionComponent = ({ 'euiDraggable--isDragging': snapshot.isDragging, 'euiDraggable--withoutDropAnimation': isRemovable, }, - spacingToClassNameMap[spacing], className ); const childClasses = classNames('euiDraggable__item', { @@ -108,6 +110,7 @@ export const EuiDraggable: FunctionComponent = ({ ref={provided.innerRef} data-test-subj={dataTestSubj} className={classes} + css={cssStyles} style={{ ...style, ...provided.draggableProps.style }} // We use [role="group"] instead of [role="button"] when we expect a nested // interactive element. Screen readers will cue users that this is a container From 4a3af3d127c79c87e6945945aa2d30202881ffc6 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 13 Sep 2023 17:07:08 -0700 Subject: [PATCH 03/17] [EuiDraggable] Convert more styles to Emotion - remove more modifier classes - [syntax nit] destructure `snapshot` for more readable code --- src/components/drag_and_drop/_draggable.scss | 15 --------------- .../drag_and_drop/draggable.styles.ts | 15 ++++++++++++++- src/components/drag_and_drop/draggable.tsx | 19 ++++++++++++------- 3 files changed, 26 insertions(+), 23 deletions(-) diff --git a/src/components/drag_and_drop/_draggable.scss b/src/components/drag_and_drop/_draggable.scss index c184404c5e7..ff115a9340e 100644 --- a/src/components/drag_and_drop/_draggable.scss +++ b/src/components/drag_and_drop/_draggable.scss @@ -1,19 +1,4 @@ .euiDraggable { - &.euiDraggable--isDragging { - // Overriding inline styles on JS-inserted HTML elements - z-index: $euiZLevel9 !important; // stylelint-disable-line declaration-no-important - } - - &.euiDraggable--hasClone:not(.euiDraggable--isDragging) { - // Overriding inline styles on JS-inserted HTML elements - transform: none !important; // stylelint-disable-line declaration-no-important - } - - &.euiDraggable--withoutDropAnimation { - // Overriding inline styles on JS-inserted HTML elements - transition-duration: .001s !important; // stylelint-disable-line declaration-no-important - } - &:focus > .euiDraggable__item, &.euiDraggable--hasCustomDragHandle > .euiDraggable__item [data-react-beautiful-dnd-drag-handle]:focus { @include euiFocusRing; diff --git a/src/components/drag_and_drop/draggable.styles.ts b/src/components/drag_and_drop/draggable.styles.ts index 6ad6791f6d1..c3709e6fecb 100644 --- a/src/components/drag_and_drop/draggable.styles.ts +++ b/src/components/drag_and_drop/draggable.styles.ts @@ -15,7 +15,20 @@ export const euiDraggableStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme } = euiThemeContext; return { - euiDraggable: css``, + euiDraggable: css` + /* !importants in this file override inline styles on JS-inserted HTML elements */ + /* stylelint-disable declaration-no-important */ + `, + isDragging: css` + z-index: ${euiTheme.levels.toast} !important; + `, + hasClone: css` + transform: none !important; + `, + isRemovable: css` + /* Removes the drop animation */ + transition-duration: 0.001s !important; + `, spacing: { none: css``, s: css` diff --git a/src/components/drag_and_drop/draggable.tsx b/src/components/drag_and_drop/draggable.tsx index ac3346b2d0f..1356e737f3b 100644 --- a/src/components/drag_and_drop/draggable.tsx +++ b/src/components/drag_and_drop/draggable.tsx @@ -80,23 +80,28 @@ export const EuiDraggable: FunctionComponent = ({ {...rest} > {(provided, snapshot, rubric) => { - const cssStyles = [styles.euiDraggable, styles.spacing[spacing]]; + const { isDragging, isDropAnimating } = snapshot; + + const cssStyles = [ + styles.euiDraggable, + cloneItems && !isDragging && styles.hasClone, + isDragging && styles.isDragging, + isRemovable && styles.isRemovable, + styles.spacing[spacing], + ]; const classes = classNames( 'euiDraggable', { - 'euiDraggable--hasClone': cloneItems, 'euiDraggable--hasCustomDragHandle': customDragHandle, - 'euiDraggable--isDragging': snapshot.isDragging, - 'euiDraggable--withoutDropAnimation': isRemovable, }, className ); const childClasses = classNames('euiDraggable__item', { 'euiDraggable__item--hasCustomDragHandle': customDragHandle, 'euiDraggable__item--isDisabled': isDragDisabled, - 'euiDraggable__item--isDragging': snapshot.isDragging, - 'euiDraggable__item--isDropAnimating': snapshot.isDropAnimating, + 'euiDraggable__item--isDragging': isDragging, + 'euiDraggable__item--isDropAnimating': isDropAnimating, }); const DraggableElement: ReactElement = typeof children === 'function' @@ -135,7 +140,7 @@ export const EuiDraggable: FunctionComponent = ({ ), })}
- {cloneItems && snapshot.isDragging && ( + {cloneItems && isDragging && (
{DraggableElement}
From 538a8525d82a7e0f5734a57876b3f8f2d12774bc Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 13 Sep 2023 17:12:58 -0700 Subject: [PATCH 04/17] [EuiDraggable] Convert child `__item` styles to Emotion - no theme tokens, so can be a static obj + remove 4 year old TODO that has never been added and probably isn't needed at this point --- .../__snapshots__/draggable.test.tsx.snap | 2 +- src/components/drag_and_drop/_draggable.scss | 14 -------------- src/components/drag_and_drop/draggable.styles.ts | 7 +++++++ src/components/drag_and_drop/draggable.tsx | 11 +++++++---- 4 files changed, 15 insertions(+), 19 deletions(-) diff --git a/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap b/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap index c6750731c94..b2c2fa1139c 100644 --- a/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap +++ b/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap @@ -51,7 +51,7 @@ exports[`[React 18] EuiDraggable renders 1`] = ` tabindex="0" >
Hello
diff --git a/src/components/drag_and_drop/_draggable.scss b/src/components/drag_and_drop/_draggable.scss index ff115a9340e..ad3eff01b36 100644 --- a/src/components/drag_and_drop/_draggable.scss +++ b/src/components/drag_and_drop/_draggable.scss @@ -3,18 +3,4 @@ &.euiDraggable--hasCustomDragHandle > .euiDraggable__item [data-react-beautiful-dnd-drag-handle]:focus { @include euiFocusRing; } - - .euiDraggable__item { - &.euiDraggable__item--isDisabled { - cursor: not-allowed; - } - - &.euiDraggable__item--isDragging { - // TODO: Resolve below - // Commenting this out for now, - // I'm thinking about adding an optional prop to auto-add these styles versus always having them - // @include euiBottomShadow; - // @include euiFocusRing; - } - } } diff --git a/src/components/drag_and_drop/draggable.styles.ts b/src/components/drag_and_drop/draggable.styles.ts index c3709e6fecb..03235362247 100644 --- a/src/components/drag_and_drop/draggable.styles.ts +++ b/src/components/drag_and_drop/draggable.styles.ts @@ -43,3 +43,10 @@ export const euiDraggableStyles = (euiThemeContext: UseEuiTheme) => { }, }; }; + +export const euiDraggableItemStyles = { + euiDraggable__item: css``, + disabled: css` + cursor: not-allowed; + `, +}; diff --git a/src/components/drag_and_drop/draggable.tsx b/src/components/drag_and_drop/draggable.tsx index 1356e737f3b..35073ed3830 100644 --- a/src/components/drag_and_drop/draggable.tsx +++ b/src/components/drag_and_drop/draggable.tsx @@ -10,17 +10,16 @@ import React, { CSSProperties, FunctionComponent, ReactElement, - cloneElement, useContext, } from 'react'; import { Draggable, DraggableProps } from '@hello-pangea/dnd'; import classNames from 'classnames'; -import { useEuiTheme } from '../../services'; +import { useEuiTheme, cloneElementWithCss } from '../../services'; import { CommonProps } from '../common'; import { EuiDroppableContext } from './droppable'; -import { euiDraggableStyles } from './draggable.styles'; +import { euiDraggableStyles, euiDraggableItemStyles } from './draggable.styles'; const SPACINGS = ['none', 's', 'm', 'l'] as const; export type EuiDraggableSpacing = (typeof SPACINGS)[number]; @@ -133,11 +132,15 @@ export const EuiDraggable: FunctionComponent = ({ : provided.dragHandleProps?.tabIndex } > - {cloneElement(DraggableElement, { + {cloneElementWithCss(DraggableElement, { className: classNames( DraggableElement.props.className, childClasses ), + css: [ + euiDraggableItemStyles.euiDraggable__item, + isDragDisabled && euiDraggableItemStyles.disabled, + ], })} {cloneItems && isDragging && ( From 9f88fab8b5332bb9aace7c186e4220ba0cc36dd5 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 13 Sep 2023 17:47:05 -0700 Subject: [PATCH 05/17] [EuiDraggable] Convert broken focus styles `euiFocusRing` mixin doesn't work because of `:focus-visible` prefer just an auto outline to match prod behavior, the outline is just more focused on the child item not sure what the custom drag handle CSS is for, drag handle focus outlines work fine as-is --- src/components/drag_and_drop/_draggable.scss | 6 ------ src/components/drag_and_drop/draggable.styles.ts | 8 ++++++++ 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/drag_and_drop/_draggable.scss b/src/components/drag_and_drop/_draggable.scss index ad3eff01b36..e69de29bb2d 100644 --- a/src/components/drag_and_drop/_draggable.scss +++ b/src/components/drag_and_drop/_draggable.scss @@ -1,6 +0,0 @@ -.euiDraggable { - &:focus > .euiDraggable__item, - &.euiDraggable--hasCustomDragHandle > .euiDraggable__item [data-react-beautiful-dnd-drag-handle]:focus { - @include euiFocusRing; - } -} diff --git a/src/components/drag_and_drop/draggable.styles.ts b/src/components/drag_and_drop/draggable.styles.ts index 03235362247..94f6af6a732 100644 --- a/src/components/drag_and_drop/draggable.styles.ts +++ b/src/components/drag_and_drop/draggable.styles.ts @@ -16,6 +16,14 @@ export const euiDraggableStyles = (euiThemeContext: UseEuiTheme) => { return { euiDraggable: css` + &:focus { + outline: none; + + & > .euiDraggable__item { + outline: auto; + } + } + /* !importants in this file override inline styles on JS-inserted HTML elements */ /* stylelint-disable declaration-no-important */ `, From bf756a7032de35a00f2b513afd417533cf70bb5f Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 13 Sep 2023 18:00:26 -0700 Subject: [PATCH 06/17] [EuiDraggable] Misc cleanup/fixes - Remove all unused modifier classes (based on Kibana usage) - Fix cloned items missing Emotion styles - Fix missing React 17 snapshot updates --- .../__snapshots__/draggable.test.tsx.snap | 4 ++-- src/components/drag_and_drop/draggable.tsx | 20 +++++++------------ 2 files changed, 9 insertions(+), 15 deletions(-) diff --git a/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap b/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap index b2c2fa1139c..7974647f606 100644 --- a/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap +++ b/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap @@ -9,7 +9,7 @@ exports[`[React 17] EuiDraggable renders 1`] = ` >
Hello
diff --git a/src/components/drag_and_drop/draggable.tsx b/src/components/drag_and_drop/draggable.tsx index 35073ed3830..94daf779430 100644 --- a/src/components/drag_and_drop/draggable.tsx +++ b/src/components/drag_and_drop/draggable.tsx @@ -79,7 +79,7 @@ export const EuiDraggable: FunctionComponent = ({ {...rest} > {(provided, snapshot, rubric) => { - const { isDragging, isDropAnimating } = snapshot; + const { isDragging } = snapshot; const cssStyles = [ styles.euiDraggable, @@ -89,18 +89,9 @@ export const EuiDraggable: FunctionComponent = ({ styles.spacing[spacing], ]; - const classes = classNames( - 'euiDraggable', - { - 'euiDraggable--hasCustomDragHandle': customDragHandle, - }, - className - ); + const classes = classNames('euiDraggable', className); const childClasses = classNames('euiDraggable__item', { - 'euiDraggable__item--hasCustomDragHandle': customDragHandle, - 'euiDraggable__item--isDisabled': isDragDisabled, - 'euiDraggable__item--isDragging': isDragging, - 'euiDraggable__item--isDropAnimating': isDropAnimating, + 'euiDraggable__item-isDisabled': isDragDisabled, }); const DraggableElement: ReactElement = typeof children === 'function' @@ -144,7 +135,10 @@ export const EuiDraggable: FunctionComponent = ({ })}
{cloneItems && isDragging && ( -
+
{DraggableElement}
)} From 4c3ab491c959e153d550aa86adb918eb710baaa1 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 13 Sep 2023 18:18:21 -0700 Subject: [PATCH 07/17] [EuiDroppable] Convert spacing to Emotion - DRY out with EuiDraggable spacing + switch `none` to a null to match EuiPanel padding styles (reduces rendered classNames) + remove exported types, not really being used --- .../__snapshots__/draggable.test.tsx.snap | 8 ++--- .../__snapshots__/droppable.test.tsx.snap | 12 +++---- .../drag_and_drop/draggable.styles.ts | 15 ++------ src/components/drag_and_drop/draggable.tsx | 7 ++-- .../drag_and_drop/droppable.styles.ts | 34 +++++++++++++++++++ src/components/drag_and_drop/droppable.tsx | 23 +++++++------ 6 files changed, 61 insertions(+), 38 deletions(-) create mode 100644 src/components/drag_and_drop/droppable.styles.ts diff --git a/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap b/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap index 7974647f606..1d08a7d39b3 100644 --- a/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap +++ b/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap @@ -2,14 +2,14 @@ exports[`[React 17] EuiDraggable renders 1`] = `
{ const { euiTheme } = euiThemeContext; @@ -37,18 +37,7 @@ export const euiDraggableStyles = (euiThemeContext: UseEuiTheme) => { /* Removes the drop animation */ transition-duration: 0.001s !important; `, - spacing: { - none: css``, - s: css` - padding: ${euiTheme.size.xxs}; - `, - m: css` - padding: ${mathWithUnits(euiTheme.size.m, (x) => x / 2)}; - `, - l: css` - padding: ${euiTheme.size.m}; - `, - }, + spacing: sharedSpacingPadding(euiThemeContext), }; }; diff --git a/src/components/drag_and_drop/draggable.tsx b/src/components/drag_and_drop/draggable.tsx index 94daf779430..a9fb66dacc5 100644 --- a/src/components/drag_and_drop/draggable.tsx +++ b/src/components/drag_and_drop/draggable.tsx @@ -18,12 +18,9 @@ import classNames from 'classnames'; import { useEuiTheme, cloneElementWithCss } from '../../services'; import { CommonProps } from '../common'; -import { EuiDroppableContext } from './droppable'; +import { EuiDroppableContext, SPACINGS } from './droppable'; import { euiDraggableStyles, euiDraggableItemStyles } from './draggable.styles'; -const SPACINGS = ['none', 's', 'm', 'l'] as const; -export type EuiDraggableSpacing = (typeof SPACINGS)[number]; - export interface EuiDraggableProps extends CommonProps, Omit { @@ -48,7 +45,7 @@ export interface EuiDraggableProps /** * Adds padding to the draggable item */ - spacing?: EuiDraggableSpacing; + spacing?: (typeof SPACINGS)[number]; style?: CSSProperties; } diff --git a/src/components/drag_and_drop/droppable.styles.ts b/src/components/drag_and_drop/droppable.styles.ts new file mode 100644 index 00000000000..5d15e66e756 --- /dev/null +++ b/src/components/drag_and_drop/droppable.styles.ts @@ -0,0 +1,34 @@ +/* + * 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 euiDroppableStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + + return { + euiDroppable: css``, + spacing: sharedSpacingPadding(euiThemeContext), + }; +}; + +// Droppable and draggable components both have the same shared spacing/padding values +export const sharedSpacingPadding = ({ euiTheme }: UseEuiTheme) => ({ + none: null, + s: css` + padding: ${euiTheme.size.xxs}; + `, + m: css` + padding: ${euiTheme.size.xs}; + `, + l: css` + padding: ${euiTheme.size.s}; + `, +}); diff --git a/src/components/drag_and_drop/droppable.tsx b/src/components/drag_and_drop/droppable.tsx index 735dc01f26b..e6865c8bad0 100644 --- a/src/components/drag_and_drop/droppable.tsx +++ b/src/components/drag_and_drop/droppable.tsx @@ -14,17 +14,14 @@ import React, { } from 'react'; import { Droppable, DroppableProps } from '@hello-pangea/dnd'; import classNames from 'classnames'; + +import { useEuiTheme } from '../../services'; import { CommonProps } from '../common'; -import { EuiDragDropContextContext } from './drag_drop_context'; -const spacingToClassNameMap = { - none: null, - s: 'euiDroppable--s', - m: 'euiDroppable--m', - l: 'euiDroppable--l', -}; +import { EuiDragDropContextContext } from './drag_drop_context'; +import { euiDroppableStyles } from './droppable.styles'; -export type EuiDroppableSpacing = keyof typeof spacingToClassNameMap; +export const SPACINGS = ['none', 's', 'm', 'l'] as const; export interface EuiDroppableProps extends CommonProps, @@ -42,7 +39,7 @@ export interface EuiDroppableProps /** * Adds padding to the droppable area */ - spacing?: EuiDroppableSpacing; + spacing?: (typeof SPACINGS)[number]; /** * Adds an EuiPanel style to the droppable area */ @@ -74,6 +71,10 @@ export const EuiDroppable: FunctionComponent = ({ }) => { const { isDraggingType } = useContext(EuiDragDropContextContext); const dropIsDisabled: boolean = cloneDraggables ? true : isDropDisabled; + + const euiTheme = useEuiTheme(); + const styles = euiDroppableStyles(euiTheme); + return ( = ({ {...rest} > {(provided, snapshot) => { + const cssStyles = [styles.euiDroppable, styles.spacing[spacing]]; + const classes = classNames( 'euiDroppable', { @@ -93,7 +96,6 @@ export const EuiDroppable: FunctionComponent = ({ 'euiDroppable--grow': grow, 'euiDroppable--noGrow': !grow, }, - spacingToClassNameMap[spacing], className ); const placeholderClasses = classNames('euiDroppable__placeholder', { @@ -110,6 +112,7 @@ export const EuiDroppable: FunctionComponent = ({ style={style} data-test-subj={dataTestSubj} className={classes} + css={cssStyles} > Date: Wed, 13 Sep 2023 18:23:51 -0700 Subject: [PATCH 08/17] [EuiDroppable] Convert more Emotion styles --- .../__snapshots__/draggable.test.tsx.snap | 4 +-- .../__snapshots__/droppable.test.tsx.snap | 12 ++++----- src/components/drag_and_drop/_droppable.scss | 25 ------------------- .../drag_and_drop/droppable.styles.ts | 23 +++++++++++++++-- src/components/drag_and_drop/droppable.tsx | 14 +++++++---- 5 files changed, 38 insertions(+), 40 deletions(-) diff --git a/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap b/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap index 1d08a7d39b3..0f2f50cae82 100644 --- a/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap +++ b/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap @@ -2,7 +2,7 @@ exports[`[React 17] EuiDraggable renders 1`] = `
{ const { euiTheme } = euiThemeContext; + const droppableColor = euiTheme.colors.success; + return { - euiDroppable: css``, + euiDroppable: css` + ${euiCanAnimate} { + transition: background-color ${euiTheme.animation.slow} ease; + } + `, + isDragging: css` + background-color: ${transparentize(droppableColor, 0.1)}; + `, + isDraggingOver: css` + background-color: ${transparentize(droppableColor, 0.25)}; + `, + grow: css` + flex-grow: 1; + `, + noGrow: css` + flex-grow: 0; + `, spacing: sharedSpacingPadding(euiThemeContext), }; }; diff --git a/src/components/drag_and_drop/droppable.tsx b/src/components/drag_and_drop/droppable.tsx index e6865c8bad0..b21e0806153 100644 --- a/src/components/drag_and_drop/droppable.tsx +++ b/src/components/drag_and_drop/droppable.tsx @@ -84,17 +84,21 @@ export const EuiDroppable: FunctionComponent = ({ {...rest} > {(provided, snapshot) => { - const cssStyles = [styles.euiDroppable, styles.spacing[spacing]]; + const { isDraggingOver } = snapshot; + + const cssStyles = [ + styles.euiDroppable, + isDraggingType === type && !dropIsDisabled && styles.isDragging, + isDraggingOver && styles.isDraggingOver, + grow ? styles.grow : styles.noGrow, + styles.spacing[spacing], + ]; const classes = classNames( 'euiDroppable', { 'euiDroppable--isDisabled': dropIsDisabled, - 'euiDroppable--isDraggingOver': snapshot.isDraggingOver, - 'euiDroppable--isDraggingType': isDraggingType === type, 'euiDroppable--withPanel': withPanel, - 'euiDroppable--grow': grow, - 'euiDroppable--noGrow': !grow, }, className ); From 62c6f277c220fae06f51a7bd79978f1c1e73c048 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 13 Sep 2023 18:37:22 -0700 Subject: [PATCH 09/17] [EuiDroppable] Convert conditional hidden placeholder logic to JS/attribute --- src/components/drag_and_drop/_droppable.scss | 8 -------- src/components/drag_and_drop/droppable.tsx | 7 +++---- 2 files changed, 3 insertions(+), 12 deletions(-) diff --git a/src/components/drag_and_drop/_droppable.scss b/src/components/drag_and_drop/_droppable.scss index 26f282b1795..4102a457148 100644 --- a/src/components/drag_and_drop/_droppable.scss +++ b/src/components/drag_and_drop/_droppable.scss @@ -1,11 +1,3 @@ -.euiDroppable { - .euiDroppable__placeholder { - &.euiDroppable__placeholder--isHidden { - // Overriding inline styles on JS-inserted HTML elements - display: none !important; // stylelint-disable-line declaration-no-important - } - } -} @include euiPanel($selector: '.euiDroppable--withPanel'); diff --git a/src/components/drag_and_drop/droppable.tsx b/src/components/drag_and_drop/droppable.tsx index b21e0806153..fb63bd5b164 100644 --- a/src/components/drag_and_drop/droppable.tsx +++ b/src/components/drag_and_drop/droppable.tsx @@ -102,9 +102,6 @@ export const EuiDroppable: FunctionComponent = ({ }, className ); - const placeholderClasses = classNames('euiDroppable__placeholder', { - 'euiDroppable__placeholder--isHidden': cloneDraggables, - }); const DroppableElement = typeof children === 'function' ? children(provided, snapshot) @@ -125,7 +122,9 @@ export const EuiDroppable: FunctionComponent = ({ > {DroppableElement} -
{provided.placeholder}
+
); }} From b30ddb1a28116968a324254e72ba040e307bd86c Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 13 Sep 2023 18:53:09 -0700 Subject: [PATCH 10/17] [EuiDroppable] Convert `euiPanel` CSS to use the component directly --- src/components/drag_and_drop/_droppable.scss | 7 ------ src/components/drag_and_drop/droppable.tsx | 23 ++++++++++++++------ 2 files changed, 16 insertions(+), 14 deletions(-) diff --git a/src/components/drag_and_drop/_droppable.scss b/src/components/drag_and_drop/_droppable.scss index 4102a457148..e69de29bb2d 100644 --- a/src/components/drag_and_drop/_droppable.scss +++ b/src/components/drag_and_drop/_droppable.scss @@ -1,7 +0,0 @@ - -@include euiPanel($selector: '.euiDroppable--withPanel'); - -.euiDroppable--withPanel { - @include euiBottomShadowMedium; - border-radius: $euiBorderRadius; -} diff --git a/src/components/drag_and_drop/droppable.tsx b/src/components/drag_and_drop/droppable.tsx index fb63bd5b164..3c3889e6238 100644 --- a/src/components/drag_and_drop/droppable.tsx +++ b/src/components/drag_and_drop/droppable.tsx @@ -17,6 +17,7 @@ import classNames from 'classnames'; import { useEuiTheme } from '../../services'; import { CommonProps } from '../common'; +import { EuiPanel } from '../panel'; import { EuiDragDropContextContext } from './drag_drop_context'; import { euiDroppableStyles } from './droppable.styles'; @@ -86,6 +87,15 @@ export const EuiDroppable: FunctionComponent = ({ {(provided, snapshot) => { const { isDraggingOver } = snapshot; + const PanelOrDiv = withPanel ? EuiPanel : 'div'; + const panelOrDivProps = withPanel + ? { + panelRef: provided.innerRef, + hasShadow: true, + paddingSize: 'none' as const, + } + : { ref: provided.innerRef }; + const cssStyles = [ styles.euiDroppable, isDraggingType === type && !dropIsDisabled && styles.isDragging, @@ -96,20 +106,19 @@ export const EuiDroppable: FunctionComponent = ({ const classes = classNames( 'euiDroppable', - { - 'euiDroppable--isDisabled': dropIsDisabled, - 'euiDroppable--withPanel': withPanel, - }, + { 'euiDroppable--isDisabled': dropIsDisabled }, className ); + const DroppableElement = typeof children === 'function' ? children(provided, snapshot) : children; + return ( -
= ({ -
+ ); }} From 533a4c26105c14296fd5cc44828162660ed4c7b1 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 13 Sep 2023 18:53:33 -0700 Subject: [PATCH 11/17] Delete Sass files --- src/components/drag_and_drop/_draggable.scss | 0 src/components/drag_and_drop/_droppable.scss | 0 src/components/drag_and_drop/_index.scss | 3 --- src/components/drag_and_drop/_variables.scss | 0 src/components/index.scss | 1 - 5 files changed, 4 deletions(-) delete mode 100644 src/components/drag_and_drop/_draggable.scss delete mode 100644 src/components/drag_and_drop/_droppable.scss delete mode 100644 src/components/drag_and_drop/_index.scss delete mode 100644 src/components/drag_and_drop/_variables.scss diff --git a/src/components/drag_and_drop/_draggable.scss b/src/components/drag_and_drop/_draggable.scss deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/src/components/drag_and_drop/_droppable.scss b/src/components/drag_and_drop/_droppable.scss deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/src/components/drag_and_drop/_index.scss b/src/components/drag_and_drop/_index.scss deleted file mode 100644 index e3ae587b279..00000000000 --- a/src/components/drag_and_drop/_index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'variables'; -@import 'draggable'; -@import 'droppable'; diff --git a/src/components/drag_and_drop/_variables.scss b/src/components/drag_and_drop/_variables.scss deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/src/components/index.scss b/src/components/index.scss index a381f8cdea8..e916bfccef7 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -6,7 +6,6 @@ @import 'control_bar/index'; @import 'date_picker/index'; @import 'datagrid/index'; -@import 'drag_and_drop/index'; @import 'empty_prompt/index'; @import 'form/index'; @import 'markdown_editor/index'; From c940dce7b56a809c13df98a342ff0aae6b7a5fe3 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 13 Sep 2023 19:21:04 -0700 Subject: [PATCH 12/17] [EuiDroppable] Tests - convert all tests to RTL - add shouldRenderCustomStyles tests - switch modifier class to non BEM to indicate state vs styles --- .../__snapshots__/droppable.test.tsx.snap | 148 +++++++++-------- .../drag_and_drop/droppable.test.tsx | 155 ++++++------------ src/components/drag_and_drop/droppable.tsx | 2 +- 3 files changed, 130 insertions(+), 175 deletions(-) diff --git a/src/components/drag_and_drop/__snapshots__/droppable.test.tsx.snap b/src/components/drag_and_drop/__snapshots__/droppable.test.tsx.snap index 1b022c50de1..5fec44c8567 100644 --- a/src/components/drag_and_drop/__snapshots__/droppable.test.tsx.snap +++ b/src/components/drag_and_drop/__snapshots__/droppable.test.tsx.snap @@ -1,89 +1,93 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`[React 17] EuiDroppable can be given ReactElement children 1`] = ` -
-
+exports[`[React 17] EuiDroppable renders 1`] = ` +
-
-`; - -exports[`[React 17] EuiDroppable can be given multiple ReactElement children 1`] = ` -
-
-
-
-
-`; - -exports[`[React 17] EuiDroppable is rendered 1`] = ` -
-
+
+
+
+
+
+
-
+ + `; -exports[`[React 18] EuiDroppable can be given ReactElement children 1`] = ` -
-
+exports[`[React 18] EuiDroppable renders 1`] = ` +
-
-`; - -exports[`[React 18] EuiDroppable can be given multiple ReactElement children 1`] = ` -
-
-
-
-
-`; - -exports[`[React 18] EuiDroppable is rendered 1`] = ` -
-
+
+
+
+
+
+
-
+ + `; diff --git a/src/components/drag_and_drop/droppable.test.tsx b/src/components/drag_and_drop/droppable.test.tsx index 6fee1e123b7..71fabfa6056 100644 --- a/src/components/drag_and_drop/droppable.test.tsx +++ b/src/components/drag_and_drop/droppable.test.tsx @@ -7,140 +7,91 @@ */ import React from 'react'; -import { mount, ReactWrapper } from 'enzyme'; import { resetServerContext } from '@hello-pangea/dnd'; - -import { findTestSubject, requiredProps } from '../../test'; +import { render } from '../../test/rtl'; +import { requiredProps } from '../../test'; import { + shouldRenderCustomStyles, invokeOnReactVersion, describeByReactVersion, } from '../../test/internal'; -import { EuiDragDropContext, EuiDroppable } from './'; -import { EuiDroppableContext } from './droppable'; - -function snapshotDragDropContext(component: ReactWrapper) { - // Get the Portal's sibling and return its html - const renderedHtml = component.html(); - const container = document.createElement('div'); - container.innerHTML = renderedHtml; - return container.firstChild; -} +import { EuiDragDropContext } from './drag_drop_context'; +import { EuiDroppable, EuiDroppableContext } from './droppable'; describeByReactVersion('EuiDroppable', () => { + const requiredContextProps = { onDragEnd: () => {} }; + afterEach(() => { // Resetting DND server context is only required in older versions of React invokeOnReactVersion(['16', '17'], resetServerContext); }); - test('is rendered', () => { - const handler = jest.fn(); - jest.mock('react', () => { - const react = jest.requireActual('react'); - return { - ...react, - useLayoutEffect: react.useEffect, - }; - }); - const component = mount( - - {() =>
} + shouldRenderCustomStyles( + {() =>
}, + { wrapper: EuiDragDropContext } + ); + + it('renders', () => { + const { baseElement } = render( + + + {() =>
} + ); - expect(snapshotDragDropContext(component)).toMatchSnapshot(); + expect(baseElement).toMatchSnapshot(); }); - test('can be given ReactElement children', () => { - const handler = jest.fn(); - jest.mock('react', () => { - const react = jest.requireActual('react'); - return { - ...react, - useLayoutEffect: react.useEffect, - }; - }); - const component = mount( - + it('can be given ReactElement children', () => { + const { getByTestSubject } = render( + -
+
); - expect(snapshotDragDropContext(component)).toMatchSnapshot(); + expect(getByTestSubject('reactChildren')).toBeInTheDocument(); }); - test('can be given multiple ReactElement children', () => { - const handler = jest.fn(); - jest.mock('react', () => { - const react = jest.requireActual('react'); - return { - ...react, - useLayoutEffect: react.useEffect, - }; - }); - - const component = mount( - + it('can be given multiple ReactElement children', () => { + const { getByTestSubject } = render( + -
-
-
+
+
+
); - expect(snapshotDragDropContext(component)).toMatchSnapshot(); + expect(getByTestSubject('A')).toBeInTheDocument(); + expect(getByTestSubject('B')).toBeInTheDocument(); + expect(getByTestSubject('C')).toBeInTheDocument(); }); - describe('custom behavior', () => { - describe('cloneDraggables', () => { - jest.mock('react', () => { - const react = jest.requireActual('react'); - return { - ...react, - useLayoutEffect: react.useEffect, - }; - }); - - test('sets `cloneItems` on proprietary context', () => { - const handler = jest.fn(); - const component = mount( - - - - {({ cloneItems }) => ( -
- {cloneItems ? 'true' : 'false'} -
- )} - - - - ); - - expect(findTestSubject(component, 'child').text()).toBe('true'); - }); - - test('sets `isDropDisabled`', () => { - const handler = jest.fn(); - const component = mount( - - - - {({ cloneItems }) => ( -
- {cloneItems ? 'true' : 'false'} -
- )} - - - - ); - - expect(component.find('.euiDroppable--isDisabled').length).toBe(1); - }); + describe('cloneDraggables', () => { + it('sets `cloneItems` and `isDropDisabled` on proprietary context', () => { + const { container, getByTestSubject } = render( + + + + {({ cloneItems }) => ( +
+ {cloneItems ? 'true' : 'false'} +
+ )} + + + + ); + + expect(getByTestSubject('child')).toHaveTextContent('true'); + expect( + container.querySelector('.euiDroppable-isDisabled') + ).toBeInTheDocument(); }); }); }); diff --git a/src/components/drag_and_drop/droppable.tsx b/src/components/drag_and_drop/droppable.tsx index 3c3889e6238..a836cd05e47 100644 --- a/src/components/drag_and_drop/droppable.tsx +++ b/src/components/drag_and_drop/droppable.tsx @@ -106,7 +106,7 @@ export const EuiDroppable: FunctionComponent = ({ const classes = classNames( 'euiDroppable', - { 'euiDroppable--isDisabled': dropIsDisabled }, + { 'euiDroppable-isDisabled': dropIsDisabled }, className ); From dd887ab8fe981767c5ff44cee4de492ccb48fc49 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 13 Sep 2023 19:37:15 -0700 Subject: [PATCH 13/17] [EuiDraggable] Tests - add `shouldRenderCustomStyles` test - DRY out test context wrapper logic - fixed `...requiredProps` logic - switch from screen usage to destructured APIs --- .../__snapshots__/draggable.test.tsx.snap | 24 ++-- .../drag_and_drop/draggable.test.tsx | 118 +++++++++--------- 2 files changed, 74 insertions(+), 68 deletions(-) diff --git a/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap b/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap index 0f2f50cae82..9784c6be25d 100644 --- a/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap +++ b/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap @@ -3,18 +3,18 @@ exports[`[React 17] EuiDraggable renders 1`] = `
{ - it('renders', () => { - const handler = jest.fn(); + const TestContextWrapper = ({ children }: { children: any }) => ( + {}}> + {children} + + ); + + shouldRenderCustomStyles( + + {() =>
Hello
} + , + { wrapper: TestContextWrapper } + ); + it('renders', () => { const { container } = render( - - - - {() =>
Hello
} - - - + + + {() =>
Hello
} + + ); - expect(screen.getByTestSubject('draggable')).toBeVisible(); expect(container.firstChild).toMatchSnapshot(); }); it('renders with render prop children', () => { - const handler = jest.fn(); - - render( - - - - {() =>
Hello
} - - - + const { getByTestSubject } = render( + + + {() =>
Hello
} + + ); - expect(screen.getByText('Hello')).toBeVisible(); + expect(getByTestSubject('draggable')).toHaveTextContent('Hello'); }); it('renders with react element children', () => { - const handler = jest.fn(); - - render( - - - -
Hello
- - - + const { getByTestSubject } = render( + + +
Hello
+ + ); - expect(screen.getByText('Hello')).toBeVisible(); + expect(getByTestSubject('draggable')).toHaveTextContent('Hello'); }); it('should render with role="group" and no tabIndex when hasInteractiveChildren is true', () => { - const handler = jest.fn(); - - const doRender = (hasInteractiveChildren: boolean) => - render( - - - -
Hello
- - - - ); + const Test = ({ + hasInteractiveChildren, + }: { + hasInteractiveChildren: boolean; + }) => ( + + +
Hello
+ + + ); - doRender(false); - expect(screen.queryByRole('group')).toBeNull(); + const { queryByRole, rerender } = render( + + ); + expect(queryByRole('group')).toBeNull(); - doRender(true); - expect(screen.getByRole('group')).toBeVisible(); - expect(screen.getByRole('group')).not.toHaveAttribute('tabindex', 0); + rerender(); + expect(queryByRole('group')).toBeVisible(); + expect(queryByRole('group')).not.toHaveAttribute('tabindex', 0); }); }); From 0c85e137f46e13360bf188ce537852a35e62541d Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 13 Sep 2023 19:42:59 -0700 Subject: [PATCH 14/17] [EuiDragDropContext] Convert from Enzyme to RTL - remove unnecessary/unused jest mock --- .../drag_drop_context.test.tsx.snap | 2 +- .../drag_and_drop/drag_drop_context.test.tsx | 67 +++++++------------ 2 files changed, 25 insertions(+), 44 deletions(-) diff --git a/src/components/drag_and_drop/__snapshots__/drag_drop_context.test.tsx.snap b/src/components/drag_and_drop/__snapshots__/drag_drop_context.test.tsx.snap index 0cebb4a6dc4..1514a4db265 100644 --- a/src/components/drag_and_drop/__snapshots__/drag_drop_context.test.tsx.snap +++ b/src/components/drag_and_drop/__snapshots__/drag_drop_context.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`EuiDragDropContext is rendered 1`] = `
`; +exports[`EuiDragDropContext renders 1`] = `
`; diff --git a/src/components/drag_and_drop/drag_drop_context.test.tsx b/src/components/drag_and_drop/drag_drop_context.test.tsx index 6768442df9f..5e800d8f726 100644 --- a/src/components/drag_and_drop/drag_drop_context.test.tsx +++ b/src/components/drag_and_drop/drag_drop_context.test.tsx @@ -7,59 +7,40 @@ */ import React from 'react'; -import { mount, ReactWrapper } from 'enzyme'; - -import { findTestSubject } from '../../test'; +import { render } from '../../test/rtl'; import { requiredProps } from '../../test/required_props'; -import { EuiDragDropContext } from './'; -import { EuiDragDropContextContext } from './drag_drop_context'; - -function snapshotDragDropContext(component: ReactWrapper) { - // Get the Portal's sibling and return its html - const renderedHtml = component.html(); - const container = document.createElement('div'); - container.innerHTML = renderedHtml; - return container.firstChild; -} +import { + EuiDragDropContext, + EuiDragDropContextContext, +} from './drag_drop_context'; describe('EuiDragDropContext', () => { - test('is rendered', () => { - const handler = jest.fn(); - const component = mount( - + it('renders', () => { + const { container } = render( + {}} {...requiredProps}>
); - expect(snapshotDragDropContext(component)).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); - describe('custom behavior', () => { - describe('isDraggingType', () => { - test('is set on proprietary context', () => { - jest.mock('react', () => { - const react = jest.requireActual('react'); - return { - ...react, - useLayoutEffect: react.useEffect, - }; - }); - const handler = jest.fn(); - const component = mount( - - - {(value) => ( -
- {value.hasOwnProperty('isDraggingType') ? 'true' : 'false'} -
- )} - - - ); - - expect(findTestSubject(component, 'child').text()).toBe('true'); - }); + describe('isDraggingType', () => { + test('is set on proprietary context', () => { + const { getByTestSubject } = render( + {}}> + + {(value) => ( +
+ {value.hasOwnProperty('isDraggingType') ? 'true' : 'false'} +
+ )} + + + ); + + expect(getByTestSubject('child')).toHaveTextContent('true'); }); }); }); From e6e8ce2154eca861e9a2aa159473099d099c780e Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 13 Sep 2023 19:48:30 -0700 Subject: [PATCH 15/17] Update downstream snapshots + fix `false` className by using `classNames()` util --- .../column_selector.test.tsx.snap | 20 +++++++++---------- .../column_sorting.test.tsx.snap | 12 +++++------ .../column_sorting_draggable.test.tsx.snap | 8 ++++---- .../datagrid/controls/column_selector.tsx | 17 +++++++++------- .../controls/column_sorting_draggable.tsx | 8 +++++--- 5 files changed, 35 insertions(+), 30 deletions(-) diff --git a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap index 7bcf150efde..e1e8d65ead3 100644 --- a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap @@ -80,20 +80,20 @@ exports[`useDataGridColumnSelector columnSelector [React 17] renders a toolbar b class="euiDataGrid__controlScroll" >

- + <> {filteredColumns.map((id, index) => ( {(provided, state) => (

))} - +
diff --git a/src/components/datagrid/controls/column_sorting_draggable.tsx b/src/components/datagrid/controls/column_sorting_draggable.tsx index a26b08b00c0..2fa7f1264b3 100644 --- a/src/components/datagrid/controls/column_sorting_draggable.tsx +++ b/src/components/datagrid/controls/column_sorting_draggable.tsx @@ -7,6 +7,8 @@ */ import React, { FunctionComponent } from 'react'; +import classNames from 'classnames'; + import { EuiScreenReaderOnly } from '../../accessibility'; import { EuiButtonGroup, EuiButtonIcon } from '../../button'; import { EuiDraggable } from '../../drag_and_drop'; @@ -78,9 +80,9 @@ export const EuiDataGridColumnSortingDraggable: FunctionComponent< > {(provided, state) => (

From 1793dd4a14c62df50330c6cf90e4e14a8b2a12b9 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 13 Sep 2023 19:50:26 -0700 Subject: [PATCH 16/17] Fix failing datagrid test - extra selector specifier needed due to new Emotion wrapper around drag/drop components --- src/components/datagrid/data_grid.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx index 6310d80483c..c6c48e0fa77 100644 --- a/src/components/datagrid/data_grid.test.tsx +++ b/src/components/datagrid/data_grid.test.tsx @@ -1813,7 +1813,7 @@ describe('EuiDataGrid', () => { let popover = openColumnSelector(component); expect( popover - .find('.euiDataGridColumnSelector__item') + .find('div.euiDataGridColumnSelector__item') .map((item) => item.text()) ).toEqual(['A', 'B']); closeColumnSelector(component); @@ -1831,7 +1831,7 @@ describe('EuiDataGrid', () => { popover = openColumnSelector(component); expect( popover - .find('.euiDataGridColumnSelector__item') + .find('div.euiDataGridColumnSelector__item') .map((item) => item.text()) ).toEqual(['A', 'C']); closeColumnSelector(component); From 283792a35e67b30a67662539d6a76d2284c6da50 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 13 Sep 2023 19:53:54 -0700 Subject: [PATCH 17/17] changelog --- upcoming_changelogs/7187.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 upcoming_changelogs/7187.md diff --git a/upcoming_changelogs/7187.md b/upcoming_changelogs/7187.md new file mode 100644 index 00000000000..369e9205a09 --- /dev/null +++ b/upcoming_changelogs/7187.md @@ -0,0 +1,3 @@ +**CSS-in-JS conversions** + +- Converted `EuiDroppable` and `EuiDraggable` to Emotion; Removed `$euiDragAndDropSpacing` Sass variables