New focus ring getting clipped on checkboxes in tables

[ryankeairns]

The new, larger focus ring is getting clipped for checkboxes in EUI tables.

This was initially noticed by a Canvas engineer, but it is also visible in our EuiTable docs - see the checkbox focus getting clipped under the "Adding selection to a BasicTable" section:

[andreadelrio]

It looks like this was already happening with the old focus ring.

I’ve been looking into it and I’m not sure if this is a problem with EuiCheckbox itself or with the table, as those checkbox cells are getting an inline width of 24px that I can’t seem to override. I was thinking of doing something like Object.assign(styleObj, { minWidth: valueHigherThan24px}here https://github.com/elastic/eui/blob/master/src/components/table/table_header_cell_checkbox.tsx#L24 but the width gets applied and not the minWidth.

@cchaos do you have any thoughts?

[ryankeairns]

I took a peek and the issue is on both the docs and Canvas side. My guess is that the docs example was copied and it applies a hard-coded 24px to the header td which then determines the width of the td's on down the column.

That said, we still need some tweaking on the EUI side as well. We currently set the td for checkboxes to 32px, but it is overridden by the th width. A couple of thoughts... increase the th width of our example tables that have checkboxes (currently set at 24px) and then match the td width for checkboxes to be the same.

I suspect setting that width on the td, while seemingly not being used, is necessary if there is no checkbox in the header?

[ryankeairns]

The $euiTableCellCheckboxWidth is set here:

eui/src/components/table/_variables.scss

Line 6 in ea17ac5

$euiTableCellCheckboxWidth: $euiSizeXL;

There are several table examples with checkboxes; here is one as an example:

eui/src-docs/src/views/tables/custom/custom.js

Line 247 in e529234

width: '24px',