[EuiSuperDatePicker] Add support for quickSelectButtonProps

packages/eui/changelogs/upcoming/8380.md

@@ -0,0 +1,2 @@
+- Added `quickSelectButtonProps` to `EuiSuperDatePicker`
+

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<EuiButtonEmptyPropsForButton, 'children' | 'isDisabled' | 'isLoading'>
+>;
+
 export type CustomQuickSelectRenderOptions = {
   quickSelect: ReactElement<typeof EuiQuickSelect>;
   commonlyUsedRanges: ReactElement<typeof EuiCommonlyUsedTimeRanges>;
@@ -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<QuickSelect>();
   const [isOpen, setIsOpen] = useState(false);
   const closePopover = useCallback(() => setIsOpen(false), []);
@@ -94,18 +107,29 @@ export const EuiQuickSelectPopover: FunctionComponent<
 
   const styles = useEuiMemoizedStyles(euiQuickSelectPopoverStyles);
 
+  const quickSelectButtonOnClick = (
+    e: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>
+  ) => {
+    togglePopover();
+    buttonOnClick?.(e);
+  };
+
   const quickSelectButton = (
     <EuiButtonEmpty
       css={styles.euiQuickSelectPopoverButton}
-      contentProps={{ css: styles.euiQuickSelectPopoverButton__content }}
-      onClick={togglePopover}
+      contentProps={{
+        css: styles.euiQuickSelectPopoverButton__content,
+        ...buttonContentProps,
+      }}
+      onClick={quickSelectButtonOnClick}
       aria-label={buttonlabel}
       title={buttonlabel}
       size="xs"
       iconType="arrowDown"
       iconSide="right"
       isDisabled={props.isDisabled}
       data-test-subj="superDatePickerToggleQuickMenuButton"
+      {...quickSelectButtonProps}
     >
       <EuiIcon type="calendar" />
     </EuiButtonEmpty>
@@ -128,7 +152,7 @@ export const EuiQuickSelectPopover: FunctionComponent<
 };
 
 export const EuiQuickSelectPanels: FunctionComponent<
-  Omit<EuiQuickSelectPopoverProps, 'isDisabled'> & {
+  Omit<EuiQuickSelectPopoverProps, 'isDisabled' | 'buttonProps'> & {
     prevQuickSelect?: QuickSelect;
   }
 > = ({

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(
+        <EuiSuperDatePicker
+          onTimeChange={noop}
+          quickSelectButtonProps={quickSelectButtonProps}
+        />
+      );
+      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(

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}
       />
     );
   };