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

[zero-runtime] Add RTL support #41217

Closed
mnajdova opened this issue Feb 21, 2024 · 6 comments · Fixed by #41241
Closed

[zero-runtime] Add RTL support #41217

mnajdova opened this issue Feb 21, 2024 · 6 comments · Fixed by #41241
Assignees
Labels
new feature New feature or request package: pigment-css Specific to @pigment-css/*

Comments

@mnajdova
Copy link
Member

mnajdova commented Feb 21, 2024

Summary

We need to have a way to provide rtl for the zero-runtime. We have to support rtl for partial parts of the app, so we can't depend on it living only in the theme config.

Proposed API

In the emotion based styling solution the RTL is supported trough the ThemeProvider, as a key in the theme (theme.direction). Considering that in the zero-runtime we won’t have ThemeProvider, but only a component that will inject CSS vars, this means that we will need a separate provider specific to rtl.

<RtlProvider>
  {children}
</RtlProvider>

The components that need to support rtl, will read this context, e.g. Drawer, LinearProgress, Menu, MenuList, PaginationItem, Rating, Slider, TablePaginationActions, Tabs, TabsScrollButton, Tooltip.

The rtl value can be propagated as part of the ownerState in the styled call.

Search keywords: rtl, zero-runtime

@mnajdova mnajdova added new feature New feature or request package: pigment-css Specific to @pigment-css/* labels Feb 21, 2024
@brijeshb42
Copy link
Contributor

Context usage makes most sense to me given at some point, server context is also available.

@mnajdova
Copy link
Member Author

I'll work on a POC to see how we can do this.

@oliviertassinari oliviertassinari changed the title [zero-runtime] Add rtl support [zero-runtime] Add RTL support Feb 22, 2024
@oliviertassinari
Copy link
Member

oliviertassinari commented Feb 22, 2024

Considering that in the zero-runtime we won’t have ThemeProvider

How are we supposed to do default component prop changes? https://mui.com/material-ui/customization/theme-components/#theme-default-props

server context is also available

In theory from emotion-js/emotion#2978 (comment), but never used this in prod.

@brijeshb42
Copy link
Contributor

defaultProps provided in the theme object will be copied over to the output bundle statically (only the serializable stuff for the most part). See this.

@oliviertassinari
Copy link
Member

oliviertassinari commented Feb 23, 2024

Considering that in the zero-runtime we won’t have ThemeProvider

What about this as well? https://mui.com/material-ui/react-use-media-query/#using-material-uis-breakpoint-helpers. It doesn't seem that static extraction should mean that we drop theme nesting support or the theme provider. Issue opened #43443.

Just from a migration perspective, this would make it easier.

@oliviertassinari
Copy link
Member

oliviertassinari commented Feb 27, 2024

A possible selector we can rely on :dir(rtl) { https://developer.mozilla.org/en-US/docs/Web/CSS/:dir: but browser support doesn't look good enough: https://caniuse.com/?search=dir.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
new feature New feature or request package: pigment-css Specific to @pigment-css/*
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

3 participants