[Tabs] Fix RTL indicator (#26470)

mui · Jun 2, 2021 · 34aa839 · 34aa839
1 parent 1c54c8e
commit 34aa839
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 15 deletions.
diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js b/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js
@@ -11,7 +11,7 @@ export default function ScrollableTabsButtonAuto() {
   };
 
   return (
-    <Box sx={{ width: '100%', bgcolor: 'background.paper' }}>
+    <Box sx={{ maxWidth: 480, bgcolor: 'background.paper' }}>
       <Tabs
         value={value}
         onChange={handleChange}

diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.tsx b/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.tsx
@@ -11,7 +11,7 @@ export default function ScrollableTabsButtonAuto() {
   };
 
   return (
-    <Box sx={{ width: '100%', bgcolor: 'background.paper' }}>
+    <Box sx={{ maxWidth: 480, bgcolor: 'background.paper' }}>
       <Tabs
         value={value}
         onChange={handleChange}

diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonForce.js b/docs/src/pages/components/tabs/ScrollableTabsButtonForce.js
@@ -11,7 +11,7 @@ export default function ScrollableTabsButtonForce() {
   };
 
   return (
-    <Box sx={{ width: '100%', bgcolor: 'background.paper' }}>
+    <Box sx={{ maxWidth: 480, bgcolor: 'background.paper' }}>
       <Tabs
         value={value}
         onChange={handleChange}

diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonForce.tsx b/docs/src/pages/components/tabs/ScrollableTabsButtonForce.tsx
@@ -11,7 +11,7 @@ export default function ScrollableTabsButtonForce() {
   };
 
   return (
-    <Box sx={{ width: '100%', bgcolor: 'background.paper' }}>
+    <Box sx={{ maxWidth: 480, bgcolor: 'background.paper' }}>
       <Tabs
         value={value}
         onChange={handleChange}

diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js b/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js
@@ -11,7 +11,7 @@ export default function ScrollableTabsButtonPrevent() {
   };
 
   return (
-    <Box sx={{ width: '100%', bgcolor: 'background.paper' }}>
+    <Box sx={{ maxWidth: 480, bgcolor: 'background.paper' }}>
       <Tabs
         value={value}
         onChange={handleChange}

diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.tsx b/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.tsx
@@ -11,7 +11,7 @@ export default function ScrollableTabsButtonPrevent() {
   };
 
   return (
-    <Box sx={{ width: '100%', bgcolor: 'background.paper' }}>
+    <Box sx={{ maxWidth: 480, bgcolor: 'background.paper' }}>
       <Tabs
         value={value}
         onChange={handleChange}

diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonVisible.js b/docs/src/pages/components/tabs/ScrollableTabsButtonVisible.js
@@ -11,7 +11,7 @@ export default function ScrollableTabsButtonVisible() {
   };
 
   return (
-    <Box sx={{ flexGrow: 1, width: '100%', bgcolor: 'background.paper' }}>
+    <Box sx={{ flexGrow: 1, maxWidth: 480, bgcolor: 'background.paper' }}>
       <Tabs
         value={value}
         onChange={handleChange}

diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonVisible.tsx b/docs/src/pages/components/tabs/ScrollableTabsButtonVisible.tsx
@@ -11,7 +11,7 @@ export default function ScrollableTabsButtonVisible() {
   };
 
   return (
-    <Box sx={{ flexGrow: 1, width: '100%', bgcolor: 'background.paper' }}>
+    <Box sx={{ flexGrow: 1, maxWidth: 480, bgcolor: 'background.paper' }}>
       <Tabs
         value={value}
         onChange={handleChange}

diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js
@@ -356,30 +356,36 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
   const updateIndicatorState = useEventCallback(() => {
     const { tabsMeta, tabMeta } = getTabsMeta();
     let startValue = 0;
+    let startIndicator;
 
-    if (tabMeta && tabsMeta) {
-      if (vertical) {
+    if (vertical) {
+      startIndicator = 'top';
+      if (tabMeta && tabsMeta) {
         startValue = tabMeta.top - tabsMeta.top + tabsMeta.scrollTop;
-      } else {
+      }
+    } else {
+      startIndicator = isRtl ? 'right' : 'left';
+      if (tabMeta && tabsMeta) {
         const correction = isRtl
           ? tabsMeta.scrollLeftNormalized + tabsMeta.clientWidth - tabsMeta.scrollWidth
           : tabsMeta.scrollLeft;
-        startValue = tabMeta.left - tabsMeta.left + correction;
+        startValue =
+          (isRtl ? -1 : 1) * (tabMeta[startIndicator] - tabsMeta[startIndicator] + correction);
       }
     }
 
     const newIndicatorStyle = {
-      [start]: startValue,
+      [startIndicator]: startValue,
       // May be wrong until the font is loaded.
       [size]: tabMeta ? tabMeta[size] : 0,
     };
 
     // IE11 support, replace with Number.isNaN
     // eslint-disable-next-line no-restricted-globals
-    if (isNaN(indicatorStyle[start]) || isNaN(indicatorStyle[size])) {
+    if (isNaN(indicatorStyle[startIndicator]) || isNaN(indicatorStyle[size])) {
       setIndicatorStyle(newIndicatorStyle);
     } else {
-      const dStart = Math.abs(indicatorStyle[start] - newIndicatorStyle[start]);
+      const dStart = Math.abs(indicatorStyle[startIndicator] - newIndicatorStyle[startIndicator]);
       const dSize = Math.abs(indicatorStyle[size] - newIndicatorStyle[size]);
 
       if (dStart >= 1 || dSize >= 1) {

diff --git a/packages/material-ui/src/Tabs/Tabs.test.js b/packages/material-ui/src/Tabs/Tabs.test.js
@@ -263,6 +263,52 @@ describe('<Tabs />', () => {
         expect(style.left).to.equal('60px');
         expect(style.width).to.equal('50px');
       });
+
+      it('should have "right" for RTL', () => {
+        const { forceUpdate, container, getByRole } = render(
+          <div dir="rtl">
+            <Tabs value={1}>
+              <Tab />
+              <Tab />
+            </Tabs>
+          </div>,
+          {
+            wrapper: ({ children }) => (
+              <ThemeProvider theme={createTheme({ direction: 'rtl' })}>{children}</ThemeProvider>
+            ),
+          },
+        );
+
+        const tablistContainer = getByRole('tablist').parentElement;
+        const tab = getByRole('tablist').children[1];
+
+        Object.defineProperty(tablistContainer, 'clientWidth', { value: 100 });
+        Object.defineProperty(tablistContainer, 'scrollWidth', { value: 100 });
+        tablistContainer.getBoundingClientRect = () => ({
+          left: 0,
+          right: 100,
+        });
+        tab.getBoundingClientRect = () => ({
+          left: 50,
+          width: 50,
+          right: 100,
+        });
+        forceUpdate();
+        expect(container.querySelector(`.${classes.indicator}`)).toHaveInlineStyle({
+          right: '0px',
+          width: '50px',
+        });
+        tab.getBoundingClientRect = () => ({
+          left: 40,
+          width: 50,
+          right: 90,
+        });
+        forceUpdate();
+        expect(container.querySelector(`.${classes.indicator}`)).toHaveInlineStyle({
+          right: '10px',
+          width: '50px',
+        });
+      });
     });
 
     describe('warnings', () => {