BREAKING CHANGE(web-react): Rename ScrollView indicators prop to `o…

…verflowDecorators` #DS-825 ## 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.
lmc-eu · Jul 21, 2023 · bdc9685 · bdc9685
1 parent c4f64e4
commit bdc9685
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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
@@ -6,10 +6,10 @@ describe('useScrollViewStyleProps', () => {
  const { result } = renderHook(() =>
  useScrollViewStyleProps({
  direction: 'vertical',
- edgeIndicators: 'shadows',
  isScrollbarDisabled: true,
  isScrolledAtEnd: true,
  isScrolledAtStart: true,
+ overflowDecorators: 'shadows',
  }),
  );
 
@@ -19,26 +19,28 @@ 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',
  }),
  );
 
  expect(result.current.classProps).toBeDefined();
  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
@@ -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
@@ -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
@@ -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
@@ -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;
 }