Less wrapper elements

src/components/datagrid/_data_grid_data_row.scss

@@ -3,6 +3,18 @@
   min-width: 100%; // Needed to prevent wraps. Inline flex is tricky
 }
 
+@keyframes euiDataGridCellButtonSlideIn {
+  from {
+    margin-left: 0;
+    width: 0;
+  }
+
+  to {
+    margin-left: $euiDataGridCellPaddingM;
+    width: $euiSizeM;
+  }
+}
+
 @include euiDataGridRowCell {
   @include euiFontSizeS;
 
@@ -34,30 +46,35 @@
     margin-top: -1px;
   }
 
-  &:focus,
+  // 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 {
-      margin-left: $euiDataGridCellPaddingM;
-      width: $euiSizeM;
-      background: $euiColorPrimary; // Needed to prevent the bg-color of .euiButtonIcon--text:focus
+      animation-duration: $euiAnimSpeedFast;
+      animation-name: euiDataGridCellButtonSlideIn;
+      animation-iteration-count: 1;
+      animation-delay: 1000ms;
+      animation-fill-mode: forwards;  
     }
 
     .euiDataGridRowCell__actionButtonIcon {
-      margin-left: $euiDataGridCellPaddingM;
-      width: $euiSizeM;
+      animation-duration: $euiAnimSpeedFast;
+      animation-name: euiDataGridCellButtonSlideIn;
+      animation-iteration-count: 1;
+      animation-delay: 1000ms;
+      animation-fill-mode: forwards;  
     }
   }
 
-  // Only add the transition effect on hover, so that it is instantaneous on focus
-  // Long delays on hover to mitigate the accordion effect
-  &:hover {
+  &:not(:hover):not(.euiDataGridRowCell--hovered) {
     .euiDataGridRowCell__expandButtonIcon {
-      transition: margin $euiAnimSpeedFast 1000ms, width $euiAnimSpeedFast 1000ms;
+      margin-left: $euiDataGridCellPaddingM;
+      width: $euiSizeM;
     }
 
     .euiDataGridRowCell__actionButtonIcon {
-      transition: margin $euiAnimSpeedFast 1000ms, width $euiAnimSpeedFast 1000ms;
+      margin-left: $euiDataGridCellPaddingM;
+      width: $euiSizeM;
     }
   }
 
@@ -83,12 +100,14 @@
   &:not(.euiDataGridRowCell--controlColumn) {
     .euiDataGridRowCell__content,
     .euiDataGridRowCell__truncate,
+    &.euiDataGridRowCell__truncate,
     .euiDataGridRowCell__expandContent {
       @include euiTextTruncate;
       overflow: hidden;
       white-space: nowrap;
     }
   }
+
 }
 
 .euiDataGridRowCell__popover {
@@ -116,8 +135,13 @@
 .euiDataGridRowCell__expandButton {
   display: flex;
   flex-grow: 0;
+
+  .euiDataGridRowCell__expandButtonIcon {
+    background: $euiColorPrimary; // Needed to prevent the bg-color of .euiButtonIcon--text:focus
+  }
 }
 
+
 .euiDataGridRowCell__expandButtonIcon {
   height: $euiSizeM;
   min-height: $euiSizeM;

src/components/datagrid/data_grid.test.tsx

@@ -28,6 +28,7 @@ import {
 import { EuiDataGridColumnResizer } from './data_grid_column_resizer';
 import { keys } from '../../services';
 import { act } from 'react-dom/test-utils';
+import { EuiDataGridCellButtons } from './data_grid_cell_buttons';
 
 function getFocusableCell(component: ReactWrapper) {
   return findTestSubject(component, 'dataGridRowCell').find('[tabIndex=0]');
@@ -521,13 +522,15 @@ describe('EuiDataGrid', () => {
             "onBlur": [Function],
             "onFocus": [Function],
             "onKeyDown": [Function],
+            "onMouseEnter": [Function],
+            "onMouseLeave": [Function],
             "role": "gridcell",
             "style": Object {
               "color": "red",
               "height": 34,
               "left": 0,
               "position": "absolute",
-              "top": "0px",
+              "top": "100px",
               "width": 100,
             },
             "tabIndex": -1,
@@ -538,13 +541,15 @@ describe('EuiDataGrid', () => {
             "onBlur": [Function],
             "onFocus": [Function],
             "onKeyDown": [Function],
+            "onMouseEnter": [Function],
+            "onMouseLeave": [Function],
             "role": "gridcell",
             "style": Object {
               "color": "blue",
               "height": 34,
               "left": 100,
               "position": "absolute",
-              "top": "0px",
+              "top": "100px",
               "width": 100,
             },
             "tabIndex": -1,
@@ -555,13 +560,15 @@ describe('EuiDataGrid', () => {
             "onBlur": [Function],
             "onFocus": [Function],
             "onKeyDown": [Function],
+            "onMouseEnter": [Function],
+            "onMouseLeave": [Function],
             "role": "gridcell",
             "style": Object {
               "color": "red",
               "height": 34,
               "left": 0,
               "position": "absolute",
-              "top": "34px",
+              "top": "134px",
               "width": 100,
             },
             "tabIndex": -1,
@@ -572,13 +579,15 @@ describe('EuiDataGrid', () => {
             "onBlur": [Function],
             "onFocus": [Function],
             "onKeyDown": [Function],
+            "onMouseEnter": [Function],
+            "onMouseLeave": [Function],
             "role": "gridcell",
             "style": Object {
               "color": "blue",
               "height": 34,
               "left": 100,
               "position": "absolute",
-              "top": "34px",
+              "top": "134px",
               "width": 100,
             },
             "tabIndex": -1,
@@ -1986,7 +1995,7 @@ describe('EuiDataGrid', () => {
   });
 
   describe('render column cell actions', () => {
-    it('renders various column cell actions configurations', () => {
+    it('renders various column cell actions configurations after cell gets hovered', async () => {
       const alertFn = jest.fn();
       const happyFn = jest.fn();
       const component = mount(
@@ -2041,9 +2050,21 @@ describe('EuiDataGrid', () => {
         />
       );
 
-      findTestSubject(component, 'alertAction').at(1).simulate('click');
+      // cell buttons should not get rendered for unfocused, unhovered cell
+      expect(findTestSubject(component, 'alertAction').exists()).toBe(false);
+      expect(findTestSubject(component, 'happyAction').exists()).toBe(false);
+
+      await act(async () => {
+        findTestSubject(component, 'dataGridRowCell')
+          .at(1)
+          .prop('onMouseEnter')!({} as React.MouseEvent);
+      });
+
+      component.update();
+
+      findTestSubject(component, 'alertAction').at(0).simulate('click');
       expect(alertFn).toHaveBeenCalledWith(1, 'A');
-      findTestSubject(component, 'happyAction').at(1).simulate('click');
+      findTestSubject(component, 'happyAction').at(0).simulate('click');
       expect(happyFn).toHaveBeenCalledWith(1, 'A');
       alertFn.mockReset();
       happyFn.mockReset();

src/components/datagrid/data_grid.tsx

@@ -298,14 +298,11 @@ function renderPagination(props: EuiDataGridProps, controls: string) {
 }
 
 function useDefaultColumnWidth(
-  container: HTMLElement | null,
+  gridWidth: number,
   leadingControlColumns: EuiDataGridControlColumn[],
   trailingControlColumns: EuiDataGridControlColumn[],
   columns: EuiDataGridProps['columns']
 ): number | null {
-  const containerSize = useResizeObserver(container, 'width');
-  const gridWidth = containerSize.width;
-
   const computeDefaultWidth = useCallback((): number | null => {
     if (IS_JEST_ENVIRONMENT) return 100;
     if (gridWidth === 0) return null; // we can't tell what size to compute yet
@@ -650,13 +647,9 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
   const [isFullScreen, setIsFullScreen] = useState(false);
   const [gridWidth, setGridWidth] = useState(0);
 
-  const [containerRef, _setContainerRef] = useState<HTMLDivElement | null>(
-    null
-  );
   const [interactiveCellId] = useState(htmlIdGenerator()());
   const [headerIsInteractive, setHeaderIsInteractive] = useState(false);
 
-  const setContainerRef = useCallback((ref) => _setContainerRef(ref), []);
 
   const cellsUpdateFocus = useRef<Map<string, Function>>(new Map());
 
@@ -807,7 +800,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
 
   // compute the default column width from the container's clientWidth and count of visible columns
   const defaultColumnWidth = useDefaultColumnWidth(
-    containerRef,
+    gridDimensions.width,
     leadingControlColumns,
     trailingControlColumns,
     orderedVisibleColumns
@@ -998,7 +991,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                         className={classes}
                         onKeyDown={handleGridKeyDown}
                         style={isFullScreen ? undefined : { width, height }}
-                        ref={setContainerRef}
+                        ref={setResizeRef}
                         {...rest}>
                         {(IS_JEST_ENVIRONMENT || defaultColumnWidth) && (
                           <>
@@ -1025,7 +1018,6 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                                 headerIsInteractive,
                                 setFocusedCell
                               )}
-                              ref={setResizeRef}
                               className="euiDataGrid__verticalScroll">
                               <div className="euiDataGrid__overflow">
                                 {inMemory ? (