Adds possibility to disable checkboxes individually in an EuiCheckboxGroup component

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Added `badge` prop and new styles `EuiHeaderAlert` ([#2506](https://github.com/elastic/eui/pull/2506))
 - Added `disabled` prop to the `EuiCheckboxGroup` definition ([#2545](https://github.com/elastic/eui/pull/2545))
+- Added `disabled` option to the `option` attribute of the `options` object that is passed to the `EuiCheckboxGroup` so that checkboxes in a group can be individually disabled ([#2548](https://github.com/elastic/eui/pull/2548))
 
 ## [`16.0.1`](https://github.com/elastic/eui/tree/v16.0.1)
 

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

@@ -33,12 +33,24 @@ export default class extends Component {
  return { ...checkbox, id: `${checkbox.id}_disabled` };
  });
 
+ this.checkboxesIndividuallyDisabled = this.checkboxes.map(checkbox => {
+ const isIndividuallyDisabled =
+ checkbox.id.charAt(checkbox.id.length - 1) === '1';
+ return {
+ ...checkbox,
+ id: `${checkbox.id}_individually_disabled`,
+ label: isIndividuallyDisabled
+ ? 'Option two is individually disabled'
+ : checkbox.label,
+ disabled: isIndividuallyDisabled,
+ };
+ });
+
  this.state = {
  checkboxIdToSelectedMap: {
  [`${idPrefix}1`]: true,
- },
- checkboxIdToSelectedMapDisabled: {
  [`${idPrefix}1_disabled`]: true,
+ [`${idPrefix}1_individually_disabled`]: true,
  },
  };
  }
@@ -75,10 +87,24 @@ export default class extends Component {
 
  <EuiCheckboxGroup
  options={this.checkboxesDisabled}
- idToSelectedMap={this.state.checkboxIdToSelectedMapDisabled}
+ idToSelectedMap={this.state.checkboxIdToSelectedMap}
  onChange={this.onChange}
  disabled
  />
+
+ <EuiSpacer size="m" />
+
+ <EuiTitle size="xxs">
+ <h3>Individually disabled checkbox</h3>
+ </EuiTitle>
+
+ <EuiSpacer size="s" />
+
+ <EuiCheckboxGroup
+ options={this.checkboxesIndividuallyDisabled}
+ idToSelectedMap={this.state.checkboxIdToSelectedMap}
+ onChange={this.onChange}
+ />
  </Fragment>
  );
  }

src/components/form/checkbox/__snapshots__/checkbox_group.test.js.snap

@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiCheckboxGroup (mocked checkbox) individual disabled is rendered 1`] = `
+<div>
+ <eui_checkbox
+ checked=""
+ class="euiCheckboxGroup__item"
+ disabled=""
+ id="1"
+ label="kibana"
+ />
+ <eui_checkbox
+ class="euiCheckboxGroup__item"
+ id="2"
+ label="elastic"
+ />
+</div>
+`;
+
 exports[`EuiCheckboxGroup (mocked checkbox) disabled is rendered 1`] = `
 <div>
  <eui_checkbox

src/components/form/checkbox/checkbox_group.js

@@ -21,7 +21,7 @@ export const EuiCheckboxGroup = ({
  id={option.id}
  checked={idToSelectedMap[option.id]}
  label={option.label}
- disabled={disabled}
+ disabled={disabled || option.disabled}
  onChange={onChange.bind(null, option.id)}
  compressed={compressed}
  />
@@ -35,6 +35,7 @@ EuiCheckboxGroup.propTypes = {
  PropTypes.shape({
  id: PropTypes.string.isRequired,
  label: PropTypes.node,
+ disabled: PropTypes.bool,
  })
  ).isRequired,
  idToSelectedMap: PropTypes.objectOf(PropTypes.bool).isRequired,

src/components/form/checkbox/checkbox_group.test.js

@@ -56,4 +56,22 @@ describe('EuiCheckboxGroup (mocked checkbox)', () => {
 
  expect(component).toMatchSnapshot();
  });
+
+ test('individual disabled is rendered', () => {
+ const component = render(
+ <EuiCheckboxGroup
+ options={[
+ { id: '1', label: 'kibana', disabled: true },
+ { id: '2', label: 'elastic' },
+ ]}
+ idToSelectedMap={{
+ '1': true,
+ '2': false,
+ }}
+ onChange={() => {}}
+ />
+ );
+
+ expect(component).toMatchSnapshot();
+ });
 });

src/components/form/checkbox/index.d.ts

@@ -41,6 +41,7 @@ declare module '@elastic/eui' {
  export interface EuiCheckboxGroupOption {
  id: string;
  label?: ReactNode;
+ disabled?: boolean;
  }
 
  export interface EuiCheckboxGroupIdToSelectedMap {