[DateTimePicker] Migrate DateTimePickerTabs and Toolbar to emotion

packages/material-ui-lab/src/DateTimePicker/DateTimePickerTabs.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import clsx from 'clsx';
 import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 import Paper from '@material-ui/core/Paper';
-import { MuiStyles, WithStyles, withStyles, useTheme, StyleRules } from '@material-ui/core/styles';
+import { useTheme, experimentalStyled as styled } from '@material-ui/core/styles';
 import TimeIcon from '../internal/svg-icons/Time';
 import DateRangeIcon from '../internal/svg-icons/DateRange';
 import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVariantContext';
@@ -35,55 +34,51 @@ export interface DateTimePickerTabsProps {
   view: DateTimePickerView;
 }
 
-export type DateTimePickerTabsClassKey = 'root' | 'modeDesktop' | 'tabs';
+const DateTimePickerTabsRoot = styled(
+  Paper,
+  {},
+  { skipSx: true },
+)(({ styleProps = {} }) => ({
+  ...(styleProps.wrapperVariant === 'desktop' && {
+    order: 1,
+  }),
+}));
 
-export const styles: MuiStyles<DateTimePickerTabsClassKey> = (
-  theme,
-): StyleRules<DateTimePickerTabsClassKey> => {
+const DateTimePickerTabsTabs = styled(
+  Tabs,
+  {},
+  { skipSx: true },
+)(({ theme }) => {
   const tabsBackground =
     theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.background.default;
-
   return {
-    root: {},
-    modeDesktop: {
-      order: 1,
-    },
-    tabs: {
-      color: theme.palette.getContrastText(tabsBackground),
-      backgroundColor: tabsBackground,
-    },
+    color: theme.palette.getContrastText(tabsBackground),
+    backgroundColor: tabsBackground,
   };
-};
+});
 
 /**
  * @ignore - internal component.
  */
-const DateTimePickerTabs: React.FC<DateTimePickerTabsProps & WithStyles<typeof styles>> = (
-  props,
-) => {
-  const {
-    classes,
-    dateRangeIcon = <DateRangeIcon />,
-    onChange,
-    timeIcon = <TimeIcon />,
-    view,
-  } = props;
+const DateTimePickerTabs = (props: DateTimePickerTabsProps) => {
+  const { dateRangeIcon = <DateRangeIcon />, onChange, timeIcon = <TimeIcon />, view } = props;
 
   const theme = useTheme();
   const wrapperVariant = React.useContext(WrapperVariantContext);
   const indicatorColor = theme.palette.mode === 'light' ? 'secondary' : 'primary';
 
+  const styleProps = { ...props, wrapperVariant };
+
   const handleChange = (event: React.SyntheticEvent, value: TabValue) => {
     onChange(tabToView(value));
   };
 
   return (
-    <Paper className={clsx(classes.root, { [classes.modeDesktop]: wrapperVariant === 'desktop' })}>
-      <Tabs
+    <DateTimePickerTabsRoot styleProps={styleProps}>
+      <DateTimePickerTabsTabs
         variant="fullWidth"
         value={viewToTab(view)}
         onChange={handleChange}
-        className={classes.tabs}
         indicatorColor={indicatorColor}
       >
         <Tab
@@ -96,9 +91,9 @@ const DateTimePickerTabs: React.FC<DateTimePickerTabsProps & WithStyles<typeof s
           aria-label="pick time"
           icon={<React.Fragment>{timeIcon}</React.Fragment>}
         />
-      </Tabs>
-    </Paper>
+      </DateTimePickerTabsTabs>
+    </DateTimePickerTabsRoot>
   );
 };
 
-export default withStyles(styles, { name: 'MuiInternalDateTimePickerTabs' })(DateTimePickerTabs);
+export default DateTimePickerTabs;

packages/material-ui-lab/src/DateTimePicker/DateTimePickerToolbar.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { MuiStyles, WithStyles, withStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import { generateUtilityClasses } from '@material-ui/unstyled';
 import PickersToolbarText from '../internal/pickers/PickersToolbarText';
 import PickersToolbar from '../internal/pickers/PickersToolbar';
 import PickersToolbarButton from '../internal/pickers/PickersToolbarButton';
@@ -9,47 +10,58 @@ import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVaria
 import { ToolbarComponentProps } from '../internal/pickers/typings/BasePicker';
 import { DateTimePickerView } from './shared';
 
-export const styles: MuiStyles<
-  'root' | 'separator' | 'timeContainer' | 'dateContainer' | 'timeTypography' | 'penIcon'
-> = {
-  root: {
-    paddingLeft: 16,
-    paddingRight: 16,
-    justifyContent: 'space-around',
-  },
-  separator: {
-    margin: '0 4px 0 2px',
-    cursor: 'default',
-  },
-  timeContainer: {
-    display: 'flex',
-  },
-  dateContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-  },
-  timeTypography: {},
-  penIcon: {
+const classes = generateUtilityClasses('PrivateDateTimePickerToolbar', ['penIcon']);
+
+const DateTimePickerToolbarRoot = styled(
+  PickersToolbar,
+  {},
+  { skipSx: true },
+)({
+  paddingLeft: 16,
+  paddingRight: 16,
+  justifyContent: 'space-around',
+  [`& .${classes.penIcon}`]: {
     position: 'absolute',
     top: 8,
     right: 8,
   },
-};
+});
+
+const DateTimePickerToolbarDateContainer = styled(
+  'div',
+  {},
+  { skipSx: true },
+)({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+});
+
+const DateTimePickerToolbarTimeContainer = styled(
+  'div',
+  {},
+  { skipSx: true },
+)({
+  display: 'flex',
+});
 
-export type DateTimePickerToolbarClassKey = keyof WithStyles<typeof styles>['classes'];
+const DateTimePickerToolbarSeparator = styled(
+  PickersToolbarText,
+  {},
+  { skipSx: true },
+)({
+  margin: '0 4px 0 2px',
+  cursor: 'default',
+});
 
 /**
  * @ignore - internal component.
  */
-const DateTimePickerToolbar: React.FC<ToolbarComponentProps & WithStyles<typeof styles>> = (
-  props,
-) => {
+const DateTimePickerToolbar = (props: ToolbarComponentProps) => {
   const {
     ampm,
     date,
     dateRangeIcon,
-    classes,
     hideTabs,
     isMobileKeyboardViewOpen,
     onChange,
@@ -87,16 +99,15 @@ const DateTimePickerToolbar: React.FC<ToolbarComponentProps & WithStyles<typeof
   return (
     <React.Fragment>
       {wrapperVariant !== 'desktop' && (
-        <PickersToolbar
+        <DateTimePickerToolbarRoot
           toolbarTitle={toolbarTitle}
           penIconClassName={classes.penIcon}
-          className={classes.root}
           isMobileKeyboardViewOpen={isMobileKeyboardViewOpen}
           toggleMobileKeyboardView={toggleMobileKeyboardView}
           {...other}
           isLandscape={false}
         >
-          <div className={classes.dateContainer}>
+          <DateTimePickerToolbarDateContainer>
             <PickersToolbarButton
               tabIndex={-1}
               variant="subtitle1"
@@ -113,27 +124,25 @@ const DateTimePickerToolbar: React.FC<ToolbarComponentProps & WithStyles<typeof
               selected={openView === 'day'}
               value={dateText}
             />
-          </div>
-          <div className={classes.timeContainer}>
+          </DateTimePickerToolbarDateContainer>
+          <DateTimePickerToolbarTimeContainer>
             <PickersToolbarButton
               variant="h3"
               data-mui-test="hours"
               onClick={() => setOpenView('hours')}
               selected={openView === 'hours'}
               value={date ? formatHours(date) : '--'}
-              typographyClassName={classes.timeTypography}
             />
-            <PickersToolbarText variant="h3" value=":" className={classes.separator} />
+            <DateTimePickerToolbarSeparator variant="h3" value=":" />
             <PickersToolbarButton
               variant="h3"
               data-mui-test="minutes"
               onClick={() => setOpenView('minutes')}
               selected={openView === 'minutes'}
               value={date ? utils.format(date, 'minutes') : '--'}
-              typographyClassName={classes.timeTypography}
             />
-          </div>
-        </PickersToolbar>
+          </DateTimePickerToolbarTimeContainer>
+        </DateTimePickerToolbarRoot>
       )}
       {showTabs && (
         <DateTimePickerTabs
@@ -147,6 +156,4 @@ const DateTimePickerToolbar: React.FC<ToolbarComponentProps & WithStyles<typeof
   );
 };
 
-export default withStyles(styles, { name: 'MuiInternalDateTimePickerToolbar' })(
-  DateTimePickerToolbar,
-);
+export default DateTimePickerToolbar;