Repository: mui/material-ui (TypeScript)
Date: 2020-03-23 13:43:32+00:00
Task type: Bug Fix

Issue:
[Pagination] Missing RTL support
I am currently using the material ui pagination and after passing the rtl option they appear as so 
<img width="208" alt="Screen Shot 2020-03-20 at 7 12 25 AM" src="https://user-images.githubusercontent.com/9379960/77129549-6cac3180-6a7a-11ea-9c80-90d20a321f03.png">

The order is correct but the arrowheads are facing the wrong way.


Issue discussion:
@hawky93  Please provide a full reproduction test case. This would help a lot 👷 .
A live example would be perfect. [This **codesandbox.io** template](https://material-ui.com/r/issue-template) is a good starting point. Thank you!
@hawky93 Thanks for the report. Regarding the reproduction, the steps are 1. navigate to https://material-ui.com/components/pagination/, 2. trigger RTL.
What do you think of the following patch? Do you want to work on a pull request? :)

```diff
diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js
index 0f5b0af71..5be28228f 100644
--- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js
+++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { fade, withStyles } from '@material-ui/core/styles';
+import { fade, withStyles, useTheme } from '@material-ui/core/styles';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import FirstPageIcon from '../internal/svg-icons/FirstPage';
 import LastPageIcon from '../internal/svg-icons/LastPage';
@@ -207,6 +207,23 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) {
     variant = 'text',
     ...other
   } = props;
+  const theme = useTheme();
+
+  const normalizedIcons =
+    theme.direction === 'rtl'
+      ? {
+          previous: NavigateNextIcon,
+          next: NavigateBeforeIcon,
+          last: FirstPageIcon,
+          first: LastPageIcon,
+        }
+      : {
+          previous: NavigateBeforeIcon,
+          next: NavigateNextIcon,
+          first: FirstPageIcon,
+          last: LastPageIcon,
+        };
+  const Icon = normalizedIcons[type];

   return type === 'start-ellipsis' || type === 'end-ellipsis' ? (
     <div
@@ -240,10 +257,7 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) {
       {...other}
     >
       {type === 'page' && page}
-      {type === 'previous' && <NavigateBeforeIcon className={classes.icon} />}
-      {type === 'next' && <NavigateNextIcon className={classes.icon} />}
-      {type === 'first' && <FirstPageIcon className={classes.icon} />}
-      {type === 'last' && <LastPageIcon className={classes.icon} />}
+      {Icon ? <Icon className={classes.icon} /> : null}
     </ButtonBase>
   );
 });
```
I would like to take on this issue as my first contribution 😄 

Solution patch:
diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js
--- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js
+++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { fade, withStyles } from '@material-ui/core/styles';
+import { fade, useTheme, withStyles } from '@material-ui/core/styles';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import FirstPageIcon from '../internal/svg-icons/FirstPage';
 import LastPageIcon from '../internal/svg-icons/LastPage';
@@ -208,6 +208,24 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) {
     ...other
   } = props;
 
+  const theme = useTheme();
+
+  const normalizedIcons =
+    theme.direction === 'rtl'
+      ? {
+          previous: NavigateNextIcon,
+          next: NavigateBeforeIcon,
+          last: FirstPageIcon,
+          first: LastPageIcon,
+        }
+      : {
+          previous: NavigateBeforeIcon,
+          next: NavigateNextIcon,
+          first: FirstPageIcon,
+          last: LastPageIcon,
+        };
+  const Icon = normalizedIcons[type];
+
   return type === 'start-ellipsis' || type === 'end-ellipsis' ? (
     <div
       ref={ref}
@@ -240,10 +258,7 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) {
       {...other}
     >
       {type === 'page' && page}
-      {type === 'previous' && <NavigateBeforeIcon className={classes.icon} />}
-      {type === 'next' && <NavigateNextIcon className={classes.icon} />}
-      {type === 'first' && <FirstPageIcon className={classes.icon} />}
-      {type === 'last' && <LastPageIcon className={classes.icon} />}
+      {Icon ? <Icon className={classes.icon} /> : null}
     </ButtonBase>
   );
 });


Test patch:
diff --git a/packages/material-ui-lab/src/Pagination/Pagination.test.js b/packages/material-ui-lab/src/Pagination/Pagination.test.js
--- a/packages/material-ui-lab/src/Pagination/Pagination.test.js
+++ b/packages/material-ui-lab/src/Pagination/Pagination.test.js
@@ -5,6 +5,7 @@ import { createMount, getClasses } from '@material-ui/core/test-utils';
 import describeConformance from '@material-ui/core/test-utils/describeConformance';
 import { createClientRender } from 'test/utils/createClientRender';
 import Pagination from './Pagination';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 
 describe('<Pagination />', () => {
   let classes;
@@ -51,4 +52,28 @@ describe('<Pagination />', () => {
 
     expect(handleChange.callCount).to.equal(1);
   });
+
+  it('renders controls with correct order in rtl theme', () => {
+    const { getAllByRole } = render(
+      <ThemeProvider
+        theme={createMuiTheme({
+          direction: 'rtl',
+        })}
+      >
+        <Pagination count={5} page={3} showFirstButton showLastButton />
+      </ThemeProvider>,
+    );
+
+    const buttons = getAllByRole('button');
+
+    expect(buttons[0].querySelector('svg')).to.have.attribute('data-mui-test', 'LastPageIcon');
+    expect(buttons[1].querySelector('svg')).to.have.attribute('data-mui-test', 'NavigateNextIcon');
+    expect(buttons[2].textContent).to.equal('1');
+    expect(buttons[6].textContent).to.equal('5');
+    expect(buttons[7].querySelector('svg')).to.have.attribute(
+      'data-mui-test',
+      'NavigateBeforeIcon',
+    );
+    expect(buttons[8].querySelector('svg')).to.have.attribute('data-mui-test', 'FirstPageIcon');
+  });
 });