fix(SplitterLayout): implement latest design specs (#6885)

Author: Lukas742

packages/main/src/components/Splitter/Splitter.module.css

@@ -13,9 +13,6 @@
       outline-offset: -0.2rem;
       outline: var(--_ui5wcr_Splitter_BarOutline);
     }
-    .icon {
-      z-index: 1;
-    }
   }
 
   &[data-splitter-vertical='horizontal'] {
@@ -44,6 +41,14 @@
     .lineAfter {
       background-image: linear-gradient(to bottom, var(--_ui5wcr_Splitter_ContentBorderColor), transparent);
     }
+    .gripContainer {
+      height: 2rem;
+      width: 1.5rem;
+    }
+    .gripButton {
+      min-width: 1.5rem;
+      height: 1.625rem;
+    }
   }
 
   &[data-splitter-vertical='vertical'] {
@@ -78,6 +83,14 @@
         background-image: linear-gradient(to left, var(--_ui5wcr_Splitter_ContentBorderColor), transparent);
       }
     }
+    .gripContainer {
+      height: 1.5rem;
+      width: 2rem;
+    }
+    .gripButton {
+      height: 1.5rem;
+      min-width: 1.625rem;
+    }
   }
 
   &:hover {
@@ -89,10 +102,15 @@
   }
 }
 
-.gripButton {
-  min-width: 1.5rem !important;
-  height: 1.625rem;
+.gripContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   z-index: 1;
+}
+
+.gripButton {
+  cursor: inherit;
 
   &:active {
     z-index: 2;

packages/main/src/components/Splitter/index.tsx

@@ -264,21 +264,23 @@ const Splitter = forwardRef<HTMLDivElement, SplitterPropTypes>((props, ref) => {
       aria-label={i18nBundle.getText(PRESS_ARROW_KEYS_TO_MOVE)}
     >
       <div className={classNames.lineBefore} />
-      {isHighContrast ? (
-        <Button
-          className={classNames.gripButton}
-          tabIndex={-1}
-          icon={vertical ? horizontalGripIcon : verticalGripIcon}
-          design={ButtonDesign.Transparent}
-          data-component-name="SplitterLayoutSplitterGrip"
-        />
-      ) : (
-        <Icon
-          className={classNames.icon}
-          name={vertical ? horizontalGripIcon : verticalGripIcon}
-          data-component-name="SplitterLayoutSplitterGrip"
-        />
-      )}
+      <div className={classNames.gripContainer}>
+        {isHighContrast ? (
+          <Button
+            className={classNames.gripButton}
+            tabIndex={-1}
+            icon={vertical ? horizontalGripIcon : verticalGripIcon}
+            design={ButtonDesign.Transparent}
+            data-component-name="SplitterLayoutSplitterGrip"
+          />
+        ) : (
+          <Icon
+            className={classNames.icon}
+            name={vertical ? horizontalGripIcon : verticalGripIcon}
+            data-component-name="SplitterLayoutSplitterGrip"
+          />
+        )}
+      </div>
       <div className={classNames.lineAfter} />
     </div>
   );