Skip to content

Commit

Permalink
fix(tabs): hide native scrollbar on scrollable tabs properly
Browse files Browse the repository at this point in the history 
fixes #879
  • Loading branch information
@ekabolotina
ekabolotina committed Nov 15, 2021
1 parent f770a54 commit 0134956
Show file tree
Hide file tree
Showing 7 changed files with 173 additions and 153 deletions.
4 changes: 1 addition & 3 deletions packages/tabs/src/components/primary-tablist/Component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,7 @@ export const PrimaryTabList = ({
<div
role='tablist'
data-test-id={dataTestId}
className={cn(styles.component, className, size && styles[size], {
[styles.scrollable]: scrollable,
})}
className={cn(styles.component, className, size && styles[size])}
>
{scrollable ? (
<ScrollableContainer
Expand Down
4 changes: 0 additions & 4 deletions packages/tabs/src/components/primary-tablist/index.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,10 +65,6 @@
transition: transform 0.2s ease, width 0.2s ease;
}

.scrollable .line {
bottom: var(--tablist-hidden-scrollbar-height);
}

/* sizes */

.s {
Expand Down
6 changes: 1 addition & 5 deletions packages/tabs/src/components/scrollable-container/Component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,5 @@ export const ScrollableContainer = ({
}
}, [activeChild]);

return (
<div className={styles.component}>
<div className={cn(styles.container, containerClassName)}>{children}</div>
</div>
);
return <div className={cn(styles.container, containerClassName)}>{children}</div>;
};
16 changes: 5 additions & 11 deletions packages/tabs/src/components/scrollable-container/index.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,15 @@
@import '../../../../themes/src/default.css';
@import '../../vars.css';

.component {
overflow: hidden;

&:after {
content: '';
display: block;
margin-bottom: calc(var(--tablist-hidden-scrollbar-height) * -1);
}
}

.container {
position: relative;
display: flex;
align-items: center;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: var(--tablist-hidden-scrollbar-height);
scrollbar-width: none;

&::-webkit-scrollbar {
display: none;
}
}
250 changes: 121 additions & 129 deletions packages/tabs/src/components/tabs/__snapshots__/Component.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,77 +174,73 @@ exports[`Tabs Snapshots tests should match snapshot 3`] = `
<div>
<div>
<div
class="undefined"
class=""
role="tablist"
>
<div
class="component"
class="container"
>
<div
class="container"
<button
aria-selected="false"
class=""
role="tab"
tabindex="-1"
type="button"
>
<button
aria-selected="false"
class=""
role="tab"
tabindex="-1"
type="button"
>
<span>
Таб 1
</span>
<span>
addon
</span>
</button>
<button
aria-selected="true"
class=""
role="tab"
tabindex="0"
type="button"
>
<span>
Таб 2
</span>
</button>
<button
aria-selected="false"
class=""
role="tab"
tabindex="-1"
type="button"
>
<span>
Таб 3
</span>
</button>
<button
aria-selected="false"
class=""
role="tab"
tabindex="-1"
type="button"
>
<span>
Таб 4
</span>
</button>
<button
aria-selected="false"
class=""
role="tab"
tabindex="-1"
type="button"
>
<span>
Таб 5
</span>
</button>
<div
style="width: 0px; transform: translateX(0px);"
/>
</div>
<span>
Таб 1
</span>
<span>
addon
</span>
</button>
<button
aria-selected="true"
class=""
role="tab"
tabindex="0"
type="button"
>
<span>
Таб 2
</span>
</button>
<button
aria-selected="false"
class=""
role="tab"
tabindex="-1"
type="button"
>
<span>
Таб 3
</span>
</button>
<button
aria-selected="false"
class=""
role="tab"
tabindex="-1"
type="button"
>
<span>
Таб 4
</span>
</button>
<button
aria-selected="false"
class=""
role="tab"
tabindex="-1"
type="button"
>
<span>
Таб 5
</span>
</button>
<div
style="width: 0px; transform: translateX(0px);"
/>
</div>
</div>
<div
Expand All @@ -266,72 +262,68 @@ exports[`Tabs Snapshots tests should match snapshot 4`] = `
role="tablist"
>
<div
class="component"
class="container"
>
<div
class="container"
<button
aria-selected="false"
class="component component xs"
role="tab"
tabindex="-1"
type="button"
>
<button
aria-selected="false"
class="component component xs"
role="tab"
tabindex="-1"
type="button"
>
<span>
Таб 1
</span>
<span
class="addons"
>
addon
</span>
</button>
<button
aria-selected="true"
class="component component xs checked"
role="tab"
tabindex="0"
type="button"
>
<span>
Таб 2
</span>
</button>
<button
aria-selected="false"
class="component component xs"
role="tab"
tabindex="-1"
type="button"
>
<span>
Таб 3
</span>
</button>
<button
aria-selected="false"
class="component component xs"
role="tab"
tabindex="-1"
type="button"
>
<span>
Таб 4
</span>
</button>
<button
aria-selected="false"
class="component component xs"
role="tab"
tabindex="-1"
type="button"
<span>
Таб 1
</span>
<span
class="addons"
>
<span>
Таб 5
</span>
</button>
</div>
addon
</span>
</button>
<button
aria-selected="true"
class="component component xs checked"
role="tab"
tabindex="0"
type="button"
>
<span>
Таб 2
</span>
</button>
<button
aria-selected="false"
class="component component xs"
role="tab"
tabindex="-1"
type="button"
>
<span>
Таб 3
</span>
</button>
<button
aria-selected="false"
class="component component xs"
role="tab"
tabindex="-1"
type="button"
>
<span>
Таб 4
</span>
</button>
<button
aria-selected="false"
class="component component xs"
role="tab"
tabindex="-1"
type="button"
>
<span>
Таб 5
</span>
</button>
</div>
</div>
<div
Expand Down
45 changes: 45 additions & 0 deletions packages/tabs/src/docs/description.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,3 +128,48 @@ render(() => {
);
});
```

### Табы со скроллом

```tsx live
render(() => {
const [selectedId, setSelectedId] = React.useState('tab-1');

const handleChange = (event, { selectedId }) => setSelectedId(selectedId);

return (
<TabsDesktop selectedId={selectedId} onChange={handleChange} scrollable={true}>
<Tab title='Первый таб с длинным заголовком' id='tab-1'>
Таб 1
</Tab>
<Tab title='Второй таб с длинным заголовком' id='tab-2'>
Таб 2
</Tab>
<Tab title='Третий таб с длинным заголовком' id='tab-3'>
Таб 3
</Tab>
<Tab title='Четвёртый таб с длинным заголовком' id='tab-4'>
Таб 4
</Tab>
<Tab title='Пятый таб с длинным заголовком' id='tab-5'>
Таб 5
</Tab>
<Tab title='Шестой таб с длинным заголовком' id='tab-6'>
Таб 6
</Tab>
<Tab title='Седьмой таб с длинным заголовком' id='tab-7'>
Таб 7
</Tab>
<Tab title='Восьмой таб с длинным заголовком' id='tab-8'>
Таб 8
</Tab>
<Tab title='Девятый таб с длинным заголовком' id='tab-9'>
Таб 9
</Tab>
<Tab title='Десятый таб с длинным заголовком' id='tab-10'>
Таб 10
</Tab>
</TabsDesktop>
);
});
```
1 change: 0 additions & 1 deletion packages/tabs/src/vars.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
@import '../../themes/src/default.css';

:root {
--tablist-hidden-scrollbar-height: 20px;
--primary-tablist-color: var(--color-light-text-secondary);
--primary-tablist-hover-color: var(--color-light-text-primary);
--primary-tablist-selected-color: var(--color-light-text-primary);
Expand Down

0 comments on commit 0134956

Please sign in to comment.