[DateRangePicker] Migrate DateRangePickerDay to emotion (#26368)

Author: siriwatknp

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

@@ -1,6 +1,5 @@
 {
   "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 },
@@ -10,38 +9,34 @@
     "isStartOfPreviewing": { "type": { "name": "bool" }, "required": true },
     "outsideCurrentMonth": { "type": { "name": "bool" }, "required": true },
     "children": { "type": { "name": "node" } },
-    "selected": { "type": { "name": "bool" } }
+    "classes": { "type": { "name": "object" } },
+    "selected": { "type": { "name": "bool" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "DateRangePickerDay",
   "styles": {
     "classes": [
       "root",
-      "dayWithMargin",
-      "dayOutsideMonth",
-      "hiddenDaySpacingFiller",
-      "today",
-      "selected",
-      "disabled",
-      "day",
       "rangeIntervalDayHighlight",
       "rangeIntervalDayHighlightStart",
       "rangeIntervalDayHighlightEnd",
-      "dayOutsideRangeInterval",
-      "dayInsideRangeInterval",
-      "notSelectedDate",
       "rangeIntervalPreview",
       "rangeIntervalDayPreview",
       "rangeIntervalDayPreviewStart",
-      "rangeIntervalDayPreviewEnd"
+      "rangeIntervalDayPreviewEnd",
+      "day",
+      "dayOutsideRangeInterval",
+      "dayInsideRangeInterval",
+      "notSelectedDate"
     ],
-    "globalClasses": { "selected": "Mui-selected", "disabled": "Mui-disabled" },
+    "globalClasses": {},
     "name": "MuiDateRangePickerDay"
   },
   "spread": false,
   "forwardsRefTo": "HTMLButtonElement",
   "filename": "/packages/material-ui-lab/src/DateRangePickerDay/DateRangePickerDay.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/date-range-picker/\">Date Range Picker</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

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

@@ -11,39 +11,60 @@
     "isStartOfHighlighting": "Set to <code>true</code> if the <code>day</code> is the start of a highlighted date range.",
     "isStartOfPreviewing": "Set to <code>true</code> if the <code>day</code> is the end of a highlighted date range.",
     "outsideCurrentMonth": "If <code>true</code>, day is outside of month and will be hidden.",
-    "selected": "If <code>true</code>, renders as selected."
+    "selected": "If <code>true</code>, renders as selected.",
+    "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." },
-    "dayWithMargin": {
+    "rangeIntervalDayHighlight": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>disableMargin=false</code>"
+      "conditions": "<code>isHighlighting=true</code> and <code>outsideCurrentMonth=false</code>"
     },
-    "dayOutsideMonth": {
+    "rangeIntervalDayHighlightStart": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>outsideCurrentMonth=true</code> and <code>showDaysOutsideCurrentMonth=true</code>"
+      "conditions": "<code>isStartOfHighlighting=true</code> or <code>day</code> is the start of the month"
     },
-    "hiddenDaySpacingFiller": {
+    "rangeIntervalDayHighlightEnd": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>outsideCurrentMonth=true</code> and <code>showDaysOutsideCurrentMonth=false</code>"
+      "conditions": "<code>isEndOfHighlighting=true</code> or <code>day</code> is the end of the month"
     },
-    "today": {
+    "rangeIntervalPreview": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the preview element"
+    },
+    "rangeIntervalDayPreview": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>disableHighlightToday=false</code> and <code>today=true</code>"
+      "conditions": "<code>isPreviewing=true</code> and <code>outsideCurrentMonth=false</code>"
     },
-    "selected": {
-      "description": "Pseudo-class applied to {{nodeName}} if {{conditions}}.",
+    "rangeIntervalDayPreviewStart": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>selected=true</code>"
+      "conditions": "<code>isStartOfPreviewing=true</code> or <code>day</code> is the start of the month"
     },
-    "disabled": {
-      "description": "Pseudo-class applied to {{nodeName}} if {{conditions}}.",
+    "rangeIntervalDayPreviewEnd": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>disabled=true</code>"
+      "conditions": "<code>isEndOfPreviewing=true</code> or <code>day</code> is the end of the month"
+    },
+    "day": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the day element" },
+    "dayOutsideRangeInterval": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the day element",
+      "conditions": "<code>isHighlighting=false</code>"
+    },
+    "dayInsideRangeInterval": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the day element",
+      "conditions": "<code>selected=false</code> and <code>isHighlighting=true</code>"
+    },
+    "notSelectedDate": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the day element",
+      "conditions": "<code>selected=false</code>"
     }
   }
 }

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

@@ -1,38 +1,22 @@
 import * as React from 'react';
-import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils';
+import { createMount, createClientRender, describeConformanceV5 } from 'test/utils';
 import LocalizationProvider from '@material-ui/lab/LocalizationProvider';
-import DateRangePickerDay from '@material-ui/lab/DateRangePickerDay';
+import DateRangePickerDay, {
+  dateRangePickerDayClasses as classes,
+} from '@material-ui/lab/DateRangePickerDay';
 import { adapterToUse, AdapterClassToUse } from '../internal/pickers/test-utils';
 
 describe('<DateRangePickerDay />', () => {
   const mount = createMount();
   const render = createClientRender();
-  let classes: Record<string, string>;
 
   const localizedMount = (node: React.ReactNode) => {
     return mount(
       <LocalizationProvider dateAdapter={AdapterClassToUse}>{node}</LocalizationProvider>,
     );
   };
 
-  before(() => {
-    classes = getClasses(
-      <DateRangePickerDay
-        day={adapterToUse.date()}
-        outsideCurrentMonth={false}
-        selected
-        onDaySelect={() => {}}
-        isHighlighting
-        isPreviewing
-        isStartOfPreviewing
-        isEndOfPreviewing
-        isStartOfHighlighting
-        isEndOfHighlighting
-      />,
-    );
-  });
-
-  describeConformance(
+  describeConformanceV5(
     <DateRangePickerDay
       day={adapterToUse.date()}
       outsideCurrentMonth={false}
@@ -48,12 +32,22 @@ describe('<DateRangePickerDay />', () => {
     () => ({
       classes,
       inheritComponent: 'button',
+      muiName: 'MuiDateRangePickerDay',
       render: (node: React.ReactNode) =>
         render(<LocalizationProvider dateAdapter={AdapterClassToUse}>{node}</LocalizationProvider>),
       mount: localizedMount,
       refInstanceof: window.HTMLButtonElement,
       // cannot test reactTestRenderer because of required context
-      skip: ['componentProp', 'reactTestRenderer', 'propsSpread', 'refForwarding'],
+      skip: [
+        'componentProp',
+        'componentsProp',
+        'reactTestRenderer',
+        'propsSpread',
+        'refForwarding',
+        // TODO: Fix DateRangePickerDays is not spreading props on root
+        'themeDefaultProps',
+        'themeVariants',
+      ],
     }),
   );
 });