[TimePicker] Migrate ClockPicker to emotion

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

@@ -5,6 +5,7 @@
     "allowKeyboardControl": { "type": { "name": "bool" } },
     "ampm": { "type": { "name": "bool" } },
     "ampmInClock": { "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 @@
     "allowKeyboardControl": "Enables keyboard listener for moving between days in calendar. Defaults to <code>true</code> unless the <code>ClockPicker</code> is used inside a <code>Static*</code> picker component.",
     "ampm": "12h/24h view for hour selection clock.",
     "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).",
+    "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,24 +1,39 @@
 import * as React from 'react';
-import { createMount, describeConformance } from 'test/utils';
+import { createMount, describeConformanceV5 } from 'test/utils';
 import LocalizationProvider from '@material-ui/lab/LocalizationProvider';
 import ClockPicker from '@material-ui/lab/ClockPicker';
-import { adapterToUse, AdapterClassToUse } from '../internal/pickers/test-utils';
+import {
+  adapterToUse,
+  AdapterClassToUse,
+  createPickerRender,
+} from '../internal/pickers/test-utils';
 
 describe('<ClockPicker />', () => {
   const mount = createMount();
+  const render = createPickerRender();
 
   const localizedMount = (node: React.ReactNode) => {
     return mount(
       <LocalizationProvider dateAdapter={AdapterClassToUse}>{node}</LocalizationProvider>,
     );
   };
 
-  describeConformance(<ClockPicker date={adapterToUse.date()} onChange={() => {}} />, () => ({
+  describeConformanceV5(<ClockPicker date={adapterToUse.date()} onChange={() => {}} />, () => ({
     classes: {},
     inheritComponent: 'div',
     mount: localizedMount,
+    render,
     refInstanceof: window.HTMLDivElement,
+    muiName: 'MuiClockPicker',
     // cannot test reactTestRenderer because of required context
-    skip: ['componentProp', 'propsSpread', 'reactTestRenderer'],
+    skip: [
+      'componentProp',
+      'componentsProp',
+      'propsSpread',
+      'reactTestRenderer',
+      // TODO: fix ClockPicker to spread props to root
+      'themeDefaultProps',
+      'themeVariants',
+    ],
   }));
 });

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

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { MuiStyles, WithStyles, withStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } 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 +21,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.
@@ -49,6 +78,10 @@ export interface ExportedClockPickerProps<TDate> extends TimeValidationProps<TDa
 }
 
 export interface ClockPickerProps<TDate> extends ExportedClockPickerProps<TDate> {
+  /**
+   * 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.
@@ -109,13 +142,19 @@ 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,
@@ -135,12 +174,11 @@ 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>(props: ClockPickerProps<TDate>) {
   const {
     allowKeyboardControl,
     ampm = false,
     ampmInClock = false,
-    classes,
     components,
     componentsProps,
     date,
@@ -305,10 +343,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}
@@ -359,9 +401,9 @@ ClockPicker.propTypes /* remove-proptypes */ = {
    */
   ampmInClock: 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.
@@ -479,6 +521,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/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';