fix: remove background from Overlowscroller (#153)

Author: Juli Ovechkina

src/components/OverflowScroller/OverflowScroller.scss

@@ -3,17 +3,31 @@
 $block: '.#{$ns}overflow-scroller';
 
 #{$block} {
+    display: flex;
+    align-items: center;
     position: relative;
-
     overflow-x: hidden;
 
-    &__wrapper {
+    &__container {
+        width: 100%;
         position: relative;
 
-        transition: left 0.3s;
+        &_padding {
+            &-left {
+                padding-left: $indentSM;
+            }
+            &-right {
+                padding-right: $indentSM;
+            }
+        }
+    }
+
+    &__wrapper {
+        position: relative;
+        transition: left 0.6s;
     }
 
-    &__scroller {
+    &__arrow {
         position: absolute;
         z-index: 10;
         top: 0;
@@ -28,12 +42,6 @@ $block: '.#{$ns}overflow-scroller';
         cursor: pointer;
 
         color: var(--yc-color-text-secondary);
-        background: linear-gradient(
-                to left,
-                var(--yc-color-base-background) 70%,
-                var(--pc-transparent) 100%
-            )
-            no-repeat;
 
         &_type_left {
             left: 0;

src/components/OverflowScroller/OverflowScroller.tsx

@@ -8,6 +8,7 @@ import './OverflowScroller.scss';
 
 const b = block('overflow-scroller');
 const TRANSITION_TIME = 300;
+const PADDING_SIZE = 24;
 
 type Arrow = 'left' | 'right';
 
@@ -27,7 +28,7 @@ export default class OverflowScroller extends React.Component<
     OverflowScrollerState
 > {
     state = {
-        arrows: [],
+        arrows: [] as Arrow[],
         scrollValue: 0,
     };
     containerRef = createRef<HTMLDivElement>();
@@ -57,16 +58,25 @@ export default class OverflowScroller extends React.Component<
         const {className, children} = this.props;
         const {arrows, scrollValue} = this.state;
         const wrapperStyle = arrows.length ? {left: -scrollValue} : {left: 0};
+        const paddingLeft = arrows.includes('left');
+        const paddingRight = arrows.includes('right');
 
         return (
-            <div className={b(null, className)} ref={this.containerRef}>
-                <div className={b('wrapper')} style={wrapperStyle} ref={this.wrapperRef}>
-                    {children}
+            <div
+                className={b('container', {
+                    'padding-left': paddingLeft,
+                    'padding-right': paddingRight,
+                })}
+            >
+                <div className={b(null, className)} ref={this.containerRef}>
+                    <div className={b('wrapper')} style={wrapperStyle} ref={this.wrapperRef}>
+                        {children}
+                    </div>
                 </div>
                 {arrows.map((direction: Arrow) => (
                     <div
                         key={direction}
-                        className={b('scroller', {type: direction})}
+                        className={b('arrow', {type: direction})}
                         onClick={(e: React.MouseEvent) => this.handleScrollClick(e, direction)}
                     >
                         <ToggleArrow size={18} type={'horizontal'} iconType="navigation" />
@@ -94,7 +104,7 @@ export default class OverflowScroller extends React.Component<
     }, 100);
 
     private handleScrollClick = (e: React.MouseEvent, arrow: Arrow) => {
-        const {scrollValue} = this.state;
+        const {scrollValue, arrows} = this.state;
         const {onScrollStart} = this.props;
 
         if (
@@ -107,8 +117,11 @@ export default class OverflowScroller extends React.Component<
             const wrapperWidth = this.wrapperRef.current.offsetWidth;
             const hiddenWidth =
                 arrow === 'right' ? wrapperWidth - (containerWidth + scrollValue) : scrollValue;
+            const padding =
+                arrows.length > 1 && hiddenWidth + PADDING_SIZE > containerWidth ? PADDING_SIZE : 0;
             const delta = containerWidth > hiddenWidth ? hiddenWidth : containerWidth;
-            const newScrollValue = arrow === 'right' ? scrollValue + delta : scrollValue - delta;
+            const newScrollValue =
+                arrow === 'right' ? scrollValue + delta + padding : scrollValue - delta - padding;
             let newArrows: Arrow[] = ['left', 'right'];
 
             if (newScrollValue + containerWidth >= wrapperWidth) {

src/components/OverflowScroller/__stories__/OverflowScroller.stories.scss

@@ -4,10 +4,6 @@ import React from 'react';
 import OverflowScroller, {OverflowScrollerProps} from '../OverflowScroller';
 import {COMPONENTS} from '../../../demo/constants';
 
-import './OverflowScroller.stories.scss';
-
-import data from './data.json';
-
 export default {
     component: OverflowScroller,
     title: `${COMPONENTS}/OverflowScroller`,
@@ -31,5 +27,3 @@ const DefaultTemplate: Story<OverflowScrollerProps> = (args) => (
 );
 
 export const Default = DefaultTemplate.bind({});
-
-Default.args = data.default.content;

src/components/OverflowScroller/__stories__/OverflowScroller.stories.tsx

@@ -48,7 +48,6 @@ $block: '.#{$ns}header';
     &__navigation {
         @include add-specificity(&) {
             position: relative;
-            margin-right: $normalOffset;
 
             flex: 1 0 0;
             justify-content: flex-start;
@@ -69,7 +68,7 @@ $block: '.#{$ns}header';
         justify-content: space-between;
         align-items: center;
 
-        margin-right: $indentS;
+        margin-right: $indentM;
     }
 
     &__buttons {