-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
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
[RtlProvider] Add component & hook #41241
Conversation
Netlify deploy previewhttps://deploy-preview-41241--material-ui.netlify.app/ Bundle size reportDetails of bundle changes (Toolpad) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we need to scope this PR down to just zero runtime first. How zero runtime is going to support Rtl and then move up to integrate with Material UI.
So I think the first PR would be exposing APIs from zero-runtime, the RtlProvider
and the generated styles.
Then the next PR would be integration with Material UI which could likely be the same as createUseThemeProps
exported from ../zero-styled
.
The structure could look like this:
The change should be on Material UI, not System:
// mui-material/src/zero-styled/index.ts
import useTheme from '../styles/useTheme';
export function useRtl() {
const theme = useTheme();
return theme.direction === 'rtl';
}
…
// mui-material/src/Drawer/Drawer;
…
import { useRtl } from '../zero-styled';
const rtl = useRtl();
For For supporting rtl in zero-runtime, we can create docs page showing how it can be done, I suppose we would still use the styling plugin cc @brijeshb42 to confirm. This PR just makes sure that in the component's logic we need to have a way to check if the component should be rendered in rtl mode, as the logic depends on it. |
@siriwatknp I don't think we can implement |
It's not my intention to have One more thing, I don't see how Pigment handles style interpolation for RTL in this PR. Is it the next step? I think it should be in this PR. |
From what I saw pigment already has a dependency on the system, this is why I decided to add the context there. We can likely long term create some utils package that both system and pigment can depend on.
As I mentioned this will be solved later, we have to revise with Brijesh how we want to tackle this. This is for runtime rendering & different styles based on the state, it's not about transforming the styles. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
I connected the dot with #43443. It feels like we should remove the |
Fixes #41217
The idea is to add separate context for rtl, outside of the ThemeProvider as the notion of ThemeProvider won't exist in the zero-runtime. The implementation is done in such a way that it is non-breaking when using emotion.