From e12dfabe4aadd597fefd9b19af1209fb94981d48 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 16 Sep 2021 11:48:50 +0100
Subject: [PATCH 1/5] Fixed focus ring to be contained in cell

---
 .../views/datagrid/datagrid_focus_example.js  |  8 +++----
 .../datagrid/_data_grid_data_row.scss         |  6 -----
 src/components/datagrid/_mixins.scss          | 22 +++++++++++++++----
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src-docs/src/views/datagrid/datagrid_focus_example.js b/src-docs/src/views/datagrid/datagrid_focus_example.js
index 0f14892cd17..dda1d9dcab4 100644
--- a/src-docs/src/views/datagrid/datagrid_focus_example.js
+++ b/src-docs/src/views/datagrid/datagrid_focus_example.js
@@ -56,12 +56,12 @@ export const DataGridFocusExample = {
               element unless a subsequent user action changes it.
             </li>
             <li>
-              Enter or F2 can be used interchangibly to enter inner cell focus
+              Enter or F2 can be used interchangeably to enter inner cell focus
               if the logic below allows it.
             </li>
           </ul>
           <h2>
-            The content and expandability of the cells dicate the focus target
+            The content and expandability of the cells dictate the focus target
             of the cell
           </h2>
           <p>
@@ -70,14 +70,14 @@ export const DataGridFocusExample = {
             a grid with your keyboard.
           </p>
           <h3>
-            Cell alone recieves the focus, with no possible inner focus action
+            Cell alone receives the focus, with no possible inner focus action
             when:
           </h3>
           <ul>
             <li>The cell is not expandable.</li>
             <li>The cell has no interactive elements</li>
           </ul>
-          <h3>A single inner element within the cell recieves focus when:</h3>
+          <h3>A single inner element within the cell receives focus when:</h3>
           <ul>
             <li>The cell is not expandable.</li>
             <li>The cell has a single interaction element.</li>
diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index 6e96d445cd9..35a1c632719 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -30,7 +30,6 @@
 
   &:focus {
     @include euiDataGridCellFocus;
-    margin-top: -1px;
   }
 
   // Only add the transition effect on hover, so that it is instantaneous on focus
@@ -84,11 +83,6 @@
     }
   }
 
-  &:focus:not(:first-of-type) {
-    // Needed because the focus state adds a border, which needs to be subtracted from padding
-    padding-left: $euiDataGridCellPaddingM - 1px;
-  }
-
   &.euiDataGridRowCell--numeric {
     text-align: right;
   }
diff --git a/src/components/datagrid/_mixins.scss b/src/components/datagrid/_mixins.scss
index 32deed7e4f4..ca627a87fac 100644
--- a/src/components/datagrid/_mixins.scss
+++ b/src/components/datagrid/_mixins.scss
@@ -51,11 +51,25 @@ $euiDataGridStyles: (
 }
 
 @mixin euiDataGridCellFocus {
-  border: 1px solid transparent;
-  box-shadow: 0 0 0 2px $euiFocusRingColor;
-  border-radius: 1px;
-  z-index: 2; // Needed so it sits above potential striping in the next row
   outline: none; // Remove outline as we're handling it manually
+  overflow: hidden;
+
+  // 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: 2px solid $euiFocusRingColor;
+    border-radius: $euiBorderRadiusSmall;
+    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 {

From 19a8c13f88f12416e2e4c3892e90857ef03b74a7 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 16 Sep 2021 12:14:27 +0100
Subject: [PATCH 2/5] Removed padding left when focused

---
 src/components/datagrid/_data_grid_data_row.scss | 11 +----------
 src/components/datagrid/_mixins.scss             |  1 -
 2 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index 35a1c632719..7740940e0f9 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -13,6 +13,7 @@
   position: relative;
   align-items: center;
   display: flex;
+  overflow: hidden;
 
   // Hack to allow for all the focus guard stuff
   > * {
@@ -247,11 +248,6 @@
 @include euiDataGridStyles(paddingSmall) {
   @include euiDataGridRowCell {
     padding: $euiDataGridCellPaddingS;
-
-    &:focus:not(:first-of-type) {
-      // Needed because the focus state adds a border, which needs to be subtracted from padding
-      padding-left: $euiDataGridCellPaddingS - 1px;
-    }
   }
 }
 
@@ -266,11 +262,6 @@
 @include euiDataGridStyles(paddingLarge) {
   @include euiDataGridRowCell {
     padding: $euiDataGridCellPaddingL;
-
-    &:focus:not(:first-of-type) {
-      // Needed because the focus state adds a border, which needs to be subtracted from padding
-      padding-left: $euiDataGridCellPaddingL - 1px;
-    }
   }
 }
 
diff --git a/src/components/datagrid/_mixins.scss b/src/components/datagrid/_mixins.scss
index ca627a87fac..41c11b496b3 100644
--- a/src/components/datagrid/_mixins.scss
+++ b/src/components/datagrid/_mixins.scss
@@ -52,7 +52,6 @@ $euiDataGridStyles: (
 
 @mixin euiDataGridCellFocus {
   outline: none; // Remove outline as we're handling it manually
-  overflow: hidden;
 
   // 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

From 07f2bc5dfd0ac111906ba90a14a5a7667f9d810a Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 16 Sep 2021 12:53:55 +0100
Subject: [PATCH 3/5] Added CL

---
 CHANGELOG.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b4fe900550d..49b53944c10 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,10 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `38.0.0`.
+**Bug fixes**
+
+- Fixed `EuiDataGrid` focus ring to be contained in cell ([#5194](https://github.com/elastic/eui/pull/5194))
+- Fixed `EuiDataGrid` cell when focused getting a higher `z-index` which was causing long content to overlap surrounding cells ([#5194](https://github.com/elastic/eui/pull/5194))
+
 
 ## [`38.0.0`](https://github.com/elastic/eui/tree/v38.0.0)
 

From 22da2ccb6ae8d5d61cb17a350017660030e6dc98 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 16 Sep 2021 12:56:16 +0100
Subject: [PATCH 4/5] CL again

---
 CHANGELOG.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 49b53944c10..0424e364448 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,8 +2,8 @@
 
 **Bug fixes**
 
-- Fixed `EuiDataGrid` focus ring to be contained in cell ([#5194](https://github.com/elastic/eui/pull/5194))
-- Fixed `EuiDataGrid` cell when focused getting a higher `z-index` which was causing long content to overlap surrounding cells ([#5194](https://github.com/elastic/eui/pull/5194))
+- Fixed `EuiDataGrid` focus ring to be contained in the cell ([#5194](https://github.com/elastic/eui/pull/5194))
+- Fixed `EuiDataGrid` cells when focused getting a higher `z-index` which was causing long content to overlap surrounding cells ([#5194](https://github.com/elastic/eui/pull/5194))
 
 
 ## [`38.0.0`](https://github.com/elastic/eui/tree/v38.0.0)

From 7fae3cdd3a4ef3aaeb9263b30ad1087571ed20f7 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Thu, 16 Sep 2021 14:58:06 +0100
Subject: [PATCH 5/5] Update src/components/datagrid/_mixins.scss

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
---
 src/components/datagrid/_mixins.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/datagrid/_mixins.scss b/src/components/datagrid/_mixins.scss
index 41c11b496b3..c50a74f26b3 100644
--- a/src/components/datagrid/_mixins.scss
+++ b/src/components/datagrid/_mixins.scss
@@ -64,7 +64,7 @@ $euiDataGridStyles: (
     position: absolute;
     top: 0;
     left: 0;
-    border: 2px solid $euiFocusRingColor;
+    border: $euiBorderWidthThick solid $euiFocusRingColor;
     border-radius: $euiBorderRadiusSmall;
     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