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