simplify

mui · Feb 15, 2023 · 801b397 · 801b397
1 parent 36dc98f
commit 801b397
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 33 deletions.
diff --git a/docs/data/date-pickers/base-concepts/ComponentExplorerNoSnap.js b/docs/data/date-pickers/base-concepts/ComponentExplorerNoSnap.js
@@ -3,6 +3,7 @@ import * as React from 'react';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
 import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
 import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
@@ -134,14 +135,13 @@ import { ${exportedName} } from '@mui/x-date-pickers-pro';`;
  return (
  <Stack spacing={3} sx={{ width: '100%', py: 2 }}>
  <Stack direction="row" spacing={2}>
- <FormControl>
+ <FormControl sx={{ width: 192 }}>
  <InputLabel id="component-explorer-value-type-label">
  Value type
  </InputLabel>
  <Select
  label="Value type"
  labelId="component-explorer-value-type-label"
- sx={{ minWidth: 192 }}
  value={state.valueType}
  onChange={(event) =>
  setState((prev) => ({
@@ -164,12 +164,11 @@ import { ${exportedName} } from '@mui/x-date-pickers-pro';`;
  </MenuItem>
  </Select>
  </FormControl>
- <FormControl>
+ <FormControl sx={{ width: 164 }}>
  <InputLabel id="component-explorer-family-label">Family</InputLabel>
  <Select
  label="Family"
  labelId="component-explorer-family-label"
- sx={{ minWidth: 164 }}
  value={state.family}
  onChange={(event) =>
  setState((prev) => ({
@@ -197,14 +196,20 @@ import { ${exportedName} } from '@mui/x-date-pickers-pro';`;
  </div>
  <Stack>
  <Typography>Import code:</Typography>
- <HighlightedCode code={importCode} language="tsx" />
- </Stack>
- <Stack spacing={2}>
- <Typography>Live example:</Typography>
- <LocalizationProvider dateAdapter={AdapterDayjs}>
- <DemoContainer components={exportedNames}>{content}</DemoContainer>
- </LocalizationProvider>
+ <HighlightedCode
+ code={importCode}
+ language="tsx"
+ sx={{ '& pre': { mt: 1, mb: 0 } }}
+ />
  </Stack>
+ <div>
+ <Typography sx={{ mb: 1 }}>Live example:</Typography>
+ <Box sx={{ display: 'flex' }}>
+ <LocalizationProvider dateAdapter={AdapterDayjs}>
+ <DemoContainer components={exportedNames}>{content}</DemoContainer>
+ </LocalizationProvider>
+ </Box>
+ </div>
  </React.Fragment>
  ) : (
  <Typography>This component is not available yet</Typography>

diff --git a/docs/data/date-pickers/fields/LifeCycleDateRangeField.js b/docs/data/date-pickers/fields/LifeCycleDateRangeField.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import dayjs from 'dayjs';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
@@ -12,11 +13,12 @@ export default function LifeCycleDateRangeField() {
  return (
  <Stack spacing={2}>
  <LocalizationProvider dateAdapter={AdapterDayjs}>
- <SingleInputDateRangeField
- value={value}
- onChange={(newValue) => setValue(newValue)}
- sx={{ width: 300 }}
- />
+ <DemoContainer components={['SingleInputDateRangeField']}>
+ <SingleInputDateRangeField
+ value={value}
+ onChange={(newValue) => setValue(newValue)}
+ />
+ </DemoContainer>
  </LocalizationProvider>
  <Typography>
  Value:{' '}

diff --git a/docs/data/date-pickers/fields/LifeCycleDateRangeField.tsx b/docs/data/date-pickers/fields/LifeCycleDateRangeField.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import dayjs, { Dayjs } from 'dayjs';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
@@ -16,11 +17,12 @@ export default function LifeCycleDateRangeField() {
  return (
  <Stack spacing={2}>
  <LocalizationProvider dateAdapter={AdapterDayjs}>
- <SingleInputDateRangeField
- value={value}
- onChange={(newValue) => setValue(newValue)}
- sx={{ width: 300 }}
- />
+ <DemoContainer components={['SingleInputDateRangeField']}>
+ <SingleInputDateRangeField
+ value={value}
+ onChange={(newValue) => setValue(newValue)}
+ />
+ </DemoContainer>
  </LocalizationProvider>
  <Typography>
  Value:{' '}

diff --git a/docs/data/date-pickers/fields/LifeCycleDateRangeField.tsx.preview b/docs/data/date-pickers/fields/LifeCycleDateRangeField.tsx.preview
@@ -1,9 +1,10 @@
 <LocalizationProvider dateAdapter={AdapterDayjs}>
- <SingleInputDateRangeField
- value={value}
- onChange={(newValue) => setValue(newValue)}
- sx={{ width: 300 }}
- />
+ <DemoContainer components={['SingleInputDateRangeField']}>
+ <SingleInputDateRangeField
+ value={value}
+ onChange={(newValue) => setValue(newValue)}
+ />
+ </DemoContainer>
 </LocalizationProvider>
 <Typography>
  Value:{' '}

diff --git a/packages/x-date-pickers/src/internals/demo/DemoContainer.tsx b/packages/x-date-pickers/src/internals/demo/DemoContainer.tsx
@@ -64,7 +64,7 @@ export function DemoItem(props: DemoItemProps) {
  let sx: StackProps['sx'];
 
  if (component && getChildTypeFromChildName(component) === 'multi-input-range-field') {
- spacing = 2;
+ spacing = 1.5;
  sx = {
  [`& .${textFieldClasses.root}`]: {
  flexGrow: 1,
@@ -76,7 +76,13 @@ export function DemoItem(props: DemoItemProps) {
  }
 
  return (
- <Stack direction="column" alignItems="stretch" spacing={spacing} sx={sx}>
+ <Stack
+ direction="column"
+ alignItems="stretch"
+ spacing={spacing}
+ sx={sx}
+ className={textFieldClasses.root}
+ >
  {label && <Typography variant="body2">{label}</Typography>}
  {children}
  </Stack>
@@ -115,13 +121,12 @@ export function DemoContainer(props: DemoGridProps) {
  childrenCount > 2 ||
  childrenTypes.has('multi-input-range-field') ||
  childrenTypes.has('single-input-range-field') ||
- childrenTypes.has('multi-panel-UI-view')
+ childrenTypes.has('multi-panel-UI-view') ||
+ childrenTypes.has('UI-view') ||
+ childrenSupportedSections.has('date-time')
  ) {
  direction = 'column';
  spacing = getSpacing('column');
- } else if (childrenTypes.has('UI-view')) {
- direction = { xs: 'column', xl: 'row' };
- spacing = { xs: getSpacing('column'), xl: getSpacing('row') };
  } else {
  direction = { xs: 'column', lg: 'row' };
  spacing = { xs: getSpacing('column'), lg: getSpacing('row') };
@@ -137,7 +142,7 @@ export function DemoContainer(props: DemoGridProps) {
  },
  };
  } else if (childrenSupportedSections.has('date-time')) {
- sx = { ...sx, [`& > .${textFieldClasses.root}`]: { minWidth: 256 } };
+ sx = { ...sx, [`& > .${textFieldClasses.root}`]: { minWidth: 270 } };
  } else {
  sx = { ...sx, [`& > .${textFieldClasses.root}`]: { minWidth: 200 } };
  }