[EuiCheckbox] Remove type/inList prop

packages/eui/changelogs/upcoming/7814.md

@@ -0,0 +1,3 @@
+**Breaking changes**
+
+- Removed `type="inList"` from `EuiCheckbox`. Simply omit passing a `label` prop to render this style of checkbox

packages/eui/src-docs/src/views/tables/custom/custom.tsx

@@ -494,7 +494,6 @@ export default class extends Component<{}, State> {
         title="Select all rows"
         checked={this.areAllItemsSelected()}
         onChange={this.toggleAll.bind(this)}
-        type={mobile ? undefined : 'inList'}
       />
     );
   };
@@ -572,7 +571,6 @@ export default class extends Component<{}, State> {
                 id={`${item.id}-checkbox`}
                 checked={this.isItemSelected(item.id)}
                 onChange={this.toggleItem.bind(this, item.id)}
-                type="inList"
                 title="Select this row"
                 aria-label="Select this row"
               />

packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap

@@ -145,7 +145,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
             class="euiTableCellContent"
           >
             <div
-              class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel emotion-euiCheckbox"
+              class="euiCheckbox euiCheckbox--noLabel emotion-euiCheckbox"
             >
               <input
                 aria-label="Select all rows"
@@ -268,7 +268,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
             class="euiTableCellContent"
           >
             <div
-              class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel emotion-euiCheckbox"
+              class="euiCheckbox euiCheckbox--noLabel emotion-euiCheckbox"
             >
               <input
                 aria-label="Select row 1"
@@ -374,7 +374,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
             class="euiTableCellContent"
           >
             <div
-              class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel emotion-euiCheckbox"
+              class="euiCheckbox euiCheckbox--noLabel emotion-euiCheckbox"
             >
               <input
                 aria-label="Select row 2"
@@ -480,7 +480,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
             class="euiTableCellContent"
           >
             <div
-              class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel emotion-euiCheckbox"
+              class="euiCheckbox euiCheckbox--noLabel emotion-euiCheckbox"
             >
               <input
                 aria-label="Select row 3"

packages/eui/src/components/basic_table/basic_table.tsx

@@ -703,7 +703,6 @@ export class EuiBasicTable<T extends object = any> extends Component<
         {(selectAllRows: string) => (
           <EuiCheckbox
             id={this.selectAllIdGenerator(isMobile ? 'mobile' : 'desktop')}
-            type={isMobile ? undefined : 'inList'}
             checked={checked}
             disabled={disabled}
             onChange={onChange}
@@ -1114,7 +1113,6 @@ export class EuiBasicTable<T extends object = any> extends Component<
           {(selectThisRow: string) => (
             <EuiCheckbox
               id={`${this.tableId}${key}-checkbox`}
-              type="inList"
               disabled={disabled}
               checked={checked}
               onChange={onChange}

packages/eui/src/components/form/checkbox/__snapshots__/checkbox.test.tsx.snap

@@ -94,18 +94,3 @@ exports[`EuiCheckbox props labelProps is rendered 1`] = `
   </label>
 </div>
 `;
-
-exports[`EuiCheckbox props type inList is rendered 1`] = `
-<div
-  class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel emotion-euiCheckbox"
->
-  <input
-    class="euiCheckbox__input"
-    id="id"
-    type="checkbox"
-  />
-  <div
-    class="euiCheckbox__square"
-  />
-</div>
-`;

packages/eui/src/components/form/checkbox/_checkbox.scss

@@ -99,7 +99,6 @@
     }
   }
 
-  &.euiCheckbox--inList,
   &.euiCheckbox--noLabel {
     min-height: $euiCheckBoxSize;
     min-width: $euiCheckBoxSize;

packages/eui/src/components/form/checkbox/checkbox.stories.tsx

@@ -12,18 +12,11 @@ import {
   disableStorybookControls,
   enableFunctionToggleControls,
 } from '../../../../.storybook/utils';
-import { EuiCheckbox, EuiCheckboxProps, TYPES } from './checkbox';
+import { EuiCheckbox, EuiCheckboxProps } from './checkbox';
 
 const meta: Meta<EuiCheckboxProps> = {
   title: 'Forms/EuiCheckbox',
   component: EuiCheckbox,
-  argTypes: {
-    label: { control: 'text' },
-    type: {
-      control: 'radio',
-      options: [undefined, ...TYPES],
-    },
-  },
   args: {
     checked: false,
     compressed: false,

packages/eui/src/components/form/checkbox/checkbox.test.tsx

@@ -15,7 +15,7 @@ import {
 import { shouldRenderCustomStyles } from '../../../test/internal';
 import { render } from '../../../test/rtl';
 
-import { EuiCheckbox, TYPES } from './checkbox';
+import { EuiCheckbox } from './checkbox';
 
 beforeAll(startThrowingReactWarnings);
 afterAll(stopThrowingReactWarnings);
@@ -78,17 +78,6 @@ describe('EuiCheckbox', () => {
 
       expect(container.firstChild).toMatchSnapshot();
     });
-    describe('type', () => {
-      TYPES.forEach((value) => {
-        test(`${value} is rendered`, () => {
-          const { container } = render(
-            <EuiCheckbox {...checkboxRequiredProps} type={value} />
-          );
-
-          expect(container.firstChild).toMatchSnapshot();
-        });
-      });
-    });
 
     describe('disabled', () => {
       test('disabled is rendered', () => {

packages/eui/src/components/form/checkbox/checkbox.tsx

@@ -7,24 +7,19 @@
  */
 
 import React, {
-  Component,
+  FunctionComponent,
   ChangeEventHandler,
   ReactNode,
   InputHTMLAttributes,
   LabelHTMLAttributes,
+  useCallback,
+  useMemo,
 } from 'react';
 import { css } from '@emotion/react';
 import classNames from 'classnames';
 
-import { keysOf, CommonProps } from '../../common';
-
-const typeToClassNameMap = {
-  inList: 'euiCheckbox--inList',
-};
-
-export const TYPES = keysOf(typeToClassNameMap);
-
-export type EuiCheckboxType = keyof typeof typeToClassNameMap;
+import { useCombinedRefs } from '../../../services';
+import { CommonProps } from '../../common';
 
 export interface EuiCheckboxProps
   extends CommonProps,
@@ -34,7 +29,6 @@ export interface EuiCheckboxProps
   onChange: ChangeEventHandler<HTMLInputElement>; // overriding to make it required
   inputRef?: (element: HTMLInputElement) => void;
   label?: ReactNode;
-  type?: EuiCheckboxType;
   disabled?: boolean;
   /**
    * when `true` creates a shorter height checkbox row
@@ -47,100 +41,73 @@ export interface EuiCheckboxProps
   labelProps?: CommonProps & LabelHTMLAttributes<HTMLLabelElement>;
 }
 
-export class EuiCheckbox extends Component<EuiCheckboxProps> {
-  static defaultProps = {
-    checked: false,
-    disabled: false,
-    indeterminate: false,
-    compressed: false,
-  };
-
-  inputRef?: HTMLInputElement = undefined;
+export const EuiCheckbox: FunctionComponent<EuiCheckboxProps> = ({
+  className,
+  css: customCss,
+  id,
+  checked = false,
+  label,
+  onChange,
+  type,
+  disabled = false,
+  compressed = false,
+  indeterminate = false,
+  inputRef,
+  labelProps,
+  ...rest
+}) => {
+  const classes = classNames(
+    'euiCheckbox',
+    {
+      'euiCheckbox--noLabel': !label,
+      'euiCheckbox--compressed': compressed,
+    },
+    className
+  );
+
+  const styles = { euiCheckbox: css`` }; // TODO: Emotion conversion
+  const cssStyles = [styles.euiCheckbox, customCss];
+
+  const optionalLabel = useMemo(() => {
+    if (!label) return;
 
-  componentDidMount() {
-    this.invalidateIndeterminate();
-  }
-
-  componentDidUpdate() {
-    this.invalidateIndeterminate();
-  }
-
-  render() {
-    const {
-      className,
-      css: customCss,
-      id,
-      checked,
-      label,
-      onChange,
-      type,
-      disabled,
-      compressed,
-      indeterminate,
-      inputRef,
-      labelProps,
-      ...rest
-    } = this.props;
-
-    const classes = classNames(
-      'euiCheckbox',
-      type && typeToClassNameMap[type],
-      {
-        'euiCheckbox--noLabel': !label,
-        'euiCheckbox--compressed': compressed,
-      },
-      className
-    );
     const labelClasses = classNames(
       'euiCheckbox__label',
       labelProps?.className
     );
-    let optionalLabel;
-
-    if (label) {
-      optionalLabel = (
-        <label {...labelProps} className={labelClasses} htmlFor={id}>
-          {label}
-        </label>
-      );
-    }
-
-    const styles = { euiCheckbox: css`` }; // TODO: Emotion conversion
-    const cssStyles = [styles.euiCheckbox, customCss];
 
     return (
-      <div css={cssStyles} className={classes}>
-        <input
-          className="euiCheckbox__input"
-          type="checkbox"
-          id={id}
-          checked={checked}
-          onChange={onChange}
-          disabled={disabled}
-          ref={this.setInputRef}
-          {...rest}
-        />
-
-        <div className="euiCheckbox__square" />
-
-        {optionalLabel}
-      </div>
+      <label {...labelProps} className={labelClasses} htmlFor={id}>
+        {label}
+      </label>
     );
-  }
-
-  setInputRef = (input: HTMLInputElement) => {
-    this.inputRef = input;
-
-    if (this.props.inputRef) {
-      this.props.inputRef(input);
-    }
-
-    this.invalidateIndeterminate();
-  };
-
-  invalidateIndeterminate() {
-    if (this.inputRef) {
-      this.inputRef.indeterminate = this.props.indeterminate!;
-    }
-  }
-}
+  }, [label, labelProps, id]);
+
+  // @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes
+  const setIndeterminateState = useCallback(
+    (input?: HTMLInputElement) => {
+      if (input) input.indeterminate = indeterminate;
+    },
+    [indeterminate]
+  );
+  const refs = useCombinedRefs([inputRef, setIndeterminateState]);
+
+  return (
+    <div css={cssStyles} className={classes}>
+      <input
+        className="euiCheckbox__input"
+        type="checkbox"
+        id={id}
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+        ref={refs}
+        {...rest}
+      />
+
+      <div className="euiCheckbox__square" />
+
+      {optionalLabel}
+    </div>
+  );
+};

packages/eui/src/components/form/radio/_radio.scss

@@ -71,7 +71,6 @@
     }
   }
 
-  &.euiRadio--inList,
   &.euiRadio--noLabel {
     min-height: $euiRadioSize;
     min-width: $euiRadioSize;