[Data visualizer] Improve design of expanded rows (elastic#118125)

andreadelrio · Nov 17, 2021 · b7edd97 · b7edd97
1 parent 0e04e22
commit b7edd97
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 13 deletions.
diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/_index.scss b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/_index.scss
@@ -3,6 +3,7 @@
 @import 'components/field_data_row/index';
 
 $panelWidthS:     #{'max(20%, 225px)'};
+$panelWidthM:     #{'max(30%, 300px)'};
 $panelWidthL:     #{'max(40%, 450px)'};
 
 .dvExpandedRow {
@@ -52,9 +53,6 @@ $panelWidthL:     #{'max(40%, 450px)'};
     }
 
     .dvSummaryTable {
-      .euiTableRow > .euiTableRowCell {
-        border-bottom: 0;
-      }
       .euiTableHeaderCell {
         display: none;
       }
@@ -63,6 +61,11 @@ $panelWidthL:     #{'max(40%, 450px)'};
     .dvSummaryTable__wrapper {
       min-width: $panelWidthS;
       max-width: $panelWidthS;
+
+      &.dvPanel__dateSummary {
+        min-width: $panelWidthM;
+        max-width: $panelWidthM;
+      }
     }
 
     .dvTopValues__wrapper {

diff --git a/...tion/common/components/stats_table/components/field_data_expanded_row/boolean_content.tsx b/...tion/common/components/stats_table/components/field_data_expanded_row/boolean_content.tsx
@@ -6,7 +6,13 @@
  */
 
 import React, { FC, ReactNode, useMemo } from 'react';
-import { EuiBasicTable, EuiSpacer, RIGHT_ALIGNMENT, HorizontalAlignment } from '@elastic/eui';
+import {
+  EuiBasicTable,
+  EuiSpacer,
+  RIGHT_ALIGNMENT,
+  LEFT_ALIGNMENT,
+  HorizontalAlignment,
+} from '@elastic/eui';
 import { Axis, BarSeries, Chart, Settings, ScaleType } from '@elastic/charts';
 
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -73,12 +79,13 @@ export const BooleanContent: FC<FieldDataRowProps> = ({ config }) => {
       name: '',
       render: (_: string, summaryItem: { display: ReactNode }) => summaryItem.display,
       width: '25px',
-      align: RIGHT_ALIGNMENT as HorizontalAlignment,
+      align: LEFT_ALIGNMENT as HorizontalAlignment,
     },
     {
       field: 'value',
       name: '',
       render: (v: string) => <strong>{v}</strong>,
+      align: RIGHT_ALIGNMENT as HorizontalAlignment,
     },
   ];
 

diff --git a/...ication/common/components/stats_table/components/field_data_expanded_row/date_content.tsx b/...ication/common/components/stats_table/components/field_data_expanded_row/date_content.tsx
@@ -6,13 +6,12 @@
  */
 
 import React, { FC, ReactNode } from 'react';
-import { EuiBasicTable, HorizontalAlignment } from '@elastic/eui';
+import { EuiBasicTable, HorizontalAlignment, LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from '@elastic/eui';
 // @ts-ignore
 import { formatDate } from '@elastic/eui/lib/services/format';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { i18n } from '@kbn/i18n';
-import { RIGHT_ALIGNMENT } from '@elastic/eui';
 import type { FieldDataRowProps } from '../../types/field_data_row';
 import { ExpandedRowFieldHeader } from '../expanded_row_field_header';
 import { DocumentStatsTable } from './document_stats';
@@ -65,19 +64,20 @@ export const DateContent: FC<FieldDataRowProps> = ({ config }) => {
       field: 'function',
       render: (func: string, summaryItem: { display: ReactNode }) => summaryItem.display,
       width: '70px',
-      align: RIGHT_ALIGNMENT as HorizontalAlignment,
+      align: LEFT_ALIGNMENT as HorizontalAlignment,
     },
     {
       field: 'value',
       name: '',
       render: (v: string) => <strong>{v}</strong>,
+      align: RIGHT_ALIGNMENT as HorizontalAlignment,
     },
   ];
 
   return (
     <ExpandedRowContent dataTestSubj={'dataVisualizerDateContent'}>
       <DocumentStatsTable config={config} />
-      <ExpandedRowPanel className={'dvSummaryTable__wrapper dvPanel__wrapper'}>
+      <ExpandedRowPanel className={'dvSummaryTable__wrapper dvPanel__wrapper dvPanel__dateSummary'}>
         <ExpandedRowFieldHeader>{summaryTableTitle}</ExpandedRowFieldHeader>
         <EuiBasicTable<SummaryTableItem>
           className={'dvSummaryTable'}

diff --git a/...ation/common/components/stats_table/components/field_data_expanded_row/document_stats.tsx b/...ation/common/components/stats_table/components/field_data_expanded_row/document_stats.tsx
@@ -8,7 +8,7 @@
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { FC, ReactNode } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiBasicTable, HorizontalAlignment, RIGHT_ALIGNMENT } from '@elastic/eui';
+import { EuiBasicTable, HorizontalAlignment, LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from '@elastic/eui';
 import { ExpandedRowFieldHeader } from '../expanded_row_field_header';
 import { FieldDataRowProps } from '../../types';
 import { roundToDecimalPlace } from '../../../utils';
@@ -20,12 +20,13 @@ const metaTableColumns = [
     name: '',
     render: (_: string, metaItem: { display: ReactNode }) => metaItem.display,
     width: '25px',
-    align: RIGHT_ALIGNMENT as HorizontalAlignment,
+    align: LEFT_ALIGNMENT as HorizontalAlignment,
   },
   {
     field: 'value',
     name: '',
     render: (v: string) => <strong>{v}</strong>,
+    align: RIGHT_ALIGNMENT as HorizontalAlignment,
   },
 ];
 

diff --git a/...n/common/components/stats_table/components/field_data_expanded_row/expanded_row_panel.tsx b/...n/common/components/stats_table/components/field_data_expanded_row/expanded_row_panel.tsx
@@ -20,7 +20,7 @@ export const ExpandedRowPanel: FC<Props> = ({ children, dataTestSubj, grow, clas
     <EuiPanel
       data-test-subj={dataTestSubj}
       hasShadow={false}
-      hasBorder={true}
+      hasBorder={false}
       grow={!!grow}
       className={className ?? ''}
       paddingSize={'s'}

diff --git a/...ation/common/components/stats_table/components/field_data_expanded_row/number_content.tsx b/...ation/common/components/stats_table/components/field_data_expanded_row/number_content.tsx
@@ -11,6 +11,7 @@ import {
   EuiFlexItem,
   EuiText,
   HorizontalAlignment,
+  LEFT_ALIGNMENT,
   RIGHT_ALIGNMENT,
 } from '@elastic/eui';
 
@@ -91,12 +92,13 @@ export const NumberContent: FC<FieldDataRowProps> = ({ config, onAddFilter }) =>
       name: '',
       render: (summaryItem: { display: ReactNode }) => summaryItem.display,
       width: '25px',
-      align: RIGHT_ALIGNMENT as HorizontalAlignment,
+      align: LEFT_ALIGNMENT as HorizontalAlignment,
     },
     {
       field: 'value',
       name: '',
       render: (v: string) => <strong>{v}</strong>,
+      align: RIGHT_ALIGNMENT as HorizontalAlignment,
     },
   ];