[Emotion] Convert EuiDataGrid cell popover, actions, and focus outline styles (Part 4)

packages/eui/changelogs/upcoming/8011.md

@@ -0,0 +1,12 @@
+- Updated `EuiDataGrid`'s cell actions to always consistently be left-aligned, regardless of text content alignment
+- Increased `EuiDataGrid`'s cell actions hover zone to reduce UX friction when mousing over from the grid cell to its actions
+
+**Bug fixes**
+
+- Fixed an `EuiDataGrid` bug where the `setCellProps` callback passed by `renderCellValue` was not correctly applying custom `data-test-subj`s
+
+**CSS-in-JS conversions**
+
+- Converted `EuiDataGrid`'s cell popover, actions, and focus outline to Emotion; Removed the following Sass variables and mixins:
+  - `$euiZDataGridCellPopover`
+  - `@euiDataGridCellFocus`

packages/eui/src/components/datagrid/_data_grid_data_row.scss

@@ -1,6 +1,4 @@
 @include euiDataGridRowCell {
-  position: relative; // Needed for .euiDataGridRowCell__actions
-
   .euiDataGridRowCell__content {
     height: 100%;
     overflow: hidden;
@@ -15,55 +13,6 @@
     height: 100%;
   }
 
-  --euiDataGridCellOutlineColor: #{$euiColorPrimary};
-
-  &:hover,
-  &:focus,
-  &.euiDataGridRowCell--open {
-    @include euiDataGridCellFocus;
-  }
-
-  // needed to override global style
-  &:focus:focus-visible {
-    outline: none;
-  }
-
-  // On hover
-  &:hover:not(:focus, :focus-within, .euiDataGridRowCell--open) {
-    // Color the actions and focus ring grayscale on hover
-    // (Actions look odd without the ring on grids without cell borders)
-    --euiDataGridCellOutlineColor: #{$euiColorDarkShade};
-
-    .euiDataGridRowCell__actions {
-      // Delay the actions showing on hover
-      // (Note: the focus ring show instantly on hover & the actions show instantly on focus)
-      animation-delay: $euiAnimSpeedSlow;
-    }
-  }
-
-  // On hover & focus, show cell action buttons
-  &:hover,
-  &:focus,
-  &:focus-within,
-  // Always make the cell actions visible when the cell popover is open
-  &.euiDataGridRowCell--open,
-  // Prevents the animation from replaying when keyboard focus is moved from the popover back to the cell
-  &[data-keyboard-closing] {
-    .euiDataGridRowCell__actions {
-      animation-duration: $euiAnimSpeedExtraFast;
-      animation-name: euiDataGridCellActionsSlideIn;
-      animation-iteration-count: 1;
-      animation-fill-mode: forwards;
-    }
-  }
-
-  // if a cell is not hovered nor focused nor open via popover, don't show buttons in general
-  &:not(:hover):not(:focus):not(.euiDataGridRowCell--open):not([data-keyboard-closing]) {
-    .euiDataGridRowCell__actions {
-      display: none;
-    }
-  }
-
   &.euiDataGridRowCell--numeric {
     text-align: right;
   }
@@ -85,24 +34,6 @@
   }
 }
 
-.euiDataGridRowCell__popover {
-  @include euiScrollBar;
-  overflow: auto;
-  z-index: $euiZDataGridCellPopover !important; // stylelint-disable-line declaration-no-important
-  // Workaround for a Safari CSS bug when using both `overflow: auto` & `filter: drop-shadow`
-  // (see https://github.com/elastic/eui/issues/6151)
-  // Disables the default EuiPopover filter drop-shadow and uses box-shadow instead,
-  // since we don't use the popover arrow in any case for cell popovers
-  filter: none;
-  @include euiBottomShadow; // TODO: Convert to euiShadowMedium() in Emotion
-
-  // For some reason, the normal popover opacity transition doesn't work for datagrid popovers
-  // so we'll force it via an animation. If we don't, cells constrained by the inline max-width
-  // style that we set will see a flash of unwanted content before repositioning
-  animation-duration: $euiAnimSpeedNormal;
-  animation-name: euiDataGridCellPopover;
-}
-
 .euiDataGridRowCell--controlColumn .euiDataGridRowCell__content {
   max-height: 100%;
   height: auto;
@@ -113,97 +44,3 @@
     height: 100%;
   }
 }
-
-// Positioning for cell actions & the cell expansion popover
-.euiDataGridRowCell__actions,
-.euiDataGridRowCell__actions + [data-euiportal] > .euiPopover {
-  position: absolute;
-  bottom: 100%;
-
-  .euiDataGridRowCell--alignLeft & {
-    left: 0;
-  }
-
-  .euiDataGridRowCell--alignRight & {
-    right: 0;
-  }
-}
-
-.euiDataGridRowCell__actions {
-  z-index: $euiZDataGridCellPopover - 2; // Sit below sticky column headers
-  margin-bottom: -$euiBorderWidthThin; // Vertical alignment
-  display: flex;
-  gap: $euiSizeXS / 2;
-  padding-inline: $euiSizeXS / 2;
-  background-color: var(--euiDataGridCellOutlineColor);
-  color: $euiColorEmptyShade;
-  border: $euiBorderWidthThin solid var(--euiDataGridCellOutlineColor);
-  border-top-left-radius: $euiBorderRadius / 2;
-  border-top-right-radius: $euiBorderRadius / 2;
-  transform: scaleY(0);
-  transform-origin: bottom;
-
-  // The first row of cell actions need to be visible above the cell headers,
-  // but other cell actions that scroll past the sticky headers should not
-  .euiDataGridRowCell[data-gridcell-visible-row-index='0'] > & {
-    z-index: $euiZDataGridCellPopover - 1;
-  }
-
-  .euiDataGridRowCell--alignLeft & {
-    border-bottom-right-radius: $euiBorderRadius / 2;
-  }
-
-  .euiDataGridRowCell--alignRight & {
-    border-bottom-left-radius: $euiBorderRadius / 2;
-  }
-
-  // Visual trickery - fill in the gap between the cell outline border-radius & the actions
-  &::after {
-    content: '';
-    position: absolute;
-    top: 100%;
-    height: $euiBorderWidthThick;
-    width: $euiBorderWidthThick;
-    background-color: var(--euiDataGridCellOutlineColor);
-
-    .euiDataGridRowCell--alignLeft & {
-      left: -$euiBorderWidthThin;
-    }
-
-    .euiDataGridRowCell--alignRight & {
-      right: -$euiBorderWidthThin;
-    }
-  }
-}
-
-.euiDataGridRowCell__actionButtonIcon {
-  height: $euiSize + $euiSizeXS;
-  width: $euiSize;
-  border-radius: 0;
-
-  /* Force all cell action buttons to match EUI colors */
-  &,
-  svg {
-    // stylelint-disable declaration-no-important
-    background-color: transparent !important;
-    color: currentColor !important;
-    fill: currentColor !important;
-    // stylelint-enable declaration-no-important
-  }
-
-  /* Manually increase the size of the expand cell icon - it's a bit small by default */
-  &.euiDataGridRowCell__expandCell .euiIcon {
-    width: 120%;
-    height: 100%;
-  }
-}
-
-@keyframes euiDataGridCellActionsSlideIn {
-  from { transform: scaleY(0); }
-  to { transform: scaleY(1); }
-}
-
-@keyframes euiDataGridCellPopover {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}

packages/eui/src/components/datagrid/_mixins.scss

@@ -4,27 +4,6 @@
   }
 }
 
-@mixin euiDataGridCellFocus {
-  outline: none; // Remove outline as we're handling it manually
-
-  // We don't want to use a border on the focused cell directly because we want to maintain the light gray borders
-  // We can't use a box shadow or outline because it would be contained outside the cell and it would be cut by other surrounding cells
-  // So the solution is to use use a pseudo-element. It allows us to use a border, and it can be contained inside the cell by positioning it with an absolute position.
-  &::after {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    border: $euiBorderWidthThick solid var(--euiDataGridCellOutlineColor, $euiFocusRingColor);
-    border-radius: $euiBorderRadius / 2;
-    z-index: 2; // We want this to be on top of all the content
-    pointer-events: none; // Because we put it with a higher z-index we don't want to make it clickable this way we allow selecting the content behind
-  }
-}
-
 @mixin euiDataGridRowCell {
   .euiDataGridRowCell {
     @content;

packages/eui/src/components/datagrid/_variables.scss

@@ -1,3 +1 @@
-$euiZDataGridCellPopover: $euiZHeader; // Same z-index as EuiFlyout mask overlays - cell popovers should be under both modal and flyout overlays
-
 $euiDataGridColumnResizerWidth: 3px; // Odd number because it straddles a border

packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
   >
     <div
       aria-describedby="euiDataGridCellHeader_generated-id_sorting"
-      class="euiDataGridHeaderCell euiDataGridHeaderCell--boolean euiDataGridHeaderCell--hasColumnActions"
+      class="euiDataGridHeaderCell euiDataGridHeaderCell--boolean euiDataGridHeaderCell--hasColumnActions emotion-euiDataGridHeaderCell"
       data-gridcell-column-id="columnA"
       data-gridcell-column-index="0"
       data-gridcell-row-index="-1"
@@ -55,7 +55,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
     </div>
     <div
       aria-describedby="euiDataGridCellHeader_generated-id_sorting"
-      class="euiDataGridHeaderCell euiDataGridHeaderCell--string euiDataGridHeaderCell--hasColumnActions"
+      class="euiDataGridHeaderCell euiDataGridHeaderCell--string euiDataGridHeaderCell--hasColumnActions emotion-euiDataGridHeaderCell"
       data-gridcell-column-id="columnB"
       data-gridcell-column-index="1"
       data-gridcell-row-index="-1"
@@ -103,7 +103,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
   >
     <div
       aria-rowindex="1"
-      class="euiDataGridRowCell euiDataGridRowCell--alignLeft euiDataGridRowCell--boolean euiDataGridRowCell--firstColumn"
+      class="euiDataGridRowCell euiDataGridRowCell--boolean euiDataGridRowCell--firstColumn emotion-euiDataGridRowCell"
       data-gridcell-column-id="columnA"
       data-gridcell-column-index="0"
       data-gridcell-row-index="0"
@@ -129,7 +129,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
     </div>
     <div
       aria-rowindex="1"
-      class="euiDataGridRowCell euiDataGridRowCell--alignLeft euiDataGridRowCell--string euiDataGridRowCell--lastColumn"
+      class="euiDataGridRowCell euiDataGridRowCell--string euiDataGridRowCell--lastColumn emotion-euiDataGridRowCell"
       data-gridcell-column-id="columnB"
       data-gridcell-column-index="1"
       data-gridcell-row-index="0"
@@ -159,7 +159,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
   >
     <div
       aria-rowindex="2"
-      class="euiDataGridRowCell euiDataGridRowCell--alignLeft euiDataGridRowCell--boolean euiDataGridRowCell--firstColumn"
+      class="euiDataGridRowCell euiDataGridRowCell--boolean euiDataGridRowCell--firstColumn emotion-euiDataGridRowCell"
       data-gridcell-column-id="columnA"
       data-gridcell-column-index="0"
       data-gridcell-row-index="1"
@@ -185,7 +185,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
     </div>
     <div
       aria-rowindex="2"
-      class="euiDataGridRowCell euiDataGridRowCell--alignLeft euiDataGridRowCell--string euiDataGridRowCell--lastColumn"
+      class="euiDataGridRowCell euiDataGridRowCell--string euiDataGridRowCell--lastColumn emotion-euiDataGridRowCell"
       data-gridcell-column-id="columnB"
       data-gridcell-column-index="1"
       data-gridcell-row-index="1"

packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
     >
       <div
         aria-describedby="euiDataGridCellHeader_generated-id_sorting"
-        class="euiDataGridHeaderCell euiDataGridHeaderCell--boolean euiDataGridHeaderCell--hasColumnActions"
+        class="euiDataGridHeaderCell euiDataGridHeaderCell--boolean euiDataGridHeaderCell--hasColumnActions emotion-euiDataGridHeaderCell"
         data-gridcell-column-id="columnA"
         data-gridcell-column-index="0"
         data-gridcell-row-index="-1"
@@ -59,7 +59,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
       </div>
       <div
         aria-describedby="euiDataGridCellHeader_generated-id_sorting"
-        class="euiDataGridHeaderCell euiDataGridHeaderCell--string euiDataGridHeaderCell--hasColumnActions"
+        class="euiDataGridHeaderCell euiDataGridHeaderCell--string euiDataGridHeaderCell--hasColumnActions emotion-euiDataGridHeaderCell"
         data-gridcell-column-id="columnB"
         data-gridcell-column-index="1"
         data-gridcell-row-index="-1"
@@ -104,7 +104,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
     </div>
     <div
       aria-rowindex="1"
-      class="euiDataGridRowCell euiDataGridRowCell--alignLeft euiDataGridRowCell--boolean euiDataGridRowCell--firstColumn"
+      class="euiDataGridRowCell euiDataGridRowCell--boolean euiDataGridRowCell--firstColumn emotion-euiDataGridRowCell"
       data-gridcell-column-id="columnA"
       data-gridcell-column-index="0"
       data-gridcell-row-index="0"
@@ -132,7 +132,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
     </div>
     <div
       aria-rowindex="1"
-      class="euiDataGridRowCell euiDataGridRowCell--alignLeft euiDataGridRowCell--string euiDataGridRowCell--lastColumn"
+      class="euiDataGridRowCell euiDataGridRowCell--string euiDataGridRowCell--lastColumn emotion-euiDataGridRowCell"
       data-gridcell-column-id="columnB"
       data-gridcell-column-index="1"
       data-gridcell-row-index="0"

packages/eui/src/components/datagrid/body/cell/__snapshots__/data_grid_cell.test.tsx.snap

@@ -39,7 +39,7 @@ exports[`EuiDataGridCell componentDidUpdate handles the cell popover by forwardi
 exports[`EuiDataGridCell renders 1`] = `
 <div
   aria-rowindex="1"
-  class="euiDataGridRowCell euiDataGridRowCell--alignLeft"
+  class="euiDataGridRowCell emotion-euiDataGridRowCell"
   data-gridcell-column-id="someColumn"
   data-gridcell-column-index="0"
   data-gridcell-row-index="0"