Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Tabs] Fix RTL indicator #26470

Merged
merged 13 commits into from
Jun 2, 2021
Merged

[Tabs] Fix RTL indicator #26470

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
c6ff2c0
fix rtl and add demos
siriwatknp May 27, 2021
2412bd6
Merge branch 'next' of https://github.com/mui-org/material-ui into fi…
siriwatknp May 28, 2021
0dd2afb
remove duplicate demos and add HoverTabs
siriwatknp May 28, 2021
1470c86
fix RTL vertical scroll button
siriwatknp May 28, 2021
7ba4f39
typescript formatted
siriwatknp May 28, 2021
35241c7
remove unused file
siriwatknp May 28, 2021
a4f4e70
revert the change (fixed in another PR)
siriwatknp May 31, 2021
949ee21
fix as suggested
siriwatknp May 31, 2021
25dd9ba
try it out
oliviertassinari May 31, 2021
29f0afb
remove hover tabs due to a11y incomplete
siriwatknp Jun 1, 2021
4295761
Update packages/material-ui/src/Tabs/Tabs.test.js
siriwatknp Jun 2, 2021
8d59f09
Update packages/material-ui/src/Tabs/Tabs.test.js
siriwatknp Jun 2, 2021
a743a44
minor fix
siriwatknp Jun 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/tabs/ScrollableTabsButtonAuto.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/tabs/ScrollableTabsButtonForce.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/tabs/ScrollableTabsButtonForce.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/tabs/ScrollableTabsButtonVisible.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/tabs/ScrollableTabsButtonVisible.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
20 changes: 13 additions & 7 deletions packages/material-ui/src/Tabs/Tabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
46 changes: 46 additions & 0 deletions packages/material-ui/src/Tabs/Tabs.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down