From 74d756b90041d131f4a3337dd362bebce721d26f Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 14 Aug 2023 19:31:53 -0700 Subject: [PATCH 1/4] Add new `inputPopoverProps` type / prop docs + slight re-order for props table --- src/components/form/range/types.ts | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/src/components/form/range/types.ts b/src/components/form/range/types.ts index 47b28e4070c..c717b7f3a98 100644 --- a/src/components/form/range/types.ts +++ b/src/components/form/range/types.ts @@ -8,9 +8,10 @@ import type { ReactNode, CSSProperties, InputHTMLAttributes } from 'react'; import type { CommonProps } from '../../common'; +import type { EuiInputPopoverProps } from '../../popover/input_popover'; import type { EuiFormControlLayoutProps } from '../form_control_layout'; import type { EuiRangeLevelColor } from './range_levels_colors'; -import { EuiRangeInputProps } from './range_input'; +import type { EuiRangeInputProps } from './range_input'; /** * Internal type atoms split up both for easier categorization @@ -110,14 +111,29 @@ export interface _SharedRangeInputProps { * @default false */ fullWidth?: boolean; + /** + * Only impacts inputs rendered by the `showInput` prop + */ + isInvalid?: boolean; /** * Only impacts inputs rendered when the `showInput` prop is set to `"inputWithPopover"` */ isLoading?: boolean; /** - * Only impacts inputs rendered by the `showInput` prop - */ - isInvalid?: boolean; + * Only impacts input popovers rendered when the `showInput` prop is set to `"inputWithPopover"` + * + * Allows customizing the underlying [EuiInputPopover](/#/layout/popover#popover-attached-to-input-element), + * except for props controlled by the range component + */ + inputPopoverProps?: Omit< + EuiInputPopoverProps, + | 'input' + | 'isOpen' + | 'closePopover' + | 'disableFocusTrap' + | 'popoverScreenReaderText' + | 'fullWidth' + >; } export type _SharedRangeInputSide = { From 8f6b4a7f5520b82dd8d5e7fedf732ce5c99a1de3 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 14 Aug 2023 19:33:45 -0700 Subject: [PATCH 2/4] [EuiDualRange] Spread `inputPopoverProps` - `onPanelResize` doesn't need to be completely controlled by EuiDualRange, so add an extra consumer callback/check + add missing tests for all `shouldRenderCustomStyles` childProps --- src/components/form/range/dual_range.test.tsx | 16 ++++++++++++++++ src/components/form/range/dual_range.tsx | 8 +++++++- 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/src/components/form/range/dual_range.test.tsx b/src/components/form/range/dual_range.test.tsx index 4eb4c477c03..d3792e8f361 100644 --- a/src/components/form/range/dual_range.test.tsx +++ b/src/components/form/range/dual_range.test.tsx @@ -32,6 +32,20 @@ describe('EuiDualRange', () => { targetSelector: '.euiRangeSlider', skip: { className: true, css: true }, }); + shouldRenderCustomStyles( + , + { + skip: { parentTest: true }, + childProps: ['minInputProps', 'maxInputProps', 'inputPopoverProps'], + renderCallback: ({ getByTestSubject }) => { + fireEvent.focus(getByTestSubject('triggerPopover')); + }, + } + ); it('renders', () => { const { container } = render( @@ -184,6 +198,7 @@ describe('EuiDualRange', () => { id="id" showInput="inputWithPopover" minInputProps={{ 'aria-label': 'Min value' }} + inputPopoverProps={{ panelProps: { 'data-test-subj': 'test' } }} /> ); @@ -195,6 +210,7 @@ describe('EuiDualRange', () => { expect(screen.getByRole('dialog')).toBeDefined(); expect(screen.getAllByRole('slider')).toHaveLength(2); + expect(screen.getByTestSubject('test')).toBeInTheDocument(); }); }); diff --git a/src/components/form/range/dual_range.tsx b/src/components/form/range/dual_range.tsx index 380c71b4966..07614a4c23e 100644 --- a/src/components/form/range/dual_range.tsx +++ b/src/components/form/range/dual_range.tsx @@ -381,6 +381,7 @@ export class EuiDualRangeClass extends Component< this.setState({ rangeWidth: width, }); + this.props.inputPopoverProps?.onPanelResize?.(width); }; getNearestStep = (value: number) => { @@ -451,6 +452,7 @@ export class EuiDualRangeClass extends Component< prepend, minInputProps, maxInputProps, + inputPopoverProps, isDraggable, theme, ...rest @@ -786,7 +788,11 @@ export class EuiDualRangeClass extends Component< const thePopover = showInputOnly ? ( Date: Mon, 14 Aug 2023 19:34:56 -0700 Subject: [PATCH 3/4] [EuiRange] Spread `inputPopoverProps` + fix snapshot for `showInput="inputWithPopover"` test - it's not actually snapshotting the actual popover --- .../range/__snapshots__/range.test.tsx.snap | 119 +++++++++++++++--- src/components/form/range/range.test.tsx | 22 +++- src/components/form/range/range.tsx | 7 +- 3 files changed, 125 insertions(+), 23 deletions(-) diff --git a/src/components/form/range/__snapshots__/range.test.tsx.snap b/src/components/form/range/__snapshots__/range.test.tsx.snap index 717b69c4591..a66f780d423 100644 --- a/src/components/form/range/__snapshots__/range.test.tsx.snap +++ b/src/components/form/range/__snapshots__/range.test.tsx.snap @@ -413,36 +413,115 @@ exports[`EuiRange props range should render 1`] = ` `; exports[`EuiRange props slider should display in popover 1`] = ` -
+ +
+
+
+
+
+
+ +
+
+
+
+
+
-
+
+