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'>;