[Discover] Fine tune row controls positioning

elastic · Sep 9, 2023 · a93943c · a93943c
1 parent 0aaf693
commit a93943c
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 37 deletions.
diff --git a/packages/kbn-unified-data-table/src/components/data_table.scss b/packages/kbn-unified-data-table/src/components/data_table.scss
@@ -44,12 +44,10 @@
     border-bottom: $euiBorderThin;
   }
 
+  .euiDataGridRowCell.euiDataGridRowCell--controlColumn[data-gridcell-column-id='openDetails'],
   .euiDataGridRowCell.euiDataGridRowCell--controlColumn[data-gridcell-column-id='select'] {
-    padding: $euiSizeS+2 0 0 $euiSizeXS;
-  }
-
-  .euiDataGridRowCell.euiDataGridRowCell--controlColumn[data-gridcell-column-id='openDetails'] {
-    padding: $euiSizeXS+1 0 0 0;
+    padding-left: 0;
+    padding-right: 0;
   }
 
   .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover,
@@ -109,6 +107,25 @@
   @include euiTextTruncate;
 }
 
+.unifiedDataTable__rowControl {
+  // fine-tuning the vertical alignment with the text for any row height setting
+  margin-top: -3px;
+  .euiDataGridRowCell__truncate & { // "Single line" row height setting
+    margin-top: 0;
+  }
+}
+
+.unifiedDataTable__descriptionList {
+  // force the content truncation when "Single line" row height setting is active
+  .euiDataGridRowCell__truncate & {
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    height: 100%;
+    overflow: hidden;
+  }
+}
+
 .unifiedDataTable__descriptionListTitle {
   margin-inline: 0 0;
   padding-inline: 0;

diff --git a/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx b/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx
@@ -15,14 +15,19 @@ import {
   EuiCopy,
   EuiDataGridCellValueElementProps,
   EuiPopover,
+  EuiFlexGroup,
+  EuiFlexItem,
+  useEuiTheme,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { euiDarkVars as themeDark, euiLightVars as themeLight } from '@kbn/ui-theme';
 import { i18n } from '@kbn/i18n';
+import { css } from '@emotion/react';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
 import { UnifiedDataTableContext } from '../table_context';
 
 export const SelectButton = ({ rowIndex, setCellProps }: EuiDataGridCellValueElementProps) => {
+  const { euiTheme } = useEuiTheme();
   const { selectedDocs, expanded, rows, isDarkMode, setSelectedDocs } =
     useContext(UnifiedDataTableContext);
   const doc = useMemo(() => rows[rowIndex], [rows, rowIndex]);
@@ -46,20 +51,33 @@ export const SelectButton = ({ rowIndex, setCellProps }: EuiDataGridCellValueEle
   }, [expanded, doc, setCellProps, isDarkMode]);
 
   return (
-    <EuiCheckbox
-      id={doc.id}
-      aria-label={toggleDocumentSelectionLabel}
-      checked={checked}
-      data-test-subj={`dscGridSelectDoc-${doc.id}`}
-      onChange={() => {
-        if (checked) {
-          const newSelection = selectedDocs.filter((docId) => docId !== doc.id);
-          setSelectedDocs(newSelection);
-        } else {
-          setSelectedDocs([...selectedDocs, doc.id]);
-        }
-      }}
-    />
+    <EuiFlexGroup
+      responsive={false}
+      direction="column"
+      justifyContent="center"
+      className="unifiedDataTable__rowControl"
+      css={css`
+        padding-block: ${euiTheme.size.xs}; // to have the same height as "openDetails" control
+        padding-left: ${euiTheme.size.xs}; // space between controls
+      `}
+    >
+      <EuiFlexItem grow={false}>
+        <EuiCheckbox
+          id={doc.id}
+          aria-label={toggleDocumentSelectionLabel}
+          checked={checked}
+          data-test-subj={`dscGridSelectDoc-${doc.id}`}
+          onChange={() => {
+            if (checked) {
+              const newSelection = selectedDocs.filter((docId) => docId !== doc.id);
+              setSelectedDocs(newSelection);
+            } else {
+              setSelectedDocs([...selectedDocs, doc.id]);
+            }
+          }}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 };
 

diff --git a/packages/kbn-unified-data-table/src/components/data_table_expand_button.tsx b/packages/kbn-unified-data-table/src/components/data_table_expand_button.tsx
@@ -62,23 +62,25 @@ export const ExpandButton = ({ rowIndex, setCellProps }: EuiDataGridCellValueEle
   }
 
   return (
-    <EuiToolTip content={buttonLabel} delay="long" ref={toolTipRef}>
-      <EuiButtonIcon
-        id={rowIndex === 0 ? tourStep : undefined}
-        size="xs"
-        iconSize="s"
-        aria-label={buttonLabel}
-        data-test-subj={testSubj}
-        onClick={() => {
-          const nextHit = isCurrentRowExpanded ? undefined : current;
-          toolTipRef.current?.hideToolTip();
-          setPressed(Boolean(nextHit));
-          setExpanded?.(nextHit);
-        }}
-        color={isCurrentRowExpanded ? 'primary' : 'text'}
-        iconType={isCurrentRowExpanded ? 'minimize' : 'expand'}
-        isSelected={isCurrentRowExpanded}
-      />
-    </EuiToolTip>
+    <div className="unifiedDataTable__rowControl">
+      <EuiToolTip content={buttonLabel} delay="long" ref={toolTipRef}>
+        <EuiButtonIcon
+          id={rowIndex === 0 ? tourStep : undefined}
+          size="xs"
+          iconSize="s"
+          aria-label={buttonLabel}
+          data-test-subj={testSubj}
+          onClick={() => {
+            const nextHit = isCurrentRowExpanded ? undefined : current;
+            toolTipRef.current?.hideToolTip();
+            setPressed(Boolean(nextHit));
+            setExpanded?.(nextHit);
+          }}
+          color={isCurrentRowExpanded ? 'primary' : 'text'}
+          iconType={isCurrentRowExpanded ? 'minimize' : 'expand'}
+          isSelected={isCurrentRowExpanded}
+        />
+      </EuiToolTip>
+    </div>
   );
 };