feat(DatePicker): add triggerButton slot (DS-4767) (#285)

Author: KamilEmeleev

packages/components/src/components/DatePicker/DatePicker.test.tsx

@@ -65,4 +65,27 @@ describe('DatePicker', () => {
 
     expect(getRoot()).toHaveTextContent('fail');
   });
+
+  it('should allow custom open button icon via triggerButton slot', () => {
+    render(
+      <DatePicker
+        {...baseProps}
+        slotProps={{
+          triggerButton: {
+            children: <span data-testid="custom-open-icon" />,
+          },
+        }}
+      />
+    );
+
+    const openButton = screen.getByRole('button');
+
+    expect(screen.getByTestId('custom-open-icon')).toBeInTheDocument();
+
+    expect(
+      openButton.querySelector('[data-testid="custom-open-icon"]')
+    ).toBeInTheDocument();
+
+    expect(openButton.querySelector('svg')).not.toBeInTheDocument();
+  });
 });

packages/components/src/components/DatePicker/DatePicker.tsx

@@ -79,23 +79,31 @@ export function DatePickerRender<T extends DateValue>(
   // eslint-disable-next-line no-unsafe-optional-chaining
   const { slotProps: rootSlotProps, ...otherRoot } = slotProps?.root || {};
 
+  const triggerButtonProps = mergeProps(
+    {
+      variant: isInvalid ? 'error' : 'fade-contrast',
+      className: s.calendar,
+      children: <IconCalendarO16 />,
+    },
+    buttonProps,
+    slotProps?.triggerButton
+  );
+
   const mergedRootSlotProps = {
     ...rootSlotProps,
-    group: mergeProps(rootSlotProps?.group, groupProps, {
-      ref: anchorRef,
-      endAddon: (
-        <>
-          {endAddon}
-          <IconButton
-            variant={isInvalid ? 'error' : 'fade-contrast'}
-            className={s.calendar}
-            {...buttonProps}
-          >
-            <IconCalendarO16 />
-          </IconButton>
-        </>
-      ),
-    }),
+    group: mergeProps(
+      groupProps,
+      {
+        ref: anchorRef,
+        endAddon: (
+          <>
+            {endAddon}
+            <IconButton {...triggerButtonProps} />
+          </>
+        ),
+      },
+      rootSlotProps?.group
+    ),
   };
 
   const rootProps = mergeProps(

packages/components/src/components/DatePicker/types.ts

@@ -10,6 +10,7 @@ import type {
   DateInputRef,
 } from '../DateInput';
 import type { FormFieldLabelProps } from '../FormField';
+import type { IconButtonProps } from '../IconButton';
 import type { PopoverProps } from '../Popover';
 
 export type DatePickerProps<T extends DateValue> = {
@@ -48,6 +49,7 @@ export type DatePickerProps<T extends DateValue> = {
     label?: FormFieldLabelProps;
     popover?: PopoverProps;
     calendar?: CalendarProps<T>;
+    triggerButton?: IconButtonProps;
   };
 } & Omit<AriaDatePickerProps<T>, 'description' | 'validationState'>;