[pickers] Migrate PickersDay to emotion

docs/pages/api-docs/date-range-picker-day.json

@@ -1,5 +1,6 @@
 {
   "props": {
+    "classes": { "type": { "name": "object" }, "required": true },
     "day": { "type": { "name": "any" }, "required": true },
     "isEndOfHighlighting": { "type": { "name": "bool" }, "required": true },
     "isEndOfPreviewing": { "type": { "name": "bool" }, "required": true },

docs/pages/api-docs/pickers-day.json

@@ -5,6 +5,7 @@
     "allowKeyboardControl": { "type": { "name": "bool" } },
     "allowSameDateSelection": { "type": { "name": "bool" } },
     "children": { "type": { "name": "node" } },
+    "classes": { "type": { "name": "object" } },
     "disabled": { "type": { "name": "bool" } },
     "disableHighlightToday": { "type": { "name": "bool" } },
     "disableMargin": { "type": { "name": "bool" } },
@@ -31,6 +32,6 @@
   "filename": "/packages/material-ui-lab/src/PickersDay/PickersDay.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/date-range-picker-day/date-range-picker-day.json

@@ -2,6 +2,7 @@
   "componentDescription": "",
   "propDescriptions": {
     "children": "The content of the component.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "day": "The date to show.",
     "isEndOfHighlighting": "Set to <code>true</code> if the <code>day</code> is the end of a highlighted date range.",
     "isEndOfPreviewing": "Set to <code>true</code> if the <code>day</code> is the start of a highlighted date range.",

docs/translations/api-docs/pickers-day/pickers-day.json

@@ -4,6 +4,7 @@
     "allowKeyboardControl": "If <code>true</code>, keyboard control and focus management is enabled.",
     "allowSameDateSelection": "If <code>true</code>, <code>onChange</code> is fired on click even if the same date is selected.",
     "children": "The content of the component.",
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "day": "The date to show.",
     "disabled": "If <code>true</code>, renders as disabled.",
     "disableHighlightToday": "If <code>true</code>, todays date is rendering without highlighting with circle.",
@@ -13,5 +14,37 @@
     "showDaysOutsideCurrentMonth": "If <code>true</code>, days that have <code>outsideCurrentMonth={true}</code> are displayed.",
     "today": "If <code>true</code>, renders as today date."
   },
-  "classDescriptions": {}
+  "classDescriptions": {
+    "root": { "description": "Styles applied to the root element." },
+    "dayWithMargin": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>disableMargin=false</code>"
+    },
+    "dayOutsideMonth": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>outsideCurrentMonth=true</code> and <code>showDaysOutsideCurrentMonth=true</code>"
+    },
+    "hiddenDaySpacingFiller": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>outsideCurrentMonth=true</code> and <code>showDaysOutsideCurrentMonth=false</code>"
+    },
+    "today": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>disableHighlightToday=false</code> and <code>today=true</code>"
+    },
+    "selected": {
+      "description": "Pseudo-class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>selected=true</code>"
+    },
+    "disabled": {
+      "description": "Pseudo-class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>disabled=true</code>"
+    }
+  }
 }

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

@@ -202,7 +202,7 @@ DateRangePickerDay.propTypes /* remove-proptypes */ = {
    */
   children: PropTypes.node,
   /**
-   * @ignore
+   * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object.isRequired,
   /**

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { getClasses, describeConformance, fireEvent, screen } from 'test/utils';
-import PickersDay from '@material-ui/lab/PickersDay';
+import { describeConformanceV5, fireEvent, screen } from 'test/utils';
+import PickersDay, { pickersDayClasses as classes } from '@material-ui/lab/PickersDay';
 import {
   adapterToUse,
   createPickerMount,
@@ -12,20 +12,8 @@ import {
 describe('<PickersDay />', () => {
   const mount = createPickerMount();
   const render = createPickerRender();
-  let classes: Record<string, string>;
 
-  before(() => {
-    classes = getClasses(
-      <PickersDay
-        day={adapterToUse.date()}
-        outsideCurrentMonth={false}
-        selected
-        onDaySelect={() => {}}
-      />,
-    );
-  });
-
-  describeConformance(
+  describeConformanceV5(
     <PickersDay
       day={adapterToUse.date()}
       outsideCurrentMonth={false}
@@ -37,9 +25,11 @@ describe('<PickersDay />', () => {
       inheritComponent: 'button',
       render,
       mount,
+      muiName: 'MuiPickersDay',
       refInstanceof: window.HTMLButtonElement,
+      testVariantProps: { variant: 'disableMargin' },
       // cannot test reactTestRenderer because of required context
-      skip: ['componentProp', 'reactTestRenderer'],
+      skip: ['componentProp', 'componentsProp', 'reactTestRenderer'],
     }),
   );