From 89064ac319fb45aa27823d5c005b0ab45af61be9 Mon Sep 17 00:00:00 2001 From: Mukul Bansal Date: Mon, 5 Aug 2024 20:41:48 +0530 Subject: [PATCH] fix: scroll issue in tab component affects: @medly-components/core, @medly-components/utils --- .../src/components/Tabs/Tab/Tab.styled.tsx | 3 +- .../Tabs/Tab/__snapshots__/Tab.test.tsx.snap | 117 ++++++++++++++++++ .../__snapshots__/TabList.test.tsx.snap | 18 +++ .../Tabs/__snapshots__/Tabs.test.tsx.snap | 63 ++++++++++ .../TimeOptionList/TimeOptionList.styled.tsx | 9 +- packages/utils/src/style/hideScrollbar.ts | 9 ++ packages/utils/src/style/index.ts | 1 + 7 files changed, 212 insertions(+), 8 deletions(-) create mode 100644 packages/utils/src/style/hideScrollbar.ts diff --git a/packages/core/src/components/Tabs/Tab/Tab.styled.tsx b/packages/core/src/components/Tabs/Tab/Tab.styled.tsx index 8b4313159..fc6f3d9c9 100644 --- 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 index 326a2ae98..a2ba39d48 100644 --- 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 index 3219f6cd0..c85e54fe0 100644 --- 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; diff --git a/packages/core/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap b/packages/core/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap index 09058cce6..f895ada54 100644 --- a/packages/core/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap +++ b/packages/core/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap @@ -69,11 +69,20 @@ exports[`Tabs 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: #EBF1FA; background-color: #ffffff; background-color: transparent; } +.c1::-webkit-scrollbar { + display: none; +} + .c1 * { -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; @@ -206,10 +215,19 @@ exports[`Tabs 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; } +.c9::-webkit-scrollbar { + display: none; +} + .c9 * { -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; @@ -571,11 +589,20 @@ exports[`Tabs should render properly with fullWidth 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; @@ -892,10 +919,19 @@ exports[`Tabs 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: #EBF1FA; background-color: #EBF1FA; } +.c1::-webkit-scrollbar { + display: none; +} + .c1 * { -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; @@ -1024,9 +1060,18 @@ exports[`Tabs 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; } +.c9::-webkit-scrollbar { + display: none; +} + .c9 * { -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; @@ -1402,6 +1447,11 @@ exports[`Tabs 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: #EBF1FA; background-color: #ffffff; display: -webkit-box; @@ -1423,6 +1473,10 @@ exports[`Tabs should render properly with solid tab variant 1`] = ` border-radius: .8rem; } +.c2::-webkit-scrollbar { + display: none; +} + .c2 * { -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; @@ -1530,6 +1584,11 @@ exports[`Tabs 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; @@ -1550,6 +1609,10 @@ exports[`Tabs should render properly with solid tab variant 1`] = ` border-radius: .8rem; } +.c10::-webkit-scrollbar { + display: none; +} + .c10 * { -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; diff --git a/packages/core/src/components/TimePicker/TimeOptionList/TimeOptionList.styled.tsx b/packages/core/src/components/TimePicker/TimeOptionList/TimeOptionList.styled.tsx index 7498e276f..f71835bea 100644 --- a/packages/core/src/components/TimePicker/TimeOptionList/TimeOptionList.styled.tsx +++ b/packages/core/src/components/TimePicker/TimeOptionList/TimeOptionList.styled.tsx @@ -1,4 +1,4 @@ -import { centerAligned } from '@medly-components/utils'; +import { centerAligned, hideScrollbar } from '@medly-components/utils'; import styled, { css } from 'styled-components'; export const TimePicker = styled.div` @@ -25,12 +25,7 @@ export const TimeUList = styled.ul` scroll-snap-type: y mandatory; user-select: none; list-style: none; - -ms-overflow-style: none; - scrollbar-width: none; - - &::-webkit-scrollbar { - display: none; - } + ${hideScrollbar} `; const getFontStyle = (style: 'selectedOption' | 'nonSelectedOption') => css` diff --git a/packages/utils/src/style/hideScrollbar.ts b/packages/utils/src/style/hideScrollbar.ts new file mode 100644 index 000000000..5891e51f1 --- /dev/null +++ b/packages/utils/src/style/hideScrollbar.ts @@ -0,0 +1,9 @@ +import { css } from 'styled-components'; + +export const hideScrollbar = css` + -ms-overflow-style: none; + scrollbar-width: none; + &::-webkit-scrollbar { + display: none; + } +`; diff --git a/packages/utils/src/style/index.ts b/packages/utils/src/style/index.ts index d3a2d700f..93c4cdb1f 100644 --- a/packages/utils/src/style/index.ts +++ b/packages/utils/src/style/index.ts @@ -5,4 +5,5 @@ export * from './clearMarginPadding'; export * from './fullHeight'; export * from './fullWidth'; export * from './getFontStyle'; +export * from './hideScrollbar'; export * from './media';