[Tabs] Fix RTL indicator

[siriwatknp]

closes #26450

From the open issue, rtl does not work well with the current implementation because it force css left so the indicator start from the left side which makes it weird.

• fix the logic by switching start, end based on isRtl value

• add one more test to check indicator should have { right: ... } css instead of { left: ... } for rtl

• add HoverTabs demo

• fix scroll button does not show in some demos due to min-width change in [Tabs] Update min & max width and remove minWidth media query #26458

• I have followed (at least) the PR section of the contributing guide.

Preview: https://deploy-preview-26470--material-ui.netlify.app/components/tabs/

[mui-pr-bot]

Details of bundle changes (experimental)

Generated by 🚫 dangerJS against a743a44

[oliviertassinari]

Could we add a reproduction on #26450?

[siriwatknp]

Could we add a reproduction on #26450?

able to reproduce but the fix makes the code more complicated. Not really sure if we want to fix this edge case or not given rtl is minor @oliviertassinari

[siriwatknp]

One improvement that I see is this case. I was trying to use Tabs as navigation in some project and it does not have initial value at first, when hover on the menu (tab) it show underline indicator but because of initial indicator style, it always stretch from the left which looks weird to me. It would be nice if value change from false to number and the indicator grow from the middle to the hovered Tab.

May-28-2564.17-17-30.mp4

[oliviertassinari]

Almost good to ship

[oliviertassinari]

Not really sure if we want to fix this edge case or not given rtl is minor

@siriwatknp Yeah, we might not have worked on this problem, especially not now where we need to ship v5, but no big deal, it's not a big effort, half a day work, top. I think that we could even leave the issue count to grow to 1,000/3,000 while cleaning them up along the way.

the indicator grow from the middle to the hovered Tab.

Maybe it should start from the first tab? Something in this order:

diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js
index 68273478c1..81660ada37 100644
--- a/packages/material-ui/src/Tabs/Tabs.js
+++ b/packages/material-ui/src/Tabs/Tabs.js
@@ -310,6 +310,7 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
   const getTabsMeta = () => {
     const tabsNode = tabsRef.current;
     let tabsMeta;
+    let firstTabsMeta;
     if (tabsNode) {
       const rect = tabsNode.getBoundingClientRect();
       // create a new object with ClientRect class props + scrollLeft
@@ -327,44 +328,52 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
     }

     let tabMeta;
-    if (tabsNode && value !== false) {
+    if (tabsNode) {
       const children = tabListRef.current.children;

       if (children.length > 0) {
-        const tab = children[valueToIndex.get(value)];
-        if (process.env.NODE_ENV !== 'production') {
-          if (!tab) {
-            console.error(
-              [
-                `Material-UI: The value provided to the Tabs component is invalid.`,
-                `None of the Tabs' children match with \`${value}\`.`,
-                valueToIndex.keys
-                  ? `You can provide one of the following values: ${Array.from(
-                      valueToIndex.keys(),
-                    ).join(', ')}.`
-                  : null,
-              ].join('\n'),
-            );
+        if (value !== false) {
+          const tab = children[valueToIndex.get(value)];
+          if (process.env.NODE_ENV !== 'production') {
+            if (!tab) {
+              console.error(
+                [
+                  `Material-UI: The value provided to the Tabs component is invalid.`,
+                  `None of the Tabs' children match with \`${value}\`.`,
+                  valueToIndex.keys
+                    ? `You can provide one of the following values: ${Array.from(
+                        valueToIndex.keys(),
+                      ).join(', ')}.`
+                    : null,
+                ].join('\n'),
+              );
+            }
           }
+          tabMeta = tab ? tab.getBoundingClientRect() : null;
+        } else {
+          const tab = children[0];
+          firstTabsMeta = tab ? tab.getBoundingClientRect() : null;
         }
-        tabMeta = tab ? tab.getBoundingClientRect() : null;
       }
     }
-    return { tabsMeta, tabMeta };
+    console.log({ tabMeta, firstTabsMeta })
+    return { tabsMeta, tabMeta, firstTabsMeta };
   };

   const updateIndicatorState = useEventCallback(() => {
-    const { tabsMeta, tabMeta } = getTabsMeta();
+    const { tabsMeta, tabMeta, firstTabsMeta } = getTabsMeta();
     let startValue = 0;

-    if (tabMeta && tabsMeta) {
+    const finalTabMeta = tabMeta || firstTabsMeta;
+
+    if (finalTabMeta && tabsMeta) {
       if (vertical) {
-        startValue = tabMeta.top - tabsMeta.top + tabsMeta.scrollTop;
+        startValue = finalTabMeta.top - tabsMeta.top + tabsMeta.scrollTop;
       } else {
         const correction = isRtl
           ? tabsMeta.scrollLeftNormalized + tabsMeta.clientWidth - tabsMeta.scrollWidth
           : tabsMeta.scrollLeft;
-        startValue = tabMeta.left - tabsMeta.left + correction;
+        startValue = finalTabMeta.left - tabsMeta.left + correction;
       }
     }

[siriwatknp]

Maybe it should start from the first tab? Something in this order:

I think it is easier to use CSS if the user want to have this behaviour. Ideally, I think it should grow from middle of the tab index that I hover on but it is an improvement that we can do later. We can go with only rtl fix in this PR. thanks for your suggestion.

[oliviertassinari]

25dd9ba it works :)

I'm not sure that this demo is accessible (that we want to include it) https://deploy-preview-26470--material-ui.netlify.app/components/tabs/#hover-tabs, cc @eps1lon for a point of view.

Otherwise, it looks solid 👍

[eps1lon]

Looks good. Just some minor test changes that should be resolved even though they are minor.

[oliviertassinari]

A step forward 👍