[pickers] Migrate PickersMonth to emotion (#26021)

* migrate to emotion * update theme to fix types * try primary.main color * remove forward ref * revert color * Let's not expose classes fo rnow * use generic * tryout color * use main color * fix selected color * add pseudo classes * sort asc * developers shouldn't be able to provide default props * simplify changes * remove classes file * dummy change to retrigger argos Co-authored-by: eps1lon <[email protected]> Co-authored-by: Olivier Tassinari <[email protected]>
mui · May 12, 2021 · fc40ead · fc40ead
1 parent ceebedc
commit fc40ead
Showing 1 changed file with 41 additions and 33 deletions.
diff --git a/packages/material-ui-lab/src/MonthPicker/PickersMonth.tsx b/packages/material-ui-lab/src/MonthPicker/PickersMonth.tsx
@@ -1,9 +1,13 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import Typography from '@material-ui/core/Typography';
-import { MuiStyles, StyleRules, WithStyles, withStyles } from '@material-ui/core/styles';
+import Typography, { TypographyTypeMap } from '@material-ui/core/Typography';
+import { experimentalStyled } from '@material-ui/core/styles';
+import { OverridableComponent } from '@material-ui/core/OverridableComponent';
+import { generateUtilityClasses } from '@material-ui/unstyled';
 import { onSpaceOrEnter } from '../internal/pickers/utils';
 
+const classes = generateUtilityClasses('PrivatePickersMonth', ['root', 'selected']);
+
 export interface MonthProps {
   children: React.ReactNode;
   disabled?: boolean;
@@ -12,47 +16,51 @@ export interface MonthProps {
   value: any;
 }
 
-export type PickersMonthClassKey = 'root' | 'selected';
+export type PickersMonthClassKey = keyof typeof classes;
 
-export const styles: MuiStyles<PickersMonthClassKey> = (
-  theme,
-): StyleRules<PickersMonthClassKey> => ({
-  root: {
-    flex: '1 0 33.33%',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    cursor: 'pointer',
-    outline: 0,
-    height: 64,
-    transition: theme.transitions.create('font-size', { duration: '100ms' }),
-    '&:focus': {
-      color: theme.palette.primary.main,
-      fontWeight: theme.typography.fontWeightMedium,
-    },
-    '&:disabled': {
-      pointerEvents: 'none',
-      color: theme.palette.text.secondary,
-    },
-    '&$selected': {
-      color: theme.palette.primary.main,
-      fontWeight: theme.typography.fontWeightMedium,
-    },
+const PickersMonthRoot = experimentalStyled<
+  OverridableComponent<TypographyTypeMap<{ component?: React.ElementType; disabled?: boolean }>>
+>(
+  Typography,
+  {},
+  {
+    skipSx: true,
+  },
+)(({ theme }) => ({
+  flex: '1 0 33.33%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: 'pointer',
+  height: 64,
+  outline: 0,
+  transition: theme.transitions.create('font-size', { duration: '100ms' }),
+  '&:focus': {
+    color: theme.palette.primary.main,
+    fontWeight: theme.typography.fontWeightMedium,
+  },
+  '&:disabled': {
+    pointerEvents: 'none',
+    color: theme.palette.text.secondary,
   },
-  selected: {},
-});
+  [`&.${classes.selected}`]: {
+    color: theme.palette.primary.main,
+    fontWeight: theme.typography.fontWeightMedium,
+  },
+}));
 
 /**
  * @ignore - do not document.
  */
-const PickersMonth: React.FC<MonthProps & WithStyles<typeof styles>> = (props) => {
-  const { classes, disabled, onSelect, selected, value, ...other } = props;
+const PickersMonth: React.FC<MonthProps> = (props) => {
+  const { disabled, onSelect, selected, value, ...other } = props;
+
   const handleSelection = () => {
     onSelect(value);
   };
 
   return (
-    <Typography
+    <PickersMonthRoot
       data-mui-test="month"
       component="button"
       className={clsx(classes.root, {
@@ -69,4 +77,4 @@ const PickersMonth: React.FC<MonthProps & WithStyles<typeof styles>> = (props) =
   );
 };
 
-export default withStyles(styles, { name: 'PrivatePickersMonth' })(PickersMonth);
+export default PickersMonth;