diff --git a/packages/eui/changelogs/upcoming/9228.md b/packages/eui/changelogs/upcoming/9228.md new file mode 100644 index 00000000000..54bc8abc363 --- /dev/null +++ b/packages/eui/changelogs/upcoming/9228.md @@ -0,0 +1 @@ +- Updated `EuiFlexItem` to fall back to `grow={true}` if invalid values for `grow` are passed \ No newline at end of file diff --git a/packages/eui/src/components/flex/flex_item.test.tsx b/packages/eui/src/components/flex/flex_item.test.tsx index 51eed3fc54b..6ac777f2718 100644 --- a/packages/eui/src/components/flex/flex_item.test.tsx +++ b/packages/eui/src/components/flex/flex_item.test.tsx @@ -12,13 +12,10 @@ import { startThrowingReactWarnings, stopThrowingReactWarnings, } from '../../test'; -import { - shouldRenderCustomStyles, - testOnReactVersion, -} from '../../test/internal'; +import { shouldRenderCustomStyles } from '../../test/internal'; import { render } from '../../test/rtl'; -import { EuiFlexItem } from './flex_item'; +import { EuiFlexItem, EuiFlexItemProps } from './flex_item'; beforeAll(startThrowingReactWarnings); afterAll(stopThrowingReactWarnings); @@ -94,13 +91,20 @@ describe('EuiFlexItem', () => { }); }); - // React 18 throws a false error on test unmount for components w/ ref callbacks - // that throw in a `useEffect`. Note: This only affects the test env, not prod - // @see https://github.com/facebook/react/issues/25675#issuecomment-1363957941 - // TODO: Remove `testOnReactVersion` once the above bug is fixed - testOnReactVersion('17')(`invalid component types throw an error`, () => { - // @ts-expect-error intentionally passing an invalid value - expect(() => render()).toThrow(); + describe('invalid values', () => { + const INVALID_VALUES = [ + (3 / 0) as EuiFlexItemProps['grow'], + Infinity as EuiFlexItemProps['grow'], + -Infinity as EuiFlexItemProps['grow'], + 11 as EuiFlexItemProps['grow'], + ]; + + INVALID_VALUES.forEach((value) => { + test(`${value} generates a flex-grow of the default value \`true\``, () => { + render(); + assertClassName('grow-1'); + }); + }); }); }); }); diff --git a/packages/eui/src/components/flex/flex_item.tsx b/packages/eui/src/components/flex/flex_item.tsx index e32dc144375..32058256181 100644 --- a/packages/eui/src/components/flex/flex_item.tsx +++ b/packages/eui/src/components/flex/flex_item.tsx @@ -69,19 +69,25 @@ const EuiFlexItemInternal = ( { children, className, - grow = true, + grow: _grow = true, component = 'div' as TComponent, ...rest }: EuiFlexItemProps, ref: ForwardedRef ): ReactElement, TComponent> => { + // resets `grow` to the default value when an invalid value is passed + const grow = VALID_GROW_VALUES.indexOf(_grow) === -1 ? true : _grow; + useEffect(() => { - if (VALID_GROW_VALUES.indexOf(grow) === -1) { - throw new Error( - `Prop \`grow\` passed to \`EuiFlexItem\` must be a boolean or an integer between 0 and 10, received \`${grow}\`` + if ( + process.env.NODE_ENV === 'development' && + VALID_GROW_VALUES.indexOf(_grow) === -1 + ) { + console.warn( + `Prop \`grow\` passed to \`EuiFlexItem\` must be a boolean or an integer between 0 and 10, received \`${_grow}\`. Defaulting to \`true\`.` ); } - }, [grow]); + }, [_grow]); const cssStyles = [ styles.euiFlexItem,