Column resizing UX (#2486)

* Update table column resizing styles

* Minor fix

Author: praveen-murali-ind

src/components/Table/components/HeaderCell/ResizableHeaderCell.jsx

@@ -1,11 +1,13 @@
-import React from "react";
+import React, { useState } from "react";
 
+import classnames from "classnames";
 import { Resizable } from "react-resizable";
 
 import CellContent from "./CellContent";
 
 const ResizableHeaderCell = props => {
-  const { onResize, width, onResizeStop, ...restProps } = props;
+  const { onResize, width, onResizeStop, onResizeStart, ...restProps } = props;
+  const [isResizing, setIsResizing] = useState(false);
 
   if (!width) {
     return <CellContent {...restProps} />;
@@ -18,12 +20,22 @@ const ResizableHeaderCell = props => {
       height={0}
       handle={
         <span
-          className="react-resizable-handle"
+          className={classnames("react-resizable-handle", {
+            "react-resizable-handle--resizing": isResizing,
+          })}
           onClick={e => e.stopPropagation()}
-        />
+        >
+          <span className="neeto-ui-table-react-resizable-handle__inner" />
+        </span>
       }
-      onResizeStart={e => {
+      onResizeStart={(e, data) => {
         e.preventDefault();
+        setIsResizing(true);
+        onResizeStart?.(e, data);
+      }}
+      onResizeStop={(e, data) => {
+        setIsResizing(false);
+        onResizeStop?.(e, data);
       }}
     >
       <CellContent {...restProps} />

src/styles/components/_table-overrides.scss

@@ -5,7 +5,7 @@
   --neeto-ui-table-header-font-weight: 600;
   --neeto-ui-table-header-text-transform: uppercase;
   --neeto-ui-table-header-border-bottom-width: 1px;
-  --neeto-ui-table-resize-handle-width: 10px;
+  --neeto-ui-table-resize-handle-width: 6px;
   --neeto-ui-table-resize-handle-hover-bg-color: rgb(var(--neeto-ui-gray-300));
 }
 
@@ -93,15 +93,31 @@
   width: var(--neeto-ui-table-resize-handle-width);
   height: 100%;
   bottom: 0;
-  right: -5px;
+  right: 0;
   cursor: col-resize;
   z-index: 1;
+  padding-right: 1px;
+  padding-left: 1px;
+}
+
+.neeto-ui-table-react-resizable-handle__inner {
+  position: relative;
+  height: 90%;
+  top: 5%;
+  width: 100%;
+  border-radius: 4px;
+  display: block;
+  transition: all 0.3s;
 }
 
-.react-resizable-handle:hover {
+.react-resizable-handle:hover .neeto-ui-table-react-resizable-handle__inner {
   background-color: var(--neeto-ui-table-resize-handle-hover-bg-color);
 }
 
+.react-resizable-handle--resizing .neeto-ui-table-react-resizable-handle__inner{
+  background-color: rgb(var(--neeto-ui-primary-500)) !important;
+}
+
 .neetix-table {
   --neeto-ui-table-header-font-size: var(--neeto-ui-text-sm);
   --neeto-ui-table-header-text-transform: capitalize;