From f14e66069f201ebbd2c1ea225c4f4736528680ee Mon Sep 17 00:00:00 2001
From: Andrey Ignatovskiy <43685423+LazyLahtak@users.noreply.github.com>
Date: Wed, 20 May 2020 16:31:54 +0300
Subject: [PATCH] fix(react-grid-material-ui): center text when label without
 icon (#2909)

---
 .../src/templates/group-panel-item.jsx        | 17 ++++-
 .../src/templates/group-panel-item.test.jsx   | 72 +++++++++++++++++++
 2 files changed, 86 insertions(+), 3 deletions(-)

diff --git a/packages/dx-react-grid-material-ui/src/templates/group-panel-item.jsx b/packages/dx-react-grid-material-ui/src/templates/group-panel-item.jsx
index 0b9a78ebf6..9af2c33457 100644
--- a/packages/dx-react-grid-material-ui/src/templates/group-panel-item.jsx
+++ b/packages/dx-react-grid-material-ui/src/templates/group-panel-item.jsx
@@ -13,12 +13,16 @@ const styles = theme => ({
     marginRight: theme.spacing(1),
     marginBottom: theme.spacing(1.5),
   },
+  withoutIcon: {
+    paddingRight: '13px',
+    paddingLeft: '13px',
+  },
   draftCell: {
     opacity: 0.3,
   },
 });
 
-const label = (showSortingControls, sortingEnabled, sortingDirection, column) => {
+const label = (showSortingControls, sortingEnabled, sortingDirection, column, hovered) => {
   const title = column.title || column.name;
   return showSortingControls
     ? (
@@ -26,6 +30,7 @@ const label = (showSortingControls, sortingEnabled, sortingDirection, column) =>
         active={!!sortingDirection}
         direction={sortingDirection === null ? undefined : sortingDirection}
         disabled={!sortingEnabled}
+        hideSortIcon={!hovered}
         tabIndex={-1}
       >
         {title}
@@ -42,8 +47,10 @@ const GroupPanelItemBase = ({
   classes, className,
   ...restProps
 }) => {
+  const [hovered, setHovered] = React.useState(false);
   const chipClassNames = classNames({
     [classes.button]: true,
+    [classes.withoutIcon]: !showSortingControls || (!hovered && sortingDirection === null),
     [classes.draftCell]: draft,
   }, className);
   const onClick = (e) => {
@@ -62,13 +69,17 @@ const GroupPanelItemBase = ({
 
   return (
     <Chip
-      label={label(showSortingControls, sortingEnabled, sortingDirection, column)}
+      label={label(showSortingControls, sortingEnabled, sortingDirection, column, hovered)}
       className={chipClassNames}
       {...showGroupingControls
         ? { onDelete: groupingEnabled ? onGroup : null }
         : null}
       {...showSortingControls
-        ? { onClick: sortingEnabled ? onClick : null }
+        ? {
+          onClick: sortingEnabled ? onClick : null,
+          onMouseEnter: () => setHovered(true),
+          onMouseLeave: () => setHovered(false),
+        }
         : null}
       {...restProps}
     />
diff --git a/packages/dx-react-grid-material-ui/src/templates/group-panel-item.test.jsx b/packages/dx-react-grid-material-ui/src/templates/group-panel-item.test.jsx
index 55f8bb67dc..73d07e2a9e 100644
--- a/packages/dx-react-grid-material-ui/src/templates/group-panel-item.test.jsx
+++ b/packages/dx-react-grid-material-ui/src/templates/group-panel-item.test.jsx
@@ -187,4 +187,76 @@ describe('GroupPanelItem', () => {
     expect(tree.hasClass(classes.button))
       .toBeTruthy();
   });
+
+  describe('sorting label', () => {
+    it('should add class "buttonWithoutIcon" if not show sorting control', () => {
+      const tree = shallow((
+        <GroupPanelItem
+          item={{ column: { name: 'test' } }}
+        />
+      ));
+
+      expect(tree.hasClass(classes.withoutIcon))
+        .toBe(true);
+
+      tree.simulate('mouseenter');
+      expect(tree.hasClass(classes.withoutIcon))
+        .toBe(true);
+
+      tree.simulate('mouseleave');
+      expect(tree.hasClass(classes.withoutIcon))
+        .toBe(true);
+    });
+
+    it('should add class "buttonWithoutIcon" if show sorting control but not sorted or hovered', () => {
+      const tree = shallow((
+        <GroupPanelItem
+          item={{ column: { name: 'test' } }}
+          sortingDirection={null}
+          showSortingControls
+        />
+      ));
+
+      expect(tree.hasClass(classes.withoutIcon))
+        .toBe(true);
+    });
+
+    it('should remove class "buttonWithoutIcon" if sorted', () => {
+      const tree = shallow((
+        <GroupPanelItem
+          item={{ column: { name: 'test' } }}
+          sortingDirection={null}
+          showSortingControls
+        />
+      ));
+
+      expect(tree.hasClass(classes.withoutIcon))
+        .toBe(true);
+
+      tree.setProps({ sortingDirection: 'asc' });
+      expect(tree.hasClass(classes.withoutIcon))
+        .toBe(false);
+    });
+
+    it('should remove class "buttonWithoutIcon" on hover', () => {
+      const tree = shallow((
+        <GroupPanelItem
+          item={{ column: { name: 'test' } }}
+          sortingDirection={null}
+          showSortingControls
+        />
+      ));
+
+      expect(tree.hasClass(classes.withoutIcon))
+        .toBe(true);
+
+      tree.simulate('mouseenter');
+      expect(tree.hasClass(classes.withoutIcon))
+        .toBe(false);
+
+      tree.simulate('mouseleave');
+      expect(tree.hasClass(classes.withoutIcon))
+        .toBe(true);
+    });
+  });
 });