From 349edf5be7656e9c3e75e0a4307a8f2b84d53455 Mon Sep 17 00:00:00 2001 From: Sasha Chabin Date: Tue, 24 Dec 2024 14:33:27 +0500 Subject: [PATCH 1/3] chore(docs): prevent scrollTop in styleguide --- packages/react-ui-validations/docs/index.tsx | 1 + packages/react-ui-validations/docs/styles/main.less | 3 +++ .../components/StyleGuideWrapper/StyleGuideWrapper.tsx | 1 + 3 files changed, 5 insertions(+) create mode 100644 packages/react-ui-validations/docs/styles/main.less diff --git a/packages/react-ui-validations/docs/index.tsx b/packages/react-ui-validations/docs/index.tsx index cb1c58a9a1c..f4f42061d5f 100644 --- a/packages/react-ui-validations/docs/index.tsx +++ b/packages/react-ui-validations/docs/index.tsx @@ -12,6 +12,7 @@ import { Validator } from './Pages/Validator'; import { Concepts } from './Pages/Concepts'; import 'docs/styles/reset.less'; +import 'docs/styles/main.less'; import 'docs/styles/typography.less'; const App = hot(() => ( diff --git a/packages/react-ui-validations/docs/styles/main.less b/packages/react-ui-validations/docs/styles/main.less new file mode 100644 index 00000000000..ea6191bdf04 --- /dev/null +++ b/packages/react-ui-validations/docs/styles/main.less @@ -0,0 +1,3 @@ +body { + overscroll-behavior: none; +} diff --git a/packages/react-ui/.styleguide/components/StyleGuideWrapper/StyleGuideWrapper.tsx b/packages/react-ui/.styleguide/components/StyleGuideWrapper/StyleGuideWrapper.tsx index 0ddae922751..7095aeb0673 100644 --- a/packages/react-ui/.styleguide/components/StyleGuideWrapper/StyleGuideWrapper.tsx +++ b/packages/react-ui/.styleguide/components/StyleGuideWrapper/StyleGuideWrapper.tsx @@ -24,6 +24,7 @@ function StyleGuideRenderer({ children, hasSidebar, toc, title, version }: Style const [theme, setTheme] = useState(DEFAULT_THEME_WRAPPER); document.body.style.fontFamily = 'Lab Grotesque, Roboto, Helvetica Neue, Arial, sans-serif'; document.body.style.fontSize = '14px'; + document.body.style.overscrollBehavior = 'none'; const isThemeDark = theme.toLowerCase().includes('dark'); From fdfff1dc1c67d920f9cf00fbb6c1e8fc4863e483 Mon Sep 17 00:00:00 2001 From: Sasha Chabin Date: Tue, 24 Dec 2024 14:33:38 +0500 Subject: [PATCH 2/3] chore(docs): increase notification banner z-index --- packages/react-ui-validations/docs/Common/Notification.tsx | 2 +- .../.styleguide/components/Notification/Notification.styles.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-ui-validations/docs/Common/Notification.tsx b/packages/react-ui-validations/docs/Common/Notification.tsx index 177474f926c..00eb6327e66 100644 --- a/packages/react-ui-validations/docs/Common/Notification.tsx +++ b/packages/react-ui-validations/docs/Common/Notification.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; export const NotificationContainer = styled.div` position: sticky; - z-index: 2; + z-index: 10; top: 0; left: 0; display: flex; diff --git a/packages/react-ui/.styleguide/components/Notification/Notification.styles.ts b/packages/react-ui/.styleguide/components/Notification/Notification.styles.ts index 76354476dab..416dc01071f 100644 --- a/packages/react-ui/.styleguide/components/Notification/Notification.styles.ts +++ b/packages/react-ui/.styleguide/components/Notification/Notification.styles.ts @@ -4,7 +4,7 @@ export const styles = memoizeStyle({ notification() { return css` position: sticky; - z-index: 2; + z-index: 10; top: 0; left: 0; display: flex; From 2cd4f724f2ba2675e06fd0de5fb8282389b4bb24 Mon Sep 17 00:00:00 2001 From: Sasha Chabin Date: Tue, 24 Dec 2024 14:46:25 +0500 Subject: [PATCH 3/3] chore(docs): replace overscrollBehavior to overscrollBehaviorY --- packages/react-ui-validations/docs/styles/main.less | 2 +- .../components/StyleGuideWrapper/StyleGuideWrapper.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-ui-validations/docs/styles/main.less b/packages/react-ui-validations/docs/styles/main.less index ea6191bdf04..6d8f6862511 100644 --- a/packages/react-ui-validations/docs/styles/main.less +++ b/packages/react-ui-validations/docs/styles/main.less @@ -1,3 +1,3 @@ body { - overscroll-behavior: none; + overscroll-behavior-y: none; } diff --git a/packages/react-ui/.styleguide/components/StyleGuideWrapper/StyleGuideWrapper.tsx b/packages/react-ui/.styleguide/components/StyleGuideWrapper/StyleGuideWrapper.tsx index 7095aeb0673..66086975452 100644 --- a/packages/react-ui/.styleguide/components/StyleGuideWrapper/StyleGuideWrapper.tsx +++ b/packages/react-ui/.styleguide/components/StyleGuideWrapper/StyleGuideWrapper.tsx @@ -24,7 +24,7 @@ function StyleGuideRenderer({ children, hasSidebar, toc, title, version }: Style const [theme, setTheme] = useState(DEFAULT_THEME_WRAPPER); document.body.style.fontFamily = 'Lab Grotesque, Roboto, Helvetica Neue, Arial, sans-serif'; document.body.style.fontSize = '14px'; - document.body.style.overscrollBehavior = 'none'; + document.body.style.overscrollBehaviorY = 'none'; const isThemeDark = theme.toLowerCase().includes('dark');