[TimePicker] Migrate ClockPicker to emotion (#26389)

docs/pages/api-docs/clock-picker.json

@@ -5,6 +5,7 @@
  "ampm": { "type": { "name": "bool" } },
  "ampmInClock": { "type": { "name": "bool" } },
  "autoFocus": { "type": { "name": "bool" } },
+ "classes": { "type": { "name": "object" } },
  "components": {
  "type": {
  "name": "shape",
@@ -43,6 +44,6 @@
  "filename": "/packages/material-ui-lab/src/ClockPicker/ClockPicker.tsx",
  "inheritance": null,
  "demos": "<ul><li><a href=\"/components/time-picker/\">Time Picker</a></li></ul>",
- "styledComponent": false,
+ "styledComponent": true,
  "cssComponent": false
 }

docs/translations/api-docs/clock-picker/clock-picker.json

@@ -4,6 +4,7 @@
  "ampm": "12h/24h view for hour selection clock.",
  "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).",
  "autoFocus": "Set to <code>true</code> if focus should be moved to clock picker.",
+ "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
  "components": "The components used for each slot. Either a string to use a HTML element or a component.",
  "componentsProps": "The props used for each slot inside.",
  "date": "Selected date @DateIOType.",
@@ -20,5 +21,10 @@
  "rightArrowButtonText": "Right arrow icon aria-label text.",
  "shouldDisableTime": "Dynamically check if time is disabled or not. If returns <code>false</code> appropriate time point will ot be acceptable."
  },
- "classDescriptions": {}
+ "classDescriptions": {
+ "arrowSwitcher": {
+ "description": "Styles applied to {{nodeName}}.",
+ "nodeName": "the arrowSwticher element"
+ }
+ }
 }

packages/material-ui-lab/src/ClockPicker/ClockPicker.test.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { describeConformance, fireEvent, fireTouchChangedEvent, screen } from 'test/utils';
-import ClockPicker from '@material-ui/lab/ClockPicker';
+import { describeConformanceV5, fireEvent, fireTouchChangedEvent, screen } from 'test/utils';
+import ClockPicker, { clockPickerClasses as classes } from '@material-ui/lab/ClockPicker';
 import {
  adapterToUse,
  createPickerMount,
@@ -14,14 +14,28 @@ describe('<ClockPicker />', () => {
  const mount = createPickerMount();
  const render = createPickerRender();
 
- describeConformance(<ClockPicker date={adapterToUse.date()} onChange={() => {}} />, () => ({
- classes: {},
- inheritComponent: 'div',
- mount,
- refInstanceof: window.HTMLDivElement,
- // cannot test reactTestRenderer because of required context
- skip: ['componentProp', 'propsSpread', 'reactTestRenderer'],
- }));
+ describeConformanceV5(
+ <ClockPicker date={adapterToUse.date()} showViewSwitcher onChange={() => {}} />,
+ () => ({
+ classes,
+ inheritComponent: 'div',
+ mount,
+ render,
+ refInstanceof: window.HTMLDivElement,
+ muiName: 'MuiClockPicker',
+ skip: [
+ 'componentProp',
+ 'componentsProp',
+ 'propsSpread',
+ 'reactTestRenderer',
+ // TODO: fix ClockPicker to spread props to root
+ 'themeDefaultProps',
+ // TODO: fix ClockPicker not having root element
+ 'themeStyleOverrides',
+ 'themeVariants',
+ ],
+ }),
+ );
 
  it('renders a listbox with a name', () => {
  render(<ClockPicker date={null} onChange={() => {}} />);

packages/material-ui-lab/src/ClockPicker/ClockPicker.tsx

@@ -1,6 +1,15 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { MuiStyles, WithStyles, withStyles } from '@material-ui/core/styles';
+import {
+ experimentalStyled as styled,
+ Theme,
+ unstable_useThemeProps as useThemeProps,
+} from '@material-ui/core/styles';
+import {
+ unstable_composeClasses as composeClasses,
+ generateUtilityClass,
+ generateUtilityClasses,
+} from '@material-ui/unstyled';
 import Clock from './Clock';
 import { pipe } from '../internal/pickers/utils';
 import { useUtils, useNow, MuiPickersAdapter } from '../internal/pickers/hooks/useUtils';
@@ -16,6 +25,30 @@ import { PickerSelectionState } from '../internal/pickers/hooks/usePickerState';
 import { useMeridiemMode } from '../internal/pickers/hooks/date-helpers-hooks';
 import { ClockView } from './shared';
 
+export interface ClockPickerClasses {
+ /** Styles applied to the arrowSwticher element. */
+ arrowSwitcher: string;
+}
+
+export type ClockPickerClassKey = keyof ClockPickerClasses;
+
+export function getClockPickerUtilityClass(slot: string) {
+ return generateUtilityClass('MuiClockPicker', slot);
+}
+
+export const clockPickerClasses: ClockPickerClasses = generateUtilityClasses('MuiClockPicker', [
+ 'arrowSwitcher',
+]);
+
+const useUtilityClasses = (styleProps: ClockPickerProps<any>) => {
+ const { classes } = styleProps;
+ const slots = {
+ arrowSwitcher: ['arrowSwitcher'],
+ };
+
+ return composeClasses(slots, getClockPickerUtilityClass, classes);
+};
+
 export interface ExportedClockPickerProps<TDate> extends TimeValidationProps<TDate> {
  /**
  * 12h/24h view for hour selection clock.
@@ -55,6 +88,10 @@ export interface ClockPickerProps<TDate> extends ExportedClockPickerProps<TDate>
  * Set to `true` if focus should be moved to clock picker.
  */
  autoFocus?: boolean;
+ /**
+ * Override or extend the styles applied to the component.
+ */
+ classes?: Partial<ClockPickerClasses>;
  /**
  * The components used for each slot.
  * Either a string to use a HTML element or a component.
@@ -115,13 +152,15 @@ export interface ClockPickerProps<TDate> extends ExportedClockPickerProps<TDate>
  view: ClockView;
 }
 
-export const styles: MuiStyles<'arrowSwitcher'> = {
- arrowSwitcher: {
- position: 'absolute',
- right: 12,
- top: 15,
- },
-};
+const ClockPickerArrowSwitcher = styled(PickersArrowSwitcher, {
+ name: 'MuiClockPicker',
+ slot: 'ArrowSwticher',
+ overridesResolver: (props, styles) => styles.arrowSwitcher,
+})({
+ position: 'absolute',
+ right: 12,
+ top: 15,
+});
 
 const defaultGetClockLabelText = <TDate extends any>(
  view: ClockView,
@@ -144,12 +183,16 @@ const defaultGetSecondsClockNumberText = (seconds: string) => `${seconds} second
  *
  * - [ClockPicker API](https://material-ui.com/api/clock-picker/)
  */
-function ClockPicker<TDate>(props: ClockPickerProps<TDate> & WithStyles<typeof styles>) {
+function ClockPicker<TDate>(inProps: ClockPickerProps<TDate>) {
+ const props = useThemeProps<Theme, ClockPickerProps<TDate>, 'MuiClockPicker'>({
+ props: inProps,
+ name: 'MuiClockPicker',
+ });
+
  const {
  ampm = false,
  ampmInClock = false,
  autoFocus,
- classes,
  components,
  componentsProps,
  date,
@@ -314,10 +357,14 @@ function ClockPicker<TDate>(props: ClockPickerProps<TDate> & WithStyles<typeof s
  isTimeDisabled,
  ]);
 
+ // TODO: convert to simple assignment after the type error in defaultPropsHandler.js:60:6 is fixed
+ const styleProps = { ...props };
+ const classes = useUtilityClasses(styleProps);
+
  return (
  <React.Fragment>
  {showViewSwitcher && (
- <PickersArrowSwitcher
+ <ClockPickerArrowSwitcher
  className={classes.arrowSwitcher}
  leftArrowButtonText={leftArrowButtonText}
  rightArrowButtonText={rightArrowButtonText}
@@ -327,6 +374,7 @@ function ClockPicker<TDate>(props: ClockPickerProps<TDate> & WithStyles<typeof s
  onRightClick={openNextView}
  isLeftDisabled={previousViewAvailable}
  isRightDisabled={nextViewAvailable}
+ styleProps={styleProps}
  />
  )}
 
@@ -367,9 +415,9 @@ ClockPicker.propTypes /* remove-proptypes */ = {
  */
  autoFocus: PropTypes.bool,
  /**
- * @ignore
+ * Override or extend the styles applied to the component.
  */
- classes: PropTypes.object.isRequired,
+ classes: PropTypes.object,
  /**
  * The components used for each slot.
  * Either a string to use a HTML element or a component.
@@ -490,6 +538,4 @@ ClockPicker.propTypes /* remove-proptypes */ = {
  *
  * - [ClockPicker API](https://material-ui.com/api/clock-picker/)
  */
-export default withStyles(styles, { name: 'MuiClockPicker' })(ClockPicker) as <TDate>(
- props: ClockPickerProps<TDate>,
-) => JSX.Element;
+export default ClockPicker as <TDate>(props: ClockPickerProps<TDate>) => JSX.Element;

packages/material-ui-lab/src/ClockPicker/index.ts

@@ -1,4 +1,6 @@
 export { default } from './ClockPickerStandalone';
+export { clockPickerClasses } from './ClockPicker';
+export type { ClockPickerClasses, ClockPickerClassKey } from './ClockPicker';
 
 export type ClockPickerProps<TDate> =
  import('./ClockPickerStandalone').ClockPickerStandaloneProps<TDate>;

packages/material-ui-lab/src/themeAugmentation/overrides.d.ts

@@ -1,5 +1,6 @@
 import { CalendarPickerClassKey } from '../CalendarPicker';
 import { CalendarPickerSkeletonClassKey } from '../CalendarPickerSkeleton';
+import { ClockPickerClassKey } from '../ClockPicker/ClockPicker';
 import { DateRangePickerDayClassKey } from '../DateRangePickerDay/DateRangePickerDay';
 import { LoadingButtonClassKey } from '../LoadingButton';
 import { MonthPickerClassKey } from '../MonthPicker';