diff --git a/packages/components/src/components/DatePicker/DatePicker.test.tsx b/packages/components/src/components/DatePicker/DatePicker.test.tsx index 82d1617b..61a7ae04 100644 --- a/packages/components/src/components/DatePicker/DatePicker.test.tsx +++ b/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( + , + }, + }} + /> + ); + + 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(); + }); }); diff --git a/packages/components/src/components/DatePicker/DatePicker.tsx b/packages/components/src/components/DatePicker/DatePicker.tsx index a78aad20..a2325eb1 100644 --- a/packages/components/src/components/DatePicker/DatePicker.tsx +++ b/packages/components/src/components/DatePicker/DatePicker.tsx @@ -79,23 +79,31 @@ export function DatePickerRender( // 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: , + }, + buttonProps, + slotProps?.triggerButton + ); + const mergedRootSlotProps = { ...rootSlotProps, - group: mergeProps(rootSlotProps?.group, groupProps, { - ref: anchorRef, - endAddon: ( - <> - {endAddon} - - - - - ), - }), + group: mergeProps( + groupProps, + { + ref: anchorRef, + endAddon: ( + <> + {endAddon} + + + ), + }, + rootSlotProps?.group + ), }; const rootProps = mergeProps( diff --git a/packages/components/src/components/DatePicker/types.ts b/packages/components/src/components/DatePicker/types.ts index 3f3889d1..9d2d0a6a 100644 --- a/packages/components/src/components/DatePicker/types.ts +++ b/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 = { @@ -48,6 +49,7 @@ export type DatePickerProps = { label?: FormFieldLabelProps; popover?: PopoverProps; calendar?: CalendarProps; + triggerButton?: IconButtonProps; }; } & Omit, 'description' | 'validationState'>;