Add minSizeForControls to euiDataGrid (elastic#3527)

* Add minSizeForControls to euiDataGrid * Update changelog * Update CHANGELOG.md Co-authored-by: Chandler Prall <chandler.prall@gmail.com> * Update src-docs/src/views/datagrid/datagrid_styling_example.js Co-authored-by: Chandler Prall <chandler.prall@gmail.com> * Review comment: move minSizeForControls to props destructuring * Review comments * Fix lint issues Co-authored-by: Chandler Prall <chandler.prall@gmail.com>
daveyholler · Jun 3, 2020 · f4f4b44 · f4f4b44
1 parent 924ca00
commit f4f4b44
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `minSizeForControls` prop to `EuiDataGrid` to control the minimum width for showing grid controls ([#3527](https://github.com/elastic/eui/pull/3527))
 - Passed `getSelectedOptionForSearchValue` to `EuiComboBoxOptionsList` as prop ([#3501](https://github.com/elastic/eui/pull/3501))
 - Added `appendIconComponentCache` function to allow manual pre-emptive loading of source elements into the `EuiIcon` cache ([#3481](https://github.com/elastic/eui/pull/3481))
 - Added `initialSelected` to `EuiTableSelectionType` properties to set initial selected checkboxes for `EuiBasicTable` ([#3418](https://github.com/elastic/eui/pull/3418))

diff --git a/src-docs/src/views/datagrid/datagrid_styling_example.js b/src-docs/src/views/datagrid/datagrid_styling_example.js
@@ -183,7 +183,9 @@ export const DataGridStylingExample = {
       text: (
         <p>
           When wrapped inside a container, like a dashboard panel, the grid will
-          start hiding controls and adopt a more strict flex layout
+          start hiding controls and adopt a more strict flex layout. Use the
+          <EuiCode>minSizeForControls</EuiCode> prop to control the min width to
+          enables/disables grid controls based on available width.
         </p>
       ),
       components: { DataGridContainer },

diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
@@ -140,6 +140,10 @@ type CommonGridProps = CommonProps &
      * A callback for when a column's size changes. Callback receives `{ columnId: string, width: number }`.
      */
     onColumnResize?: EuiDataGridOnColumnResizeHandler;
+    /**
+     * Defines a minimum width for the grid to show all controls in its header.
+     */
+    minSizeForControls?: number;
   };
 
 // This structure forces either aria-label or aria-labelledby to be defined
@@ -326,15 +330,14 @@ function useColumnWidths(
 
 function useOnResize(
   setHasRoomForGridControls: (hasRoomForGridControls: boolean) => void,
-  isFullScreen: boolean
+  isFullScreen: boolean,
+  minSizeForControls: number
 ) {
   return useCallback(
     ({ width }: { width: number }) => {
-      setHasRoomForGridControls(
-        width > MINIMUM_WIDTH_FOR_GRID_CONTROLS || isFullScreen
-      );
+      setHasRoomForGridControls(width > minSizeForControls || isFullScreen);
     },
-    [setHasRoomForGridControls, isFullScreen]
+    [setHasRoomForGridControls, isFullScreen, minSizeForControls]
   );
 }
 
@@ -592,13 +595,6 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
     [headerIsInteractive, setHeaderIsInteractive, focusedCell, setFocusedCell]
   );
 
-  // enables/disables grid controls based on available width
-  const onResize = useOnResize(nextHasRoomForGridControls => {
-    if (nextHasRoomForGridControls !== hasRoomForGridControls) {
-      setHasRoomForGridControls(nextHasRoomForGridControls);
-    }
-  }, isFullScreen);
-
   const handleGridKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
     switch (e.keyCode) {
       case keyCodes.ESCAPE:
@@ -626,9 +622,21 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
     inMemory,
     popoverContents,
     onColumnResize,
+    minSizeForControls = MINIMUM_WIDTH_FOR_GRID_CONTROLS,
     ...rest
   } = props;
 
+  // enables/disables grid controls based on available width
+  const onResize = useOnResize(
+    nextHasRoomForGridControls => {
+      if (nextHasRoomForGridControls !== hasRoomForGridControls) {
+        setHasRoomForGridControls(nextHasRoomForGridControls);
+      }
+    },
+    isFullScreen,
+    minSizeForControls
+  );
+
   const [columnWidths, setColumnWidth] = useColumnWidths(
     columns,
     onColumnResize