From bdc96853996bf261257cffa0d6f6b2a2ad108a7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= <crishpeen@gmail.com>
Date: Fri, 9 Jun 2023 11:04:49 +0200
Subject: [PATCH] BREAKING CHANGE(web-react): Rename ScrollView `indicators`
 prop to `overflowDecorators` #DS-825
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 ## Migration Guide

Rename `indicators` prop to `overflowDecorators` on all ScrollView component usages.

- `<ScrollView indicators="shadows" …>` → `<ScrollView overflowDecorators="shadows" …>`
- `<ScrollView indicators="borders" …>` → `<ScrollView overflowDecorators="borders" …>`
- `<ScrollView indicators="both" …>` → `<ScrollView overflowDecorators="both" …>`

Please refer back to these instructions or reach out to our team
if you encounter any issues during migration.
---
 .../ModalComposedWithScrollView.stories.tsx   |  2 +-
 .../src/components/ScrollView/README.md       | 12 +++++-----
 .../src/components/ScrollView/ScrollView.tsx  |  8 +++----
 .../__tests__/useScrollViewStyleProps.test.ts | 14 +++++++-----
 .../src/components/ScrollView/constants.ts    |  2 +-
 .../components/ScrollView/stories/argTypes.ts | 14 ++++++------
 .../ScrollView/useScrollViewStyleProps.ts     | 22 +++++++++----------
 packages/web-react/src/types/scrollView.ts    |  4 ++--
 8 files changed, 40 insertions(+), 38 deletions(-)

diff --git a/packages/web-react/docs/stories/examples/ModalComposedWithScrollView.stories.tsx b/packages/web-react/docs/stories/examples/ModalComposedWithScrollView.stories.tsx
index f92cf47a10..aa07f77005 100644
--- a/packages/web-react/docs/stories/examples/ModalComposedWithScrollView.stories.tsx
+++ b/packages/web-react/docs/stories/examples/ModalComposedWithScrollView.stories.tsx
@@ -30,7 +30,7 @@ export const ModalComposedWithScrollView = () => {
       <ModalComposed id="ModalExample" isOpen={isOpen} onClose={handleClose}>
         <ModalComposedDialog>
           <ModalComposedHeader>Modal with ScrollView </ModalComposedHeader>
-          <ScrollView edgeIndicators="borders">
+          <ScrollView overflowDecorators="borders">
             <ModalComposedBody>
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam
diff --git a/packages/web-react/src/components/ScrollView/README.md b/packages/web-react/src/components/ScrollView/README.md
index 401dd795a6..a60b567fea 100644
--- a/packages/web-react/src/components/ScrollView/README.md
+++ b/packages/web-react/src/components/ScrollView/README.md
@@ -2,7 +2,7 @@
 
 ## Usage
 
-To make scrolling and scroll indicators function correctly, the parent
+To make scrolling and scroll overflow decorators function correctly, the parent
 container's height must be limited. In our examples, we set this height
 limit using inline styles for demonstration purposes only.
 
@@ -40,21 +40,21 @@ limit using inline styles for demonstration purposes only.
 </ScrollView>
 ```
 
-## Scrolling Indicators
+## Overflow Decorators
 
-The ScrollView component provides indicators on its edges, showing that there is more content to scroll to.
+The ScrollView component provides overflow decorators on its edges, showing that there is more content to scroll to.
 Shadows are used by default.
 
 You can use borders instead:
 
 ```javascript
-<ScrollView edgeIndicators="borders" />
+<ScrollView overflowDecorators="borders" />
 ```
 
 Or both:
 
 ```javascript
-<ScrollView edgeIndicators="both" />
+<ScrollView overflowDecorators="both" />
 ```
 
 ## Hiding the Scrollbar
@@ -69,7 +69,7 @@ Or both:
 | --------------------- | ---------------------------- | ---------- | -------- | ---------------------------------- |
 | `children`            | `ReactNode`                  | -          | yes      | ScrollView children's nodes        |
 | `direction`           | `horizontal`, `vertical`     | `vertical` | no       | Direction of the wrapper           |
-| `edgeIndicators`      | `borders`, `shadows`, `both` | `shadows`  | no       | ScrollView edge indicators         |
 | `isScrollbarDisabled` | `boolean`                    | `false`    | no       | If true, the Scrollbar is disabled |
+| `overflowDecorators`  | `borders`, `shadows`, `both` | `shadows`  | no       | ScrollView overflow decorators     |
 | `UNSAFE_className`    | `string`                     | -          | no       | Wrapper custom class name          |
 | `UNSAFE_style`        | `CSSProperties`              | -          | no       | Wrapper custom style               |
diff --git a/packages/web-react/src/components/ScrollView/ScrollView.tsx b/packages/web-react/src/components/ScrollView/ScrollView.tsx
index d22954843d..7f5917dcf9 100644
--- a/packages/web-react/src/components/ScrollView/ScrollView.tsx
+++ b/packages/web-react/src/components/ScrollView/ScrollView.tsx
@@ -4,14 +4,14 @@ import { SpiritScrollViewProps } from '../../types';
 import { useStyleProps } from '../../hooks';
 import { useScrollViewStyleProps } from './useScrollViewStyleProps';
 import { useScrollPosition } from './useScrollPosition';
-import { SCROLL_VIEW_DEFAULT_EDGE_INDICATOR, SCROLL_VIEW_DEFAULT_DIRECTION } from './constants';
+import { SCROLL_VIEW_DEFAULT_DIRECTION, SCROLL_VIEW_DEFAULT_OVERFLOW_DECORATOR } from './constants';
 
 const ScrollView = (props: SpiritScrollViewProps) => {
   const {
     children,
     direction = SCROLL_VIEW_DEFAULT_DIRECTION,
-    edgeIndicators = SCROLL_VIEW_DEFAULT_EDGE_INDICATOR,
     isScrollbarDisabled,
+    overflowDecorators = SCROLL_VIEW_DEFAULT_OVERFLOW_DECORATOR,
     ...restProps
   } = props;
 
@@ -25,10 +25,10 @@ const ScrollView = (props: SpiritScrollViewProps) => {
   });
   const { classProps } = useScrollViewStyleProps({
     direction,
-    edgeIndicators,
     isScrollbarDisabled,
     isScrolledAtStart,
     isScrolledAtEnd,
+    overflowDecorators,
   });
   const { styleProps, props: transferProps } = useStyleProps(restProps);
 
@@ -39,7 +39,7 @@ const ScrollView = (props: SpiritScrollViewProps) => {
           {children}
         </div>
       </div>
-      <div className={classProps.indicators} aria-hidden="true" />
+      <div className={classProps.overflowDecorators} aria-hidden="true" />
     </div>
   );
 };
diff --git a/packages/web-react/src/components/ScrollView/__tests__/useScrollViewStyleProps.test.ts b/packages/web-react/src/components/ScrollView/__tests__/useScrollViewStyleProps.test.ts
index 43fb0fd6c8..eda148a602 100644
--- a/packages/web-react/src/components/ScrollView/__tests__/useScrollViewStyleProps.test.ts
+++ b/packages/web-react/src/components/ScrollView/__tests__/useScrollViewStyleProps.test.ts
@@ -6,10 +6,10 @@ describe('useScrollViewStyleProps', () => {
     const { result } = renderHook(() =>
       useScrollViewStyleProps({
         direction: 'vertical',
-        edgeIndicators: 'shadows',
         isScrollbarDisabled: true,
         isScrolledAtEnd: true,
         isScrolledAtStart: true,
+        overflowDecorators: 'shadows',
       }),
     );
 
@@ -19,17 +19,19 @@ describe('useScrollViewStyleProps', () => {
     );
     expect(result.current.classProps.viewport).toBe('ScrollView__viewport');
     expect(result.current.classProps.content).toBe('ScrollView__content');
-    expect(result.current.classProps.indicators).toBe('ScrollView__indicators ScrollView__indicators--shadows');
+    expect(result.current.classProps.overflowDecorators).toBe(
+      'ScrollView__overflowDecorators ScrollView__overflowDecorators--shadows',
+    );
   });
 
-  it('should return horizontal both variants of indicator', () => {
+  it('should return horizontal both variants of overflow decorators', () => {
     const { result } = renderHook(() =>
       useScrollViewStyleProps({
         direction: 'horizontal',
-        edgeIndicators: 'both',
         isScrollbarDisabled: false,
         isScrolledAtEnd: false,
         isScrolledAtStart: false,
+        overflowDecorators: 'both',
       }),
     );
 
@@ -37,8 +39,8 @@ describe('useScrollViewStyleProps', () => {
     expect(result.current.classProps.root).toBe('ScrollView ScrollView--horizontal');
     expect(result.current.classProps.viewport).toBe('ScrollView__viewport');
     expect(result.current.classProps.content).toBe('ScrollView__content');
-    expect(result.current.classProps.indicators).toBe(
-      'ScrollView__indicators ScrollView__indicators--shadows ScrollView__indicators--borders',
+    expect(result.current.classProps.overflowDecorators).toBe(
+      'ScrollView__overflowDecorators ScrollView__overflowDecorators--shadows ScrollView__overflowDecorators--borders',
     );
   });
 });
diff --git a/packages/web-react/src/components/ScrollView/constants.ts b/packages/web-react/src/components/ScrollView/constants.ts
index 5cc4eeb089..4aa66343d4 100644
--- a/packages/web-react/src/components/ScrollView/constants.ts
+++ b/packages/web-react/src/components/ScrollView/constants.ts
@@ -1,6 +1,6 @@
 import { Direction } from '../../constants';
 
 export const SCROLL_VIEW_DEFAULT_DIRECTION = Direction.VERTICAL;
-export const SCROLL_VIEW_DEFAULT_EDGE_INDICATOR = 'shadows';
+export const SCROLL_VIEW_DEFAULT_OVERFLOW_DECORATOR = 'shadows';
 export const EDGE_DETECTION_INACCURACY_PX = 1;
 export const DEBOUNCE_DELAY = 50;
diff --git a/packages/web-react/src/components/ScrollView/stories/argTypes.ts b/packages/web-react/src/components/ScrollView/stories/argTypes.ts
index 8a7f263c96..3a4a7a2a1b 100644
--- a/packages/web-react/src/components/ScrollView/stories/argTypes.ts
+++ b/packages/web-react/src/components/ScrollView/stories/argTypes.ts
@@ -6,17 +6,17 @@ export default {
     },
     defaultValue: 'vertical',
   },
-  edgeIndicators: {
-    control: {
-      type: 'select',
-      options: ['borders', 'shadows', 'both'],
-    },
-    defaultValue: 'shadows',
-  },
   isScrollbarDisabled: {
     control: {
       type: 'boolean',
     },
     defaultValue: false,
   },
+  overflowDecorators: {
+    control: {
+      type: 'select',
+      options: ['borders', 'shadows', 'both'],
+    },
+    defaultValue: 'shadows',
+  },
 };
diff --git a/packages/web-react/src/components/ScrollView/useScrollViewStyleProps.ts b/packages/web-react/src/components/ScrollView/useScrollViewStyleProps.ts
index d61fe22bac..7e77c7f0b8 100644
--- a/packages/web-react/src/components/ScrollView/useScrollViewStyleProps.ts
+++ b/packages/web-react/src/components/ScrollView/useScrollViewStyleProps.ts
@@ -1,13 +1,13 @@
 import classNames from 'classnames';
 import { useClassNamePrefix } from '../../hooks';
-import { ScrollViewDirectionType, ScrollViewEdgeIndicatorType } from '../../types';
+import { ScrollViewDirectionType, ScrollViewOverflowDecoratorsType } from '../../types';
 
 export interface UseScrollViewStyleProps {
   direction: ScrollViewDirectionType;
-  edgeIndicators: ScrollViewEdgeIndicatorType;
   isScrollbarDisabled?: boolean;
   isScrolledAtEnd: boolean;
   isScrolledAtStart: boolean;
+  overflowDecorators: ScrollViewOverflowDecoratorsType;
 }
 
 export interface UseScrollViewStyleReturn {
@@ -16,29 +16,29 @@ export interface UseScrollViewStyleReturn {
     root: string;
     viewport: string;
     content: string;
-    indicators: string;
+    overflowDecorators: string;
   };
 }
 
 export const useScrollViewStyleProps = ({
   direction,
-  edgeIndicators,
   isScrollbarDisabled,
   isScrolledAtEnd,
   isScrolledAtStart,
+  overflowDecorators,
 }: UseScrollViewStyleProps): UseScrollViewStyleReturn => {
   const scrollViewRootClass = useClassNamePrefix('ScrollView');
   const scrollViewRootDirectionClass = `${scrollViewRootClass}--${direction}`;
   const scrollViewRootScrollbarDisabledClass = `${scrollViewRootClass}--scrollbarDisabled`;
   const scrollViewViewportClass = `${scrollViewRootClass}__viewport`;
   const scrollViewContentClass = `${scrollViewRootClass}__content`;
-  const scrollViewIndicatorsClass = `${scrollViewRootClass}__indicators`;
-  const scrollViewRootEdgeIndicatorClasses = {
-    shadows: `${scrollViewIndicatorsClass}--shadows`,
-    borders: `${scrollViewIndicatorsClass}--borders`,
-    both: classNames(`${scrollViewIndicatorsClass}--shadows`, `${scrollViewIndicatorsClass}--borders`),
+  const scrollViewOverflowDecoratorsClass = `${scrollViewRootClass}__overflowDecorators`;
+  const scrollViewRootOverflowDecoratorsClasses = {
+    shadows: `${scrollViewOverflowDecoratorsClass}--shadows`,
+    borders: `${scrollViewOverflowDecoratorsClass}--borders`,
+    both: classNames(`${scrollViewOverflowDecoratorsClass}--shadows`, `${scrollViewOverflowDecoratorsClass}--borders`),
   };
-  const scrollViewRootEdgeIndicatorClass = scrollViewRootEdgeIndicatorClasses[edgeIndicators];
+  const scrollViewRootOverflowDecoratorsClass = scrollViewRootOverflowDecoratorsClasses[overflowDecorators];
   const scrollViewAtStartClass = 'is-scrolled-at-start';
   const scrollViewAtEndClass = 'is-scrolled-at-end';
 
@@ -51,7 +51,7 @@ export const useScrollViewStyleProps = ({
       }),
       viewport: scrollViewViewportClass,
       content: scrollViewContentClass,
-      indicators: classNames(scrollViewIndicatorsClass, scrollViewRootEdgeIndicatorClass),
+      overflowDecorators: classNames(scrollViewOverflowDecoratorsClass, scrollViewRootOverflowDecoratorsClass),
     },
   };
 };
diff --git a/packages/web-react/src/types/scrollView.ts b/packages/web-react/src/types/scrollView.ts
index 8d806882a0..c5a212b56c 100644
--- a/packages/web-react/src/types/scrollView.ts
+++ b/packages/web-react/src/types/scrollView.ts
@@ -1,11 +1,11 @@
 import { ChildrenProps, DirectionDictionaryType, StyleProps } from './shared';
 
 export type ScrollViewDirectionType = DirectionDictionaryType;
-export type ScrollViewEdgeIndicatorType = 'borders' | 'shadows' | 'both';
+export type ScrollViewOverflowDecoratorsType = 'borders' | 'shadows' | 'both';
 
 export interface ScrollViewBaseProps extends ChildrenProps, StyleProps {
   direction?: ScrollViewDirectionType;
-  edgeIndicators?: ScrollViewEdgeIndicatorType;
+  overflowDecorators?: ScrollViewOverflowDecoratorsType;
   isScrollbarDisabled?: boolean;
 }