[pickers] Forward digital clock classes (mui#9555)

alexfauquette · 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');
+ });
 });