[pickers] Forward digital clock classes (#9555)

mui · Jul 4, 2023 · 0908778 · 0908778
1 parent 7357278
commit 0908778
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
+import { useSlotProps } from '@mui/base/utils';
 import { alpha, styled, useThemeProps } from '@mui/material/styles';
 import useEventCallback from '@mui/utils/useEventCallback';
 import composeClasses from '@mui/utils/composeClasses';
@@ -154,7 +155,12 @@ export const DigitalClock = React.forwardRef(function DigitalClock<TDate extends
   const classes = useUtilityClasses(ownerState);
 
   const ClockItem = slots?.digitalClockItem ?? components?.DigitalClockItem ?? DigitalClockItem;
-  const clockItemProps = slotProps?.digitalClockItem ?? componentsProps?.digitalClockItem;
+  const clockItemProps = useSlotProps({
+    elementType: ClockItem,
+    externalSlotProps: slotProps?.digitalClockItem ?? componentsProps?.digitalClockItem,
+    ownerState: {},
+    className: classes.item,
+  });
 
   const valueOrReferenceDate = useClockReferenceDate({
     value,
@@ -277,6 +283,7 @@ export const DigitalClock = React.forwardRef(function DigitalClock<TDate extends
         autoFocusItem={autoFocus || !!focusedView}
         role="listbox"
         aria-label={localeText.timePickerToolbarTitle}
+        className={classes.list}
       >
         {timeOptions.map((option) => {
           if (skipDisabled && isTimeDisabled(option)) {

diff --git a/packages/x-date-pickers/src/DigitalClock/tests/DigitalClock.test.tsx b/packages/x-date-pickers/src/DigitalClock/tests/DigitalClock.test.tsx
@@ -65,4 +65,18 @@ describe('<DigitalClock />', () => {
       expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2019, 0, 1, 15, 30));
     });
   });
+
+  it('forwards list class to MenuList', () => {
+    const { getByRole } = render(<DigitalClock classes={{ list: 'foo' }} />);
+
+    const list = getByRole('listbox');
+    expect(list).to.have.class('foo');
+  });
+
+  it('forwards item class to clock item', () => {
+    const { getAllByRole } = render(<DigitalClock classes={{ item: 'bar' }} />);
+
+    const options = getAllByRole('option');
+    expect(options[0]).to.have.class('bar');
+  });
 });