From b8d4442c241fe41d43ed2a6ad4bc90ede41644a3 Mon Sep 17 00:00:00 2001
From: Giorgi Cheishvili <giorgi.cheishvili@outlook.com>
Date: Wed, 3 Jan 2024 16:24:11 +0400
Subject: [PATCH] fix: splitter active resizer handle scroll

---
 package.json                      |   2 +-
 packages/styles/src/splitter.scss | 159 ++++++++++++++++--------------
 2 files changed, 85 insertions(+), 76 deletions(-)

diff --git a/package.json b/package.json
index fbdfb18ebe..a8e8ff262c 100644
--- a/package.json
+++ b/package.json
@@ -169,4 +169,4 @@
     "fast-deep-equal": "^3.1.3",
     "jsdom": "^20.0.1"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/styles/src/splitter.scss b/packages/styles/src/splitter.scss
index b7d3941240..5e5e331990 100644
--- a/packages/styles/src/splitter.scss
+++ b/packages/styles/src/splitter.scss
@@ -3,6 +3,65 @@
 
 $block: #{$fd-namespace}-splitter;
 
+@mixin fd-splitter-line-horizontal($fullWidth) {
+  height: var(--fdSplitter_Resizer_Line_Thickness);
+
+  @if $fullWidth {
+    flex-grow: 1;
+  } @else {
+    flex-basis: var(--fdSplitter_Resizer_Line_Size);
+  }
+}
+
+@mixin fd-splitter-line-vertical($fullHeight) {
+  width: var(--fdSplitter_Resizer_Line_Thickness);
+
+  @if $fullHeight {
+    flex-grow: 1;
+  } @else {
+    flex-basis: var(--fdSplitter_Resizer_Line_Size);
+  }
+}
+
+@mixin fd-splitter-resizer-decorations() {
+  .#{$block}__resizer-decoration-before,
+  .#{$block}__resizer-decoration-after {
+    @content;
+  }
+}
+
+@mixin fd-splitter-resizer-decoration-before-active() {
+  @include fd-active() {
+    & ~ .#{$block}__resizer-decoration-before {
+      @content;
+    }
+  }
+}
+
+@mixin fd-splitter-resizer-decoration-after-active() {
+  @include fd-active() {
+    & ~ .#{$block}__resizer-decoration-after {
+      @content;
+    }
+  }
+}
+
+@mixin fd-splitter-resizer-decoration-before-focus() {
+  @include fd-focus() {
+    & ~ .#{$block}__resizer-decoration-before {
+      @content;
+    }
+  }
+}
+
+@mixin fd-splitter-resizer-decoration-after-focus() {
+  @include fd-focus() {
+    & ~ .#{$block}__resizer-decoration-after {
+      @content;
+    }
+  }
+}
+
 .#{$block} {
   --fdSplitter_Split_Pane_BoxShadow: none;
   --fdSplitter_Split_Pane_Background: transparent;
@@ -16,51 +75,20 @@ $block: #{$fd-namespace}-splitter;
   --fdSplitter_Resizer_Grip_Cursor: auto;
   --fdSplitter_Resizer_Flex_Direction: row;
   --fdSplitter_Resizer_Background: transparent;
-  --fdSplitter_Resizer_Before_Width: 4rem;
-  --fdSplitter_Resizer_Before_Height: 0.0625rem;
-  --fdSplitter_Resizer_Before_Border_Radius: 0.125rem;
   --fdSplitter_Resizer_Before_Background: linear-gradient(to left, var(--sapGroup_TitleBorderColor), transparent);
-  --fdSplitter_Resizer_After_Width: 4rem;
-  --fdSplitter_Resizer_After_Height: 0.0625rem;
-  --fdSplitter_Resizer_After_Border_Radius: 0.125rem;
   --fdSplitter_Resizer_After_Background: linear-gradient(to right, var(--sapGroup_TitleBorderColor), transparent);
+  --fdSplitter_Resizer_Line_Border_Radius: 0.125rem;
+  --fdSplitter_Resizer_Line_Thickness: 0.0625rem;
+  --fdSplitter_Resizer_Line_Size: 4rem;
 
-  @mixin fd-splitter-resizer-decoration-before-active() {
-    @include fd-active() {
-      & ~ .#{$block}__resizer-decoration-before {
-        @content;
-      }
-    }
-  }
-
-  @mixin fd-splitter-resizer-decoration-after-active() {
-    @include fd-active() {
-      & ~ .#{$block}__resizer-decoration-after {
-        @content;
-      }
-    }
-  }
-
-  @mixin fd-splitter-resizer-decoration-before-focus() {
-    @include fd-focus() {
-      & ~ .#{$block}__resizer-decoration-before {
-        @content;
-      }
-    }
-  }
-
-  @mixin fd-splitter-resizer-decoration-after-focus() {
-    @include fd-focus() {
-      & ~ .#{$block}__resizer-decoration-after {
-        @content;
-      }
-    }
-  }
+  width: 100%;
+  height: 100%;
 
   @include fd-flex();
 
-  width: 100%;
-  height: 100%;
+  @include fd-splitter-resizer-decorations() {
+    @include fd-splitter-line-horizontal(false);
+  }
 
   &,
   &__pagination,
@@ -97,14 +125,14 @@ $block: #{$fd-namespace}-splitter;
       --fdSplitter_Resizer_Height: 1rem;
       --fdSplitter_Resizer_Flex_Direction: row;
       --fdSplitter_Pane_Container_Flex_Direction: column;
-      --fdSplitter_Resizer_Before_Width: 4rem;
-      --fdSplitter_Resizer_Before_Height: 0.0625rem;
       --fdSplitter_Resizer_Before_Background: linear-gradient(to left, var(--sapGroup_TitleBorderColor), transparent);
-      --fdSplitter_Resizer_After_Width: 4rem;
-      --fdSplitter_Resizer_After_Height: 0.0625rem;
       --fdSplitter_Resizer_After_Background: linear-gradient(to right, var(--sapGroup_TitleBorderColor), transparent);
 
       & > .#{$block}__resizer {
+        @include fd-splitter-resizer-decorations() {
+          @include fd-splitter-line-horizontal(false);
+        }
+
         .#{$block}__resizer-grip {
           --fdSplitter_Resizer_Grip_Cursor: row-resize;
 
@@ -117,12 +145,14 @@ $block: #{$fd-namespace}-splitter;
           }
 
           @include fd-splitter-resizer-decoration-before-active() {
-            --fdSplitter_Resizer_Before_Width: 100%;
+            @include fd-splitter-line-horizontal(true);
+
             --fdSplitter_Resizer_Before_Background: var(--sapGroup_TitleBorderColor);
           }
 
           @include fd-splitter-resizer-decoration-after-active() {
-            --fdSplitter_Resizer_After_Width: 100%;
+            @include fd-splitter-line-horizontal(true);
+
             --fdSplitter_Resizer_After_Background: var(--sapGroup_TitleBorderColor);
           }
         }
@@ -133,14 +163,13 @@ $block: #{$fd-namespace}-splitter;
       --fdSplitter_Resizer_Width: 1rem;
       --fdSplitter_Resizer_Cursor: col-resize;
       --fdSplitter_Resizer_Flex_Direction: column;
-      --fdSplitter_Resizer_Before_Height: 4rem;
-      --fdSplitter_Resizer_Before_Width: 0.0625rem;
       --fdSplitter_Resizer_Before_Background: linear-gradient(to top, var(--sapGroup_TitleBorderColor), transparent);
-      --fdSplitter_Resizer_After_Height: 4rem;
-      --fdSplitter_Resizer_After_Width: 0.0625rem;
       --fdSplitter_Resizer_After_Background: linear-gradient(to bottom, var(--sapGroup_TitleBorderColor), transparent);
 
       & > .#{$block}__resizer {
+        @include fd-splitter-resizer-decorations() {
+          @include fd-splitter-line-vertical(false);
+        }
         .#{$block}__resizer-grip {
           --fdSplitter_Resizer_Grip_Cursor: col-resize;
 
@@ -153,33 +182,21 @@ $block: #{$fd-namespace}-splitter;
           }
 
           @include fd-splitter-resizer-decoration-before-active() {
-            --fdSplitter_Resizer_Before_Height: 100%;
+            @include fd-splitter-line-vertical(true);
+
             --fdSplitter_Resizer_Before_Background: var(--sapGroup_TitleBorderColor);
           }
 
           @include fd-splitter-resizer-decoration-after-active() {
-            --fdSplitter_Resizer_After_Height: 100%;
+            @include fd-splitter-line-vertical(true);
+
             --fdSplitter_Resizer_After_Background: var(--sapGroup_TitleBorderColor);
           }
         }
 
-        @include fd-active() {
-          --fdSplitter_Resizer_Before_Height: 100%;
-          --fdSplitter_Resizer_Before_Width: 0.0625rem;
-          --fdSplitter_Resizer_After_Height: 100%;
-          --fdSplitter_Resizer_After_Width: 0.0625rem;
-        }
-
         @include fd-focus() {
           --fdSplitter_Resizer_Before_Background: linear-gradient(to top, var(--sapContent_FocusColor), transparent);
           --fdSplitter_Resizer_After_Background: linear-gradient(to bottom, var(--sapContent_FocusColor), transparent);
-
-          @include fd-active() {
-            --fdSplitter_Resizer_Before_Height: 100%;
-            --fdSplitter_Resizer_Before_Width: 0.0625rem;
-            --fdSplitter_Resizer_After_Height: 100%;
-            --fdSplitter_Resizer_After_Width: 0.0625rem;
-          }
         }
       }
     }
@@ -231,9 +248,7 @@ $block: #{$fd-namespace}-splitter;
     }
 
     @include fd-active() {
-      --fdSplitter_Resizer_Before_Width: 100%;
       --fdSplitter_Resizer_Before_Background: var(--sapGroup_TitleBorderColor);
-      --fdSplitter_Resizer_After_Width: 100%;
       --fdSplitter_Resizer_After_Background: var(--sapGroup_TitleBorderColor);
     }
 
@@ -242,9 +257,7 @@ $block: #{$fd-namespace}-splitter;
       --fdSplitter_Resizer_After_Background: linear-gradient(to right, var(--sapContent_FocusColor), transparent);
 
       @include fd-active() {
-        --fdSplitter_Resizer_Before_Width: 100%;
         --fdSplitter_Resizer_Before_Background: var(--sapGroup_TitleBorderColor);
-        --fdSplitter_Resizer_After_Width: 100%;
         --fdSplitter_Resizer_After_Background: var(--sapGroup_TitleBorderColor);
       }
     }
@@ -253,19 +266,15 @@ $block: #{$fd-namespace}-splitter;
   &__resizer-decoration-before {
     order: 1;
     transition: all 0.1s ease-in;
-    height: var(--fdSplitter_Resizer_Before_Height);
-    min-width: var(--fdSplitter_Resizer_Before_Width);
     background: var(--fdSplitter_Resizer_Before_Background);
-    border-radius: var(--fdSplitter_Resizer_Before_Border_Radius);
+    border-radius: var(--fdSplitter_Resizer_Line_Border_Radius);
   }
 
   &__resizer-decoration-after {
     order: 3;
     transition: all 0.1s ease-in;
-    height: var(--fdSplitter_Resizer_After_Height);
-    min-width: var(--fdSplitter_Resizer_After_Width);
     background: var(--fdSplitter_Resizer_After_Background);
-    border-radius: var(--fdSplitter_Resizer_After_Border_Radius);
+    border-radius: var(--fdSplitter_Resizer_Line_Border_Radius);
   }
 
   .#{$block}__resizer-grip {