[EuiPopover] Add `hasDragDrop` prop for popovers with draggable contexts #6329

cee-chen · 2022-10-27T17:19:51Z

Summary

I recommend following along by commit.

Paraphrasing my comment from the above issue as to why this prop/fix is needed:

you always need to set transform: none !important; on any popover panels that contain drag & drop. This is because drag & drop does not work inside transformed elements. There is an example of our own EuiDataGrid using this workaround here:

eui/src/components/datagrid/controls/_data_grid_toolbar.scss

Lines 55 to 61 in 7412e4f

.euiDataGrid__controlPopoverWithDragDrop {

// Hack because the fixed positions of drag and drop don't work inside of transformed elements

// sass-lint:disable-block no-important

transform: none !important;

transition: none !important;

margin-top: -$euiSizeS;

}

When EuiPopover was converted to Emotion, it started to use filter to create a drop shadow effect instead of box-shadow, causing our EuiDataGrid popover drag & drop to stop working. Unfortunately filter appears to create a stacking context that causes drag & drop to misbehave 💀

I went with adding a hasDragDrop prop to EuiPopover to solve this issue. Almost all the workarounds/unsets are very specific to EuiPopover (we don't appear to use filter for any other components, and the reason why we use filter is to to get a drop shadow that encompasses the popover arrow) - EuiModal for example does not use either transforms or filter for its shadow. So I didn't think the workaround should be something exported by EuiDragDrop.

Footnote for tracking: Another issue where filter has caused shenanigans: #6163

Before

After

QA

Go to https://eui.elastic.co/pr_6329/#/tabular-content/data-grid and confirm dragging and dropping in the columns and sort fields toolbar popovers works correctly

General checklist

- [ ] Props have proper autodocs and playground toggles
- [ ] Added documentation
~~- [ ] Checked Code Sandbox works for any docs examples~~
- [ ] Added or updated jest and cypress tests
~~- [ ] Checked for breaking changes and labeled appropriately~~
~~- [ ] Checked for accessibility including keyboard-only and screenreader modes~~
~~- [ ] Updated the Figma library counterpart~~

Checked in both light and dark modes
Checked in mobile
Checked in Chrome, Safari, Edge, and Firefox
A changelog entry exists and is marked appropriately

- which affords / accounts for styling for popovers that contain drag/droppable contexts

- due to using box-shadow instead of filter - we now need to add a custom drop shadow onto the arrows + add a CSS className hook to the arrow div

kibanamachine · 2022-10-27T17:50:09Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6329/

elizabetdev

Thanks, @constancecchen for fixing this issue.

Tested in Chrome, Safari, Edge, and Firefox. I also looked at the code.

LGTM! 🎉

cee-chen · 2022-10-28T16:58:07Z

Thanks Elizabet! 🎉

## Summary `eui@67.1.8` ⏩ `eui@70.2.2` ⚠️ Note: This upgrade contains breaking changes to `EuiFlexGroup` and `EuiFlexGrid`, primarily around switching margins and negative margins to `gap`. Please do a quick QA pass of your app to scan for any issues. We're happy to help resolve minor fixes, or potentially follow up after PR merges. You can find us over in #eui! ## [`70.2.4`](https://github.com/elastic/eui/tree/v70.2.4) **Bug fixes** - Fixed visual bug in nested `EuiFlexGroup`s, where the parent `EuiFlexGroup` is responsive but a child `EuiFlexGroup` is not ([#6381](elastic/eui#6381)) ## [`70.2.3`](https://github.com/elastic/eui/tree/v70.2.3) **Bug fixes** - Fixed incorrect margins in `EuiSuperDatePicker` caused by `EuiFlex` CSS gap change ([#6380](elastic/eui#6380)) ## [`70.2.2`](https://github.com/elastic/eui/tree/v70.2.2) - `EuiButton` now accepts `minWidth={false}` ([#6373](elastic/eui#6373)) **Bug fixes** - `EuiButton` no longer outputs unnecessary inline styles for `minWidth={0}` or `minWidth={false}` ([#6373](elastic/eui#6373)) - `EuiFacetButton` no longer reports type issues when passing props accepted by `EuiButton` ([#6373](elastic/eui#6373)) - Fixed the shadow sizes of `.eui-yScrollWithShadows` and `.eui-xScrollWithShadows` ([#6374](elastic/eui#6374)) ## [`70.2.1`](https://github.com/elastic/eui/tree/v70.2.1) **Bug fixes** - Re-fixed `EuiPageSection` not correctly merging `contentProps.css` ([#6365](elastic/eui#6365)) - Fixed `EuiTab` not defaulting to size `m` ([#6366](elastic/eui#6366)) ## [`70.2.0`](https://github.com/elastic/eui/tree/v70.2.0) - Added a keyboard shortcuts popover to `EuiDataGrid`'s toolbar. This can be visually hidden via `toolbarVisibility.showKeyboardShortcuts`, but will always remain accessible to keyboard and screen reader users. ([#6036](elastic/eui#6036)) - `EuiScreenReaderOnly`'s `showOnFocus` prop now also shows on focus within its children ([#6036](elastic/eui#6036)) - Added `onFocus` prop callback to `EuiSuperDatePicker` ([#6320](elastic/eui#6320)) **Bug fixes** - Fixed `EuiSelectable` to ensure the full options list is re-displayed when the search bar is controlled and cleared using `searchProps.value` ([#6317](elastic/eui#6317)) - Fixed incorrect padding on `xl`-sized `EuiTabs` ([#6336](elastic/eui#6336)) - Fixed `EuiCard` not correctly merging `css` on its child `icon`s ([#6341](elastic/eui#6341)) - Fixed `EuiCheckableCard` not setting `css` on the correct DOM node ([#6341](elastic/eui#6341)) - Fixed a webkit rendering issue with `EuiModal`s containing `EuiBasicTable`s tall enough to scroll ([#6343](elastic/eui#6343)) - Fixed bug in `to_initials` that truncates custom initials ([#6346](elastic/eui#6346)) - Fix bug in `EuiCard` where layout breaks when `horizontal` and `selectable` are both passed ([#6348](elastic/eui#6348)) ## [`70.1.0`](https://github.com/elastic/eui/tree/v70.1.0) - Added the `hint` prop to the `<EuiSearchBar />`. This prop lets the consumer render a hint below the search bar that will be displayed on focus. ([#6319](elastic/eui#6319)) - Added the `hasDragDrop` prop to `EuiPopover`. Use this prop if your popover contains `EuiDragDropContext`. ([#6329](elastic/eui#6329)) **Bug fixes** - Fixed `EuiButton`'s cursor style when the button is disabled ([#6323](elastic/eui#6323)) - Fixed `EuiPageTemplate` not recognizing child `EuiPageSidebar`s/`EuiPageTemplate.Sidebar`s with `css` props ([#6324](elastic/eui#6324)) - Fixed `EuiBetaBadge` to always respect its `anchorProps` values, including when there is no tooltip content ([#6326](elastic/eui#6326)) - Temporarily patched `EuiModal` to not cause scroll-jumping issues on modal open ([#6327](elastic/eui#6327)) - Fixed buggy drag & drop behavior within `EuiDataGrid`'s columns & sorting toolbar popovers ([#6329](elastic/eui#6329)) - Fixed `EuiButton` not correctly passing `textProps` for children inside fragments or i18n components ([#6332](elastic/eui#6332)) - Fixed `EuiButton` not correctly respecting `minWidth={0}` ([#6332](elastic/eui#6332)) **CSS-in-JS conversions** - Converted `EuiTabs` to Emotion ([#6311](elastic/eui#6311)) ## [`70.0.0`](https://github.com/elastic/eui/tree/v70.0.0) - Added the `enabled` option to the `<EuiInMemoryTable />` `executeQueryOptions` prop. This option prevents the Query from being executed when controlled by the consumer. ([#6284](elastic/eui#6284)) **Bug fixes** - Fixed `EuiOverlayMask` to set a `[data-relative-to-header=above|below]` attribute to replace the `--aboveHeader` and `--belowHeader` classNames removed in its Emotion conversion ([#6289](elastic/eui#6289)) - Fixed `EuiHeader` CSS using removed `EuiOverlayMask` class modifiers ([#6293](elastic/eui#6293)) - Fixed `EuiToolTip` not respecting reduced motion preferences ([#6295](elastic/eui#6295)) - Fixed a bug with `EuiTour` where passing any `panelProps` would cause the beacon to disappear ([#6298](elastic/eui#6298)) **Breaking changes** - `@emotion/css` is now a required peer dependency, alongside `@emotion/react` ([#6288](elastic/eui#6288)) - `@emotion/cache` is no longer required peer dependency, although your project must still use it if setting custom cache/injection locations ([#6288](elastic/eui#6288)) **CSS-in-JS conversions** - Converted `EuiCode` and `EuiCodeBlock` to Emotion; Removed `euiCodeSyntaxTokens` Sass mixin and `$euiCodeBlockPaddingModifiers`; ([#6263](elastic/eui#6263)) - Converted `EuiResizableContainer` and `EuiResizablePanel` to Emotion ([#6287](elastic/eui#6287)) ## [`69.0.0`](https://github.com/elastic/eui/tree/v69.0.0) - Added support for `fullWidth` prop on EuiForm, which will be the default for all rows/controls within ([#6229](elastic/eui#6229)) - Added support for `onResizeStart` and `onResizeEnd` callbacks to `EuiResizableContainer` ([#6236](elastic/eui#6236)) - Added optional case sensitive option matching to `EuiComboBox` with the `isCaseSensitive` prop ([#6268](elastic/eui#6268)) - `EuiFlexItem` now supports `grow={0}` ([#6270](elastic/eui#6270)) - Added the `alignItems` prop to `EuiFlexGrid` ([#6281](elastic/eui#6281)) - Added `filter`, `filterExclude`, `filterIgnore`, `filterInclude`, `indexTemporary`, `infinity`, `sortAscending`, and `sortDescending` glyphs to `EuiIcon` ([#6282](elastic/eui#6282)) **Bug fixes** - Fixed `EuiTextProps` to show the `color` type option `inherit` as default ([#6267](elastic/eui#6267)) - `EuiFlexGroup` now correctly respects `gutterSize` when responsive ([#6270](elastic/eui#6270)) - Fixed the last breadcrumb in `EuiBreadcrumbs`'s `breadcrumbs` array not respecting `truncate` overrides ([#6280](elastic/eui#6280)) **Breaking changes** - `EuiFlexGrid` no longer supports `columns={0}`. Use `EuiFlexGroup` instead for normal flex display ([#6270](elastic/eui#6270)) - `EuiFlexGrid` now uses modern `display: grid` CSS ([#6270](elastic/eui#6270)) - `EuiFlexGroup`, `EuiFlexGrid`, and `EuiFlexItem` now use modern `gap` CSS instead of margins and negative margins ([#6270](elastic/eui#6270)) - `EuiFlexGroup` no longer applies responsive styles to `column` or `columnReverse` directions ([#6270](elastic/eui#6270)) **CSS-in-JS conversions** - Converted `EuiFlexGroup`, `EuiFlexGrid`, and `EuiFlexItem` to Emotion ([#6270](elastic/eui#6270)) ## [`68.0.0`](https://github.com/elastic/eui/tree/v68.0.0) - Added `beta` glyph to `EuiIcon` ([#6250](elastic/eui#6250)) - Added `launch` and `spaces` glyphs to `EuiIcon` ([#6260](elastic/eui#6260)) - Added the `fallbackDestination` prop to `EuiSkipLink`, which accepts a string of query selectors to fall back to if the `destinationId` does not have a valid target. Defaults to `main` ([#6261](elastic/eui#6261)) - `EuiSkipLink` is now always an `a` tag to ensure that it is always placed within screen reader link menus. ([#6261](elastic/eui#6261)) **Bug fixes** - Fixed `EuiSuperDatePicker` not correctly merging passed `className`s ([#6253](elastic/eui#6253)) - Fixed `EuiColorStops` not correctly merging in passed `data-test-subj`s, `style`s, or `...rest` ([#6255](elastic/eui#6255)) - Fixed `EuiResizablePanel` incorrectly passing `style` to the wrapper instead of the panel. Use `wrapperProps.style` to pass styles to the wrapper. ([#6255](elastic/eui#6255)) - Fixed custom `onClick`s passed to `EuiSkipLink` overriding `overrideLinkBehavior` ([#6261](elastic/eui#6261)) **Breaking changes** - Removed `inherit` and `ghost` color from `EuiListGroupItem` ([#6207](elastic/eui#6207)) - Changed default color to `text` instead of `inherit` ([#6207](elastic/eui#6207)) **CSS-in-JS conversions** - Converted `EuiListGroup` and `EuiListGroupItem` to Emotion; Removed `$euiListGroupGutterTypes`, `$euiListGroupItemColorTypes` and `$euiListGroupItemSizeTypes`; ([#6207](elastic/eui#6207)) - Converted `EuiBadgeGroup` to Emotion ([#6258](elastic/eui#6258)) - Converted `EuiBetaBadge` to Emotion ([#6258](elastic/eui#6258)) - Converted `EuiNotificationBadge` to Emotion ([#6258](elastic/eui#6258)) Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

…xts (elastic#6329) * Add `hasDragDrop` prop and styles to EuiPopover - which affords / accounts for styling for popovers that contain drag/droppable contexts * Fix EuiDataGrid popovers with drag & drop * Fix popover arrows no longer being visible - due to using box-shadow instead of filter - we now need to add a custom drop shadow onto the arrows + add a CSS className hook to the arrow div * Changelog

cee-chen added 4 commits October 27, 2022 10:06

Add hasDragDrop prop and styles to EuiPopover

dd5a9ce

- which affords / accounts for styling for popovers that contain drag/droppable contexts

Fix EuiDataGrid popovers with drag & drop

28e8ec2

Fix popover arrows no longer being visible

214d835

- due to using box-shadow instead of filter - we now need to add a custom drop shadow onto the arrows + add a CSS className hook to the arrow div

Changelog

ce94df3

cee-chen requested a review from elizabetdev October 27, 2022 17:27

cee-chen marked this pull request as ready for review October 27, 2022 17:35

cee-chen added the bug label Oct 27, 2022

cee-chen changed the title ~~[EuiDataGrid] Fix toolbar column drag & drop; [EuiPopover] Add hasDragDrop prop to afford for popovers with draggable contexts~~ [EuiPopover] Add hasDragDrop prop to afford for popovers with draggable contexts Oct 27, 2022

cee-chen changed the title ~~[EuiPopover] Add hasDragDrop prop to afford for popovers with draggable contexts~~ [EuiPopover] Add hasDragDrop prop for popovers with draggable contexts Oct 27, 2022

cee-chen mentioned this pull request Oct 27, 2022

[EuiDragDrop][EuiPopover] Draggable is way out of the context when start dragging in popover #6314

Closed

elizabetdev approved these changes Oct 28, 2022

View reviewed changes

cee-chen merged commit dd580b1 into elastic:main Oct 28, 2022

cee-chen deleted the popover-drag-drop branch October 28, 2022 16:58

chandlerprall mentioned this pull request Nov 1, 2022

[Backport] Elastic Stack 8.6 #6335

Closed

8 tasks

breehall mentioned this pull request Nov 1, 2022

Bumping EUI to version 67.1.8 elastic/kibana#141279

Merged

cee-chen mentioned this pull request Nov 8, 2022

Upgrade EUI to v70.2.4 elastic/kibana#144845

Merged

cee-chen mentioned this pull request Nov 28, 2022

[EUI Data Grid] [Bug] Column tab Popup doesn't show up completely under full screen results of Live queries history #5691

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiPopover] Add `hasDragDrop` prop for popovers with draggable contexts #6329

[EuiPopover] Add `hasDragDrop` prop for popovers with draggable contexts #6329

cee-chen commented Oct 27, 2022 •

edited

Loading

kibanamachine commented Oct 27, 2022

elizabetdev left a comment

cee-chen commented Oct 28, 2022

	.euiDataGrid__controlPopoverWithDragDrop {
	// Hack because the fixed positions of drag and drop don't work inside of transformed elements
	// sass-lint:disable-block no-important
	transform: none !important;
	transition: none !important;
	margin-top: -$euiSizeS;
	}

[EuiPopover] Add hasDragDrop prop for popovers with draggable contexts #6329

[EuiPopover] Add hasDragDrop prop for popovers with draggable contexts #6329

Conversation

cee-chen commented Oct 27, 2022 • edited Loading

Summary

Before

After

QA

General checklist

kibanamachine commented Oct 27, 2022

elizabetdev left a comment

Choose a reason for hiding this comment

cee-chen commented Oct 28, 2022

[EuiPopover] Add `hasDragDrop` prop for popovers with draggable contexts #6329

[EuiPopover] Add `hasDragDrop` prop for popovers with draggable contexts #6329

cee-chen commented Oct 27, 2022 •

edited

Loading