diff --git a/packages/eui/changelogs/upcoming/8380.md b/packages/eui/changelogs/upcoming/8380.md new file mode 100644 index 00000000000..c333c62887c --- /dev/null +++ b/packages/eui/changelogs/upcoming/8380.md @@ -0,0 +1,2 @@ +- Added `quickSelectButtonProps` to `EuiSuperDatePicker` + diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx index b34326e509c..e1469d7d5af 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx +++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx @@ -13,11 +13,13 @@ import React, { useMemo, ReactNode, ReactElement, + MouseEvent, } from 'react'; import { useEuiMemoizedStyles } from '../../../../services'; import { useEuiI18n } from '../../../i18n'; import { EuiButtonEmpty } from '../../../button'; +import { EuiButtonEmptyPropsForButton } from '../../../button/button_empty/button_empty'; import { EuiIcon } from '../../../icon'; import { EuiPopover } from '../../../popover'; @@ -38,6 +40,10 @@ import { Milliseconds, } from '../../types'; +export type EuiQuickSelectButtonProps = Partial< + Omit +>; + export type CustomQuickSelectRenderOptions = { quickSelect: ReactElement; commonlyUsedRanges: ReactElement; @@ -64,11 +70,18 @@ export interface EuiQuickSelectPopoverProps { intervalUnits?: RefreshUnitsOptions; start: string; timeOptions: TimeOptions; + buttonProps?: EuiQuickSelectButtonProps; } export const EuiQuickSelectPopover: FunctionComponent< EuiQuickSelectPopoverProps -> = ({ applyTime: _applyTime, ...props }) => { +> = ({ applyTime: _applyTime, buttonProps = {}, ...props }) => { + const { + contentProps: buttonContentProps, + onClick: buttonOnClick, + ...quickSelectButtonProps + } = buttonProps; + const [prevQuickSelect, setQuickSelect] = useState(); const [isOpen, setIsOpen] = useState(false); const closePopover = useCallback(() => setIsOpen(false), []); @@ -94,11 +107,21 @@ export const EuiQuickSelectPopover: FunctionComponent< const styles = useEuiMemoizedStyles(euiQuickSelectPopoverStyles); + const quickSelectButtonOnClick = ( + e: MouseEvent & MouseEvent + ) => { + togglePopover(); + buttonOnClick?.(e); + }; + const quickSelectButton = ( @@ -128,7 +152,7 @@ export const EuiQuickSelectPopover: FunctionComponent< }; export const EuiQuickSelectPanels: FunctionComponent< - Omit & { + Omit & { prevQuickSelect?: QuickSelect; } > = ({ diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx index 7c9520abf10..ffe3d07895e 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx +++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx @@ -150,6 +150,29 @@ describe('EuiSuperDatePicker', () => { expect(updateButton.className).toContain('danger'); }); + test('quickSelectButtonProps', () => { + const onMouseDown = jest.fn(); + const quickSelectButtonProps: EuiSuperDatePickerProps['quickSelectButtonProps'] = + { + onMouseDown, + color: 'danger', + }; + + const { getByTestSubject } = render( + + ); + const quickSelectButton = getByTestSubject( + 'superDatePickerToggleQuickMenuButton' + )!; + expect(quickSelectButton.className).toContain('danger'); + fireEvent.mouseDown(quickSelectButton); + + expect(onMouseDown).toHaveBeenCalledTimes(1); + }); + it('invokes onFocus callbacks on the date popover buttons', () => { const focusMock = jest.fn(); const { getByTestSubject } = render( diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx index f63194683c5..b0aa0d1ab75 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx +++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx @@ -44,6 +44,7 @@ import { import { EuiQuickSelectPopover, CustomQuickSelectRenderOptions, + EuiQuickSelectButtonProps, } from './quick_select_popover/quick_select_popover'; import { EuiDatePopoverButton } from './date_popover/date_popover_button'; @@ -206,6 +207,10 @@ export type EuiSuperDatePickerProps = CommonProps & { * Props passed to the update button #EuiSuperUpdateButtonProps */ updateButtonProps?: EuiSuperUpdateButtonProps; + /** + * Props passed to the quick select button #EuiQuickSelectButtonProps + */ + quickSelectButtonProps?: EuiQuickSelectButtonProps; /** * By default, relative units will be rounded up to next largest unit of time @@ -498,6 +503,7 @@ export class EuiSuperDatePickerInternal extends Component< refreshIntervalUnits, isPaused, isDisabled, + quickSelectButtonProps, } = this.props; return ( @@ -519,6 +525,7 @@ export class EuiSuperDatePickerInternal extends Component< intervalUnits={refreshIntervalUnits} start={start} timeOptions={timeOptions} + buttonProps={quickSelectButtonProps} /> ); };