From a1c65949b8eb6ed77d5506d6410f1e2bbbe0800c Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Mon, 20 Nov 2023 17:52:36 +0100 Subject: [PATCH 1/6] Revert "[Discover] Remove sidebar item drag icon" This reverts commit 1d8ae3b612ddb6b4e946893e396f3d70a29c4932. # Conflicts: # packages/kbn-unified-field-list/src/containers/unified_field_list_sidebar/field_list_sidebar.scss --- .../field_item_button/field_item_button.scss | 21 ++++++++ .../field_list_item.tsx | 4 ++ .../field_list_item_handle.tsx | 49 +++++++++++++++++++ 3 files changed, 74 insertions(+) create mode 100644 packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item_handle.tsx diff --git a/packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.scss b/packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.scss index 70073c37ea31c..bce588615ec6a 100644 --- a/packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.scss +++ b/packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.scss @@ -70,3 +70,24 @@ background: lightOrDarkTheme(transparentize($euiColorMediumShade, .9), $euiColorEmptyShade); color: $euiColorDarkShade; } + +// A drag handle will appear only on item hover/focus +.unifiedFieldListItemButton--withDragHandle { + .kbnFieldButton__dragHandle { + margin-right: 0; + width: 0; + overflow: hidden; + transition: $euiAnimSpeedNormal ease-in-out; + transition-property: width, margin-right; + } + + &:hover, + &[class*='-isActive'], + .domDragDrop__keyboardHandler:focus + &, + &:focus-within { + .kbnFieldButton__dragHandle { + margin-right: $euiSizeS; + width: $euiSize; + } + } +} diff --git a/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx b/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx index 745d463b28386..0f7460475a21b 100644 --- a/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx +++ b/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx @@ -25,11 +25,14 @@ import { UnifiedFieldListItemStats, type UnifiedFieldListItemStatsProps, } from './field_list_item_stats'; +import { FieldListItemHandle } from './field_list_item_handle'; import type { UnifiedFieldListSidebarContainerStateService, AddFieldFilterHandler, } from '../../types'; +const DRAG_HANDLE = ; + interface GetCommonFieldItemButtonPropsParams { stateService: UnifiedFieldListSidebarContainerStateService; field: DataViewField; @@ -351,6 +354,7 @@ function UnifiedFieldListItemComponent({ isActive={infoIsOpen} flush={alwaysShowActionButton ? 'both' : undefined} shouldAlwaysShowAction={alwaysShowActionButton} + dragHandle={isDragDisabled ? undefined : DRAG_HANDLE} onClick={field.type !== '_source' ? togglePopover : undefined} {...getCommonFieldItemButtonProps({ stateService, diff --git a/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item_handle.tsx b/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item_handle.tsx new file mode 100644 index 0000000000000..e8eb5577b87e0 --- /dev/null +++ b/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item_handle.tsx @@ -0,0 +1,49 @@ +/* + * 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 React from 'react'; +import { EuiIcon } from '@elastic/eui'; +import { css } from '@emotion/react'; + +/** + * A temporary icon for the field list drag handle + * @constructor + */ +export const FieldListItemHandle: React.FC = () => { + // TODO: replace with a new Eui icon type once it's available and remove svg + return ( +
+ +
+ ); +}; + +const DragHandleIcon = () => ( + + + + + + + + + + +); From 4b31f9108bd2d66d311abcf39588bf90e34e98d9 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Mon, 20 Nov 2023 19:18:19 +0100 Subject: [PATCH 2/6] Update the icon --- packages/kbn-unified-field-list/index.ts | 1 + .../field_item_drag_handle.tsx | 26 ++++++++++ .../field_item_drag_handle/index.tsx | 9 ++++ .../field_list_item.tsx | 4 +- .../field_list_item_handle.tsx | 49 ------------------- .../public/datasources/common/field_item.tsx | 4 ++ 6 files changed, 42 insertions(+), 51 deletions(-) create mode 100644 packages/kbn-unified-field-list/src/components/field_item_drag_handle/field_item_drag_handle.tsx create mode 100644 packages/kbn-unified-field-list/src/components/field_item_drag_handle/index.tsx delete mode 100644 packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item_handle.tsx diff --git a/packages/kbn-unified-field-list/index.ts b/packages/kbn-unified-field-list/index.ts index fbcccb3c7630d..67004cc7918b8 100755 --- a/packages/kbn-unified-field-list/index.ts +++ b/packages/kbn-unified-field-list/index.ts @@ -10,6 +10,7 @@ export { FieldList, type FieldListProps } from './src/components/field_list'; export { FieldListGrouped, type FieldListGroupedProps } from './src/components/field_list_grouped'; export { FieldListFilters, type FieldListFiltersProps } from './src/components/field_list_filters'; export { FieldItemButton, type FieldItemButtonProps } from './src/components/field_item_button'; +export { FieldItemDragHandle } from './src/components/field_item_drag_handle'; export type { FieldTopValuesBucketProps, FieldTopValuesBucketParams, diff --git a/packages/kbn-unified-field-list/src/components/field_item_drag_handle/field_item_drag_handle.tsx b/packages/kbn-unified-field-list/src/components/field_item_drag_handle/field_item_drag_handle.tsx new file mode 100644 index 0000000000000..d0809758e5003 --- /dev/null +++ b/packages/kbn-unified-field-list/src/components/field_item_drag_handle/field_item_drag_handle.tsx @@ -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 React from 'react'; +import { EuiIcon } from '@elastic/eui'; +import { css } from '@emotion/react'; + +/** + * @constructor + */ +export const FieldItemDragHandle: React.FC = () => { + return ( +
+ +
+ ); +}; diff --git a/packages/kbn-unified-field-list/src/components/field_item_drag_handle/index.tsx b/packages/kbn-unified-field-list/src/components/field_item_drag_handle/index.tsx new file mode 100644 index 0000000000000..7e97397033765 --- /dev/null +++ b/packages/kbn-unified-field-list/src/components/field_item_drag_handle/index.tsx @@ -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 { FieldItemDragHandle } from './field_item_drag_handle'; diff --git a/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx b/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx index 0f7460475a21b..91dee263136b1 100644 --- a/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx +++ b/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx @@ -21,17 +21,17 @@ import { FieldPopoverFooter, type FieldPopoverFooterProps, } from '../../components/field_popover'; +import { FieldItemDragHandle } from '../../components/field_item_drag_handle'; import { UnifiedFieldListItemStats, type UnifiedFieldListItemStatsProps, } from './field_list_item_stats'; -import { FieldListItemHandle } from './field_list_item_handle'; import type { UnifiedFieldListSidebarContainerStateService, AddFieldFilterHandler, } from '../../types'; -const DRAG_HANDLE = ; +const DRAG_HANDLE = ; interface GetCommonFieldItemButtonPropsParams { stateService: UnifiedFieldListSidebarContainerStateService; diff --git a/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item_handle.tsx b/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item_handle.tsx deleted file mode 100644 index e8eb5577b87e0..0000000000000 --- a/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item_handle.tsx +++ /dev/null @@ -1,49 +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 React from 'react'; -import { EuiIcon } from '@elastic/eui'; -import { css } from '@emotion/react'; - -/** - * A temporary icon for the field list drag handle - * @constructor - */ -export const FieldListItemHandle: React.FC = () => { - // TODO: replace with a new Eui icon type once it's available and remove svg - return ( -
- -
- ); -}; - -const DragHandleIcon = () => ( - - - - - - - - - - -); diff --git a/x-pack/plugins/lens/public/datasources/common/field_item.tsx b/x-pack/plugins/lens/public/datasources/common/field_item.tsx index 483e0c8005f6f..009650286d54c 100644 --- a/x-pack/plugins/lens/public/datasources/common/field_item.tsx +++ b/x-pack/plugins/lens/public/datasources/common/field_item.tsx @@ -20,6 +20,7 @@ import { FieldPopoverHeader, FieldPopoverFooter, FieldItemButton, + FieldItemDragHandle, type GetCustomFieldType, } from '@kbn/unified-field-list'; import { DragDrop } from '@kbn/dom-drag-drop'; @@ -32,6 +33,8 @@ import { APP_ID, DOCUMENT_FIELD_NAME } from '../../../common/constants'; import { combineQueryAndFilters } from '../../app_plugin/show_underlying_data'; import { getFieldItemActions } from './get_field_item_actions'; +const DRAG_HANDLE = ; + type LensFieldListItem = IndexPatternField | DatatableColumn | DataViewField; function isTextBasedColumnField(field: LensFieldListItem): field is DatatableColumn { @@ -187,6 +190,7 @@ export function InnerFieldItem(props: FieldItemProps) { isEmpty: !exists, isActive: infoIsOpen, fieldSearchHighlight: highlight, + dragHandle: DRAG_HANDLE, onClick: togglePopover, buttonAddFieldToWorkspaceProps, onAddFieldToWorkspace, From 5cabc71f079da05ceb4bbd217152dd3b8e018267 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Mon, 4 Dec 2023 15:11:04 +0100 Subject: [PATCH 3/6] [Discover] Adjust styles --- packages/kbn-dom-drag-drop/src/drag_drop.tsx | 12 +++++++- .../kbn-dom-drag-drop/src/sass/drag_drop.scss | 5 +++- .../src/field_button/field_button.scss | 5 ++++ packages/kbn-unified-field-list/index.ts | 1 - .../field_item_button.test.tsx.snap | 6 +--- .../field_item_button/field_item_button.scss | 9 +++--- .../field_item_button.test.tsx | 2 +- .../field_item_button/field_item_button.tsx | 10 +++++-- .../field_item_drag_handle.tsx | 28 ++++++++++++++----- .../field_list_item.tsx | 6 ++-- .../public/datasources/common/field_item.tsx | 6 ++-- 11 files changed, 59 insertions(+), 31 deletions(-) diff --git a/packages/kbn-dom-drag-drop/src/drag_drop.tsx b/packages/kbn-dom-drag-drop/src/drag_drop.tsx index b20570ee6969c..638872a674bfb 100644 --- a/packages/kbn-dom-drag-drop/src/drag_drop.tsx +++ b/packages/kbn-dom-drag-drop/src/drag_drop.tsx @@ -118,6 +118,11 @@ interface BaseProps { * Extra drop targets by dropType */ getCustomDropTarget?: (dropType: DropType) => ReactElement | null; + + /** + * Pass `true` to disable default hover styles for draggable element + */ + disableDraggableHoverStyles?: boolean; } /** @@ -228,6 +233,7 @@ const DragInner = memo(function DragInner({ onDragEnd, extraKeyboardHandler, ariaDescribedBy, + disableDraggableHoverStyles, }: DragInnerProps) { const { keyboardMode, activeDropTarget, dropTargetsByOrder } = activeDraggingProps || {}; @@ -466,7 +472,9 @@ const DragInner = memo(function DragInner({ {React.cloneElement(children, { 'data-test-subj': dataTestSubj || dataTestSubjPrefix, - className: classNames(children.props.className, 'domDragDrop', 'domDragDrop-isDraggable'), + className: classNames(children.props.className, 'domDragDrop', 'domDragDrop-isDraggable', { + 'domDragDrop-isDraggableWithHover': !disableDraggableHoverStyles, + }), draggable: true, onDragEnd: dragEnd, onDragStart: dragStart, @@ -489,6 +497,7 @@ const DropsInner = memo(function DropsInner(props: DropsInnerProps) { isNotDroppable, dropTypes, order, + disableDraggableHoverStyles, getAdditionalClassesOnEnter, getAdditionalClassesOnDroppable, getCustomDropTarget, @@ -628,6 +637,7 @@ const DropsInner = memo(function DropsInner(props: DropsInnerProps) { 'domDragDrop', { 'domDragDrop-isDraggable': draggable, + 'domDragDrop-isDraggableWithHover': draggable && !disableDraggableHoverStyles, 'domDragDrop-isDroppable': !draggable, 'domDragDrop-isDropTarget': dropType, 'domDragDrop-isActiveDropTarget': dropType && isActiveDropTarget, diff --git a/packages/kbn-dom-drag-drop/src/sass/drag_drop.scss b/packages/kbn-dom-drag-drop/src/sass/drag_drop.scss index c26bb6c49b6cf..b998b41b5b7ab 100644 --- a/packages/kbn-dom-drag-drop/src/sass/drag_drop.scss +++ b/packages/kbn-dom-drag-drop/src/sass/drag_drop.scss @@ -25,7 +25,10 @@ // Draggable item .domDragDrop-isDraggable { @include mixinDomDraggable; - @include mixinDomDragDropHover; + + &.domDragDrop-isDraggableWithHover { + @include mixinDomDragDropHover; + } // Include a possible nested button like when using FieldButton & .kbnFieldButton__button, diff --git a/packages/kbn-react-field/src/field_button/field_button.scss b/packages/kbn-react-field/src/field_button/field_button.scss index 5fd87c38b930e..e392f56554129 100644 --- a/packages/kbn-react-field/src/field_button/field_button.scss +++ b/packages/kbn-react-field/src/field_button/field_button.scss @@ -49,6 +49,7 @@ .kbnFieldButton__dragHandle { margin-right: $euiSizeS; + height: $euiSizeXL; } .kbnFieldButton__fieldAction, @@ -72,6 +73,10 @@ .kbnFieldButton__dragHandle { line-height: $euiSizeL; } + + .kbnFieldButton__dragHandle { + height: $euiSizeL; + } } .kbnFieldButton--flushBoth { diff --git a/packages/kbn-unified-field-list/index.ts b/packages/kbn-unified-field-list/index.ts index 67004cc7918b8..fbcccb3c7630d 100755 --- a/packages/kbn-unified-field-list/index.ts +++ b/packages/kbn-unified-field-list/index.ts @@ -10,7 +10,6 @@ export { FieldList, type FieldListProps } from './src/components/field_list'; export { FieldListGrouped, type FieldListGroupedProps } from './src/components/field_list_grouped'; export { FieldListFilters, type FieldListFiltersProps } from './src/components/field_list_filters'; export { FieldItemButton, type FieldItemButtonProps } from './src/components/field_item_button'; -export { FieldItemDragHandle } from './src/components/field_item_drag_handle'; export type { FieldTopValuesBucketProps, FieldTopValuesBucketParams, diff --git a/packages/kbn-unified-field-list/src/components/field_item_button/__snapshots__/field_item_button.test.tsx.snap b/packages/kbn-unified-field-list/src/components/field_item_button/__snapshots__/field_item_button.test.tsx.snap index bac19af40c310..b9d75695fc564 100644 --- a/packages/kbn-unified-field-list/src/components/field_item_button/__snapshots__/field_item_button.test.tsx.snap +++ b/packages/kbn-unified-field-list/src/components/field_item_button/__snapshots__/field_item_button.test.tsx.snap @@ -236,11 +236,7 @@ exports[`UnifiedFieldList renders properly with a drag handl } className="unifiedFieldListItemButton unifiedFieldListItemButton--number unifiedFieldListItemButton--exists unifiedFieldListItemButton--withDragHandle custom" dataTestSubj="test-subj" - dragHandle={ - - dragHandle - - } + dragHandle={} fieldIcon={ ', () => { size="xs" className="custom" dataTestSubj="test-subj" - dragHandle={dragHandle} + withDragHandle field={bytesField} fieldSearchHighlight={undefined} isEmpty={false} diff --git a/packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.tsx b/packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.tsx index 45ae7c7111c51..edf337aa9132a 100644 --- a/packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.tsx +++ b/packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.tsx @@ -14,8 +14,11 @@ import { EuiButtonIcon, EuiButtonIconProps, EuiHighlight, EuiIcon, EuiToolTip } import type { DataViewField } from '@kbn/data-views-plugin/common'; import { FieldIcon, getFieldIconProps, getFieldSearchMatchingHighlight } from '@kbn/field-utils'; import { type FieldListItem, type GetCustomFieldType } from '../../types'; +import { FieldItemDragHandle } from '../field_item_drag_handle'; import './field_item_button.scss'; +const DRAG_HANDLE = ; + /** * Props of FieldItemButton component */ @@ -28,7 +31,7 @@ export interface FieldItemButtonProps { infoIcon?: FieldButtonProps['fieldInfoIcon']; className?: FieldButtonProps['className']; flush?: FieldButtonProps['flush']; - dragHandle?: FieldButtonProps['dragHandle']; + withDragHandle?: boolean; getCustomFieldType?: GetCustomFieldType; dataTestSubj?: string; size?: FieldButtonProps['size']; @@ -53,6 +56,7 @@ export interface FieldItemButtonProps { * @param dataTestSubj * @param size * @param onClick + * @param withDragHandle * @param shouldAlwaysShowAction * @param buttonAddFieldToWorkspaceProps * @param buttonRemoveFieldFromWorkspaceProps @@ -74,6 +78,7 @@ export function FieldItemButton({ dataTestSubj, size, onClick, + withDragHandle, shouldAlwaysShowAction, buttonAddFieldToWorkspaceProps, buttonRemoveFieldFromWorkspaceProps, @@ -104,7 +109,7 @@ export function FieldItemButton({ [`unifiedFieldListItemButton--${type}`]: type, [`unifiedFieldListItemButton--exists`]: !isEmpty, [`unifiedFieldListItemButton--missing`]: isEmpty, - [`unifiedFieldListItemButton--withDragHandle`]: Boolean(otherProps.dragHandle), + [`unifiedFieldListItemButton--withDragHandle`]: withDragHandle, }, className ); @@ -209,6 +214,7 @@ export function FieldItemButton({ fieldAction={fieldAction} fieldInfoIcon={conflictInfoIcon || infoIcon} onClick={onClick} + {...(withDragHandle ? { dragHandle: DRAG_HANDLE } : {})} {...otherProps} /> ); diff --git a/packages/kbn-unified-field-list/src/components/field_item_drag_handle/field_item_drag_handle.tsx b/packages/kbn-unified-field-list/src/components/field_item_drag_handle/field_item_drag_handle.tsx index d0809758e5003..1be1369f14ee8 100644 --- a/packages/kbn-unified-field-list/src/components/field_item_drag_handle/field_item_drag_handle.tsx +++ b/packages/kbn-unified-field-list/src/components/field_item_drag_handle/field_item_drag_handle.tsx @@ -7,20 +7,34 @@ */ import React from 'react'; -import { EuiIcon } from '@elastic/eui'; +import { EuiIcon, useEuiTheme, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { css } from '@emotion/react'; -/** - * @constructor - */ export const FieldItemDragHandle: React.FC = () => { + const { euiTheme } = useEuiTheme(); + return ( -
- -
+ + + + ); }; diff --git a/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx b/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx index 91dee263136b1..3a2b01019211c 100644 --- a/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx +++ b/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx @@ -21,7 +21,6 @@ import { FieldPopoverFooter, type FieldPopoverFooterProps, } from '../../components/field_popover'; -import { FieldItemDragHandle } from '../../components/field_item_drag_handle'; import { UnifiedFieldListItemStats, type UnifiedFieldListItemStatsProps, @@ -31,8 +30,6 @@ import type { AddFieldFilterHandler, } from '../../types'; -const DRAG_HANDLE = ; - interface GetCommonFieldItemButtonPropsParams { stateService: UnifiedFieldListSidebarContainerStateService; field: DataViewField; @@ -339,6 +336,7 @@ function UnifiedFieldListItemComponent({ ; - type LensFieldListItem = IndexPatternField | DatatableColumn | DataViewField; function isTextBasedColumnField(field: LensFieldListItem): field is DatatableColumn { @@ -186,11 +183,11 @@ export function InnerFieldItem(props: FieldItemProps) { }); const commonFieldItemButtonProps = { + withDragHandle: true, isSelected: false, // multiple selections are allowed isEmpty: !exists, isActive: infoIsOpen, fieldSearchHighlight: highlight, - dragHandle: DRAG_HANDLE, onClick: togglePopover, buttonAddFieldToWorkspaceProps, onAddFieldToWorkspace, @@ -212,6 +209,7 @@ export function InnerFieldItem(props: FieldItemProps) { button={ Date: Mon, 4 Dec 2023 15:30:11 +0100 Subject: [PATCH 4/6] [Discover] Revert some changes --- packages/kbn-dom-drag-drop/src/drag_drop.tsx | 12 +----------- packages/kbn-dom-drag-drop/src/sass/drag_drop.scss | 5 +---- .../field_item_button/field_item_button.scss | 4 ++++ .../unified_field_list_item/field_list_item.tsx | 1 - .../lens/public/datasources/common/field_item.tsx | 1 - 5 files changed, 6 insertions(+), 17 deletions(-) diff --git a/packages/kbn-dom-drag-drop/src/drag_drop.tsx b/packages/kbn-dom-drag-drop/src/drag_drop.tsx index 638872a674bfb..b20570ee6969c 100644 --- a/packages/kbn-dom-drag-drop/src/drag_drop.tsx +++ b/packages/kbn-dom-drag-drop/src/drag_drop.tsx @@ -118,11 +118,6 @@ interface BaseProps { * Extra drop targets by dropType */ getCustomDropTarget?: (dropType: DropType) => ReactElement | null; - - /** - * Pass `true` to disable default hover styles for draggable element - */ - disableDraggableHoverStyles?: boolean; } /** @@ -233,7 +228,6 @@ const DragInner = memo(function DragInner({ onDragEnd, extraKeyboardHandler, ariaDescribedBy, - disableDraggableHoverStyles, }: DragInnerProps) { const { keyboardMode, activeDropTarget, dropTargetsByOrder } = activeDraggingProps || {}; @@ -472,9 +466,7 @@ const DragInner = memo(function DragInner({ {React.cloneElement(children, { 'data-test-subj': dataTestSubj || dataTestSubjPrefix, - className: classNames(children.props.className, 'domDragDrop', 'domDragDrop-isDraggable', { - 'domDragDrop-isDraggableWithHover': !disableDraggableHoverStyles, - }), + className: classNames(children.props.className, 'domDragDrop', 'domDragDrop-isDraggable'), draggable: true, onDragEnd: dragEnd, onDragStart: dragStart, @@ -497,7 +489,6 @@ const DropsInner = memo(function DropsInner(props: DropsInnerProps) { isNotDroppable, dropTypes, order, - disableDraggableHoverStyles, getAdditionalClassesOnEnter, getAdditionalClassesOnDroppable, getCustomDropTarget, @@ -637,7 +628,6 @@ const DropsInner = memo(function DropsInner(props: DropsInnerProps) { 'domDragDrop', { 'domDragDrop-isDraggable': draggable, - 'domDragDrop-isDraggableWithHover': draggable && !disableDraggableHoverStyles, 'domDragDrop-isDroppable': !draggable, 'domDragDrop-isDropTarget': dropType, 'domDragDrop-isActiveDropTarget': dropType && isActiveDropTarget, diff --git a/packages/kbn-dom-drag-drop/src/sass/drag_drop.scss b/packages/kbn-dom-drag-drop/src/sass/drag_drop.scss index b998b41b5b7ab..c26bb6c49b6cf 100644 --- a/packages/kbn-dom-drag-drop/src/sass/drag_drop.scss +++ b/packages/kbn-dom-drag-drop/src/sass/drag_drop.scss @@ -25,10 +25,7 @@ // Draggable item .domDragDrop-isDraggable { @include mixinDomDraggable; - - &.domDragDrop-isDraggableWithHover { - @include mixinDomDragDropHover; - } + @include mixinDomDragDropHover; // Include a possible nested button like when using FieldButton & .kbnFieldButton__button, diff --git a/packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.scss b/packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.scss index 07dac8b2d8eec..effff6330dc22 100644 --- a/packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.scss +++ b/packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.scss @@ -89,4 +89,8 @@ width: $euiSize + $euiSizeS; // icon width plus right margin } } + + &:hover { + transform: none; + } } diff --git a/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx b/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx index 3a2b01019211c..0d3a41aac78e4 100644 --- a/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx +++ b/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx @@ -336,7 +336,6 @@ function UnifiedFieldListItemComponent({ Date: Mon, 4 Dec 2023 15:34:07 +0100 Subject: [PATCH 5/6] [Discover] Fix icon size --- .../field_item_drag_handle/field_item_drag_handle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/kbn-unified-field-list/src/components/field_item_drag_handle/field_item_drag_handle.tsx b/packages/kbn-unified-field-list/src/components/field_item_drag_handle/field_item_drag_handle.tsx index 1be1369f14ee8..ff599a398293f 100644 --- a/packages/kbn-unified-field-list/src/components/field_item_drag_handle/field_item_drag_handle.tsx +++ b/packages/kbn-unified-field-list/src/components/field_item_drag_handle/field_item_drag_handle.tsx @@ -33,7 +33,7 @@ export const FieldItemDragHandle: React.FC = () => { flex-shrink: 0; `} > - + ); From b0c5ac3ee4d34260940daff1b402e5132f3a9ee7 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Tue, 5 Dec 2023 09:43:42 +0100 Subject: [PATCH 6/6] Update packages/kbn-unified-field-list/src/components/field_item_drag_handle/field_item_drag_handle.tsx --- .../components/field_item_drag_handle/field_item_drag_handle.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/kbn-unified-field-list/src/components/field_item_drag_handle/field_item_drag_handle.tsx b/packages/kbn-unified-field-list/src/components/field_item_drag_handle/field_item_drag_handle.tsx index ff599a398293f..29ee850467ffb 100644 --- a/packages/kbn-unified-field-list/src/components/field_item_drag_handle/field_item_drag_handle.tsx +++ b/packages/kbn-unified-field-list/src/components/field_item_drag_handle/field_item_drag_handle.tsx @@ -18,7 +18,6 @@ export const FieldItemDragHandle: React.FC = () => { className="unifiedFieldListItemDragHandle" css={css` pointer-events: none; - flex-shrink: 0; margin-right: ${euiTheme.size.s}; width: ${euiTheme.size.base}; height: 100%;