Add overflow to datagrid toolbar dropdowns (#3238)

Adds an overflow to a couple of the popovers in Data Grid to fix instances where there are lots of columns.
elastic · Apr 3, 2020 · 395f775 · 395f775
1 parent 19910d5
commit 395f775
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 66 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,10 +1,13 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+**Deprecation**
+
 - Updated makeId to DEPRECATED, shifted all the calls to htmlIdGenerator ([#3129](https://github.com/elastic/eui/pull/3129))
 
 **Bug Fixes**
 
 - Fixed the `img` element in `EuiIcon` using custom SVGs to have an `alt` attribute with an empty string, rather than no `alt` attribute at all ([#3245](https://github.com/elastic/eui/pull/3245))
+- Added overflows to EuiDataGrid toolbar dropdowns when there are many columns ([#3238](https://github.com/elastic/eui/pull/3238))
 
 ## [`22.3.0`](https://github.com/elastic/eui/tree/v22.3.0)
 
@@ -13,7 +16,7 @@
 - Improved `htmlIdGenerator` when supplying both `prefix` and `suffix` ([#3076](https://github.com/elastic/eui/pull/3076))
 - Updated pagination prop descriptions for `EuiInMemoryTable` ([#3142](https://github.com/elastic/eui/pull/3142))
 - Added `title` and `aria` attributes to `EuiToken`'s icon element ([#3195](https://github.com/elastic/eui/pull/3195))
-- Added new Elasticsearch token types ([58036](https://github.com/elastic/kibana/issues/58036))
+- Added new Elasticsearch token types ([#2758](https://github.com/elastic/eui/pull/2758))
 
 **Bug Fixes**
 

diff --git a/src/components/datagrid/_data_grid.scss b/src/components/datagrid/_data_grid.scss
@@ -101,3 +101,11 @@
   height: 100vh;
   overflow: hidden;
 }
+
+
+.euiDataGrid__controlScroll {
+  @include euiYScrollWithShadows;
+  max-height: $euiDataGridPopoverMaxHeight;
+  padding: $euiSizeS;
+  margin: -$euiSizeS; // Offset against the panel to make the scrollbar flush scrollbars
+}
diff --git a/src/components/datagrid/_data_grid_column_selector.scss b/src/components/datagrid/_data_grid_column_selector.scss
@@ -11,7 +11,6 @@
 .euiDataGridColumnSelector__columnList {
   @include euiYScrollWithShadows;
   max-height: 400px;
-  padding: $euiSizeS;
   margin: 0 (-$euiSizeS);
 }
 

diff --git a/src/components/datagrid/_variables.scss b/src/components/datagrid/_variables.scss
@@ -1,4 +1,5 @@
 $euiDataGridColumnResizerWidth: 3px; // Odd number because it straddles a border
+$euiDataGridPopoverMaxHeight: $euiSize * 25;
 
 $euiDataGridCellPaddingS: $euiSizeXS;
 $euiDataGridCellPaddingM: $euiSizeM / 2;

diff --git a/src/components/datagrid/column_selector.tsx b/src/components/datagrid/column_selector.tsx
@@ -157,70 +157,71 @@ export const useColumnSelector = (
             </EuiI18n>
           </EuiPopoverTitle>
         )}
-        <EuiDragDropContext onDragEnd={onDragEnd}>
-          <EuiDroppable
-            droppableId="columnOrder"
-            isDropDisabled={!isDragEnabled}
-            className="euiDataGridColumnSelector">
-            <Fragment>
-              {filteredColumns.map((id, index) => (
-                <EuiDraggable
-                  key={id}
-                  draggableId={id}
-                  index={index}
-                  isDragDisabled={!isDragEnabled}>
-                  {(provided, state) => (
-                    <div
-                      className={`euiDataGridColumnSelector__item ${state.isDragging &&
-                        'euiDataGridColumnSelector__item-isDragging'}`}>
-                      <EuiFlexGroup gutterSize="m" alignItems="center">
-                        <EuiFlexItem>
-                          {allowColumnHiding ? (
-                            <EuiSwitch
-                              name={id}
-                              label={id}
-                              checked={visibleColumnIds.has(id)}
-                              compressed
-                              className="euiSwitch--mini"
-                              onChange={event => {
-                                const {
-                                  target: { checked },
-                                } = event;
-                                const nextVisibleColumns = sortedColumns.filter(
-                                  columnId =>
-                                    checked
-                                      ? visibleColumnIds.has(columnId) ||
-                                        id === columnId
-                                      : visibleColumnIds.has(columnId) &&
-                                        id !== columnId
-                                );
-                                setVisibleColumns(nextVisibleColumns);
-                              }}
-                            />
-                          ) : (
-                            <span className="euiDataGridColumnSelector__itemLabel">
-                              {id}
-                            </span>
-                          )}
-                        </EuiFlexItem>
-                        {isDragEnabled && (
-                          <EuiFlexItem grow={false}>
-                            <EuiIcon type="grab" color="subdued" />
+        <div className="euiDataGrid__controlScroll">
+          <EuiDragDropContext onDragEnd={onDragEnd}>
+            <EuiDroppable
+              droppableId="columnOrder"
+              isDropDisabled={!isDragEnabled}>
+              <Fragment>
+                {filteredColumns.map((id, index) => (
+                  <EuiDraggable
+                    key={id}
+                    draggableId={id}
+                    index={index}
+                    isDragDisabled={!isDragEnabled}>
+                    {(provided, state) => (
+                      <div
+                        className={`euiDataGridColumnSelector__item ${state.isDragging &&
+                          'euiDataGridColumnSelector__item-isDragging'}`}>
+                        <EuiFlexGroup gutterSize="m" alignItems="center">
+                          <EuiFlexItem>
+                            {allowColumnHiding ? (
+                              <EuiSwitch
+                                name={id}
+                                label={id}
+                                checked={visibleColumnIds.has(id)}
+                                compressed
+                                className="euiSwitch--mini"
+                                onChange={event => {
+                                  const {
+                                    target: { checked },
+                                  } = event;
+                                  const nextVisibleColumns = sortedColumns.filter(
+                                    columnId =>
+                                      checked
+                                        ? visibleColumnIds.has(columnId) ||
+                                          id === columnId
+                                        : visibleColumnIds.has(columnId) &&
+                                          id !== columnId
+                                  );
+                                  setVisibleColumns(nextVisibleColumns);
+                                }}
+                              />
+                            ) : (
+                              <span className="euiDataGridColumnSelector__itemLabel">
+                                {id}
+                              </span>
+                            )}
                           </EuiFlexItem>
-                        )}
-                      </EuiFlexGroup>
-                    </div>
-                  )}
-                </EuiDraggable>
-              ))}
-            </Fragment>
-          </EuiDroppable>
-        </EuiDragDropContext>
+                          {isDragEnabled && (
+                            <EuiFlexItem grow={false}>
+                              <EuiIcon type="grab" color="subdued" />
+                            </EuiFlexItem>
+                          )}
+                        </EuiFlexGroup>
+                      </div>
+                    )}
+                  </EuiDraggable>
+                ))}
+              </Fragment>
+            </EuiDroppable>
+          </EuiDragDropContext>
+        </div>
       </div>
       {allowColumnHiding && (
         <EuiPopoverFooter>
           <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
-            <EuiFlexItem>
+            <EuiFlexItem grow={false}>
               <EuiButtonEmpty
                 size="xs"
                 flush="left"
@@ -231,7 +232,7 @@ export const useColumnSelector = (
                 />
               </EuiButtonEmpty>
             </EuiFlexItem>
-            <EuiFlexItem>
+            <EuiFlexItem grow={false}>
               <EuiButtonEmpty
                 size="xs"
                 flush="right"

diff --git a/src/components/datagrid/column_sorting.tsx b/src/components/datagrid/column_sorting.tsx
@@ -144,11 +144,12 @@ export const useColumnSorting = (
         </EuiI18n>
       }>
       {sorting.columns.length > 0 ? (
-        <div role="region" aria-live="assertive">
+        <div
+          role="region"
+          aria-live="assertive"
+          className="euiDataGrid__controlScroll">
           <EuiDragDropContext onDragEnd={onDragEnd}>
-            <EuiDroppable
-              droppableId="columnSorting"
-              className="euiDataGridColumnSorting">
+            <EuiDroppable droppableId="columnSorting">
               <Fragment>
                 {sorting.columns.map(({ id, direction }, index) => {
                   return (