fix: scroll issue in tab component

affects: @medly-components/core, @medly-components/utils
medly · Aug 5, 2024 · 89064ac · 89064ac
1 parent 5e03629
commit 89064ac
Show file tree

Hide file tree

Showing 7 changed files with 212 additions and 8 deletions.
diff --git a/packages/core/src/components/Tabs/Tab/Tab.styled.tsx b/packages/core/src/components/Tabs/Tab/Tab.styled.tsx
@@ -1,5 +1,5 @@
 import { SvgIcon } from '@medly-components/icons';
-import { breakpoints, centerAligned, getFontStyle, media } from '@medly-components/utils';
+import { breakpoints, centerAligned, getFontStyle, hideScrollbar, media } from '@medly-components/utils';
 import styled, { css } from 'styled-components';
 import Text from '../../Text';
 import { TabSize } from '../types';
@@ -150,6 +150,7 @@ export const TabWrapper = styled('button').attrs(({ theme }) => ({ ...theme.tabs
     border-color: ${({ borderColor, variant }) => (variant === 'flat' || variant === 'outlined') && borderColor[variant]};
     border-width: ${({ variant }) => (variant === 'outlined' ? `0.1rem 0.1rem 0.1rem 0` : `0 0 0.1rem 0`)};
     transition: all 100ms ease-out;
+    ${hideScrollbar}
     * {
         transition: all 100ms ease-out;
     }

diff --git a/packages/core/src/components/Tabs/Tab/__snapshots__/Tab.test.tsx.snap b/packages/core/src/components/Tabs/Tab/__snapshots__/Tab.test.tsx.snap
@@ -84,11 +84,20 @@ exports[`Tab should render active state properly 1`] = `
   border-width: 0 0 0.1rem 0;
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
+  -ms-overflow-style: none;
+  -webkit-scrollbar-width: none;
+  -moz-scrollbar-width: none;
+  -ms-scrollbar-width: none;
+  scrollbar-width: none;
   background-color: #EBF1FA;
   background-color: #ffffff;
   background-color: transparent;
 }
 
+.c0::-webkit-scrollbar {
+  display: none;
+}
+
 .c0 * {
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
@@ -352,10 +361,19 @@ exports[`Tab should render disabled state properly 1`] = `
   border-width: 0 0 0.1rem 0;
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
+  -ms-overflow-style: none;
+  -webkit-scrollbar-width: none;
+  -moz-scrollbar-width: none;
+  -ms-scrollbar-width: none;
+  scrollbar-width: none;
   background-color: #ffffff;
   background-color: transparent;
 }
 
+.c0::-webkit-scrollbar {
+  display: none;
+}
+
 .c0 * {
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
@@ -643,10 +661,19 @@ exports[`Tab should render properly with GREY tab background 1`] = `
   border-width: 0 0 0.1rem 0;
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
+  -ms-overflow-style: none;
+  -webkit-scrollbar-width: none;
+  -moz-scrollbar-width: none;
+  -ms-scrollbar-width: none;
+  scrollbar-width: none;
   background-color: #ffffff;
   background-color: transparent;
 }
 
+.c0::-webkit-scrollbar {
+  display: none;
+}
+
 .c0 * {
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
@@ -945,10 +972,19 @@ exports[`Tab should render properly with L tab size 1`] = `
   border-width: 0 0 0.1rem 0;
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
+  -ms-overflow-style: none;
+  -webkit-scrollbar-width: none;
+  -moz-scrollbar-width: none;
+  -ms-scrollbar-width: none;
+  scrollbar-width: none;
   background-color: #ffffff;
   background-color: transparent;
 }
 
+.c0::-webkit-scrollbar {
+  display: none;
+}
+
 .c0 * {
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
@@ -1249,10 +1285,19 @@ exports[`Tab should render properly with L tab size 2`] = `
   border-width: 0 0 0.1rem 0;
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
+  -ms-overflow-style: none;
+  -webkit-scrollbar-width: none;
+  -moz-scrollbar-width: none;
+  -ms-scrollbar-width: none;
+  scrollbar-width: none;
   background-color: #ffffff;
   background-color: transparent;
 }
 
+.c0::-webkit-scrollbar {
+  display: none;
+}
+
 .c0 * {
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
@@ -1548,10 +1593,19 @@ exports[`Tab should render properly with M tab size 1`] = `
   border-width: 0 0 0.1rem 0;
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
+  -ms-overflow-style: none;
+  -webkit-scrollbar-width: none;
+  -moz-scrollbar-width: none;
+  -ms-scrollbar-width: none;
+  scrollbar-width: none;
   background-color: #ffffff;
   background-color: transparent;
 }
 
+.c0::-webkit-scrollbar {
+  display: none;
+}
+
 .c0 * {
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
@@ -1841,10 +1895,19 @@ exports[`Tab should render properly with M tab size 2`] = `
   border-width: 0 0 0.1rem 0;
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
+  -ms-overflow-style: none;
+  -webkit-scrollbar-width: none;
+  -moz-scrollbar-width: none;
+  -ms-scrollbar-width: none;
+  scrollbar-width: none;
   background-color: #ffffff;
   background-color: transparent;
 }
 
+.c0::-webkit-scrollbar {
+  display: none;
+}
+
 .c0 * {
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
@@ -2131,10 +2194,19 @@ exports[`Tab should render properly with S tab size 1`] = `
   border-width: 0 0 0.1rem 0;
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
+  -ms-overflow-style: none;
+  -webkit-scrollbar-width: none;
+  -moz-scrollbar-width: none;
+  -ms-scrollbar-width: none;
+  scrollbar-width: none;
   background-color: #ffffff;
   background-color: transparent;
 }
 
+.c0::-webkit-scrollbar {
+  display: none;
+}
+
 .c0 * {
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
@@ -2421,10 +2493,19 @@ exports[`Tab should render properly with S tab size 2`] = `
   border-width: 0 0 0.1rem 0;
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
+  -ms-overflow-style: none;
+  -webkit-scrollbar-width: none;
+  -moz-scrollbar-width: none;
+  -ms-scrollbar-width: none;
+  scrollbar-width: none;
   background-color: #ffffff;
   background-color: transparent;
 }
 
+.c0::-webkit-scrollbar {
+  display: none;
+}
+
 .c0 * {
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
@@ -2711,10 +2792,19 @@ exports[`Tab should render properly with WHITE tab background 1`] = `
   border-width: 0 0 0.1rem 0;
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
+  -ms-overflow-style: none;
+  -webkit-scrollbar-width: none;
+  -moz-scrollbar-width: none;
+  -ms-scrollbar-width: none;
+  scrollbar-width: none;
   background-color: #ffffff;
   background-color: transparent;
 }
 
+.c0::-webkit-scrollbar {
+  display: none;
+}
+
 .c0 * {
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
@@ -3001,10 +3091,19 @@ exports[`Tab should render properly with flat tab variant 1`] = `
   border-width: 0 0 0.1rem 0;
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
+  -ms-overflow-style: none;
+  -webkit-scrollbar-width: none;
+  -moz-scrollbar-width: none;
+  -ms-scrollbar-width: none;
+  scrollbar-width: none;
   background-color: #ffffff;
   background-color: transparent;
 }
 
+.c0::-webkit-scrollbar {
+  display: none;
+}
+
 .c0 * {
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
@@ -3291,9 +3390,18 @@ exports[`Tab should render properly with outlined tab variant 1`] = `
   border-width: 0.1rem 0.1rem 0.1rem 0;
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
+  -ms-overflow-style: none;
+  -webkit-scrollbar-width: none;
+  -moz-scrollbar-width: none;
+  -ms-scrollbar-width: none;
+  scrollbar-width: none;
   background-color: #ffffff;
 }
 
+.c0::-webkit-scrollbar {
+  display: none;
+}
+
 .c0 * {
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
@@ -3572,6 +3680,11 @@ exports[`Tab should render properly with solid tab variant 1`] = `
   border-width: 0 0 0.1rem 0;
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
+  -ms-overflow-style: none;
+  -webkit-scrollbar-width: none;
+  -moz-scrollbar-width: none;
+  -ms-scrollbar-width: none;
+  scrollbar-width: none;
   background-color: #ffffff;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3592,6 +3705,10 @@ exports[`Tab should render properly with solid tab variant 1`] = `
   border-radius: .8rem;
 }
 
+.c0::-webkit-scrollbar {
+  display: none;
+}
+
 .c0 * {
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;

diff --git a/packages/core/src/components/Tabs/TabList/__snapshots__/TabList.test.tsx.snap b/packages/core/src/components/Tabs/TabList/__snapshots__/TabList.test.tsx.snap
@@ -60,11 +60,20 @@ exports[`TabList should render properly 1`] = `
   border-width: 0 0 0.1rem 0;
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
+  -ms-overflow-style: none;
+  -webkit-scrollbar-width: none;
+  -moz-scrollbar-width: none;
+  -ms-scrollbar-width: none;
+  scrollbar-width: none;
   background-color: #EBF1FA;
   background-color: #ffffff;
   background-color: transparent;
 }
 
+.c1::-webkit-scrollbar {
+  display: none;
+}
+
 .c1 * {
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
@@ -197,10 +206,19 @@ exports[`TabList should render properly 1`] = `
   border-width: 0 0 0.1rem 0;
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;
+  -ms-overflow-style: none;
+  -webkit-scrollbar-width: none;
+  -moz-scrollbar-width: none;
+  -ms-scrollbar-width: none;
+  scrollbar-width: none;
   background-color: #ffffff;
   background-color: transparent;
 }
 
+.c7::-webkit-scrollbar {
+  display: none;
+}
+
 .c7 * {
   -webkit-transition: all 100ms ease-out;
   transition: all 100ms ease-out;