diff --git a/CHANGELOG.md b/CHANGELOG.md index 12fc5e8b918..73011b16ce6 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src-docs/src/views/form_controls/checkbox.js b/src-docs/src/views/form_controls/checkbox.js index 73acf8e3320..f3c18a3eb6b 100644 --- a/src-docs/src/views/form_controls/checkbox.js +++ b/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 ( @@ -37,6 +44,15 @@ export default class extends Component { + + + + @@ -787,6 +788,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = ` data-test-subj="checkboxSelectRow-1" disabled={false} id="_selection_column_1-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -817,6 +819,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = ` data-test-subj="checkboxSelectRow-2" disabled={false} id="_selection_column_2-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -847,6 +850,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = ` data-test-subj="checkboxSelectRow-3" disabled={false} id="_selection_column_3-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -914,6 +918,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = ` data-test-subj="checkboxSelectAll" disabled={false} id="_selection_column-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -947,6 +952,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = ` data-test-subj="checkboxSelectRow-1" disabled={false} id="_selection_column_1-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -977,6 +983,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = ` data-test-subj="checkboxSelectRow-2" disabled={false} id="_selection_column_2-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1007,6 +1014,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = ` data-test-subj="checkboxSelectRow-3" disabled={false} id="_selection_column_3-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1074,6 +1082,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a data-test-subj="checkboxSelectAll" disabled={false} id="_selection_column-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1114,6 +1123,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a data-test-subj="checkboxSelectRow-1" disabled={false} id="_selection_column_1-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1172,6 +1182,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a data-test-subj="checkboxSelectRow-2" disabled={false} id="_selection_column_2-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1230,6 +1241,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a data-test-subj="checkboxSelectRow-3" disabled={false} id="_selection_column_3-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1325,6 +1337,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1 data-test-subj="checkboxSelectAll" disabled={false} id="_selection_column-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1358,6 +1371,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1 data-test-subj="checkboxSelectRow-1" disabled={false} id="_selection_column_1-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1388,6 +1402,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1 data-test-subj="checkboxSelectRow-2" disabled={false} id="_selection_column_2-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1418,6 +1433,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1 data-test-subj="checkboxSelectRow-3" disabled={false} id="_selection_column_3-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1485,6 +1501,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1 data-test-subj="checkboxSelectAll" disabled={false} id="_selection_column-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1518,6 +1535,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1 data-test-subj="checkboxSelectRow-1" disabled={false} id="_selection_column_1-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1548,6 +1566,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1 data-test-subj="checkboxSelectRow-2" disabled={false} id="_selection_column_2-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1578,6 +1597,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1 data-test-subj="checkboxSelectRow-3" disabled={false} id="_selection_column_3-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1645,6 +1665,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a data-test-subj="checkboxSelectAll" disabled={false} id="_selection_column-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1685,6 +1706,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a data-test-subj="checkboxSelectRow-1" disabled={false} id="_selection_column_1-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1741,6 +1763,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a data-test-subj="checkboxSelectRow-2" disabled={false} id="_selection_column_2-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1797,6 +1820,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a data-test-subj="checkboxSelectRow-3" disabled={false} id="_selection_column_3-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1890,6 +1914,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and data-test-subj="checkboxSelectAll" disabled={false} id="_selection_column-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1923,6 +1948,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and data-test-subj="checkboxSelectRow-1" disabled={false} id="_selection_column_1-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1953,6 +1979,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and data-test-subj="checkboxSelectRow-2" disabled={false} id="_selection_column_2-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> @@ -1983,6 +2010,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and data-test-subj="checkboxSelectRow-3" disabled={false} id="_selection_column_3-checkbox" + indeterminate={false} onChange={[Function]} type="inList" /> diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss index b8eb064eb50..6b06a27dab1 100644 --- a/src/components/form/_mixins.scss +++ b/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){ diff --git a/src/components/form/checkbox/checkbox.js b/src/components/form/checkbox/checkbox.js index c838b04838a..0f905f31399 100644 --- a/src/components/form/checkbox/checkbox.js +++ b/src/components/form/checkbox/checkbox.js @@ -1,6 +1,7 @@ -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', @@ -8,60 +9,91 @@ const typeToClassNameMap = { 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 = ( - + ); + } + + return ( +
- {label} - + + +
+ + {optionalLabel} +
); } - return ( -
- - -
- - {optionalLabel} -
- ); -}; + 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, @@ -71,6 +103,7 @@ EuiCheckbox.propTypes = { onChange: PropTypes.func.isRequired, type: PropTypes.oneOf(TYPES), disabled: PropTypes.bool, + indeterminate: PropTypes.bool, /** * when `true` creates a shorter height checkbox row */ @@ -80,5 +113,6 @@ EuiCheckbox.propTypes = { EuiCheckbox.defaultProps = { checked: false, disabled: false, + indeterminate: false, compressed: false, }; diff --git a/src/components/form/checkbox/index.d.ts b/src/components/form/checkbox/index.d.ts index 11bdd0eeb2b..aa44db8ccb4 100644 --- a/src/components/form/checkbox/index.d.ts +++ b/src/components/form/checkbox/index.d.ts @@ -18,6 +18,7 @@ declare module '@elastic/eui' { label?: ReactNode; type?: EuiCheckboxType; disabled?: boolean; + indeterminate?: boolean; } export const EuiCheckbox: SFC<