[RTL] Make Right-to-left optional (#8916)

docs/src/modules/components/withRoot.js

@@ -93,6 +93,10 @@ const pages = [
       {
         pathname: '/guides/typescript',
       },
+      {
+        pathname: '/guides/right-to-left',
+        title: 'Right-to-left',
+      },
     ],
   },
   {

docs/src/pages/customization/themes.md

@@ -55,15 +55,6 @@ You can make a theme dark by setting `type` to `dark`.
 
 {{demo='pages/customization/DarkTheme.js'}}
 
-### Right to Left Support
-
-To change the direction of material-ui components you must do 2 things:
-
-1. Make sure `dir="rtl"` is set on **body**, otherwise native components and portals will break.
-2. Set `direction: 'rtl'` on your custom theme.
-
-{{demo='pages/customization/Direction.js'}}
-
 ### The other variables
 
 We have tried to normalize the implementation by adding many more variables: typography, breakpoints, transitions, etc. You can see below what the theme object looks like with the default values.

docs/src/pages/guides/right-to-left.md

@@ -0,0 +1,52 @@
+# Right-to-left
+
+To change the direction of Material-UI components you must follow the following steps:
+
+## Steps
+
+### 1. HTML
+
+Make sure `dir="rtl"` is set on **body**, otherwise native components and portals will break.
+
+### 2. Theme
+
+Set `direction: 'rtl'` on your custom theme.
+
+### 3. jss-rtl
+
+We are relying on a JSS plugin to flip the styles: [jss-rtl](https://github.com/alitaheri/jss-rtl).
+
+```sh
+npm install jss-rtl
+```
+
+Internally, we are dynamically enabling this plugin when `direction: 'rtl'` is set on the theme.
+The [CSS-in-JS documentation](/customization/css-in-js#opting-out-of-rtl-transformation) explains a bit more how this plugin is working. Head to the [plugin README](https://github.com/alitaheri/jss-rtl) to know everything about it.
+
+Once you have created a new JSS instance with the plugin, you need to make it available to all components in the component tree. We have a [`<JssProvider />`](https://github.com/cssinjs/react-jss) component for this:
+
+```jsx
+import { create } from 'jss';
+import preset from 'jss-preset-default';
+import rtl from 'jss-rtl';
+import JssProvider from 'react-jss/lib/JssProvider';
+import createGenerateClassName from 'material-ui/styles/createGenerateClassName';
+
+// Configure JSS
+const jss = create({ plugins: [...preset().plugins, rtl()] });
+jss.options.createGenerateClassName = createGenerateClassName;
+
+function RTL(props) {
+  return (
+    <JssProvider jss={jss}>
+      {props.children}
+    </JssProvider>
+  );
+}
+```
+
+## Demo
+
+*Use the direction toggle button on the top left corner to flip the whole documentation*
+
+{{demo='pages/guides/Direction.js'}}

package.json

@@ -69,7 +69,6 @@
     "hoist-non-react-statics": "^2.3.1",
     "jss": "^8.1.0",
     "jss-preset-default": "^3.0.0",
-    "jss-rtl": "^0.2.1",
     "keycode": "^2.1.9",
     "lodash": "^4.17.4",
     "normalize-scroll-left": "^0.1.2",
@@ -138,6 +137,7 @@
     "gm": "^1.23.0",
     "jsdom": "^11.3.0",
     "json-loader": "^0.5.7",
+    "jss-rtl": "^0.2.1",
     "karma": "^1.7.1",
     "karma-browserstack-launcher": "^1.3.0",
     "karma-mocha": "^1.3.0",
@@ -183,7 +183,7 @@
   "size-limit": [
     {
       "path": "build/index.js",
-      "limit": "94 KB"
+      "limit": "92 KB"
     }
   ],
   "nyc": {

pages/customization/themes.js

@@ -29,13 +29,6 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/customization/DarkTheme'), 'utf8')
-`,
-        },
-        'pages/customization/Direction.js': {
-          js: require('docs/src/pages/customization/Direction').default,
-          raw: preval`
-module.exports = require('fs')
-  .readFileSync(require.resolve('docs/src/pages/customization/Direction'), 'utf8')
 `,
         },
         'pages/customization/ThemeDefault.js': {

pages/guides/right-to-left.js

@@ -0,0 +1,25 @@
+// @flow
+
+import React from 'react';
+import withRoot from 'docs/src/modules/components/withRoot';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import markdown from 'docs/src/pages/guides/right-to-left.md';
+
+function Page() {
+  return (
+    <MarkdownDocs
+      markdown={markdown}
+      demos={{
+        'pages/guides/Direction.js': {
+          js: require('docs/src/pages/guides/Direction').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/guides/Direction'), 'utf8')
+`,
+        },
+      }}
+    />
+  );
+}
+
+export default withRoot(Page);

src/styles/withStyles.js

@@ -10,15 +10,14 @@ import getDisplayName from 'recompose/getDisplayName';
 import contextTypes from 'react-jss/lib/contextTypes';
 import { create } from 'jss';
 import preset from 'jss-preset-default';
-import rtl from 'jss-rtl';
 import * as ns from 'react-jss/lib/ns';
 import createMuiTheme from './createMuiTheme';
 import themeListener from './themeListener';
 import createGenerateClassName from './createGenerateClassName';
 import getStylesCreator from './getStylesCreator';
 
-const presets = preset().plugins;
-const jss = create({ plugins: [...presets, rtl()] });
+// New JSS instance.
+const jss = create(preset());
 
 // Use a singleton or the provided one by the context.
 const generateClassName = createGenerateClassName();

src/transitions/Collapse.js

@@ -23,7 +23,7 @@ export const styles = (theme: Object) => ({
     display: 'flex',
   },
   wrapperInner: {
-    flexGrow: '1',
+    width: '100%',
   },
 });