[EuiDataGrid] Update various CSS classes/styles

- to account for cell DOM refactored in elastic/eui#7255
elastic · Oct 17, 2023 · 531146f · 531146f
1 parent d9ad7f0
commit 531146f
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 18 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
@@ -22,10 +22,6 @@
   font-size: $euiFontSizeS;
 }
 
-.euiDataGridRowCell__definedHeight {
-  white-space: pre-wrap;
-}
-
 .unifiedDataTable__inner {
   display: flex;
   flex-direction: column;
@@ -51,7 +47,7 @@
   }
 
   .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover,
-  .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions {
+  .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover .euiDataGridRowCell__actions--overlay {
     background-color: tintOrShade($euiColorLightShade, 50%, 0);
   }
 }
@@ -110,14 +106,14 @@
 .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
+  .euiDataGridRowCell__defaultHeight & { // "Single line" row height setting
     margin-top: 0;
   }
 }
 
 .unifiedDataTable__descriptionList {
   // force the content truncation when "Single line" row height setting is active
-  .euiDataGridRowCell__truncate & {
+  .euiDataGridRowCell__defaultHeight & {
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;

diff --git a/x-pack/packages/security-solution/data_table/components/data_table/index.tsx b/x-pack/packages/security-solution/data_table/components/data_table/index.tsx
@@ -118,11 +118,11 @@ const EuiDataGridContainer = styled.div<{ hideLastPage: boolean }>`
       ${({ hideLastPage }) => `${hideLastPage ? 'display:none' : ''}`};
     }
   }
-  div .euiDataGridRowCell__contentByHeight {
-    height: auto;
-    align-self: center;
+  div .euiDataGridRowCell__contentWrapper {
+    display: flex;
+    align-items: center;
   }
-  div .euiDataGridRowCell--lastColumn .euiDataGridRowCell__contentByHeight {
+  div .euiDataGridRowCell--lastColumn .euiDataGridRowCell__content {
     flex-grow: 0;
     width: 100%;
   }

diff --git a/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/hooks/use_styles.ts b/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/hooks/use_styles.ts
@@ -46,14 +46,15 @@ export const useStyles = () => {
     & .euiDataGridRowCell {
       font-size: ${euiTheme.size.m};
     }
-    & .euiDataGridRowCell__expandActions > [data-test-subj='euiDataGridCellExpandButton'] {
+    & .euiDataGridRowCell__actions > [data-test-subj='euiDataGridCellExpandButton'] {
       display: none;
     }
-    & .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions {
+    & .euiDataGridRowCell__actions--overlay {
       padding: 0;
     }
 
-    & .euiDataGridRowCell__expandFlex {
+    & .euiDataGridRowCell__contentWrapper {
+      display: flex;
       align-items: center;
     }
     & .euiDataGridRowCell.euiDataGridRowCell--numeric {

diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx
@@ -71,11 +71,11 @@ const EuiDataGridContainer = styled.div<GridContainerProps>`
       }};
     }
   }
-  div .euiDataGridRowCell__contentByHeight {
-    height: auto;
-    align-self: center;
+  div .euiDataGridRowCell__contentWrapper {
+    display: flex;
+    align-items: center;
   }
-  div .euiDataGridRowCell--lastColumn .euiDataGridRowCell__contentByHeight {
+  div .euiDataGridRowCell--lastColumn .euiDataGridRowCell__content {
     flex-grow: 0;
     width: 100%;
   }