[pickers] Migrate ClockNumber to emotion (#26058)

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

@@ -1,80 +1,82 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { MuiStyles, StyleRules, WithStyles, withStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import { generateUtilityClasses } from '@material-ui/unstyled';
 import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from './shared';
 
-export interface ClockNumberProps {
+export interface ClockNumberProps extends React.HTMLAttributes<HTMLSpanElement> {
+  // TODO: spread to a `span`. What are the implications (generic role etc.)
+  'aria-label': string;
   disabled: boolean;
   index: number;
   inner: boolean;
   label: string;
   selected: boolean;
-  // TODO: spread to a `span`. What are the implications (generic role etc.)
-  'aria-label': string;
 }
 
-export type ClockNumberClassKey = 'root' | 'selected' | 'disabled' | 'inner';
+export const classes = generateUtilityClasses('PrivateClockNumber', ['selected', 'disabled']);
 
-export const styles: MuiStyles<ClockNumberClassKey> = (theme): StyleRules<ClockNumberClassKey> => ({
-  root: {
-    width: CLOCK_HOUR_WIDTH,
-    height: CLOCK_HOUR_WIDTH,
-    position: 'absolute',
-    left: `calc((100% - ${CLOCK_HOUR_WIDTH}px) / 2)`,
-    display: 'inline-flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: '50%',
-    color: theme.palette.text.primary,
-    '&:focused': {
-      backgroundColor: theme.palette.background.paper,
-    },
-    '&$selected': {
-      color: theme.palette.primary.contrastText,
-    },
-    '&$disabled': {
-      pointerEvents: 'none',
-      color: theme.palette.text.disabled,
-    },
+const ClockNumberRoot = styled(
+  'span',
+  {},
+  { skipSx: true },
+)(({ theme, styleProps = {} }) => ({
+  height: CLOCK_HOUR_WIDTH,
+  width: CLOCK_HOUR_WIDTH,
+  position: 'absolute',
+  left: `calc((100% - ${CLOCK_HOUR_WIDTH}px) / 2)`,
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '50%',
+  color: theme.palette.text.primary,
+  '&:focused': {
+    backgroundColor: theme.palette.background.paper,
+  },
+  [`&.${classes.selected}`]: {
+    color: theme.palette.primary.contrastText,
   },
-  selected: {},
-  disabled: {},
-  inner: {
+  [`&.${classes.disabled}`]: {
+    pointerEvents: 'none',
+    color: theme.palette.text.disabled,
+  },
+  ...(!!styleProps.inner && {
     ...theme.typography.body2,
     color: theme.palette.text.secondary,
-  },
-});
+  }),
+}));
 
 /**
  * @ignore - internal component.
  */
-const ClockNumber: React.FC<ClockNumberProps & WithStyles<typeof styles>> = (props) => {
-  const { classes, disabled, index, inner, label, selected, ...other } = props;
+function ClockNumber(props: ClockNumberProps) {
+  const { className, disabled, index, inner, label, selected, ...other } = props;
+  // TODO: convert to simple assignment after the type error in defaultPropsHandler.js:60:6 is fixed
+  const styleProps = { ...props };
 
   const angle = ((index % 12) / 12) * Math.PI * 2 - Math.PI / 2;
   const length = ((CLOCK_WIDTH - CLOCK_HOUR_WIDTH - 2) / 2) * (inner ? 0.65 : 1);
   const x = Math.round(Math.cos(angle) * length);
   const y = Math.round(Math.sin(angle) * length);
 
-  const transformStyle = {
-    transform: `translate(${x}px, ${y + (CLOCK_WIDTH - CLOCK_HOUR_WIDTH) / 2}px`,
-  };
-
   return (
-    <span
-      className={clsx(classes.root, {
-        [classes.selected]: selected,
-        [classes.disabled]: disabled,
-        [classes.inner]: inner,
-      })}
-      style={transformStyle}
+    <ClockNumberRoot
+      className={clsx(
+        {
+          [classes.selected]: selected,
+          [classes.disabled]: disabled,
+        },
+        className,
+      )}
+      style={{
+        transform: `translate(${x}px, ${y + (CLOCK_WIDTH - CLOCK_HOUR_WIDTH) / 2}px`,
+      }}
+      styleProps={styleProps}
       {...other}
     >
       {label}
-    </span>
+    </ClockNumberRoot>
   );
-};
+}
 
-export default withStyles(styles, { name: 'MuiInternalClockNumber' })(ClockNumber) as (
-  props: ClockNumberProps,
-) => JSX.Element;
+export default ClockNumber;