[Discover] Update data table grid styles

packages/kbn-unified-data-table/src/components/data_table.scss

@@ -3,32 +3,6 @@
   max-width: 100%;
   height: 100%;
   overflow: hidden;
-  border-radius: $euiBorderRadius;
-
-  .euiDataGrid__controls {
-    border: none;
-    border-bottom: $euiBorderThin;
-  }
-
-  .euiDataGridRowCell.euiDataGridRowCell--firstColumn {
-    border-left: none;
-    padding: 0;
-  }
-
-  .euiDataGridRowCell.euiDataGridRowCell--lastColumn {
-    border-right: none;
-  }
-
-  .unifiedDataTable__table .euiDataGridRowCell:first-of-type,
-  .unifiedDataTable__table .euiDataGrid--headerShade.euiDataGrid--bordersAll .euiDataGridHeaderCell:first-of-type {
-    border-left: none;
-    border-right: none;
-  }
-
-  .euiDataGridRowCell:last-of-type,
-  .euiDataGridHeaderCell:last-of-type {
-    border-right: none;
-  }
 }
 
 .unifiedDataTable__cellValue {
@@ -57,6 +31,27 @@
   flex-direction: column;
   flex-wrap: nowrap;
   height: 100%;
+
+  .euiDataGrid__controls {
+    border-top: $euiBorderThin;
+  }
+
+  .euiDataGrid--headerUnderline .euiDataGridHeaderCell {
+    border-bottom: $euiBorderThin;
+  }
+
+  .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;
+  }
+
+  .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover,
+  .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions {
+    background-color: tintOrShade($euiColorLightShade, 50%, 0);
+  }
 }
 
 .unifiedDataTable__table {
@@ -65,14 +60,6 @@
   min-height: 0;
 }
 
-.unifiedDataTable__footer {
-  flex-shrink: 0;
-  background-color: $euiColorLightShade;
-  padding: $euiSize / 2 $euiSize;
-  margin-top: $euiSize / 4;
-  text-align: center;
-}
-
 .unifiedDataTable__flyoutHeader {
   white-space: nowrap;
 }
@@ -118,7 +105,16 @@
   @include euiTextTruncate;
 }
 
+.unifiedDataTable__descriptionListTitle {
+  margin-inline: 0 0;
+  padding-inline: 0;
+  background: transparent;
+  font-weight: $euiFontWeightBold;
+}
+
 .unifiedDataTable__descriptionListDescription {
+  margin-inline: $euiSizeS $euiSizeS;
+  padding-inline: 0;
   word-break: break-all;
   white-space: normal;
 

packages/kbn-unified-data-table/src/components/data_table_columns.tsx

@@ -30,7 +30,7 @@ import { buildEditFieldButton } from './build_edit_field_button';
 
 const openDetails = {
   id: 'openDetails',
-  width: 24,
+  width: 26,
   headerCellRender: () => (
     <EuiScreenReaderOnly>
       <span>

packages/kbn-unified-data-table/src/constants.ts

@@ -16,12 +16,14 @@ export const defaultMonacoEditorWidth = 370;
 export const defaultTimeColumnWidth = 210;
 export const kibanaJSON = 'kibana-json';
 
-export const GRID_STYLE = {
-  border: 'all',
+export const GRID_STYLE: EuiDataGridStyle = {
+  border: 'horizontal',
   fontSize: 's',
-  cellPadding: 's',
-  rowHover: 'none',
-} as EuiDataGridStyle;
+  cellPadding: 'l',
+  rowHover: 'highlight',
+  header: 'underline',
+  stripes: true,
+};
 
 export const toolbarVisibility = {
   showColumnSelector: {

packages/kbn-unified-data-table/src/utils/get_render_cell_value.test.tsx

@@ -212,7 +212,9 @@ describe('Unified data table cell rendering', function () {
         compressed={true}
         type="inline"
       >
-        <EuiDescriptionListTitle>
+        <EuiDescriptionListTitle
+          className="unifiedDataTable__descriptionListTitle"
+        >
           extension
         </EuiDescriptionListTitle>
         <EuiDescriptionListDescription
@@ -223,7 +225,9 @@ describe('Unified data table cell rendering', function () {
             }
           }
         />
-        <EuiDescriptionListTitle>
+        <EuiDescriptionListTitle
+          className="unifiedDataTable__descriptionListTitle"
+        >
           bytesDisplayName
         </EuiDescriptionListTitle>
         <EuiDescriptionListDescription
@@ -234,7 +238,9 @@ describe('Unified data table cell rendering', function () {
             }
           }
         />
-        <EuiDescriptionListTitle>
+        <EuiDescriptionListTitle
+          className="unifiedDataTable__descriptionListTitle"
+        >
           _index
         </EuiDescriptionListTitle>
         <EuiDescriptionListDescription
@@ -245,7 +251,9 @@ describe('Unified data table cell rendering', function () {
             }
           }
         />
-        <EuiDescriptionListTitle>
+        <EuiDescriptionListTitle
+          className="unifiedDataTable__descriptionListTitle"
+        >
           _score
         </EuiDescriptionListTitle>
         <EuiDescriptionListDescription
@@ -363,7 +371,9 @@ describe('Unified data table cell rendering', function () {
         compressed={true}
         type="inline"
       >
-        <EuiDescriptionListTitle>
+        <EuiDescriptionListTitle
+          className="unifiedDataTable__descriptionListTitle"
+        >
           extension
         </EuiDescriptionListTitle>
         <EuiDescriptionListDescription
@@ -376,7 +386,9 @@ describe('Unified data table cell rendering', function () {
             }
           }
         />
-        <EuiDescriptionListTitle>
+        <EuiDescriptionListTitle
+          className="unifiedDataTable__descriptionListTitle"
+        >
           bytesDisplayName
         </EuiDescriptionListTitle>
         <EuiDescriptionListDescription
@@ -389,7 +401,9 @@ describe('Unified data table cell rendering', function () {
             }
           }
         />
-        <EuiDescriptionListTitle>
+        <EuiDescriptionListTitle
+          className="unifiedDataTable__descriptionListTitle"
+        >
           _index
         </EuiDescriptionListTitle>
         <EuiDescriptionListDescription
@@ -400,7 +414,9 @@ describe('Unified data table cell rendering', function () {
             }
           }
         />
-        <EuiDescriptionListTitle>
+        <EuiDescriptionListTitle
+          className="unifiedDataTable__descriptionListTitle"
+        >
           _score
         </EuiDescriptionListTitle>
         <EuiDescriptionListDescription
@@ -443,7 +459,9 @@ describe('Unified data table cell rendering', function () {
         compressed={true}
         type="inline"
       >
-        <EuiDescriptionListTitle>
+        <EuiDescriptionListTitle
+          className="unifiedDataTable__descriptionListTitle"
+        >
           extension
         </EuiDescriptionListTitle>
         <EuiDescriptionListDescription
@@ -456,7 +474,9 @@ describe('Unified data table cell rendering', function () {
             }
           }
         />
-        <EuiDescriptionListTitle>
+        <EuiDescriptionListTitle
+          className="unifiedDataTable__descriptionListTitle"
+        >
           bytesDisplayName
         </EuiDescriptionListTitle>
         <EuiDescriptionListDescription
@@ -469,7 +489,9 @@ describe('Unified data table cell rendering', function () {
             }
           }
         />
-        <EuiDescriptionListTitle>
+        <EuiDescriptionListTitle
+          className="unifiedDataTable__descriptionListTitle"
+        >
           _index
         </EuiDescriptionListTitle>
         <EuiDescriptionListDescription
@@ -480,7 +502,9 @@ describe('Unified data table cell rendering', function () {
             }
           }
         />
-        <EuiDescriptionListTitle>
+        <EuiDescriptionListTitle
+          className="unifiedDataTable__descriptionListTitle"
+        >
           _score
         </EuiDescriptionListTitle>
         <EuiDescriptionListDescription
@@ -603,7 +627,9 @@ describe('Unified data table cell rendering', function () {
         compressed={true}
         type="inline"
       >
-        <EuiDescriptionListTitle>
+        <EuiDescriptionListTitle
+          className="unifiedDataTable__descriptionListTitle"
+        >
           object.value
         </EuiDescriptionListTitle>
         <EuiDescriptionListDescription
@@ -646,7 +672,9 @@ describe('Unified data table cell rendering', function () {
         compressed={true}
         type="inline"
       >
-        <EuiDescriptionListTitle>
+        <EuiDescriptionListTitle
+          className="unifiedDataTable__descriptionListTitle"
+        >
           object.value
         </EuiDescriptionListTitle>
         <EuiDescriptionListDescription

packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx

@@ -137,7 +137,9 @@ export const getRenderCellValueFn =
         >
           {pairs.map(([key, value]) => (
             <Fragment key={key}>
-              <EuiDescriptionListTitle>{key}</EuiDescriptionListTitle>
+              <EuiDescriptionListTitle className="unifiedDataTable__descriptionListTitle">
+                {key}
+              </EuiDescriptionListTitle>
               <EuiDescriptionListDescription
                 className="unifiedDataTable__descriptionListDescription"
                 dangerouslySetInnerHTML={{ __html: value }}

src/plugins/discover/public/application/context/components/action_bar/action_bar.tsx

@@ -156,7 +156,7 @@ export function ActionBar({
       </EuiFlexGroup>
       {!isSuccessor && showWarning && <EuiSpacer size="s" />}
       {!isSuccessor && showWarning && <ActionBarWarning docCount={docCountAvailable} type={type} />}
-      {!isSuccessor && <EuiSpacer size="s" />}
+      <EuiSpacer size="s" />
     </form>
   );
 }

src/plugins/discover/public/application/context/context_app.tsx

@@ -10,7 +10,8 @@ import React, { Fragment, memo, useEffect, useRef, useMemo, useCallback } from '
 import './context_app.scss';
 import classNames from 'classnames';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiText, EuiPage, EuiPageBody, EuiSpacer } from '@elastic/eui';
+import { EuiText, EuiPage, EuiPageBody, EuiSpacer, useEuiPaddingSize } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { cloneDeep } from 'lodash';
 import { DataView, DataViewField } from '@kbn/data-views-plugin/public';
 import { useExecutionContext } from '@kbn/kibana-react-plugin/public';
@@ -215,6 +216,8 @@ export const ContextApp = ({ dataView, anchorId, referrer }: ContextAppProps) =>
     };
   };
 
+  const titlePadding = useEuiPaddingSize('m');
+
   return (
     <Fragment>
       {fetchedState.anchorStatus.value === LoadingStatus.FAILED ? (
@@ -235,12 +238,17 @@ export const ContextApp = ({ dataView, anchorId, referrer }: ContextAppProps) =>
           <EuiPage className={classNames({ dscDocsPage: !isLegacy })}>
             <EuiPageBody
               panelled
-              paddingSize="s"
+              paddingSize="none"
               className="dscDocsContent"
               panelProps={{ role: 'main' }}
             >
               <EuiSpacer size="s" />
-              <EuiText data-test-subj="contextDocumentSurroundingHeader">
+              <EuiText
+                data-test-subj="contextDocumentSurroundingHeader"
+                css={css`
+                  padding: ${titlePadding} ${titlePadding} 0;
+                `}
+              >
                 <strong>
                   <FormattedMessage
                     id="discover.context.contextOfTitle"