[Discover] Redesign for the grid, panels and sidebar v1

examples/unified_field_list_examples/public/field_list_sidebar.tsx

@@ -33,6 +33,8 @@ const getCreationOptions: UnifiedFieldListSidebarContainerProps['getCreationOpti
     originatingApp: PLUGIN_ID,
     localStorageKeyPrefix: 'examples',
     timeRangeUpdatesType: 'timefilter',
+    compressed: true,
+    showSidebarToggleButton: true,
     disablePopularFields: true,
   };
 };

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,31 @@
   flex-direction: column;
   flex-wrap: nowrap;
   height: 100%;
+
+  .euiDataGrid__content {
+    background: transparent;
+  }
+
+  .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 +64,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 +109,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 }}

packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.tsx

@@ -105,6 +105,7 @@ export function FieldItemButton<T extends FieldListItem = DataViewField>({
       [`unifiedFieldListItemButton--${type}`]: type,
       [`unifiedFieldListItemButton--exists`]: !isEmpty,
       [`unifiedFieldListItemButton--missing`]: isEmpty,
+      [`unifiedFieldListItemButton--withDragHandle`]: Boolean(otherProps.dragHandle),
     },
     className
   );

packages/kbn-unified-field-list/src/components/field_list_filters/field_list_filters.tsx

@@ -23,6 +23,7 @@ export interface FieldListFiltersProps<T extends FieldListItem> {
   getCustomFieldType?: FieldTypeFilterProps<T>['getCustomFieldType'];
   onSupportedFieldFilter?: FieldTypeFilterProps<T>['onSupportedFieldFilter'];
   onChangeFieldTypes: FieldTypeFilterProps<T>['onChange'];
+  compressed?: FieldNameSearchProps['compressed'];
   nameFilter: FieldNameSearchProps['nameFilter'];
   screenReaderDescriptionId?: FieldNameSearchProps['screenReaderDescriptionId'];
   onChangeNameFilter: FieldNameSearchProps['onChange'];
@@ -38,6 +39,7 @@ export interface FieldListFiltersProps<T extends FieldListItem> {
  * @param getCustomFieldType
  * @param onSupportedFieldFilter
  * @param onChangeFieldTypes
+ * @param compressed
  * @param nameFilter
  * @param screenReaderDescriptionId
  * @param onChangeNameFilter
@@ -52,6 +54,7 @@ function InnerFieldListFilters<T extends FieldListItem = DataViewField>({
   getCustomFieldType,
   onSupportedFieldFilter,
   onChangeFieldTypes,
+  compressed,
   nameFilter,
   screenReaderDescriptionId,
   onChangeNameFilter,
@@ -72,6 +75,7 @@ function InnerFieldListFilters<T extends FieldListItem = DataViewField>({
           />
         ) : undefined
       }
+      compressed={compressed}
       nameFilter={nameFilter}
       screenReaderDescriptionId={screenReaderDescriptionId}
       onChange={onChangeNameFilter}

packages/kbn-unified-field-list/src/components/field_list_filters/field_name_search.tsx

@@ -16,6 +16,7 @@ import { EuiFieldSearch, type EuiFieldSearchProps } from '@elastic/eui';
 export interface FieldNameSearchProps {
   'data-test-subj': string;
   append?: EuiFieldSearchProps['append'];
+  compressed?: EuiFieldSearchProps['compressed'];
   nameFilter: string;
   screenReaderDescriptionId?: string;
   onChange: (nameFilter: string) => unknown;
@@ -25,6 +26,7 @@ export interface FieldNameSearchProps {
  * Search input for fields list
  * @param dataTestSubject
  * @param append
+ * @param compressed
  * @param nameFilter
  * @param screenReaderDescriptionId
  * @param onChange
@@ -33,6 +35,7 @@ export interface FieldNameSearchProps {
 export const FieldNameSearch: React.FC<FieldNameSearchProps> = ({
   'data-test-subj': dataTestSubject,
   append,
+  compressed,
   nameFilter,
   screenReaderDescriptionId,
   onChange,
@@ -52,6 +55,7 @@ export const FieldNameSearch: React.FC<FieldNameSearchProps> = ({
       placeholder={searchPlaceholder}
       value={nameFilter}
       append={append}
+      compressed={compressed}
     />
   );
 };

packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.test.tsx

@@ -82,6 +82,7 @@ async function getComponent({
     isEmpty: false,
     groupIndex: 1,
     itemIndex: 0,
+    size: 'xs',
     workspaceSelectedFieldNames: [],
   };
   const comp = await mountWithIntl(<UnifiedFieldListItem {...props} />);