[DatePicker] Migrate CalendarPickerSkeleton to emotion

docs/pages/api-docs/calendar-picker-skeleton.json

@@ -1,17 +1,8 @@
 {
-  "props": {},
+  "props": { "classes": { "type": { "name": "object" } }, "sx": { "type": { "name": "object" } } },
   "name": "CalendarPickerSkeleton",
   "styles": {
-    "classes": [
-      "hidden",
-      "root",
-      "loadingContainer",
-      "weekContainer",
-      "week",
-      "daysHeader",
-      "weekDayLabel",
-      "daySkeleton"
-    ],
+    "classes": ["root", "week", "daySkeleton"],
     "globalClasses": {},
     "name": "MuiCalendarPickerSkeleton"
   },
@@ -20,6 +11,6 @@
   "filename": "/packages/material-ui-lab/src/CalendarPickerSkeleton/CalendarPickerSkeleton.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/date-picker/\">Date Picker</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/translations/api-docs/calendar-picker-skeleton/calendar-picker-skeleton.json

@@ -1 +1,15 @@
-{ "componentDescription": "", "propDescriptions": {}, "classDescriptions": {} }
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details."
+  },
+  "classDescriptions": {
+    "root": { "description": "Styles applied to the root element." },
+    "week": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the week element" },
+    "daySkeleton": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the day element"
+    }
+  }
+}

packages/material-ui-lab/src/CalendarPicker/PickersCalendar.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Typography from '@material-ui/core/Typography';
-import { StyleRules, Theme, experimentalStyled as styled } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 import PickersDay, { PickersDayProps } from '../PickersDay/PickersDay';
 import { useUtils, useNow } from '../internal/pickers/hooks/useUtils';
 import { PickerOnChangeFn } from '../internal/pickers/hooks/useViews';
@@ -59,51 +59,6 @@ export interface PickersCalendarProps<TDate> extends ExportedCalendarProps<TDate
 
 const weeksContainerHeight = (DAY_SIZE + DAY_MARGIN * 4) * 6;
 
-// TODO remove PickersCalendarClassKey in CalendarPickerSkeleton migration
-export type PickersCalendarClassKey =
-  | 'root'
-  | 'loadingContainer'
-  | 'weekContainer'
-  | 'week'
-  | 'daysHeader'
-  | 'weekDayLabel';
-
-// TODO remove styles in CalendarPickerSkeleton migration
-export const styles = (theme: Theme): StyleRules<PickersCalendarClassKey> => ({
-  root: {
-    minHeight: weeksContainerHeight,
-  },
-  loadingContainer: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    minHeight: weeksContainerHeight,
-  },
-  weekContainer: {
-    overflow: 'hidden',
-  },
-  week: {
-    margin: `${DAY_MARGIN}px 0`,
-    display: 'flex',
-    justifyContent: 'center',
-  },
-  daysHeader: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  weekDayLabel: {
-    width: 36,
-    height: 40,
-    margin: '0 2px',
-    textAlign: 'center',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    color: theme.palette.text.secondary,
-  },
-});
-
 const PickersCalendarDayHeader = styled(
   'div',
   {},

packages/material-ui-lab/src/CalendarPickerSkeleton/CalendarPickerSkeleton.test.tsx

@@ -1,22 +1,20 @@
 import * as React from 'react';
-import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils';
-import CalendarPickerSkeleton from '@material-ui/lab/CalendarPickerSkeleton';
+import { createMount, createClientRender, describeConformanceV5 } from 'test/utils';
+import CalendarPickerSkeleton, {
+  calendarPickerSkeletonClasses as classes,
+} from '@material-ui/lab/CalendarPickerSkeleton';
 
 describe('<CalendarPickerSkeleton />', () => {
-  let classes: Record<string, string>;
   const render = createClientRender();
   const mount = createMount();
 
-  before(() => {
-    classes = getClasses(<CalendarPickerSkeleton />);
-  });
-
-  describeConformance(<CalendarPickerSkeleton />, () => ({
+  describeConformanceV5(<CalendarPickerSkeleton />, () => ({
     classes,
     inheritComponent: 'div',
     render,
     mount,
+    muiName: 'MuiCalendarPickerSkeleton',
     refInstanceof: window.HTMLDivElement,
-    skip: ['componentProp', 'refForwarding'],
+    skip: ['componentProp', 'refForwarding', 'componentsProp', 'themeVariants'],
   }));
 });

packages/material-ui-lab/src/CalendarPickerSkeleton/CalendarPickerSkeleton.tsx

@@ -2,35 +2,119 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import Skeleton from '@material-ui/core/Skeleton';
-import { WithStyles, withStyles, MuiStyles, StyleRules } from '@material-ui/core/styles';
-import { DAY_SIZE, DAY_MARGIN } from '../internal/pickers/constants/dimensions';
 import {
-  styles as calendarStyles,
-  PickersCalendarClassKey,
-} from '../CalendarPicker/PickersCalendar';
-
-export interface CalendarPickerSkeletonProps extends React.HTMLProps<HTMLDivElement> {}
-
-export type CalendarPickerSkeletonClassKey =
-  | PickersCalendarClassKey
-  | 'root'
-  | 'daySkeleton'
-  | 'hidden';
-export const styles: MuiStyles<CalendarPickerSkeletonClassKey> = (
-  theme,
-): StyleRules<CalendarPickerSkeletonClassKey> => ({
-  ...calendarStyles(theme),
-  root: {
-    alignSelf: 'start',
-  },
-  daySkeleton: {
-    margin: `0 ${DAY_MARGIN}px`,
+  experimentalStyled as styled,
+  unstable_useThemeProps as useThemeProps,
+  Theme,
+} from '@material-ui/core/styles';
+import { SxProps } from '@material-ui/system';
+import {
+  unstable_composeClasses as composeClasses,
+  generateUtilityClass,
+  generateUtilityClasses,
+} from '@material-ui/unstyled';
+import { DAY_SIZE, DAY_MARGIN } from '../internal/pickers/constants/dimensions';
+
+type HTMLDivProps = JSX.IntrinsicElements['div'];
+
+export interface CalendarPickerSkeletonClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the week element. */
+  week: string;
+  /** Styles applied to the day element. */
+  daySkeleton: string;
+}
+
+export interface CalendarPickerSkeletonProps extends HTMLDivProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<CalendarPickerSkeletonClasses>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+export type CalendarPickerSkeletonClassKey = keyof CalendarPickerSkeletonClasses;
+
+export function getCalendarPickerSkeletonUtilityClass(slot: string) {
+  return generateUtilityClass('MuiCalendarPickerSkeleton', slot);
+}
+
+export const calendarPickerSkeletonClasses: CalendarPickerSkeletonClasses = generateUtilityClasses(
+  'MuiCalendarPickerSkeleton',
+  ['root', 'week', 'daySkeleton'],
+);
+
+const useUtilityClasses = (styleProps: CalendarPickerSkeletonProps) => {
+  const { classes } = styleProps;
+  const slots = {
+    root: ['root'],
+    week: ['week'],
+    daySkeleton: ['daySkeleton'],
+  };
+
+  return composeClasses(slots, getCalendarPickerSkeletonUtilityClass, classes);
+};
+
+const CalendarPickerSkeletonRoot = styled(
+  'div',
+  {},
+  {
+    name: 'MuiCalendarPickerSkeleton',
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root,
   },
-  hidden: {
-    visibility: 'hidden',
+)({
+  alignSelf: 'start',
+});
+
+const CalendarPickerSkeletonWeek = styled(
+  'div',
+  {},
+  {
+    name: 'MuiCalendarPickerSkeleton',
+    slot: 'Week',
+    overridesResolver: (props, styles) => styles.week,
   },
+)({
+  margin: `${DAY_MARGIN}px 0`,
+  display: 'flex',
+  justifyContent: 'center',
 });
 
+const CalendarPickerSkeletonDay = styled(
+  Skeleton,
+  {},
+  {
+    name: 'MuiCalendarPickerSkeleton',
+    slot: 'Day',
+    overridesResolver: (props, styles) => styles.daySkeleton,
+  },
+)(({ styleProps = {} }) => ({
+  margin: `0 ${DAY_MARGIN}px`,
+  ...(styleProps.day === 0 && {
+    visibility: 'hidden',
+  }),
+}));
+
+CalendarPickerSkeletonDay.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Optional children to infer width and height from.
+   */
+  children: PropTypes.node,
+  /**
+   * @ignore
+   */
+  styleProps: PropTypes.object,
+} as any;
+
 const monthMap = [
   [0, 1, 1, 1, 1, 1, 1],
   [1, 1, 1, 1, 1, 1, 1],
@@ -39,31 +123,58 @@ const monthMap = [
   [1, 1, 1, 1, 0, 0, 0],
 ];
 
-const CalendarPickerSkeleton: React.FC<CalendarPickerSkeletonProps & WithStyles<typeof styles>> = (
-  props,
-) => {
-  const { className, classes, ...other } = props;
+/**
+ *
+ * Demos:
+ *
+ * - [Date Picker](https://material-ui.com/components/date-picker/)
+ *
+ * API:
+ *
+ * - [CalendarPickerSkeleton API](https://material-ui.com/api/calendar-picker-skeleton/)
+ */
+function CalendarPickerSkeleton(props: CalendarPickerSkeletonProps) {
+  const { className, ...other } = useThemeProps<
+    Theme,
+    JSX.IntrinsicElements['div'],
+    'MuiCalendarPickerSkeleton'
+  >({
+    props,
+    name: 'MuiCalendarPickerSkeleton',
+  });
+
+  const classes = useUtilityClasses(props);
 
   return (
-    <div className={clsx(classes.root, className)} {...other}>
+    <CalendarPickerSkeletonRoot className={clsx(classes.root, className)} {...other}>
       {monthMap.map((week, index) => (
-        <div key={index} className={classes.week}>
+        <CalendarPickerSkeletonWeek key={index} className={classes.week}>
           {week.map((day, index2) => (
-            <Skeleton
+            <CalendarPickerSkeletonDay
               key={index2}
               variant="circular"
               width={DAY_SIZE}
               height={DAY_SIZE}
-              className={clsx(classes.daySkeleton, {
-                [classes.hidden]: day === 0,
-              })}
+              className={classes.daySkeleton}
+              styleProps={{ day }}
             />
           ))}
-        </div>
+        </CalendarPickerSkeletonWeek>
       ))}
-    </div>
+    </CalendarPickerSkeletonRoot>
   );
-};
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Date Picker](https://material-ui.com/components/date-picker/)
+ *
+ * API:
+ *
+ * - [CalendarPickerSkeleton API](https://material-ui.com/api/calendar-picker-skeleton/)
+ */
 
 CalendarPickerSkeleton.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -75,23 +186,13 @@ CalendarPickerSkeleton.propTypes /* remove-proptypes */ = {
    */
   children: PropTypes.node,
   /**
-   * @ignore
+   * Override or extend the styles applied to the component.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
-   * @ignore
+   * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  className: PropTypes.string,
+  sx: PropTypes.object,
 } as any;
 
-/**
- *
- * Demos:
- *
- * - [Date Picker](https://material-ui.com/components/date-picker/)
- *
- * API:
- *
- * - [CalendarPickerSkeleton API](https://material-ui.com/api/calendar-picker-skeleton/)
- */
-export default withStyles(styles, { name: 'MuiCalendarPickerSkeleton' })(CalendarPickerSkeleton);
+export default CalendarPickerSkeleton;

packages/material-ui-lab/src/CalendarPickerSkeleton/index.ts

@@ -1,4 +1,8 @@
-export { default } from './CalendarPickerSkeleton';
+export {
+  default,
+  calendarPickerSkeletonClasses,
+  getCalendarPickerSkeletonUtilityClass,
+} from './CalendarPickerSkeleton';
 
 export type CalendarPickerSkeletonClassKey = import('./CalendarPickerSkeleton').CalendarPickerSkeletonClassKey;
 export type CalendarPickerSkeletonProps = import('./CalendarPickerSkeleton').CalendarPickerSkeletonProps;