Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[docs] Add RTL documentation for the pickers #13855

Merged
merged 17 commits into from
Sep 2, 2024
Merged

[docs] Add RTL documentation for the pickers #13855

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
50d3e0e
[docs] Add RTL documentation for the pickers
flaviendelangle Jul 16, 2024
2e56e01
Work
flaviendelangle Jul 16, 2024
9153d2e
Merge branch 'master' into rtl-doc
flaviendelangle Jul 17, 2024
2364bb1
Merge branch 'master' into rtl-doc
flaviendelangle Jul 26, 2024
fade69c
Merge branch 'master' into rtl-doc
flaviendelangle Aug 1, 2024
0a3abfe
Empty
flaviendelangle Aug 1, 2024
f5636a3
Try reducing TS concurrency
flaviendelangle Aug 1, 2024
855c540
Merge branch 'master' into rtl-doc
flaviendelangle Aug 2, 2024
78798de
Fix
flaviendelangle Aug 2, 2024
6134015
Try concurrency 1
flaviendelangle Aug 2, 2024
b14ce33
Try fix CI
flaviendelangle Aug 5, 2024
096d902
Merge branch 'master' into rtl-doc
flaviendelangle Aug 6, 2024
5150959
Undo tests for CI
flaviendelangle Aug 6, 2024
5ded7f5
Fix
flaviendelangle Aug 6, 2024
bc3e93c
Merge branch 'master' into rtl-doc
flaviendelangle Sep 2, 2024
839c456
Merge branch 'master' into rtl-doc
flaviendelangle Sep 2, 2024
812e35b
Merge branch 'master' into rtl-doc
flaviendelangle Sep 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 67 additions & 0 deletions docs/data/date-pickers/adapters-locale/PickersRTL.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import * as React from 'react';
import { prefixer } from 'stylis';
import rtlPlugin from 'stylis-plugin-rtl';
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
import Box from '@mui/material/Box';
import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';
import { MultiSectionDigitalClock } from '@mui/x-date-pickers/MultiSectionDigitalClock';

// Create rtl cache
const cacheRtl = createCache({
key: 'pickers-rtl-demo',
stylisPlugins: [prefixer, rtlPlugin],
});

export default function PickersRTL() {
// Inherit the theme from the docs site (dark/light mode)
const existingTheme = useTheme();

const theme = React.useMemo(
() =>
createTheme({}, existingTheme, {
direction: 'rtl',
}),
[existingTheme],
);

return (
<CacheProvider value={cacheRtl}>
<ThemeProvider theme={theme}>
<div dir="rtl">
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DemoContainer
components={[
'DatePicker',
'DateRangeCalendar',
'MultiSectionDigitalClock',
]}
>
<DatePicker
// Setting `dir="rtl"` on the paper is needed if the `<div dir="rtl />` does not contain the portaled element.
// If you set `dir="rtl"` on the `<body />`, you can skip it.
slotProps={{
desktopPaper: {
dir: 'rtl',
},
mobilePaper: {
dir: 'rtl',
},
}}
/>
<DateRangeCalendar />
<Box sx={{ width: 56 * 3 }}>
<MultiSectionDigitalClock />
</Box>
</DemoContainer>
</LocalizationProvider>
</div>
</ThemeProvider>
</CacheProvider>
);
}
67 changes: 67 additions & 0 deletions docs/data/date-pickers/adapters-locale/PickersRTL.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import * as React from 'react';
import { prefixer } from 'stylis';
import rtlPlugin from 'stylis-plugin-rtl';
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
import Box from '@mui/material/Box';
import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';
import { MultiSectionDigitalClock } from '@mui/x-date-pickers/MultiSectionDigitalClock';

// Create rtl cache
const cacheRtl = createCache({
key: 'pickers-rtl-demo',
stylisPlugins: [prefixer, rtlPlugin],
});

export default function PickersRTL() {
// Inherit the theme from the docs site (dark/light mode)
const existingTheme = useTheme();

const theme = React.useMemo(
() =>
createTheme({}, existingTheme, {
direction: 'rtl',
}),
[existingTheme],
);

return (
<CacheProvider value={cacheRtl}>
<ThemeProvider theme={theme}>
<div dir="rtl">
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DemoContainer
components={[
'DatePicker',
'DateRangeCalendar',
'MultiSectionDigitalClock',
]}
>
<DatePicker
// Setting `dir="rtl"` on the paper is needed if the `<div dir="rtl />` does not contain the portaled element.
// If you set `dir="rtl"` on the `<body />`, you can skip it.
slotProps={{
desktopPaper: {
dir: 'rtl',
},
mobilePaper: {
dir: 'rtl',
},
}}
/>
<DateRangeCalendar />
<Box sx={{ width: 56 * 3 }}>
<MultiSectionDigitalClock />
</Box>
</DemoContainer>
</LocalizationProvider>
</div>
</ThemeProvider>
</CacheProvider>
);
}
9 changes: 9 additions & 0 deletions docs/data/date-pickers/adapters-locale/adapters-locale.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -369,3 +369,12 @@ moment.updateLocale('en', {
},
});
```

## RTL Support

Right-to-left languages such as Arabic, Persian, or Hebrew are supported.
Follow [this guide](/material-ui/customization/right-to-left/) to use them.
flaviendelangle marked this conversation as resolved.
Show resolved Hide resolved

The example below demonstrates how to use an RTL language (Arabic) with some of the Date and Time Pickers components.

{{"demo": "PickersRTL.js"}}
55 changes: 39 additions & 16 deletions docs/data/date-pickers/calendar-systems/AdapterHijri.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,54 @@
import * as React from 'react';
import { prefixer } from 'stylis';
import rtlPlugin from 'stylis-plugin-rtl';
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
import moment from 'moment-hijri';
import { AdapterMomentHijri } from '@mui/x-date-pickers/AdapterMomentHijri';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import useTheme from '@mui/system/useTheme';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';

// Create rtl cache
const cacheRtl = createCache({
key: 'adapter-hijri-demo',
stylisPlugins: [prefixer, rtlPlugin],
});

export default function AdapterHijri() {
// Inherit the theme from the docs site (dark/light mode)
const existingTheme = useTheme();

const theme = React.useMemo(
() => createTheme({ direction: 'rtl' }, existingTheme),
() => createTheme(existingTheme, { direction: 'rtl' }),
[existingTheme],
);

return (
<ThemeProvider theme={theme}>
<div dir="rtl">
<LocalizationProvider dateAdapter={AdapterMomentHijri}>
<DateTimePicker
label="Date Picker"
defaultValue={moment(new Date(2022, 1, 1))}
// moment-hijri support dates between 1356-01-01 and 1499-12-29 H (1937-03-14 and 2076-11-26)
minDate={moment(new Date(1938, 0, 1))}
maxDate={moment(new Date(2075, 11, 31))}
/>
</LocalizationProvider>
</div>
</ThemeProvider>
<CacheProvider value={cacheRtl}>
<ThemeProvider theme={theme}>
<div dir="rtl">
<LocalizationProvider dateAdapter={AdapterMomentHijri}>
<DateTimePicker
label="Date Picker"
defaultValue={moment(new Date(2022, 1, 1))}
// moment-hijri support dates between 1356-01-01 and 1499-12-29 H (1937-03-14 and 2076-11-26)
minDate={moment(new Date(1938, 0, 1))}
maxDate={moment(new Date(2075, 11, 31))}
// Setting `dir="rtl"` on the paper is needed if the `<div dir="rtl />` does not contain the portaled element.
// If you set `dir="rtl"` on the `<body />`, you can skip it.
slotProps={{
desktopPaper: {
dir: 'rtl',
},
mobilePaper: {
dir: 'rtl',
},
}}
/>
</LocalizationProvider>
</div>
</ThemeProvider>
</CacheProvider>
);
}
55 changes: 39 additions & 16 deletions docs/data/date-pickers/calendar-systems/AdapterHijri.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,54 @@
import * as React from 'react';
import { prefixer } from 'stylis';
import rtlPlugin from 'stylis-plugin-rtl';
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
import moment from 'moment-hijri';
import { AdapterMomentHijri } from '@mui/x-date-pickers/AdapterMomentHijri';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import useTheme from '@mui/system/useTheme';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';

// Create rtl cache
const cacheRtl = createCache({
key: 'adapter-hijri-demo',
stylisPlugins: [prefixer, rtlPlugin],
});

export default function AdapterHijri() {
// Inherit the theme from the docs site (dark/light mode)
const existingTheme = useTheme();

const theme = React.useMemo(
() => createTheme({ direction: 'rtl' }, existingTheme),
() => createTheme(existingTheme, { direction: 'rtl' }),
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The order was wrong, existingTheme contains direction"=ltr" so it overrode { direction: 'rtl' }

This, plus the missing stylis plugin meant that our UI was basically a mix of LTR and RTL on those demos.

[existingTheme],
);

return (
<ThemeProvider theme={theme}>
<div dir="rtl">
<LocalizationProvider dateAdapter={AdapterMomentHijri}>
<DateTimePicker
label="Date Picker"
defaultValue={moment(new Date(2022, 1, 1))}
// moment-hijri support dates between 1356-01-01 and 1499-12-29 H (1937-03-14 and 2076-11-26)
minDate={moment(new Date(1938, 0, 1))}
maxDate={moment(new Date(2075, 11, 31))}
/>
</LocalizationProvider>
</div>
</ThemeProvider>
<CacheProvider value={cacheRtl}>
<ThemeProvider theme={theme}>
<div dir="rtl">
<LocalizationProvider dateAdapter={AdapterMomentHijri}>
<DateTimePicker
label="Date Picker"
defaultValue={moment(new Date(2022, 1, 1))}
// moment-hijri support dates between 1356-01-01 and 1499-12-29 H (1937-03-14 and 2076-11-26)
minDate={moment(new Date(1938, 0, 1))}
maxDate={moment(new Date(2075, 11, 31))}
// Setting `dir="rtl"` on the paper is needed if the `<div dir="rtl />` does not contain the portaled element.
// If you set `dir="rtl"` on the `<body />`, you can skip it.
slotProps={{
desktopPaper: {
dir: 'rtl',
},
mobilePaper: {
dir: 'rtl',
},
}}
/>
</LocalizationProvider>
</div>
</ThemeProvider>
</CacheProvider>
);
}
13 changes: 0 additions & 13 deletions docs/data/date-pickers/calendar-systems/AdapterHijri.tsx.preview
View file
Open in desktop

This file was deleted.

49 changes: 36 additions & 13 deletions docs/data/date-pickers/calendar-systems/AdapterJalali.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,50 @@
import * as React from 'react';
import { prefixer } from 'stylis';
import rtlPlugin from 'stylis-plugin-rtl';
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import useTheme from '@mui/system/useTheme';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';

// Create rtl cache
const cacheRtl = createCache({
key: 'adapter-jalali-demo',
stylisPlugins: [prefixer, rtlPlugin],
});

export default function AdapterJalali() {
// Inherit the theme from the docs site (dark/light mode)
const existingTheme = useTheme();

const theme = React.useMemo(
() => createTheme({ direction: 'rtl' }, existingTheme),
() => createTheme(existingTheme, { direction: 'rtl' }),
[existingTheme],
);

return (
<ThemeProvider theme={theme}>
<div dir="rtl">
<LocalizationProvider dateAdapter={AdapterDateFnsJalali}>
<DateTimePicker
label="AdapterDateFnsJalali"
defaultValue={new Date(2022, 1, 1, 12)}
/>
</LocalizationProvider>
</div>
</ThemeProvider>
<CacheProvider value={cacheRtl}>
<ThemeProvider theme={theme}>
<div dir="rtl">
<LocalizationProvider dateAdapter={AdapterDateFnsJalali}>
<DateTimePicker
label="AdapterDateFnsJalali"
defaultValue={new Date(2022, 1, 1, 12)}
// Setting `dir="rtl"` on the paper is needed if the `<div dir="rtl />` does not contain the portaled element.
// If you set `dir="rtl"` on the `<body />`, you can skip it.
slotProps={{
desktopPaper: {
dir: 'rtl',
},
mobilePaper: {
dir: 'rtl',
},
}}
/>
</LocalizationProvider>
</div>
</ThemeProvider>
</CacheProvider>
);
}
Loading