[pickers] Migrate PickersToolbarButton to emotion

packages/material-ui-lab/src/internal/pickers/PickersToolbarButton.tsx

@@ -1,59 +1,94 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import Button, { ButtonProps } from '@material-ui/core/Button';
-import { MuiStyles, WithStyles, withStyles } from '@material-ui/core/styles';
+import { SxProps } from '@material-ui/system';
+import {
+  experimentalStyled,
+  unstable_useThemeProps as useThemeProps,
+  Theme,
+} from '@material-ui/core/styles';
+import {
+  unstable_composeClasses as composeClasses,
+  generateUtilityClass,
+  generateUtilityClasses,
+} from '@material-ui/unstyled';
 import { TypographyProps } from '@material-ui/core/Typography';
 import PickersToolbarText from './PickersToolbarText';
 import { ExtendMui } from './typings/helpers';
 
+export const pickersToolbarButtonClasses = generateUtilityClasses('MuiPickersToolbarButton', [
+  'root',
+]);
+
 export interface ToolbarButtonProps extends ExtendMui<ButtonProps, 'value' | 'variant'> {
   align?: TypographyProps['align'];
+  classes?: typeof pickersToolbarButtonClasses;
   selected: boolean;
   typographyClassName?: string;
   value: React.ReactNode;
   variant: TypographyProps['variant'];
+  sx?: SxProps<Theme>;
 }
 
-export type PickersToolbarButtonClassKey = 'root';
+export type PickersToolbarButtonClassKey = keyof typeof pickersToolbarButtonClasses;
 
-export const styles: MuiStyles<PickersToolbarButtonClassKey> = {
-  root: {
-    padding: 0,
-    minWidth: '16px',
-    textTransform: 'none',
-  },
-};
+export function getPickersToolbarButtonUtilityClass(slot: string) {
+  return generateUtilityClass('MuiPickersToolbarButton', slot);
+}
+
+const useUtilityClasses = (styleProps: ToolbarButtonProps) => {
+  const { classes } = styleProps;
+
+  const slots = {
+    root: ['root'],
+  };
 
-const ToolbarButton: React.FunctionComponent<ToolbarButtonProps & WithStyles<typeof styles>> = (
-  props,
-) => {
-  const {
-    align,
-    classes,
-    className,
-    selected,
-    typographyClassName,
-    value,
-    variant,
-    ...other
-  } = props;
-
-  return (
-    <Button
-      data-mui-test="toolbar-button"
-      variant="text"
-      className={clsx(classes.root, className)}
-      {...other}
-    >
-      <PickersToolbarText
-        align={align}
-        className={typographyClassName}
-        variant={variant}
-        value={value}
-        selected={selected}
-      />
-    </Button>
-  );
+  return composeClasses(slots, getPickersToolbarButtonUtilityClass, classes);
 };
 
-export default withStyles(styles, { name: 'MuiPickersToolbarButton' })(ToolbarButton);
+const PickersToolbarButtonRoot = experimentalStyled(
+  Button,
+  {},
+  {
+    name: 'MuiPickersToolbarButton',
+    slot: 'Root',
+    overridesResolver: (props, styles: Record<PickersToolbarButtonClassKey, object>) => styles.root,
+  },
+)({
+  padding: 0,
+  minWidth: '16px',
+  textTransform: 'none',
+});
+
+const ToolbarButton: React.FunctionComponent<ToolbarButtonProps> = React.forwardRef(
+  function PickersToolbarButton(inProps, ref) {
+    const props = useThemeProps<Theme, ToolbarButtonProps, 'MuiPickersToolbarButton'>({
+      props: inProps,
+      name: 'MuiPickersToolbarButton',
+    });
+    const { align, className, selected, typographyClassName, value, variant, ...other } = props;
+    const styleProps = { ...props };
+    const classes = useUtilityClasses(styleProps);
+
+    return (
+      <PickersToolbarButtonRoot
+        data-mui-test="toolbar-button"
+        variant="text"
+        ref={ref}
+        className={clsx(classes.root, className)}
+        styleProps={styleProps}
+        {...other}
+      >
+        <PickersToolbarText
+          align={align}
+          className={typographyClassName}
+          variant={variant}
+          value={value}
+          selected={selected}
+        />
+      </PickersToolbarButtonRoot>
+    );
+  },
+);
+
+export default ToolbarButton;