Web: Components: Set new scrollbar styles. Set dynamic bar size depending on hover. Add possibility to set fixedSize.

packages/components/scrollbar/index.js

@@ -103,6 +103,7 @@ const Scrollbar = React.forwardRef((props, ref) => {
     scrollclass,
     stype,
     noScrollY,
+    fixedSize,
     ...rest
   } = props;
 
@@ -182,6 +183,7 @@ const Scrollbar = React.forwardRef((props, ref) => {
       {...rest}
       id={id}
       disableTracksWidthCompensation
+      $fixedSize={fixedSize}
       rtl={isRtl}
       ref={ref}
       {...scrollAutoHideHandlers}
@@ -198,15 +200,16 @@ const Scrollbar = React.forwardRef((props, ref) => {
         },
       }}
       thumbYProps={{
-        className: "nav-thumb-vertical",
+        className: "thumb thumb-vertical",
         style: scrollbarType.thumbV,
       }}
       thumbXProps={{
-        className: "nav-thumb-horizontal",
+        className: "thumb thumb-horizontal",
         style: scrollbarType.thumbH,
       }}
       // Add 1px margin to vertical track to avoid scrollbar lib crashing when event.clientX equals 0
       trackYProps={{
+        className: "track track-vertical",
         style: {
           ...scrollbarType.trackV,
           ...tracksAutoHideStyles,
@@ -217,6 +220,7 @@ const Scrollbar = React.forwardRef((props, ref) => {
         ...tracksAutoHideHandlers,
       }}
       trackXProps={{
+        className: "track track-horizontal",
         style: {
           ...scrollbarType.trackH,
           ...tracksAutoHideStyles,
@@ -241,12 +245,15 @@ Scrollbar.propTypes = {
   autoHide: PropTypes.bool,
   /** Track auto hiding delay in ms.  */
   hideTrackTimer: PropTypes.number,
+  /** Fix scrollbar size. */
+  fixedSize: PropTypes.bool,
 };
 
 Scrollbar.defaultProps = {
   stype: "mediumBlack",
   autoHide: false,
   hideTrackTimer: 500,
+  fixedSize: false,
 };
 
 export default Scrollbar;

packages/components/scrollbar/styled-scrollbar.js

@@ -6,8 +6,40 @@ const StyledScrollbar = styled(Scrollbar)`
   .scroll-body {
     position: relative;
   }
-  .nav-thumb-vertical,
-  .nav-thumb-horizontal {
+
+  .track {
+    box-sizing: border-box;
+    display: flex;
+    padding: 4px;
+    border-radius: 8px !important;
+
+    &:hover {
+      .thumb-vertical {
+        width: 8px !important;
+      }
+
+      .thumb-horizontal {
+        height: 8px !important;
+      }
+    }
+  }
+
+  .track-vertical {
+    direction: ${({ theme }) => theme.interfaceDirection};
+    height: 100% !important;
+    width: 16px !important;
+    top: 0 !important;
+    justify-content: flex-end;
+  }
+
+  .track-horizontal {
+    width: 100% !important;
+    height: 16px !important;
+    left: 0 !important;
+    align-items: flex-end;
+  }
+
+  .thumb {
     background-color: ${(props) =>
       props.color ? props.color : props.theme.scrollbar.bgColor} !important;
     z-index: 201;
@@ -24,6 +56,24 @@ const StyledScrollbar = styled(Scrollbar)`
         props.theme.scrollbar.pressBgColor} !important;
     }
   }
+
+  .thumb-vertical {
+    width: ${({ $fixedSize }) => ($fixedSize ? "8px" : "4px")} !important;
+    transition: width linear 0.1s;
+
+    &:active {
+      width: 8px !important;
+    }
+  }
+
+  .thumb-horizontal {
+    height: ${({ $fixedSize }) => ($fixedSize ? "8px" : "4px")} !important;
+    transition: height linear 0.1s;
+
+    &:active {
+      height: 8px !important;
+    }
+  }
 `;
 
 StyledScrollbar.defaultProps = {