diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss index c4b4502b1ad..450b3ba9fe1 100644 --- a/src/components/datagrid/_data_grid_data_row.scss +++ b/src/components/datagrid/_data_grid_data_row.scss @@ -38,17 +38,9 @@ // 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; @@ -57,12 +49,6 @@ &:not(:hover), &.euiDataGridRowCell--open { - .euiDataGridRowCell__expandButtonIcon { - animation: none; - margin-left: $euiDataGridCellPaddingM; - width: $euiSizeM; - } - .euiDataGridRowCell__actionButtonIcon { animation: none; margin-left: $euiDataGridCellPaddingM; @@ -80,7 +66,6 @@ // 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; } @@ -173,23 +158,6 @@ padding: $euiDataGridCellPaddingM 0; } -.euiDataGridRowCell__expandButtonIcon { - 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 - 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 - border: none; - - &-isActive { - margin-left: $euiDataGridCellPaddingM; - width: $euiSizeM; - } -} - .euiDataGridRowCell__actionButtonIcon { height: $euiSizeM; border-radius: $euiBorderRadius / 2; @@ -277,7 +245,7 @@ } } -@keyframes euiDataGridCellButtonSlideIn { +@keyframes euiDataGridCellActionsSlideIn { from { margin-left: 0; width: 0; diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx index b638dc8b4ec..07ff143de0c 100644 --- a/src/components/datagrid/body/data_grid_cell.tsx +++ b/src/components/datagrid/body/data_grid_cell.tsx @@ -637,7 +637,6 @@ export class EuiDataGridCell extends Component< rowIndex={rowIndex} colIndex={colIndex} column={column} - popoverIsOpen={popoverIsOpen} closePopover={closeCellPopover} onExpandClick={() => { if (popoverIsOpen) { diff --git a/src/components/datagrid/body/data_grid_cell_actions.test.tsx b/src/components/datagrid/body/data_grid_cell_actions.test.tsx index e3c3720dd92..79f625f6453 100644 --- a/src/components/datagrid/body/data_grid_cell_actions.test.tsx +++ b/src/components/datagrid/body/data_grid_cell_actions.test.tsx @@ -16,7 +16,6 @@ import { describe('EuiDataGridCellActions', () => { const requiredProps = { - popoverIsOpen: false, closePopover: jest.fn(), onExpandClick: jest.fn(), rowIndex: 0, @@ -44,7 +43,7 @@ describe('EuiDataGridCellActions', () => { expect(button('expandButtonTitle')).toMatchInlineSnapshot(` void; onExpandClick: () => void; column?: EuiDataGridColumn; rowIndex: number; colIndex: number; }) => { - const buttonIconClasses = classNames('euiDataGridRowCell__expandButtonIcon', { - 'euiDataGridRowCell__expandButtonIcon-isActive': popoverIsOpen, - }); - const buttonClasses = classNames('euiDataGridRowCell__expandActions', { - 'euiDataGridRowCell__expandButton-isActive': popoverIsOpen, - }); const expandButton = ( ( {[...additionalButtons, expandButton]} +
+ {[...additionalButtons, expandButton]} +
); };