From c5f91ec4d4e7c298ed8ab791b208f6e8deb7465a Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Fri, 17 Jan 2020 10:08:19 -0800
Subject: [PATCH] Fixed EuiCheckbox's focus ring getting clipped in
 EuiBasicTable (#2770)

---
 CHANGELOG.md                                              | 4 ++++
 src-docs/src/views/tables/custom/custom.js                | 2 +-
 .../basic_table/__snapshots__/basic_table.test.tsx.snap   | 8 --------
 src/components/basic_table/basic_table.tsx                | 2 +-
 4 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 15e977f4419..6c9f08a35d7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,10 @@
 - Converted `EuiFormRow` to Typescript ([#2712](https://github.com/elastic/eui/pull/2712))
 - Updated `logoAPM`, `logoSecurity` and `logoEnterpriseSearch`. Added `logoWorkplaceSearch` and `logoObservability` ([#2769](https://github.com/elastic/eui/pull/2769))
 
+**Bug fixes**
+
+- Increased column width on `EuiTableHeaderCellCheckbox` to prevent `EuiCheckbox`'s focus ring from getting clipped in `EuiBasicTable` ([#2770](https://github.com/elastic/eui/pull/2770))
+
 **Deprecations**
 
 - `EuiIcon`'s `logoEnterpriseSearch` type deprecated in favor of `logoWorkplaceSearch`
diff --git a/src-docs/src/views/tables/custom/custom.js b/src-docs/src/views/tables/custom/custom.js
index 5ea5ca5fc86..43036e20fa0 100644
--- a/src-docs/src/views/tables/custom/custom.js
+++ b/src-docs/src/views/tables/custom/custom.js
@@ -244,7 +244,7 @@ export default class extends Component {
         id: 'checkbox',
         isCheckbox: true,
         textOnly: false,
-        width: '24px',
+        width: '32px',
       },
       {
         id: 'type',
diff --git a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
index 3f16814e351..7f072a77ba5 100644
--- a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
@@ -741,7 +741,6 @@ exports[`EuiBasicTable footers render with pagination, selection, sorting, and f
       <EuiTableHeader>
         <EuiTableHeaderCellCheckbox
           key="_selection_column_h"
-          width="24px"
         >
           <EuiI18n
             default="Select all rows"
@@ -1734,7 +1733,6 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
       <EuiTableHeader>
         <EuiTableHeaderCellCheckbox
           key="_selection_column_h"
-          width="24px"
         >
           <EuiI18n
             default="Select all rows"
@@ -2050,7 +2048,6 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
       <EuiTableHeader>
         <EuiTableHeaderCellCheckbox
           key="_selection_column_h"
-          width="24px"
         >
           <EuiI18n
             default="Select all rows"
@@ -2243,7 +2240,6 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
       <EuiTableHeader>
         <EuiTableHeaderCellCheckbox
           key="_selection_column_h"
-          width="24px"
         >
           <EuiI18n
             default="Select all rows"
@@ -2529,7 +2525,6 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
       <EuiTableHeader>
         <EuiTableHeaderCellCheckbox
           key="_selection_column_h"
-          width="24px"
         >
           <EuiI18n
             default="Select all rows"
@@ -2722,7 +2717,6 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
       <EuiTableHeader>
         <EuiTableHeaderCellCheckbox
           key="_selection_column_h"
-          width="24px"
         >
           <EuiI18n
             default="Select all rows"
@@ -2915,7 +2909,6 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
       <EuiTableHeader>
         <EuiTableHeaderCellCheckbox
           key="_selection_column_h"
-          width="24px"
         >
           <EuiI18n
             default="Select all rows"
@@ -3219,7 +3212,6 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
       <EuiTableHeader>
         <EuiTableHeaderCellCheckbox
           key="_selection_column_h"
-          width="24px"
         >
           <EuiI18n
             default="Select all rows"
diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx
index cab3317f1cb..57820505390 100644
--- a/src/components/basic_table/basic_table.tsx
+++ b/src/components/basic_table/basic_table.tsx
@@ -606,7 +606,7 @@ export class EuiBasicTable<T = any> extends Component<
 
     if (selection) {
       headers.push(
-        <EuiTableHeaderCellCheckbox key="_selection_column_h" width="24px">
+        <EuiTableHeaderCellCheckbox key="_selection_column_h">
           {this.renderSelectAll(false)}
         </EuiTableHeaderCellCheckbox>
       );