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.

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

[docs] Add RTL documentation for the pickers #13855

Merged
merged 17 commits into from
Sep 2, 2024

Conversation

flaviendelangle
Copy link
Member

@flaviendelangle flaviendelangle commented Jul 16, 2024

Closes #11523

  • Unify how we set the RTL in all the demos of hijri and jalali adapters (I took the data grid RTL demo as source of truth, it manually sets the rtlPlugin from stylis)
  • Add a new doc section + demo on the localization doc to introduce the RTL support
  • Fix the dir="rtl" on pickers (the view are inside a portal, so they were not impacted by the dir="rtl" set in the demo)

@flaviendelangle flaviendelangle added the docs Improvements or additions to the documentation label Jul 16, 2024
@flaviendelangle flaviendelangle self-assigned this Jul 16, 2024
@mui-bot
Copy link

mui-bot commented Jul 16, 2024

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.

@oliviertassinari oliviertassinari added the component: pickers This is the name of the generic UI component, not the React module! label Jul 24, 2024
@@ -397,11 +397,11 @@ export const MultiSectionDigitalClock = React.forwardRef(function MultiSectionDi
return views;
}
const digitViews = views.filter((v) => v !== 'meridiem');
const result: TimeViewWithMeridiem[] = digitViews.toReversed();
digitViews.reverse();
Copy link
Member Author

Choose a reason for hiding this comment

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

.toReversed is too recent, I avoid using it.
It was causing the following issue in the CI when building the doc:

9:25:02 AM: TypeError: ec.filter(...).toReversed is not a function

Copy link
Member

Choose a reason for hiding this comment

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

Circle CI is on Node 18, toReversed is Node 20.

@flaviendelangle flaviendelangle force-pushed the rtl-doc branch 8 times, most recently from db1bbba to 24db72d Compare August 5, 2024 07:51
@flaviendelangle flaviendelangle marked this pull request as ready for review August 6, 2024 13:01
Copy link
Member

@arthurbalduini arthurbalduini left a comment

Choose a reason for hiding this comment

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

🎉

@flaviendelangle flaviendelangle merged commit aff6ddb into mui:master Sep 2, 2024
18 checks passed
@flaviendelangle flaviendelangle deleted the rtl-doc branch September 2, 2024 14:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: pickers This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[docs] Add Pickers RTL support section
5 participants