Improve opt out of RTL demos

mui · Aug 13, 2021 · 45638e6 · 45638e6
1 parent 47865ed
commit 45638e6
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 140 deletions.
diff --git a/docs/src/pages/guides/right-to-left/RtlOptOut.js b/docs/src/pages/guides/right-to-left/RtlOptOut.js
diff --git a/docs/src/pages/guides/right-to-left/RtlOptOut.tsx b/docs/src/pages/guides/right-to-left/RtlOptOut.tsx
diff --git a/docs/src/pages/guides/right-to-left/RtlOptOutStylis.js b/docs/src/pages/guides/right-to-left/RtlOptOutStylis.js
@@ -1,12 +1,14 @@
 import * as React from 'react';
-import { createTheme } from '@material-ui/core/styles';
-import styled from '@emotion/styled';
-import { ThemeProvider } from '@emotion/react';
+import rtlPlugin from 'stylis-plugin-rtl';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import { styled } from '@material-ui/core/styles';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
 
 const Root = styled('div')((props) => ({
   width: '100%',
-  marginTop: props.theme?.spacing(4),
-  marginRight: props.theme?.spacing(2),
+  marginTop: props.theme?.spacing(6),
 }));
 
 const AffectedText = styled('div')`
@@ -18,15 +20,37 @@ const UnaffectedText = styled('div')`
   text-align: left;
 `;
 
-const theme = createTheme();
+const rtlCache = createCache({
+  key: 'muirtl',
+  // @ts-ignore external dependency
+  stylisPlugins: [rtlPlugin],
+});
+
+const ltrCache = createCache({
+  key: 'mui',
+});
 
 export default function RtlOptOut() {
+  const [rtl, setRtl] = React.useState(false);
+
+  const handleChage = () => {
+    setRtl(!rtl);
+  };
+
   return (
-    <ThemeProvider theme={theme}>
-      <Root>
-        <AffectedText>Affected</AffectedText>
-        <UnaffectedText>Unaffected</UnaffectedText>
-      </Root>
-    </ThemeProvider>
+    <React.Fragment>
+      <div>
+        <FormControlLabel
+          control={<Switch checked={rtl} onChange={handleChage} />}
+          label="RTL"
+        />
+      </div>
+      <CacheProvider value={rtl ? rtlCache : ltrCache}>
+        <Root {...(rtl ? { dir: 'rtl' } : {})}>
+          <AffectedText>Affected</AffectedText>
+          <UnaffectedText>Unaffected</UnaffectedText>
+        </Root>
+      </CacheProvider>
+    </React.Fragment>
   );
 }
diff --git a/docs/src/pages/guides/right-to-left/RtlOptOutStylis.tsx b/docs/src/pages/guides/right-to-left/RtlOptOutStylis.tsx
@@ -1,12 +1,14 @@
 import * as React from 'react';
-import { createTheme, Theme } from '@material-ui/core/styles';
-import styled from '@emotion/styled';
-import { ThemeProvider } from '@emotion/react';
+import rtlPlugin from 'stylis-plugin-rtl';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import { styled } from '@material-ui/core/styles';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
 
-const Root = styled('div')((props: { theme?: Theme }) => ({
+const Root = styled('div')((props) => ({
   width: '100%',
-  marginTop: props.theme?.spacing(4),
-  marginRight: props.theme?.spacing(2),
+  marginTop: props.theme?.spacing(6),
 }));
 
 const AffectedText = styled('div')`
@@ -18,15 +20,37 @@ const UnaffectedText = styled('div')`
   text-align: left;
 `;
 
-const theme = createTheme();
+const rtlCache = createCache({
+  key: 'muirtl',
+  // @ts-ignore external dependency
+  stylisPlugins: [rtlPlugin],
+});
+
+const ltrCache = createCache({
+  key: 'mui',
+});
 
 export default function RtlOptOut() {
+  const [rtl, setRtl] = React.useState(false);
+
+  const handleChage = () => {
+    setRtl(!rtl);
+  };
+
   return (
-    <ThemeProvider theme={theme}>
-      <Root>
-        <AffectedText>Affected</AffectedText>
-        <UnaffectedText>Unaffected</UnaffectedText>
-      </Root>
-    </ThemeProvider>
+    <React.Fragment>
+      <div>
+        <FormControlLabel
+          control={<Switch checked={rtl} onChange={handleChage} />}
+          label="RTL"
+        />
+      </div>
+      <CacheProvider value={rtl ? rtlCache : ltrCache}>
+        <Root {...(rtl ? { dir: 'rtl' } : {})}>
+          <AffectedText>Affected</AffectedText>
+          <UnaffectedText>Unaffected</UnaffectedText>
+        </Root>
+      </CacheProvider>
+    </React.Fragment>
   );
 }
diff --git a/docs/src/pages/guides/right-to-left/RtlOptOutStylist.js b/docs/src/pages/guides/right-to-left/RtlOptOutStylist.js
diff --git a/docs/src/pages/guides/right-to-left/right-to-left.md b/docs/src/pages/guides/right-to-left/right-to-left.md
@@ -129,14 +129,34 @@ _Use the direction toggle button on the top right corner to flip the whole docum
 
 You have to use the template literal syntax and add the `/* @noflip */` directive before the rule or property for which you want to disable right-to-left styles.
 
-_Use the direction toggle button on the top right corner to see the effect._
+```jsx
+const AffectedText = styled('div')`
+  text-align: left;
+`;
+
+const UnaffectedText = styled('div')`
+  /* @noflip */
+  text-align: left;
+`;
+```
 
-{{"demo": "pages/guides/right-to-left/RtlOptOutStylis.js", "hideEditButton": true}}
+{{"demo": "pages/guides/right-to-left/RtlOptOutStylis.js", "hideToolbar": true}}
 
 ### JSS
 
 If you want to prevent a specific rule-set from being affected by the `rtl` transformation you can add `flip: false` at the beginning.
 
-_Use the direction toggle button on the top right corner to see the effect._
-
-{{"demo": "pages/guides/right-to-left/RtlOptOut.js", "hideEditButton": true}}
+```jsx
+const useStyles = makeStyles(
+  (theme) => ({
+    affected: {
+      textAlign: 'right',
+    },
+    unaffected: {
+      flip: false,
+      textAlign: 'right',
+    },
+  }),
+  { defaultTheme },
+);
+```