diff --git a/CHANGELOG.md b/CHANGELOG.md index ea6d65e6ddc..d8ef1a4f0e7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,9 @@ ## [`main`](https://github.com/elastic/eui/tree/main) -No public interface changes since `47.0.0`. +**Bug fixes** + +- Fixed `EuiDataGrid` to correctly remove the cell expansion action button when a column sets both `cellActions` and `isExpandable` to false ([#5592](https://github.com/elastic/eui/pull/5592)) +- Fixed `EuiDataGrid` re-playing the cell actions animation when hovering over an already-focused cell ([#5592](https://github.com/elastic/eui/pull/5592)) ## [`47.0.0`](https://github.com/elastic/eui/tree/v47.0.0) diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index 9ab28257c3f..63b11d90019 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -38,31 +38,21 @@ // Only add the transition effect on hover, so that it is instantaneous on focus // Long delays on hover to mitigate the accordion effect &:hover { - .euiDataGridRowCell__expandButtonIcon { - animation-duration: $euiAnimSpeedExtraFast; - animation-name: euiDataGridCellButtonSlideIn; - animation-iteration-count: 1; - animation-delay: $euiAnimSpeedNormal; - animation-fill-mode: forwards; - } - .euiDataGridRowCell__actionButtonIcon { animation-duration: $euiAnimSpeedExtraFast; - animation-name: euiDataGridCellButtonSlideIn; + animation-name: euiDataGridCellActionsSlideIn; animation-iteration-count: 1; animation-delay: $euiAnimSpeedNormal; animation-fill-mode: forwards; } } - &:not(:hover), + // On focus, directly show action buttons (without animation) + &:focus, + // Prevent the animation from flickering after cell popover close when focus is restored the expansion button + &:focus-within, + // Always make the cell actions visible when the cell popover is open &.euiDataGridRowCell--open { - .euiDataGridRowCell__expandButtonIcon { - animation: none; - margin-left: $euiDataGridCellPaddingM; - width: $euiSizeM; - } - .euiDataGridRowCell__actionButtonIcon { animation: none; margin-left: $euiDataGridCellPaddingM; @@ -70,17 +60,8 @@ } } - // on focus, directly show action buttons (without animation), but still slide in the open popover button - &:focus { - .euiDataGridRowCell__actionButtonIcon { - margin-left: $euiDataGridCellPaddingM; - width: $euiSizeM; - } - } - // if a cell is not hovered nor focused nor open via popover, don't show buttons in general &:not(:hover):not(:focus):not(.euiDataGridRowCell--open) { - .euiDataGridRowCell__expandButtonIcon, .euiDataGridRowCell__actionButtonIcon { display: none; } @@ -159,9 +140,7 @@ } // Cell actions -// Could probably be more precisely named than '__expandButton', since there can be multiple actions/buttons -// TODO: Consider renaming this when working on https://github.com/elastic/eui/issues/5132 -.euiDataGridRowCell__expandButton { +.euiDataGridRowCell__expandActions { display: flex; } @include euiDataGridRowCellActions($definedHeight: false) { @@ -175,29 +154,17 @@ padding: $euiDataGridCellPaddingM 0; } -.euiDataGridRowCell__expandButtonIcon { +.euiDataGridRowCell__actionButtonIcon { height: $euiSizeM; border-radius: $euiBorderRadius / 2; width: 0; overflow: hidden; - transition: none; // Have to take out the generic transition so it is instaneous on focus + // Have to take out the generic transition so it is instaneous on focus + transition: none; + // Disable filled button box-shadows on legacy theme - they're unnecessary when this small in a datagrid box-shadow: none !important; // sass-lint:disable-line no-important - // Remove default .euiButtonIcon--fill border - // This way we don't need to animate the border that is inexistent in Amsterdam and unnecessary for a fill button + // Remove filled button borders on legacy theme - this way we don't need to animate the border border: none; - - &-isActive { - margin-left: $euiDataGridCellPaddingM; - width: $euiSizeM; - } -} - -.euiDataGridRowCell__actionButtonIcon { - height: $euiSizeM; - border-radius: $euiBorderRadius / 2; - width: 0; - overflow: hidden; - transition: none; // Have to take out the generic transition so it is instaneous on focus } // Row highlights @@ -279,7 +246,7 @@ } } -@keyframes euiDataGridCellButtonSlideIn { +@keyframes euiDataGridCellActionsSlideIn { from { margin-left: 0; width: 0; diff --git a/src/components/datagrid/_mixins.scss b/src/components/datagrid/_mixins.scss index 87f53255081..4fbaeb8b319 100644 --- a/src/components/datagrid/_mixins.scss +++ b/src/components/datagrid/_mixins.scss @@ -87,12 +87,12 @@ $euiDataGridStyles: ( @if $definedHeight { // Defined heights are cells with row heights of auto, lineCount, or a static height // that set the __contentByHeight class - .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandButton { + .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions { @content; } } @else { // Otherwise, an undefined height (single flex row) will set __expandContent - .euiDataGridRowCell__expandContent + .euiDataGridRowCell__expandButton { + .euiDataGridRowCell__expandContent + .euiDataGridRowCell__expandActions { @content; } } diff --git a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap index c8489a5a6ee..e3b836053c9 100644 --- a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap +++ b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap @@ -191,7 +191,7 @@ Array [ class="euiPopoverFooter" >