EuiCheckbox - add support for indeterminate

[uboness]

Often a top-level checkbox is used in lists/tables to de/select all items. When only some of the items are check, it'd be nice if we can set that top level checkbox to indeterminate state and have a clear visual indicator for the partial selection (basically make sure that visually the checkbox is consistent with it's functional purpose)

[snide]

For myself. https://css-tricks.com/indeterminate-checkboxes/

[snide]

Browsers seem to be inconsistent with this, so I figured it's OK to go with our own style here. Path of least resistance is to show a "half" filled checkbox.

I don't like using the "minus" style because that symbol is often used for warnings. I figure either of the below provides a better "partial" representation.

Also. It looks like this isn't an HTML attr but a JS one, so I figured its OK to just use CSS through an "indeterminate" prop. Lemme know if this works and I'll set up a PR.

[cchaos]

@snide Could you should what either option would look like in an actual hierarchy? So like the Parent is indeterminate because only some of the children are checked.

[uboness]

I figured it's OK to go with our own style here.

absolutely

as @cchaos mentioned, it would be great to see it as part of a bigger picture to have a solid feeling about it... but if I would need to choose now, i'd go for the diagonal version

[uboness]

another option... how about a dot in the middle? (like a little circle in the middle of the box)... it's sorta half full as well

[snide]

@uboness don't want a dot, it will read as selected. Agree on the diagonal.

[snide]

After some discussion on slack we decided this feature wasn't needed. Since our tables are often limitless, it's better to just say the equivalent of "Delete X things" in our buttons to designate partial selections.