diff --git a/packages/eui/changelogs/upcoming/7814.md b/packages/eui/changelogs/upcoming/7814.md new file mode 100644 index 00000000000..1b6c2a71d5f --- /dev/null +++ b/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 diff --git a/packages/eui/src-docs/src/views/tables/custom/custom.tsx b/packages/eui/src-docs/src/views/tables/custom/custom.tsx index 62186127dfa..6a47b1b45cf 100644 --- a/packages/eui/src-docs/src/views/tables/custom/custom.tsx +++ b/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" /> diff --git a/packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap index 741253a831f..37c0b232424 100644 --- a/packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap +++ b/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" >
extends Component< {(selectAllRows: string) => ( extends Component< {(selectThisRow: string) => (
`; - -exports[`EuiCheckbox props type inList is rendered 1`] = ` -
- -
-
-`; diff --git a/packages/eui/src/components/form/checkbox/_checkbox.scss b/packages/eui/src/components/form/checkbox/_checkbox.scss index 5f3fad51018..8c9e051c72b 100644 --- a/packages/eui/src/components/form/checkbox/_checkbox.scss +++ b/packages/eui/src/components/form/checkbox/_checkbox.scss @@ -99,7 +99,6 @@ } } - &.euiCheckbox--inList, &.euiCheckbox--noLabel { min-height: $euiCheckBoxSize; min-width: $euiCheckBoxSize; diff --git a/packages/eui/src/components/form/checkbox/checkbox.stories.tsx b/packages/eui/src/components/form/checkbox/checkbox.stories.tsx index e05c358ee7a..e58d11febb4 100644 --- a/packages/eui/src/components/form/checkbox/checkbox.stories.tsx +++ b/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 = { title: 'Forms/EuiCheckbox', component: EuiCheckbox, - argTypes: { - label: { control: 'text' }, - type: { - control: 'radio', - options: [undefined, ...TYPES], - }, - }, args: { checked: false, compressed: false, diff --git a/packages/eui/src/components/form/checkbox/checkbox.test.tsx b/packages/eui/src/components/form/checkbox/checkbox.test.tsx index d7b81da38d3..2474d3c3314 100644 --- a/packages/eui/src/components/form/checkbox/checkbox.test.tsx +++ b/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( - - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - }); - }); describe('disabled', () => { test('disabled is rendered', () => { diff --git a/packages/eui/src/components/form/checkbox/checkbox.tsx b/packages/eui/src/components/form/checkbox/checkbox.tsx index b678e749a0d..0501dc2cb38 100644 --- a/packages/eui/src/components/form/checkbox/checkbox.tsx +++ b/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; // 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; } -export class EuiCheckbox extends Component { - static defaultProps = { - checked: false, - disabled: false, - indeterminate: false, - compressed: false, - }; - - inputRef?: HTMLInputElement = undefined; +export const EuiCheckbox: FunctionComponent = ({ + 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 = ( - - ); - } - - const styles = { euiCheckbox: css`` }; // TODO: Emotion conversion - const cssStyles = [styles.euiCheckbox, customCss]; return ( -
- - -
- - {optionalLabel} -
+ ); - } - - 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 ( +
+ + +
+ + {optionalLabel} +
+ ); +}; diff --git a/packages/eui/src/components/form/radio/_radio.scss b/packages/eui/src/components/form/radio/_radio.scss index 10857dd7259..af6a8e95952 100644 --- a/packages/eui/src/components/form/radio/_radio.scss +++ b/packages/eui/src/components/form/radio/_radio.scss @@ -71,7 +71,6 @@ } } - &.euiRadio--inList, &.euiRadio--noLabel { min-height: $euiRadioSize; min-width: $euiRadioSize;