mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.9k stars 32.26k forks source link

[DateRangePicker] Remove DateRangDelimiter #23609

Closed oliviertassinari closed 3 years ago

oliviertassinari commented 3 years ago

The DateRangDelimiter solves the following problem:

https://github.com/mui-org/material-ui/blob/bbf2485fd7f8f09fdb338193f265be6277c98e7b/packages/material-ui-lab/src/DateRangeDelimiter/DateRangeDelimiter.tsx#L4-L9

I propose we drop it, and replace it with <Box sx={{ mx: 2 }} />. It's even more true as the product teams usually have a tone of different approaches to display the range. https://www.daterangepicker.com/ inherit some of this flexibility required.

diff --git a/docs/src/pages/components/date-range-picker/BasicDateRangePicker.tsx b/docs/src/pages/components/date-range-picker/BasicDateRangePicker.tsx
index 72a89f9a11..2742fa6811 100644
--- a/docs/src/pages/components/date-range-picker/BasicDateRangePicker.tsx
+++ b/docs/src/pages/components/date-range-picker/BasicDateRangePicker.tsx
@@ -3,7 +3,7 @@ import TextField from '@material-ui/core/TextField';
 import DateRangePicker, { DateRange } from '@material-ui/lab/DateRangePicker';
 import AdapterDateFns from '@material-ui/lab/AdapterDateFns';
 import LocalizationProvider from '@material-ui/lab/LocalizationProvider';
-import DateRangeDelimiter from '@material-ui/lab/DateRangeDelimiter';
+import Box from '@material-ui/core/Box';

 export default function BasicDateRangePicker() {
   const [value, setValue] = React.useState<DateRange<Date>>([null, null]);
@@ -20,7 +20,7 @@ export default function BasicDateRangePicker() {
         renderInput={(startProps, endProps) => (
           <React.Fragment>
             <TextField {...startProps} variant="standard" />
-            <DateRangeDelimiter> to </DateRangeDelimiter>
+            <Box sx={{ mx: 2 }}>to</Box>
             <TextField {...endProps} variant="standard" />
           </React.Fragment>
         )}
havgry commented 3 years ago

What needs to be done? Remove the component and update the docs?

oliviertassinari commented 3 years ago

@havgry Yes, this sounds about right

huzaima commented 3 years ago

Is this taken by someone or can I take it?

oliviertassinari commented 3 years ago

@huzaima You are good to go :)

huzaima commented 3 years ago

Thanks. Let me get back with a PR.

huzaima commented 3 years ago

Pull Request #24298