[core] Clean screenshots

docs/data/date-pickers/base-concepts/ComponentFamilies.js → docs/data/date-pickers/base-concepts/ComponentFamiliesSnap.js

@@ -25,7 +25,7 @@ function ProLabel({ children }) {
   );
 }
 
-export default function ComponentFamilies() {
+export default function ComponentFamiliesSnap() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer

docs/data/date-pickers/base-concepts/ComponentFamilies.tsx → docs/data/date-pickers/base-concepts/ComponentFamiliesSnap.tsx

@@ -25,7 +25,7 @@ function ProLabel({ children }: { children: React.ReactNode }) {
   );
 }
 
-export default function ComponentFamilies() {
+export default function ComponentFamiliesSnap() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer

docs/data/date-pickers/base-concepts/PickersFamiliesSnap.js

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
+import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
+import { DesktopDateTimePicker } from '@mui/x-date-pickers/DesktopDateTimePicker';
+import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker';
+import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
+import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
+import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker';
+import { MobileDateRangePicker } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
+
+import Stack from '@mui/material/Stack';
+
+// Only create for snapshot purpose
+export default function PickersFamiliesSnap() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack direction="column" spacing={1}>
+        <DesktopDatePicker
+          label="DesktopDatePicker"
+          defaultValue={dayjs('2022-04-17T10:36:55')}
+        />
+        <DesktopTimePicker
+          label="DesktopTimePicker"
+          defaultValue={dayjs('2022-04-17T10:36:55')}
+        />
+        <DesktopDateTimePicker
+          label="DesktopDateTimePicker"
+          defaultValue={dayjs('2022-04-17T10:36:55')}
+        />
+        <MobileDatePicker
+          label="MobileDatePicker"
+          defaultValue={dayjs('2022-04-17T10:36:55')}
+        />
+        <MobileTimePicker
+          label="MobileTimePicker"
+          defaultValue={dayjs('2022-04-17T10:36:55')}
+        />
+        <MobileDateTimePicker
+          label="MobileDateTimePicker"
+          defaultValue={dayjs('2022-04-17T10:36:55')}
+        />
+        <DesktopDateRangePicker
+          label="DesktopDateRangePicker"
+          defaultValue={[dayjs('2022-04-17T10:36:55'), dayjs('2022-04-19T10:36:55')]}
+        />
+        <MobileDateRangePicker
+          label="MobileDateRangePicker"
+          defaultValue={[dayjs('2022-04-17T10:36:55'), dayjs('2022-04-19T10:36:55')]}
+        />
+      </Stack>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/base-concepts/PickersFamiliesSnap.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
+import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
+import { DesktopDateTimePicker } from '@mui/x-date-pickers/DesktopDateTimePicker';
+import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker';
+import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
+import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
+import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker';
+import { MobileDateRangePicker } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
+
+import Stack from '@mui/material/Stack';
+
+// Only create for snapshot purpose
+export default function PickersFamiliesSnap() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Stack direction="column" spacing={1}>
+        <DesktopDatePicker
+          label="DesktopDatePicker"
+          defaultValue={dayjs('2022-04-17T10:36:55')}
+        />
+        <DesktopTimePicker
+          label="DesktopTimePicker"
+          defaultValue={dayjs('2022-04-17T10:36:55')}
+        />
+        <DesktopDateTimePicker
+          label="DesktopDateTimePicker"
+          defaultValue={dayjs('2022-04-17T10:36:55')}
+        />
+        <MobileDatePicker
+          label="MobileDatePicker"
+          defaultValue={dayjs('2022-04-17T10:36:55')}
+        />
+        <MobileTimePicker
+          label="MobileTimePicker"
+          defaultValue={dayjs('2022-04-17T10:36:55')}
+        />
+        <MobileDateTimePicker
+          label="MobileDateTimePicker"
+          defaultValue={dayjs('2022-04-17T10:36:55')}
+        />
+        <DesktopDateRangePicker
+          label="DesktopDateRangePicker"
+          defaultValue={[dayjs('2022-04-17T10:36:55'), dayjs('2022-04-19T10:36:55')]}
+        />
+        <MobileDateRangePicker
+          label="MobileDateRangePicker"
+          defaultValue={[dayjs('2022-04-17T10:36:55'), dayjs('2022-04-19T10:36:55')]}
+        />
+      </Stack>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/base-concepts/base-concepts.md

@@ -61,7 +61,7 @@ The _Calendar / Clock_ components are rendered inside a _Popover_ on desktop and
 The Date and Time Pickers are divided into six families of components.
 The demo below shows each one of them using their field component:
 
-{{"demo": "ComponentFamilies.js"}}
+{{"demo": "ComponentFamiliesSnap.js"}}
 
 ### Responsiveness
 

docs/data/date-pickers/validation/ValidationBehaviorView.js → docs/data/date-pickers/validation/ValidationBehaviorViewSnap.js

@@ -10,7 +10,7 @@ const today = dayjs();
 const twoPM = dayjs().set('hour', 14).startOf('hour');
 const threePM = dayjs().set('hour', 15).startOf('hour');
 
-export default function ValidationBehaviorView() {
+export default function ValidationBehaviorViewSnap() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <Grid

docs/data/date-pickers/validation/ValidationBehaviorView.tsx → docs/data/date-pickers/validation/ValidationBehaviorViewSnap.tsx

@@ -10,7 +10,7 @@ const today = dayjs();
 const twoPM = dayjs().set('hour', 14).startOf('hour');
 const threePM = dayjs().set('hour', 15).startOf('hour');
 
-export default function ValidationBehaviorView() {
+export default function ValidationBehaviorViewSnap() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <Grid

docs/data/date-pickers/validation/ValidationBehaviorViewSnap.tsx.preview

@@ -0,0 +1,14 @@
+<Grid
+  container
+  columns={{ xs: 1, lg: 2 }}
+  spacing={4}
+  alignItems="center"
+  justifyContent="center"
+>
+  <Grid item>
+    <DateCalendar defaultValue={today} disableFuture />
+  </Grid>
+  <Grid item>
+    <TimeClock defaultValue={twoPM} maxTime={threePM} />
+  </Grid>
+</Grid>

docs/data/date-pickers/validation/validation.md

@@ -43,7 +43,7 @@ On the field—it enables its error state.
 
 On the calendar and clock views—the invalid values are displayed as disabled to prevent their selection.
 
-{{"demo": "ValidationBehaviorView.js", "defaultCodeOpen": false}}
+{{"demo": "ValidationBehaviorViewSnap.js", "defaultCodeOpen": false}}
 
 ## Past and future validation
 

test/regressions/index.js

@@ -17,7 +17,32 @@ const blacklist = [
   'docs-data-grid-filtering/CustomRatingOperator.png', // Needs interaction
   'docs-data-grid-filtering/CustomInputComponent.png', // Needs interaction
   'docs-date-pickers-date-calendar/DateCalendarServerRequest.png', // Has random behavior (TODO: Use seeded random)
+  'docs-data-grid-getting-started/Codesandbox.png', // codesandbox is a white rectagle
   // 'docs-system-typography',
+  /**
+   * Excluse docs pages about interaction.
+   * Those features do not demonstrate rendering features. They highlight some interaction
+   * So they have nearly no interest in argos.
+   * The `(?<!Snap)` part ensure that those demo does not end with Snap.png since those demos are build on the purpose of snapshot
+   */
+  /^docs-data-grid-accessibility(.*)(?<!Snap)\.png$/,
+  /^docs-data-grid-api-object(.*)(?<!Snap)\.png$/,
+  /^docs-data-grid-clipboard(.*)(?<!Snap)\.png$/,
+  /^docs-data-grid-column-menu(.*)(?<!Snap)\.png$/,
+  /^docs-data-grid-editing(.*)(?<!Snap)\.png$/,
+  /^docs-data-grid-events(.*)(?<!Snap)\.png$/,
+  /^docs-data-grid-export(.*)(?<!(Snap|ExportDefaultToolbar))\.png$/,
+  /^docs-data-grid-row-selection(.*)(?<!Snap)\.png$/,
+  /^docs-data-grid-state(.*)(?<!Snap)\.png$/,
+  /**
+   * Exclude basic date pickers demo since they most of the time only show the field components.
+   * Those pages have a Snap demo to show the different state of the field.
+   */
+  /^docs-date-pickers-(date|time|date-time)(-range){0,1}-(field|picker)\/(.*)(?<!Snap)\.png$/,
+  /^docs-date-pickers-validation\/(.*)(?<!Snap)\.png$/,
+  /^docs-date-pickers-base-concepts\/(.*)(?<!Snap)\.png$/,
+  /^docs-date-pickers-fields\/(.*)(?<!Snap)\.png$/,
+  /^docs-migration(.*)(?<!Snap)\.png$/,
 ];
 
 const unusedBlacklistPatterns = new Set(blacklist);