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" >
{ ); component.setState({ enableInteractions: true }); - const getCellButtons = () => component.find('EuiDataGridCellButtons'); - expect(getCellButtons()).toHaveLength(1); + const getCellActions = () => component.find('EuiDataGridCellActions'); + expect(getCellActions()).toHaveLength(1); // Should handle opening the popover - (getCellButtons().prop('onExpandClick') as Function)(); + (getCellActions().prop('onExpandClick') as Function)(); expect(mockPopoverContext.openCellPopover).toHaveBeenCalled(); // Should handle closing the popover @@ -76,9 +76,9 @@ describe('EuiDataGridCell', () => { isExpandable: true, popoverContext: { ...mockPopoverContext, popoverIsOpen: true }, }); - (getCellButtons().prop('onExpandClick') as Function)(); + (getCellActions().prop('onExpandClick') as Function)(); expect(mockPopoverContext.closeCellPopover).toHaveBeenCalledTimes(1); - (getCellButtons().prop('closePopover') as Function)(); + (getCellActions().prop('closePopover') as Function)(); expect(mockPopoverContext.closeCellPopover).toHaveBeenCalledTimes(2); }); diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx index 7985ab91d61..eff79dc47f6 100644 --- a/src/components/datagrid/body/data_grid_cell.tsx +++ b/src/components/datagrid/body/data_grid_cell.tsx @@ -33,9 +33,9 @@ import { EuiDataGridCellValueProps, } from '../data_grid_types'; import { - EuiDataGridCellButtons, - EuiDataGridCellPopoverButtons, -} from './data_grid_cell_buttons'; + EuiDataGridCellActions, + EuiDataGridCellPopoverActions, +} from './data_grid_cell_actions'; import { IS_JEST_ENVIRONMENT } from '../../../test'; const EuiDataGridCellContent: FunctionComponent< @@ -465,7 +465,7 @@ export class EuiDataGridCell extends Component< isDetails={true} /> - ); - if (hasCellButtons) { - if (showCellButtons) { + if (hasCellActions) { + if (showCellActions) { innerContent = (
- { if (popoverIsOpen) { diff --git a/src/components/datagrid/body/data_grid_cell_buttons.test.tsx b/src/components/datagrid/body/data_grid_cell_actions.test.tsx similarity index 70% rename from src/components/datagrid/body/data_grid_cell_buttons.test.tsx rename to src/components/datagrid/body/data_grid_cell_actions.test.tsx index 7581742d35f..2e631714791 100644 --- a/src/components/datagrid/body/data_grid_cell_buttons.test.tsx +++ b/src/components/datagrid/body/data_grid_cell_actions.test.tsx @@ -10,13 +10,12 @@ import React from 'react'; import { shallow } from 'enzyme'; import { - EuiDataGridCellButtons, - EuiDataGridCellPopoverButtons, -} from './data_grid_cell_buttons'; + EuiDataGridCellActions, + EuiDataGridCellPopoverActions, +} from './data_grid_cell_actions'; -describe('EuiDataGridCellButtons', () => { +describe('EuiDataGridCellActions', () => { const requiredProps = { - popoverIsOpen: false, closePopover: jest.fn(), onExpandClick: jest.fn(), rowIndex: 0, @@ -24,16 +23,18 @@ describe('EuiDataGridCellButtons', () => { }; it('renders an expand button', () => { - const component = shallow(); + const component = shallow( + + ); expect(component).toMatchInlineSnapshot(`
@@ -44,7 +45,7 @@ describe('EuiDataGridCellButtons', () => { expect(button('expandButtonTitle')).toMatchInlineSnapshot(` { `); }); - it('renders column cell actions as `EuiButtonIcon`s', () => { + it('renders cell actions as `EuiButtonIcon`s', () => { const component = shallow( -
+
+ {[...additionalButtons, expandButton]} +
); }; -export const EuiDataGridCellPopoverButtons = ({ +export const EuiDataGridCellPopoverActions = ({ rowIndex, colIndex, column, @@ -111,15 +107,15 @@ export const EuiDataGridCellPopoverButtons = ({ return ( - + {column.cellActions.map( (Action: EuiDataGridColumnCellAction, idx: number) => { - const CellButtonElement = Action as JSXElementConstructor< + const ActionButtonElement = Action as JSXElementConstructor< EuiDataGridColumnCellActionProps >; return ( -