Support for indeterminate checkboxes

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `3.4.0`.
+- Added support for `indeterminate` to `EuiCheckbox` ([#1108](https://github.com/elastic/eui/pull/1108))
 
 ## [`3.4.0`](https://github.com/elastic/eui/tree/v3.4.0)
 

src-docs/src/views/form_controls/checkbox.js

@@ -16,6 +16,7 @@ export default class extends Component {
 
     this.state = {
       checked: false,
+      indeterminate: true,
     };
   }
 
@@ -25,6 +26,12 @@ export default class extends Component {
     });
   };
 
+  onChangeIndeterminate = () => {
+    this.setState({
+      indeterminate: !this.state.indeterminate,
+    });
+  };
+
   render() {
     return (
       <Fragment>
@@ -37,6 +44,15 @@ export default class extends Component {
 
         <EuiSpacer size="m" />
 
+        <EuiCheckbox
+          id={makeId()}
+          label="I am an indeterminate checkbox"
+          indeterminate={this.state.indeterminate}
+          onChange={this.onChangeIndeterminate}
+        />
+
+        <EuiSpacer size="m" />
+
         <EuiCheckbox
           id={makeId()}
           label="I am a disabled checkbox"

src/components/form/_mixins.scss

@@ -197,8 +197,7 @@
   }
 
   transition: background-color $euiAnimSpeedFast ease-in,
-              border-color $euiAnimSpeedFast ease-in,
-              background-image 0s ease-out $euiAnimSpeedFast;
+              border-color $euiAnimSpeedFast ease-in;
 }
 
 @mixin euiCustomControl--selected($type: null){

src/components/form/checkbox/checkbox.js

@@ -1,67 +1,99 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { omit } from 'lodash';
 
 const typeToClassNameMap = {
   inList: 'euiCheckbox--inList',
 };
 
 export const TYPES = Object.keys(typeToClassNameMap);
 
-export const EuiCheckbox = ({
-  className,
-  id,
-  checked,
-  label,
-  onChange,
-  type,
-  disabled,
-  compressed,
-  ...rest
-}) => {
-  const classes = classNames(
-    'euiCheckbox',
-    typeToClassNameMap[type],
-    {
-      'euiCheckbox--noLabel': !label,
-      'euiCheckbox--compressed': compressed
-    },
-    className
-  );
-
-  let optionalLabel;
-
-  if (label) {
-    optionalLabel = (
-      <label
-        className="euiCheckbox__label"
-        htmlFor={id}
+export class EuiCheckbox extends Component {
+  componentDidMount() {
+    this.invalidateIndeterminate();
+  }
+
+  componentDidUpdate() {
+    this.invalidateIndeterminate();
+  }
+
+  render() {
+    const {
+      className,
+      id,
+      checked,
+      label,
+      onChange,
+      type,
+      disabled,
+      compressed,
+      ...rest
+    } = this.props;
+
+    const inputProps = omit(rest, 'indeterminate');
+
+    const classes = classNames(
+      'euiCheckbox',
+      typeToClassNameMap[type],
+      {
+        'euiCheckbox--noLabel': !label,
+        'euiCheckbox--compressed': compressed
+      },
+      className
+    );
+
+    let optionalLabel;
+
+    if (label) {
+      optionalLabel = (
+        <label
+          className="euiCheckbox__label"
+          htmlFor={id}
+        >
+          {label}
+        </label>
+      );
+    }
+
+    return (
+      <div
+        className={classes}
       >
-        {label}
-      </label>
+        <input
+          className="euiCheckbox__input"
+          type="checkbox"
+          id={id}
+          checked={checked}
+          onChange={onChange}
+          disabled={disabled}
+          ref={this.setInputRef}
+          {...inputProps}
+        />
+
+        <div className="euiCheckbox__square" />
+
+        {optionalLabel}
+      </div>
     );
   }
 
-  return (
-    <div
-      className={classes}
-    >
-      <input
-        className="euiCheckbox__input"
-        type="checkbox"
-        id={id}
-        checked={checked}
-        onChange={onChange}
-        disabled={disabled}
-        {...rest}
-      />
-
-      <div className="euiCheckbox__square" />
-
-      {optionalLabel}
-    </div>
-  );
-};
+  setInputRef = (input) => {
+    this.inputRef = input;
+
+    if (this.props.inputRef) {
+      this.props.inputRef(input);
+    }
+
+    if (input) {
+      this.invalidateIndeterminate();
+    }
+  }
+
+  invalidateIndeterminate() {
+    this.inputRef.indeterminate = this.props.indeterminate;
+  }
+}
 
 EuiCheckbox.propTypes = {
   className: PropTypes.string,