Fixed EuiCheckbox's focus ring getting clipped in EuiBasicTable (#2770)

elastic · Jan 17, 2020 · c5f91ec · c5f91ec
1 parent 877cb00
commit c5f91ec
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
       );