diff --git a/docs/src/modules/components/withRoot.js b/docs/src/modules/components/withRoot.js
index d2a6558a50a87a..9591f1dd89faee 100644
--- a/docs/src/modules/components/withRoot.js
+++ b/docs/src/modules/components/withRoot.js
@@ -93,6 +93,10 @@ const pages = [
{
pathname: '/guides/typescript',
},
+ {
+ pathname: '/guides/right-to-left',
+ title: 'Right-to-left',
+ },
],
},
{
diff --git a/docs/src/pages/customization/themes.md b/docs/src/pages/customization/themes.md
index f5e49440ced886..6b8cb329fc2916 100644
--- a/docs/src/pages/customization/themes.md
+++ b/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.
diff --git a/docs/src/pages/customization/Direction.js b/docs/src/pages/guides/Direction.js
similarity index 100%
rename from docs/src/pages/customization/Direction.js
rename to docs/src/pages/guides/Direction.js
diff --git a/docs/src/pages/guides/right-to-left.md b/docs/src/pages/guides/right-to-left.md
new file mode 100644
index 00000000000000..59a139f4b7789b
--- /dev/null
+++ b/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 [``](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 (
+
+ {props.children}
+
+ );
+}
+```
+
+## Demo
+
+*Use the direction toggle button on the top left corner to flip the whole documentation*
+
+{{demo='pages/guides/Direction.js'}}
diff --git a/package.json b/package.json
index adfae3da5606cc..5280b940d333b4 100644
--- a/package.json
+++ b/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": {
diff --git a/pages/customization/themes.js b/pages/customization/themes.js
index b57176809d67e8..720374b6d36807 100644
--- a/pages/customization/themes.js
+++ b/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': {
diff --git a/pages/guides/right-to-left.js b/pages/guides/right-to-left.js
new file mode 100644
index 00000000000000..3b7bb2bf3aea23
--- /dev/null
+++ b/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 (
+
+ );
+}
+
+export default withRoot(Page);
diff --git a/src/styles/withStyles.js b/src/styles/withStyles.js
index a72c955c75bf52..54182137264dad 100644
--- a/src/styles/withStyles.js
+++ b/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();
diff --git a/src/transitions/Collapse.js b/src/transitions/Collapse.js
index a3a218e5fc44a1..75d94c984f307b 100644
--- a/src/transitions/Collapse.js
+++ b/src/transitions/Collapse.js
@@ -23,7 +23,7 @@ export const styles = (theme: Object) => ({
display: 'flex',
},
wrapperInner: {
- flexGrow: '1',
+ width: '100%',
},
});